fix ts in vue demos

Author: GoodDayForSurf

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

@@ -1,7 +1,7 @@
 export function generateDataSource() {
-  let x1; let x2; let y1; let y2; let
-    i;
-  const ds = [];
+  let x1: number; let x2: number; let y1: number; let y2: number; let
+    i: number;
+  const ds: Array<{ x1: number; y1: number; x2: number; y2: number }> = [];
   for (i = 0; i < 20; i += 1) {
     x1 = random(5, 15);
     y1 = random(5, 15);
@@ -37,6 +37,6 @@ export function generateDataSource() {
   return ds;
 }
 
-function random(min, max) {
+function random(min: number, max: number): number {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }

apps/demos/Demos/Charts/AxisLabelCustomization/Vue/LabelTemplate.vue

@@ -22,7 +22,7 @@ defineProps<{
   data?: { valueText: string }
 }>();
 
-const getFilePath = (text) => `../../../../images/flags/3x2/${text.toLowerCase().replace(' ', '')}.svg`;
+const getFilePath = (text: string): string => `../../../../images/flags/3x2/${text.toLowerCase().replace(' ', '')}.svg`;
 </script>
 <style scoped>
 .template-text {

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

@@ -28,6 +28,7 @@ import {
   DxSeries,
   DxValueAxis,
   DxLegend,
+  type DxChartTypes,
 } from 'devextreme-vue/chart';
 import { DxButton } from 'devextreme-vue/button';
 import { type SeriesPoint } from 'devextreme-vue/common/charts';
@@ -37,21 +38,23 @@ const isFirstLevel = ref(true);
 const dataSource = ref(service.filterData(''));
 const colors = ['#6babac', '#e55253'];
 
-function customizePoint() {
+function customizePoint(): SeriesPoint {
   return {
     color: colors[Number(isFirstLevel.value)],
     hoverStyle:  {
       ...!isFirstLevel.value ? { hatching: 'none' } : {},
     }
   } as SeriesPoint;
 }
-function onPointClick({ target }) {
+
+function onPointClick({ target }: DxChartTypes.PointClickEvent): void {
   if (isFirstLevel.value) {
     isFirstLevel.value = false;
-    dataSource.value = service.filterData(target.originalArgument);
+    dataSource.value = service.filterData(target.originalArgument as string);
   }
 }
-function onButtonClick() {
+
+function onButtonClick(): void {
   if (!isFirstLevel.value) {
     isFirstLevel.value = true;
     dataSource.value = service.filterData('');

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

@@ -1,4 +1,10 @@
-const data = [
+interface DataItem {
+  arg: string;
+  val: number;
+  parentID: string;
+}
+
+const data: DataItem[] = [
   { arg: 'Asia', val: 3007613498, parentID: '' },
   { arg: 'North America', val: 493603615, parentID: '' },
   { arg: 'Europe', val: 438575293, parentID: '' },
@@ -29,7 +35,7 @@ const data = [
 ];
 
 export default {
-  filterData(name) {
+  filterData(name: string): DataItem[] {
     return data.filter((item) => item.parentID === name);
   },
 };

apps/demos/Demos/Charts/BarSparklines/Vue/RowTemplate.vue

@@ -60,7 +60,7 @@ const props = withDefaults(defineProps<{
   source: () => ({}),
 });
 
-const getValueField = (name) => name + props.year;
+const getValueField = (name: string): string => name + props.year;
 </script>
 <style>
 .rows-content td {

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 }) => ({ text: Math.abs(valueText) });
-const customizeLabel = ({ value }) => `${Math.abs(value)}%`;
+const customizeTooltip = ({ valueText }: { valueText: string }) => ({ text: Math.abs(Number(valueText)) });
+const customizeLabel = ({ value }: { value: number }) => `${Math.abs(value)}%`;
 </script>
 <style>
 #chart {

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

@@ -68,15 +68,24 @@ import {
   DxBorder,
   DxTooltip,
   DxExport,
+  type DxChartTypes,
 } from 'devextreme-vue/chart';
 import { dataSource } from './data.ts';
 
 const palette = ['#00ced1', '#008000', '#ffd700', '#ff7f50'];
-const customizeText = (e) => `${e.value}M`;
-const customizeTooltip = (pointInfo) => ({
+
+const customizeText = (e: { value: number }): string => `${e.value}M`;
+
+const customizeTooltip = (pointInfo: { 
+  point: { tag: string }; 
+  argumentText: string; 
+  valueText: string; 
+  size: number 
+}): { text: string } => ({
   text: `${pointInfo.point.tag}<br/>Total Population: ${pointInfo.argumentText}M<br/>Population with Age over 60: ${pointInfo.valueText}M (${pointInfo.size}%)`,
 });
-function seriesClick(e) {
+
+function seriesClick(e: DxChartTypes.SeriesClickEvent): void {
   const series = e.target;
   if (series.isVisible()) {
     series.hide();