Charts, VectorMap, Gauges: fix TS issues in React demos (#31982)

EugeniyKiyashko · web-flow · commit 88915fc56933 · 2025-12-15T20:15:14.000+04:00
diff --git a/apps/demos/Demos/Charts/Annotation/React/data.ts b/apps/demos/Demos/Charts/Annotation/React/data.ts
@@ -1,4 +1,4 @@
-import { IAnnotationProps } from 'devextreme-react/chart';
+import type { IAnnotationProps } from 'devextreme-react/chart';
 
 interface AnnotationSource {
   date: Date,
diff --git a/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx b/apps/demos/Demos/Charts/CenterLabelCustomization/React/CenterTemplate.tsx
@@ -1,4 +1,4 @@
-import { PieChartRef } from 'devextreme-react/pie-chart';
+import type { PieChartRef } from 'devextreme-react/pie-chart';
 import React from 'react';
 
 const formatNumber = new Intl.NumberFormat('en-US', {
diff --git a/apps/demos/Demos/Charts/Colorization/React/App.tsx b/apps/demos/Demos/Charts/Colorization/React/App.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import TreeMap, { Tooltip, ITooltipProps } from 'devextreme-react/tree-map';
+import TreeMap, { Tooltip } from 'devextreme-react/tree-map';
+import type { ITooltipProps } from 'devextreme-react/tree-map';
 import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
 import { salesAmount, colorizationOptions, colorizationTypeLabel } from './data.ts';
 
diff --git a/apps/demos/Demos/Charts/Colorization/React/data.ts b/apps/demos/Demos/Charts/Colorization/React/data.ts
@@ -1,4 +1,4 @@
-import { Properties as TreeMapPropType } from 'devextreme/viz/tree_map';
+import type { Properties as TreeMapPropType } from 'devextreme/viz/tree_map';
 
 type typeOptionsType = TreeMapPropType['colorizer'];
 
diff --git a/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx b/apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx
@@ -18,7 +18,7 @@ import RangeSelector, {
   Series as RsChartSeries,
   type RangeSelectorTypes,
 } from 'devextreme-react/range-selector';
-import { VisualRange } from 'devextreme-react/common/charts';
+import type { VisualRange } from 'devextreme-react/common/charts';
 import { series, dataSource } from './data.ts';
 
 const seriesList = series.map((item) => <Series
diff --git a/apps/demos/Demos/Charts/DiscreteData/React/data.ts b/apps/demos/Demos/Charts/DiscreteData/React/data.ts
@@ -1,4 +1,4 @@
-import { Properties as PolarChartPropsType } from 'devextreme/viz/polar_chart';
+import type { Properties as PolarChartPropsType } from 'devextreme/viz/polar_chart';
 
 export const types: (PolarChartPropsType['commonSeriesSettings']['type'])[] = ['scatter', 'line', 'area', 'bar', 'stackedbar'];
 
diff --git a/apps/demos/Demos/Charts/DrillDown/React/App.tsx b/apps/demos/Demos/Charts/DrillDown/React/App.tsx
@@ -3,7 +3,8 @@ import TreeMap, {
   Size, Title, Colorizer, type TreeMapTypes,
 } from 'devextreme-react/tree-map';
 
-import { DrillInfo, citiesPopulation } from './data.ts';
+import { citiesPopulation } from './data.ts';
+import type { DrillInfo } from './data.ts';
 
 import TreeMapBreadcrumbs from './TreeMapBreadcrumbs.tsx';
 
diff --git a/apps/demos/Demos/Charts/DrillDown/React/Breadcrumb.tsx b/apps/demos/Demos/Charts/DrillDown/React/Breadcrumb.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { DrillInfo } from './data';
+import type { DrillInfo } from './data';
 
 interface BreadcrumbProps {
   key: string;
diff --git a/apps/demos/Demos/Charts/DrillDown/React/TreeMapBreadcrumbs.tsx b/apps/demos/Demos/Charts/DrillDown/React/TreeMapBreadcrumbs.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Breadcrumb from './Breadcrumb.tsx';
-import { DrillInfo } from './data.ts';
+import type { DrillInfo } from './data.ts';
 
 interface TreeMapBreadcrumbsProps {
   className: string;
diff --git a/apps/demos/Demos/Charts/DrillDown/React/data.ts b/apps/demos/Demos/Charts/DrillDown/React/data.ts
@@ -1,4 +1,4 @@
-import { TreeMapTypes } from 'devextreme-react/tree-map';
+import type { TreeMapTypes } from 'devextreme-react/tree-map';
 
 export type DrillInfo = { text?: string, node?: TreeMapTypes.DrillEvent['node'] };
 
diff --git a/apps/demos/Demos/Charts/DynamicSeries/React/App.tsx b/apps/demos/Demos/Charts/DynamicSeries/React/App.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import Chart, {
   Legend,
   SeriesTemplate,
-  ISeriesTemplateProps,
   Title,
   Subtitle,
   CommonSeriesSettings,
   Export,
 } from 'devextreme-react/chart';
+import type { ISeriesTemplateProps } from 'devextreme-react/chart';
 import { dataSource } from './data.ts';
 
 const customizeSeries: ISeriesTemplateProps['customizeSeries'] = (valueFromNameField: number) => (
diff --git a/apps/demos/Demos/Charts/EqualSizePies/React/App.tsx b/apps/demos/Demos/Charts/EqualSizePies/React/App.tsx
@@ -3,8 +3,8 @@ import PieChart, {
   Series,
   Label,
   Legend,
-  IPieChartOptions,
 } from 'devextreme-react/pie-chart';
+import type { IPieChartOptions } from 'devextreme-react/pie-chart';
 import { countries, waterLandRatio } from './data.ts';
 
 const pieCharts: {
diff --git a/apps/demos/Demos/Charts/FlatDataStructure/React/App.tsx b/apps/demos/Demos/Charts/FlatDataStructure/React/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import TreeMap, { Tooltip, ITooltipProps } from 'devextreme-react/tree-map';
+import TreeMap, { Tooltip } from 'devextreme-react/tree-map';
+import type { ITooltipProps } from 'devextreme-react/tree-map';
 import { citiesPopulation } from './data.ts';
 
 const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => {
diff --git a/apps/demos/Demos/Charts/FunnelChart/React/App.tsx b/apps/demos/Demos/Charts/FunnelChart/React/App.tsx
@@ -7,8 +7,8 @@ import Funnel, {
   Item,
   Border,
   Label,
-  ILabelProps,
 } from 'devextreme-react/funnel';
+import type { ILabelProps } from 'devextreme-react/funnel';
 import { dataSource } from './data.ts';
 
 const formatLabel: ILabelProps['customizeText'] = (arg) => `<span class="label">${arg.percentText}</span><br/>${arg.item.argument}`;
diff --git a/apps/demos/Demos/Charts/HierarchicalDataStructure/React/App.tsx b/apps/demos/Demos/Charts/HierarchicalDataStructure/React/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import TreeMap, { Tooltip, ITooltipProps } from 'devextreme-react/tree-map';
+import TreeMap, { Tooltip } from 'devextreme-react/tree-map';
+import type { ITooltipProps } from 'devextreme-react/tree-map';
 import { citiesPopulation } from './data.ts';
 
 const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => {
diff --git a/apps/demos/Demos/Charts/Line/React/App.tsx b/apps/demos/Demos/Charts/Line/React/App.tsx
@@ -13,7 +13,7 @@ import {
   Tooltip,
   Grid,
 } from 'devextreme-react/chart';
-import { Properties as ChartPropsType } from 'devextreme/viz/chart';
+import type { Properties as ChartPropsType } from 'devextreme/viz/chart';
 
 import service from './data.ts';
 
diff --git a/apps/demos/Demos/Charts/Palette/React/data.ts b/apps/demos/Demos/Charts/Palette/React/data.ts
@@ -1,5 +1,5 @@
-import { Palette } from 'devextreme/viz/pie_chart';
-import { PaletteExtensionMode } from 'devextreme/common/charts';
+import type { Palette } from 'devextreme/viz/pie_chart';
+import type { PaletteExtensionMode } from 'devextreme/common/charts';
 
 export const paletteCollection: Palette[] = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
 export const paletteExtensionModes: PaletteExtensionMode[] = ['alternate', 'blend', 'extrapolate'];
diff --git a/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/App.tsx b/apps/demos/Demos/Charts/PieResolveLabelOverlap/React/App.tsx
@@ -8,8 +8,8 @@ import PieChart, {
   Export,
   Legend,
   Animation,
-  IPieChartOptions,
 } from 'devextreme-react/pie-chart';
+import type { IPieChartOptions } from 'devextreme-react/pie-chart';
 
 import { dataSource, resolutionModeLabel } from './data.ts';
 
diff --git a/apps/demos/Demos/Charts/PointImage/React/App.tsx b/apps/demos/Demos/Charts/PointImage/React/App.tsx
@@ -11,8 +11,8 @@ import {
   Export,
   Legend,
   Point,
-  IExportProps,
 } from 'devextreme-react/chart';
+import type { IExportProps } from 'devextreme-react/chart';
 import { iceHockeyStatistics } from './data.ts';
 
 const exportFormats: IExportProps['formats'] = ['PNG', 'PDF', 'JPEG', 'GIF', 'SVG'];
diff --git a/apps/demos/Demos/Charts/PointsAggregation/React/App.tsx b/apps/demos/Demos/Charts/PointsAggregation/React/App.tsx
@@ -11,8 +11,8 @@ import Chart, {
   Legend,
   Label,
   Tooltip,
-  IAggregationProps,
 } from 'devextreme-react/chart';
+import type { IAggregationProps } from 'devextreme-react/chart';
 import CheckBox from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
 import {
diff --git a/apps/demos/Demos/Charts/PointsAggregation/React/data.ts b/apps/demos/Demos/Charts/PointsAggregation/React/data.ts
@@ -1,4 +1,4 @@
-import { IAggregationProps, IArgumentAxisProps } from 'devextreme-react/chart';
+import type { IAggregationProps, IArgumentAxisProps } from 'devextreme-react/chart';
 
 export const aggregationIntervals: {
   displayName: string,
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/React/App.tsx b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/React/App.tsx
@@ -19,7 +19,7 @@ import RangeSelector, {
   type RangeSelectorTypes,
 } from 'devextreme-react/range-selector';
 
-import { VisualRange } from 'devextreme-react/common/charts';
+import type { VisualRange } from 'devextreme-react/common/charts';
 import { dataSource } from './data.ts';
 
 function App() {
diff --git a/apps/demos/Demos/Charts/ResolveLabelOverlap/React/data.ts b/apps/demos/Demos/Charts/ResolveLabelOverlap/React/data.ts
@@ -1,4 +1,4 @@
-import { ChartTypes } from 'devextreme-react/chart';
+import type { ChartTypes } from 'devextreme-react/chart';
 
 export const overlappingModes: (ChartTypes.ChartsAxisLabelOverlap)[] = ['stagger', 'rotate', 'hide', 'none'];
 
diff --git a/apps/demos/Demos/Charts/SankeyChart/React/App.tsx b/apps/demos/Demos/Charts/SankeyChart/React/App.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import Sankey, {
-  Tooltip, Link, Node, ITooltipProps,
+  Tooltip, Link, Node,
 } from 'devextreme-react/sankey';
+import type { ITooltipProps } from 'devextreme-react/sankey';
 import { data } from './data.ts';
 
 const customizeLinkTooltip: ITooltipProps['customizeLinkTooltip'] = (info) => ({
diff --git a/apps/demos/Demos/Charts/SideBySideFullStackedBar/React/App.tsx b/apps/demos/Demos/Charts/SideBySideFullStackedBar/React/App.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {
-  Chart, Series, CommonSeriesSettings, Legend, Export, Tooltip, ITooltipProps, ChartTypes,
+  Chart, Series, CommonSeriesSettings, Legend, Export, Tooltip,
 } from 'devextreme-react/chart';
+import type { ITooltipProps, ChartTypes } from 'devextreme-react/chart';
 import service from './data.ts';
 
 const dataSource = service.getMaleAgeData();
diff --git a/apps/demos/Demos/Charts/SignalRService/React/App.tsx b/apps/demos/Demos/Charts/SignalRService/React/App.tsx
@@ -15,9 +15,9 @@ import Chart, {
   Crosshair,
   Margin,
   HorizontalLine,
-  IAggregationProps,
 } from 'devextreme-react/chart';
-import { VisualRange } from 'devextreme-react/common/charts';
+import type { IAggregationProps } from 'devextreme-react/chart';
+import type { VisualRange } from 'devextreme-react/common/charts';
 import { CustomStore } from 'devextreme-react/common/data';
 import { HubConnectionBuilder, HttpTransportType } from '@aspnet/signalr';
 import TooltipTemplate from './TooltipTemplate.tsx';
diff --git a/apps/demos/Demos/Charts/Spline/React/App.tsx b/apps/demos/Demos/Charts/Spline/React/App.tsx
@@ -5,7 +5,6 @@ import {
   Series,
   ArgumentAxis,
   CommonSeriesSettings,
-  ICommonSeriesSettingsProps,
   CommonAxisSettings,
   Grid,
   Export,
@@ -15,6 +14,7 @@ import {
   Label,
   Format,
 } from 'devextreme-react/chart';
+import type { ICommonSeriesSettingsProps } from 'devextreme-react/chart';
 import { architectureSources, sharingStatisticsInfo, seriesTypeLabel } from './data.ts';
 
 const types: (ICommonSeriesSettingsProps['type'])[] = ['spline', 'stackedspline', 'fullstackedspline'];
diff --git a/apps/demos/Demos/Charts/SplineArea/React/App.tsx b/apps/demos/Demos/Charts/SplineArea/React/App.tsx
@@ -5,11 +5,11 @@ import {
   Series,
   ArgumentAxis,
   CommonSeriesSettings,
-  ICommonSeriesSettingsProps,
   Margin,
   Export,
   Legend,
 } from 'devextreme-react/chart';
+import type { ICommonSeriesSettingsProps } from 'devextreme-react/chart';
 
 import { dataSource, seriesTypeLabel } from './data.ts';
 
diff --git a/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx b/apps/demos/Demos/Charts/TilingAlgorithms/React/App.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import TreeMap, {
-  Colorizer, Tooltip, ITreeMapOptions, ITooltipProps,
+  Colorizer, Tooltip,
 } from 'devextreme-react/tree-map';
-import { TreeMapLayoutAlgorithm } from 'devextreme/viz/tree_map';
+import type { ITreeMapOptions, ITooltipProps } from 'devextreme-react/tree-map';
+import type { TreeMapLayoutAlgorithm } from 'devextreme/viz/tree_map';
 import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
 import { populationByAge, algorithmLabel } from './data.ts';
 
diff --git a/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx b/apps/demos/Demos/Charts/TooltipAPI/React/App.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useRef, useState } from 'react';
 import PieChart, {
-  Series, Tooltip, Size, Legend, type PieChartTypes, PieChartRef,
+  Series, Tooltip, Size, Legend,
 } from 'devextreme-react/pie-chart';
+import type { PieChartTypes, PieChartRef } from 'devextreme-react/pie-chart';
 import { SelectBox } from 'devextreme-react/select-box';
 import { populationData, regionLabel } from './data.ts';
 
diff --git a/apps/demos/Demos/Charts/TooltipCustomization/React/TooltipTemplate.tsx b/apps/demos/Demos/Charts/TooltipCustomization/React/TooltipTemplate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { PieChartTypes } from 'devextreme-react/pie-chart';
+import type { PieChartTypes } from 'devextreme-react/pie-chart';
 
 function getImagePath(point: PieChartTypes.PointInfo['point']) {
   return `../../../../images/flags/${point.data.name.replace(/\s/, '')}.svg`;
diff --git a/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/React/App.tsx b/apps/demos/Demos/Charts/ZoomingAndScrollingAPI/React/App.tsx
@@ -14,7 +14,7 @@ import RangeSelector, {
   Behavior,
   type RangeSelectorTypes,
 } from 'devextreme-react/range-selector';
-import { VisualRange } from 'devextreme-react/common/charts';
+import type { VisualRange } from 'devextreme-react/common/charts';
 import { zoomingData } from './data.ts';
 
 function App() {
diff --git a/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx b/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import VectorMap, {
-  ITooltipProps,
   Label,
   Layer,
   Legend,
   Source,
   Tooltip,
 } from 'devextreme-react/vector-map';
+import type { ITooltipProps } from 'devextreme-react/vector-map';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { markers } from './data.ts';
 
diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx
@@ -5,8 +5,8 @@ import VectorMap, {
   Tooltip,
   Border,
   Font,
-  ILayerProps, ITooltipProps,
 } from 'devextreme-react/vector-map';
+import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map';
 
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { countries } from './data.ts';
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/React/AnnotationTemplate.tsx b/apps/demos/Demos/VectorMap/CustomAnnotations/React/AnnotationTemplate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ICommonAnnotationSettingsProps } from 'devextreme-react/vector-map';
+import type { ICommonAnnotationSettingsProps } from 'devextreme-react/vector-map';
 
 const getImagePath = (name: string) => `../../../../images/flags/${name?.replace(/\s/, '')}.svg`;
 const formatNumber = new Intl.NumberFormat('en-US', {
diff --git a/apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx b/apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx
@@ -3,8 +3,9 @@ import VectorMap, {
   Layer,
   Export,
   Title,
-  Label, ILayerProps,
+  Label,
 } from 'devextreme-react/vector-map';
+import type { ILayerProps } from 'devextreme-react/vector-map';
 import { pangaeaBorders, pangaeaContinents } from './data.ts';
 
 const projection = {
diff --git a/apps/demos/Demos/VectorMap/FloorPlan/React/App.tsx b/apps/demos/Demos/VectorMap/FloorPlan/React/App.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import VectorMap, {
   Layer,
   Tooltip,
-  Label, ITooltipProps,
+  Label,
 } from 'devextreme-react/vector-map';
+import type { ITooltipProps } from 'devextreme-react/vector-map';
 import { roomsData, buildingData } from './data.ts';
 
 const projection = {
diff --git a/apps/demos/Demos/VectorMap/Legend/React/App.tsx b/apps/demos/Demos/VectorMap/Legend/React/App.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import VectorMap, {
-  ILayerProps,
-  ILegendProps,
-  ITooltipProps,
   Label,
   Layer,
   Legend,
   Source,
   Tooltip,
 } from 'devextreme-react/vector-map';
+import type { ILayerProps, ILegendProps, ITooltipProps } from 'devextreme-react/vector-map';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { populations, markers } from './data.ts';
 
diff --git a/apps/demos/Demos/VectorMap/MultipleLayers/React/App.tsx b/apps/demos/Demos/VectorMap/MultipleLayers/React/App.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import VectorMap, {
-  ILegendProps,
   Export,
   Layer,
   Legend,
   Source,
   Font,
 } from 'devextreme-react/vector-map';
+import type { ILegendProps } from 'devextreme-react/vector-map';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { streamsData } from './data.ts';
 
diff --git a/apps/demos/Demos/VectorMap/Overview/React/App.tsx b/apps/demos/Demos/VectorMap/Overview/React/App.tsx
@@ -8,8 +8,9 @@ import Map, {
   Subtitle,
   Title,
   Tooltip,
-  Size, ILegendProps, ILayerProps,
+  Size,
 } from 'devextreme-react/vector-map';
+import type { ILegendProps, ILayerProps } from 'devextreme-react/vector-map';
 import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
 import { countriesGDP } from './data.ts';
 import TooltipTemplate from './TooltipTemplate.tsx';
diff --git a/apps/demos/Demos/VectorMap/Overview/React/PieChartComponent.tsx b/apps/demos/Demos/VectorMap/Overview/React/PieChartComponent.tsx
@@ -4,8 +4,8 @@ import PieChart, {
   Label,
   Legend,
   Connector,
-  ILabelProps,
 } from 'devextreme-react/pie-chart';
+import type { ILabelProps } from 'devextreme-react/pie-chart';
 
 const customizeText: ILabelProps['customizeText'] = (pointInfo) => `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${pointInfo.value}M`;
 
diff --git a/apps/demos/Demos/VectorMap/Palette/React/App.tsx b/apps/demos/Demos/VectorMap/Palette/React/App.tsx
diff --git a/apps/demos/Demos/VectorMap/PieMarkers/React/App.tsx b/apps/demos/Demos/VectorMap/PieMarkers/React/App.tsx
diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/App.tsx
diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx
diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { IAnnotationProps } from 'devextreme-react/chart';`
	`1`	`+import type { IAnnotationProps } from 'devextreme-react/chart';`
`2`	`2`
`3`	`3`	`interface AnnotationSource {`
`4`	`4`	`date: Date,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { PieChartRef } from 'devextreme-react/pie-chart';`
	`1`	`+import type { PieChartRef } from 'devextreme-react/pie-chart';`
`2`	`2`	`import React from 'react';`
`3`	`3`
`4`	`4`	`const formatNumber = new Intl.NumberFormat('en-US', {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Properties as TreeMapPropType } from 'devextreme/viz/tree_map';`
	`1`	`+import type { Properties as TreeMapPropType } from 'devextreme/viz/tree_map';`
`2`	`2`
`3`	`3`	`type typeOptionsType = TreeMapPropType['colorizer'];`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Properties as PolarChartPropsType } from 'devextreme/viz/polar_chart';`
	`1`	`+import type { Properties as PolarChartPropsType } from 'devextreme/viz/polar_chart';`
`2`	`2`
`3`	`3`	`export const types: (PolarChartPropsType['commonSeriesSettings']['type'])[] = ['scatter', 'line', 'area', 'bar', 'stackedbar'];`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { TreeMapTypes } from 'devextreme-react/tree-map';`
	`1`	`+import type { TreeMapTypes } from 'devextreme-react/tree-map';`
`2`	`2`
`3`	`3`	`export type DrillInfo = { text?: string, node?: TreeMapTypes.DrillEvent['node'] };`
`4`	`4`