fix ts in vue demos

Author: GoodDayForSurf

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

@@ -56,6 +56,11 @@ import { dataSource } from './data.ts';
 
 const customizeTooltip = ({
   openValue, closeValue, highValue, lowValue,
+}: {
+  openValue: number;
+  closeValue: number;
+  highValue: number;
+  lowValue: number;
 }) => ({
   text: `Open: $${openValue}<br/>
 Close: $${closeValue}<br/>

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

@@ -42,8 +42,8 @@ import { data } from './data.ts';
 import CenterTemplate from './CenterTemplate.vue';
 
 const countries = Array.from(new Set(data.map(({ country }) => country)));
-const customizeLabel = ({ argumentText, valueText }) => `${argumentText}\n${valueText}`;
-const getData = (country) => data.filter((i) => i.country === country);
+const customizeLabel = ({ argumentText, valueText }: { argumentText: string; valueText: string }) => `${argumentText}\n${valueText}`;
+const getData = (country: string) => data.filter((i) => i.country === country);
 </script>
 <style scoped>
 .pies-container {

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

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

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

@@ -62,7 +62,7 @@ const monthWeather = new DataSource({
   paginate: false,
 });
 
-const customizeLabelText = ({ valueText }) => `${valueText}${'&#176C'}`;
+const customizeLabelText = ({ valueText }: { valueText: string }) => `${valueText}${'&#176C'}`;
 
 function changeTemperature({ value }: DxSelectBoxTypes.ValueChangedEvent) {
   monthWeather.filter(['t', '>', value]);

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

@@ -34,7 +34,7 @@ import {
 } from './utils.js';
 import { data } from './data.ts';
 
-function customizePoint(point) {
+function customizePoint(point: any) {
   const color = point.series.getPointsByArg(point.argument)[0].getColor();
   let fillId;
   switch (point.argument) {
@@ -59,7 +59,8 @@ function customizePoint(point) {
 
   return { color: { fillId } };
 }
-const customizeText = ({ argument }) => argument;
+
+const customizeText = ({ argument }: { argument: string }) => argument;
 </script>
 
 <style>

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

@@ -53,17 +53,20 @@ import { temperaturesData } from './data.ts';
 const highAverage = 77;
 const lowAverage = 58;
 const dataSource = temperaturesData;
-const customizeText = ({ valueText }) => `${valueText}&#176F`;
-const customizePoint = ({ value }) => {
+
+const customizeText = ({ valueText }: { valueText: string }) => `${valueText}&#176F`;
+
+const customizePoint = ({ value }: { value: number }) => {
   if (value > highAverage) {
     return { color: '#ff7c7c', hoverStyle: { color: '#ff7c7c' } };
   }
   return (value < lowAverage) ? { color: '#8c8cff', hoverStyle: { color: '#8c8cff' } } : null;
 };
-const customizeLabel = ({ value }) => ((value > highAverage) ? {
+
+const customizeLabel = ({ value }: { value: number }) => ((value > highAverage) ? {
   visible: true,
   backgroundColor: '#ff7c7c',
-  customizeText: ({ valueText }) => `${valueText}&#176F`,
+  customizeText: ({ valueText }: { valueText: string }) => `${valueText}&#176F`,
 } : null);
 </script>
 <style>

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

@@ -110,7 +110,7 @@ const series = [{
   valueField: 'Na',
 }];
 
-const customizeText = ({ valueText }) => `${valueText}%`;
+const customizeText = ({ valueText }: { valueText: string }) => `${valueText}%`;
 </script>
 <style scoped>
 #zoomedChart {

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

@@ -42,7 +42,7 @@ import DxPieChart, {
 } from 'devextreme-vue/pie-chart';
 import { populationByRegions } from './data.ts';
 
-const customizeTooltip = ({ valueText, percent }) => ({
+const customizeTooltip = ({ valueText, percent }: { valueText: string; percent: number }) => ({
   text: `${valueText} - ${(percent * 100).toFixed(2)}%`,
 });
 </script>

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

@@ -30,7 +30,7 @@ import DxPieChart, {
 } from 'devextreme-vue/pie-chart';
 import { olympicMedals } from './data.ts';
 
-function pointClickHandler({ target }) {
+function pointClickHandler({ target }: { target: { select: () => void } }): void {
   target.select();
 }
 </script>

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

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