fix ts in vue demos

Author: GoodDayForSurf

apps/demos/Demos/Charts/BiDirectionalBarChart/Vue/App.vue

@@ -45,8 +45,8 @@ import DxChart, {
 } from 'devextreme-vue/chart';
 import { dataSource } from './data.ts';
 
-const customizeTooltip = ({ valueText }: { valueText: string }) => ({ text: Math.abs(Number(valueText)) });
-const customizeLabel = ({ value }: { value: number }) => `${Math.abs(value)}%`;
+const customizeTooltip = ({ valueText }: any) => ({ text: Math.abs(Number(valueText)) });
+const customizeLabel = ({ value }: any) => `${Math.abs(value)}%`;
 </script>
 <style>
 #chart {

apps/demos/Demos/Charts/CenterLabelCustomization/Vue/CenterTemplate.vue

@@ -30,7 +30,7 @@
 <script setup lang="ts">
 
 import { type DxPieChart } from "devextreme-vue/pie-chart";
-import { chartPointObject } from "devextreme/viz/chart";
+import { type chartPointObject } from "devextreme/viz/chart";
 
 type DxPieChartInstance = DxPieChart['instance'];
 
@@ -44,14 +44,14 @@ const country = props.pieChart
   .getAllSeries()[0]
   .getVisiblePoints()[0]
   .data
-  .country as String;
+  .country as string;
 
 const getImagePath = (countryName: string): string => `../../../../images/flags/${countryName.replace(/\s/, '').toLowerCase()}.svg`;
 const calculateTotal = (pieChart: DxPieChartInstance): string => formatNumber(
   pieChart
     .getAllSeries()[0]
     .getVisiblePoints()
-    .reduce((s: number, p: chartPointObject ) => s + (p.originalValue as number), 0),
+    .reduce((s: number, p: chartPointObject) => s + (p.originalValue as number), 0),
 );
 
 const formatNumber = new Intl.NumberFormat('en-US', {

apps/demos/Demos/Charts/DrillDown/Vue/App.vue

@@ -36,11 +36,12 @@ import DxTreeMap, {
 } from 'devextreme-vue/tree-map';
 import { citiesPopulation } from './data.ts';
 
-const drillInfo = ref([]);
+const drillInfo = ref<Array<{ text: string; node?: any }>>([]);
 
 function nodeClick({ node }: DxTreeMapTypes.ClickEvent) {
   node.drillDown();
 }
+
 function drill(e: DxTreeMapTypes.DrillEvent) {
   drillInfo.value = [];
   for (let node = e.node.getParent(); node; node = node.getParent()) {
@@ -55,7 +56,8 @@ function drill(e: DxTreeMapTypes.DrillEvent) {
     });
   }
 }
-function drillInfoClick(node) {
+
+function drillInfoClick(node: any) {
   node?.drillDown();
 }
 </script>

apps/demos/Demos/Charts/ErrorBars/Vue/App.vue

@@ -80,6 +80,11 @@ import { weatherData } from './data.ts';
 const customizeTooltip = (
   {
     seriesName, value, lowErrorValue, highErrorValue,
+  }: {
+    seriesName: string;
+    value: number;
+    lowErrorValue: number;
+    highErrorValue: number;
   },
 ) => (
   { text: `${seriesName}: ${value} (range: ${lowErrorValue} - ${highErrorValue})` }

apps/demos/Demos/Charts/ExportAndPrintingAPI/Vue/App.vue

@@ -54,15 +54,19 @@ import DxButton from 'devextreme-vue/button';
 import { mountains } from './data.ts';
 
 const chart = ref();
-const customizeTooltipText = ({ argumentText, point, valueText }) => ({
+
+const customizeTooltipText = ({ argumentText, point, valueText }: any) => ({
   text: `<span class='title'>${argumentText
   }</span><br />&nbsp;<br />System: ${point.data.system
   }<br />Height: ${valueText} m`,
 });
-const customizeLabelText = ({ value }) => `${value} m`;
+
+const customizeLabelText = ({ value }: any) => `${value} m`;
+
 function printChart() {
   chart.value.instance.print();
 }
+
 function exportChart() {
   chart.value.instance.exportTo('Example', 'png');
 }

apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue

@@ -76,7 +76,7 @@ import Form from './Form.vue';
 const form = ref();
 const chart = ref();
 
-const prepareMarkup = (chartSVG, markup) => {
+const prepareMarkup = (chartSVG: string, markup: string): SVGElement => {
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
@@ -93,7 +93,7 @@ const prepareMarkup = (chartSVG, markup) => {
   return svg;
 };
 
-function onClick() {
+function onClick(): void {
   const chartSVG = chart.value.instance.svg();
   const formContent = form.value.getMarkup();
 
@@ -102,10 +102,10 @@ function onClick() {
     height: 420,
     margin: 0,
     format: 'png',
-    svgToCanvas(svg, canvas) {
+    svgToCanvas(svg: SVGElement, canvas: HTMLCanvasElement) {
       return new Promise((resolve) => {
         const v = Canvg.fromString(
-            canvas.getContext("2d"),
+            canvas.getContext("2d")!,
             new XMLSerializer().serializeToString(svg)
         );
 

apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 
 defineExpose({
-  getMarkup() {
+  getMarkup(): string {
     // @ts-ignore
     return this.$el.innerHTML;
   },

apps/demos/Demos/Charts/FullStackedBar/Vue/App.vue

@@ -57,7 +57,7 @@ import service from './data.ts';
 
 const dataSource = service.dataSource();
 
-const customizeTooltip = ({ percentText, valueText }) => ({ text: `${percentText}`, years: `${valueText}` });
+const customizeTooltip = ({ percentText, valueText }: { percentText: string; valueText: string }) => ({ text: `${percentText}`, years: `${valueText}` });
 </script>
 <style>
 #chart {

apps/demos/Demos/Charts/LabelCustomization/Vue/App.vue

@@ -43,7 +43,7 @@ import DxPieChart, {
 } from 'devextreme-vue/pie-chart';
 import { dataSource } from './data.ts';
 
-const formatLabel = ({ valueText, percentText }) => `${valueText} (${percentText})`;
+const formatLabel = ({ valueText, percentText }: { valueText: string; percentText: string }) => `${valueText} (${percentText})`;
 </script>
 
 <style>

apps/demos/Demos/Charts/LegendMarkersCustomization/Vue/data.ts

@@ -1,5 +1,11 @@
-function generateData(start, end, step) {
-  const data = [];
+interface DataPoint {
+  value: number;
+  originalValue: number;
+  argument: number;
+}
+
+function generateData(start: number, end: number, step: number): DataPoint[] {
+  const data: DataPoint[] = [];
   for (let i = start; i < end; i += step) {
     const originalValue = Math.sin(i) / i;
     data.push({ value: originalValue + ((0.5 - Math.random()) / 10), originalValue, argument: i });