Merge pull request #3 from DevExpress-Examples/vue

Add Vue

Author: arman-boyakhchyan

Vue/package-lock.json

@@ -12,8 +12,8 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "devextreme": "24.2.3",
-    "devextreme-vue": "24.2.3",
+    "devextreme": "25.1.3",
+    "devextreme-vue": "25.1.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

Vue/package.json

@@ -1,25 +1,97 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import DxButton from 'devextreme-vue/button';
+import DxChart, { DxBackgroundColor, DxCommonPaneSettings, DxConstantLine, DxLabel, DxSeries, DxTooltip, DxValueAxis } from 'devextreme-vue/chart';
+import { registerGradient } from 'devextreme-vue/common/charts';
+import { formatNumber } from 'devextreme/localization';
 
-const props = defineProps({
-  text: String,
-});
-const count = ref(0);
-const buttonText = computed<string>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
+const chartData = [
+  { month: 'January', targetSpend: 12000, actualSpend: 9500 },
+  { month: 'February', targetSpend: 15500, actualSpend: 16500 },
+  { month: 'March', targetSpend: 13500, actualSpend: 12000 },
+  { month: 'April', targetSpend: 16000, actualSpend: 14000 },
+  { month: 'May', targetSpend: 17000, actualSpend: 18500 },
+  { month: 'June', targetSpend: 20000, actualSpend: 17500 },
+  { month: 'July', targetSpend: 14500, actualSpend: 11000 },
+  { month: 'August', targetSpend: 21000, actualSpend: 22500 },
+  { month: 'September', targetSpend: 19000, actualSpend: 18000 },
+  { month: 'October', targetSpend: 22000, actualSpend: 25000 },
+  { month: 'November', targetSpend: 16000, actualSpend: 14500 },
+  { month: 'December', targetSpend: 25000, actualSpend: 27000 },
+];
+
+function calculateAverageSpend() {
+  const sum = chartData.reduce((accumulator, { actualSpend }) => accumulator + actualSpend, 0);
+
+  return sum / chartData.length;
+}
+
+const averageSpend = ref(calculateAverageSpend());
+
+function customizeTooltip(data: { value: number; seriesName: string }) {
+  if (data.seriesName === 'Budget') {
+    return { text: formatNumber(data.value, 'currency') };
+  }
+  const isValueAboveAverage = data.value > calculateAverageSpend();
+  if (isValueAboveAverage) {
+    return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(data.value - averageSpend.value, 'currency')} above average spending.` };
+  }
+
+  return { text: `${formatNumber(data.value, 'currency')}\n${formatNumber(averageSpend.value - data.value, 'currency')} below average spending.` };
 }
+
+const chartGradient = registerGradient('linear', {
+  colors: [{
+    offset: '20%',
+    color: '#dee4ff',
+  }, {
+    offset: '90%',
+    color: '#ffdeff',
+  }],
+});
+
 </script>
 <template>
   <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
-    />
+    <DxChart
+      title="Target vs Actual Spending 2024"
+      :data-source="chartData"
+    >
+      <DxSeries
+        type="bar"
+        argument-field="month"
+        value-field="targetSpend"
+        name="Budget"
+        color="#5996ff"
+      />
+      <DxSeries
+        type="spline"
+        argument-field="month"
+        value-field="actualSpend"
+        name="Amount Spent"
+        color="#cb4bfa"
+      />
+      <DxValueAxis>
+        <DxConstantLine
+          :value="averageSpend"
+          color="#0000c7"
+        >
+          <DxLabel
+            text="Yearly Spend Average"
+          />
+        </DxConstantLine>
+      </DxValueAxis>
+      <DxTooltip
+        :enabled="true"
+        :customize-tooltip="customizeTooltip"
+      />
+      <DxCommonPaneSettings>
+        <DxBackgroundColor
+          base="#ffffff"
+          :fill-id="chartGradient"
+        />
+      </DxCommonPaneSettings>
+    </DxChart>
   </div>
 </template>