Chart: rename ChartPointInfo to remove duplication in docs (DevExpress#31212)

Author: anna-shakhova

apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.ts

@@ -4,7 +4,7 @@ import {
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxChartModule, DxChartComponent, DxButtonModule } from 'devextreme-angular';
-import { type DxChartTypes } from 'devextreme-angular/ui/chart';
+import type { DxChartTypes } from 'devextreme-angular/ui/chart';
 
 import { Service, BirthLife } from './app.service';
 
@@ -37,7 +37,7 @@ export class AppComponent {
     this.component.instance.resetVisualRange();
   }
 
-  customizeTooltip(pointInfo: DxChartTypes.ChartPointInfo) {
+  customizeTooltip(pointInfo: DxChartTypes.CommonPointInfo) {
     const { data } = pointInfo.point;
     return {
       text: `${data.country} ${data.year}`,

apps/demos/Demos/Charts/AreaSelectionZooming/React/App.tsx

@@ -16,7 +16,7 @@ import Chart, {
 import Button from 'devextreme-react/button';
 import { birthLife } from './data.ts';
 
-function customizeTooltip(pointInfo: ChartTypes.ChartPointInfo) {
+function customizeTooltip(pointInfo: ChartTypes.CommonPointInfo) {
   const { data } = pointInfo.point;
   return {
     text: `${data.country} ${data.year}`,

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

@@ -71,7 +71,7 @@ import { birthLife } from './data.ts';
 
 const chart = ref();
 
-const customizeTooltip = (pointInfo: DxChartTypes.ChartPointInfo) => {
+const customizeTooltip = (pointInfo: DxChartTypes.CommonPointInfo) => {
   const { point: { data } } = pointInfo;
 
   return {

apps/demos/Demos/Charts/BiDirectionalBarChart/Angular/app/app.component.ts

@@ -27,8 +27,8 @@ export class AppComponent {
     this.populationData = service.getPopulationData();
   }
 
-  customizeTooltip = ({ valueText }: { valueText: number }) => ({
-    text: Math.abs(valueText),
+  customizeTooltip = ({ valueText }: DxChartTypes.CommonPointInfo) => ({
+    text: Math.abs(Number(valueText)),
   });
 
   customizeLabel: DxChartTypes.ValueAxisLabel['customizeText'] = ({ value }) => `${Math.abs(value as number)}%`;

apps/demos/Demos/Charts/BiDirectionalBarChart/React/App.tsx

@@ -7,11 +7,12 @@ import Chart, {
   Series,
   Tooltip,
   Margin,
+  type ChartTypes,
 } from 'devextreme-react/chart';
 import { dataSource } from './data.ts';
 
-function customizeTooltip(e: { valueText: number; }) {
-  return { text: Math.abs(e.valueText) };
+function customizeTooltip(e: ChartTypes.CommonPointInfo) {
+  return { text: Math.abs(Number(e.valueText)) };
 }
 
 function customizeLabel(e: { value: Date | number | string }) {

apps/demos/Demos/Charts/BiDirectionalBarChart/ReactJs/App.js

@@ -11,7 +11,7 @@ import Chart, {
 import { dataSource } from './data.js';
 
 function customizeTooltip(e) {
-  return { text: Math.abs(e.valueText) };
+  return { text: Math.abs(Number(e.valueText)) };
 }
 function customizeLabel(e) {
   return `${Math.abs(e.value)}%`;

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

@@ -42,10 +42,13 @@ import DxChart, {
   DxLegend,
   DxSeries,
   DxTooltip,
+  type DxChartTypes,
 } from 'devextreme-vue/chart';
 import { dataSource } from './data.ts';
 
-const customizeTooltip = ({ valueText }) => ({ text: Math.abs(valueText) });
+const customizeTooltip = (e: DxChartTypes.CommonPointInfo) => ({
+  text: Math.abs(Number(e.valueText)),
+});
 const customizeLabel = ({ value }) => `${Math.abs(value)}%`;
 </script>
 <style>

apps/demos/Demos/Charts/SideBySideFullStackedBar/Angular/app/app.component.ts

@@ -1,6 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import type { DxChartTypes } from 'devextreme-angular/ui/chart';
 
 import { DxChartModule } from 'devextreme-angular';
 
@@ -29,7 +30,7 @@ export class AppComponent {
     this.populationData = service.getPopulationData();
   }
 
-  customizeTooltip = ({ valueText, percentText }) => (
+  customizeTooltip = ({ valueText, percentText }: DxChartTypes.StackedPointInfo) => (
     {
       text: `${percentText} - ${valueText}`,
     }

apps/demos/Demos/Charts/SideBySideFullStackedBar/React/App.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {
-  Chart, Series, CommonSeriesSettings, Legend, Export, Tooltip, ITooltipProps,
+  Chart, Series, CommonSeriesSettings, Legend, Export, Tooltip, ITooltipProps, ChartTypes,
 } from 'devextreme-react/chart';
 import service from './data.ts';
 
 const dataSource = service.getMaleAgeData();
 
-const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => ({
+const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg: ChartTypes.StackedPointInfo) => ({
   text: `${arg.percentText} - ${arg.valueText}`,
 });
 

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

@@ -57,12 +57,15 @@ import {
   DxLegend,
   DxExport,
   DxTooltip,
+  type DxChartTypes,
 } from 'devextreme-vue/chart';
 import service from './data.ts';
 
 const dataSource = service.getMaleAgeData();
 
-const customizeTooltip = ({ percentText, valueText }) => ({ text: `${percentText} - ${valueText}` });
+const customizeTooltip = (
+  { percentText, valueText }: DxChartTypes.StackedPointInfo,
+) => ({ text: `${percentText} - ${valueText}` });
 </script>
 <style>
 #chart {