Fix T1292991

.github/CODEOWNERS

@@ -786,7 +786,7 @@
 /packages/devextreme/js/ui/load_panel.d.ts                           @DevExpress/devextreme-editors @DevExpress/devextreme-apireviewers
 /packages/devextreme/js/ui/load_panel_types.d.ts                     @DevExpress/devextreme-editors @DevExpress/devextreme-apireviewers
 
-/packages/devextreme/js/__internal/ui/m_load_panel.ts                @DevExpress/devextreme-editors
+/packages/devextreme/js/__internal/ui/load_panel.ts                @DevExpress/devextreme-editors
 
 /packages/devextreme-scss/scss/widgets/base/_loadPanel.scss          @DevExpress/devextreme-editors
 /packages/devextreme-scss/scss/widgets/**/loadPanel/**               @DevExpress/devextreme-editors

.gitignore

@@ -1,5 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+# tests
+__test-artifacts__
+
 # compiled output
 npm
 dist
@@ -26,7 +29,6 @@ node_modules
 !.vscode/launch.json
 !.vscode/extensions.json
 
-
 # System Files
 .DS_Store
 Thumbs.db

apps/demos/Demos/Charts/Crosshair/description.md

@@ -1,2 +1,15 @@
-In this example, the crosshair pointer is enabled and a custom style is applied to it. The crosshair pointer allows a user to determine the argument and the value of a specific point more precisely.
-<!--split-->
+The DevExtreme Chart component ships with integrated crosshair support (vertical and horizontal lines centered on a data point). When enabled, the crosshair follows the cursor and snaps to the nearest series point. To configure crosshair settings, specify the [crosshair](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/) object.
+<!--split-->
+
+This demo configures the following **crosshair** properties:
+
+- [color](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/#color)    
+Specifies line color.
+- [width](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/#width)    
+Configures line width.
+- [dashStyle](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/#dashStyle)    
+Specifies line style.
+- [label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/label/)    
+Configures labels (text and appearance).
+
+To override settings for each line individually, configure **crosshair**.[horizontalLine](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/horizontalLine/) and **crosshair**.[verticalLine](/Documentation/ApiReference/UI_Components/dxChart/Configuration/crosshair/verticalLine/) objects.

apps/demos/Demos/Charts/ErrorBars/description.md

@@ -1,13 +1,13 @@
-DevExtreme Chart supports value error bars. Implement these bars to indicate data measurement tolerances and [confidence intervals](https://en.wikipedia.org/wiki/Confidence_interval). Configure error bar settings and appearance in the **series**.[valueErrorBar](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/) object.
+DevExtreme Chart supports value error bars. These bars indicate data measurement tolerances and [confidence intervals](https://en.wikipedia.org/wiki/Confidence_interval). Use the **series**.[valueErrorBar](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/) object to configure error bar settings and appearance.
 
 <!--split-->
 
-To enable error bars, specify one of the following pairs of **valueErrorBar** properties:
+To display error bars, specify one of the following pairs of **valueErrorBar** properties:
 
 - [lowValueField](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#lowValueField) and [highValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#highValueField)    
-Specify predefined error bars for each series point.
+Bind fields that contain error values for each series point.
 
 - [value](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#value) and [type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#type)    
-Configure dynamically calculated error bars.
+Calculate error bar values based on series data points.
 
 This demo implements predefined error bars specified in the Chart data source.

apps/demos/Demos/Charts/FunnelChart/description.md

@@ -1,29 +1,29 @@
-DevExtreme Funnel displays data in a funnel chart. You can implement funnel charts to display the flow of data over different stages. This demo displays conversion rates from website visits to product renewals.
+DevExtreme Funnel displays data/information flow across different stages/periods. This demo displays conversion rates from website visits to product renewals.
 
 <!--split-->
 
-This demo specifies multiple Funnel configuration objects:
+This demo configures the following objects:
 
 - [title](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/title/)    
-Specifies a title for the Funnel component.
+Specifies component title.
 - [export](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/)    
-Configures export settings. Funnel supports multiple export [formats](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/#formats).
+Configures export settings. Our Funnel Chart supports the following export [formats](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/export/#formats): PNG, PDF, JPEG, SVG, and GIF.
 - [tooltip](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/tooltip/)    
 Specifies item tooltips.
 - [label](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/label/)    
 Configures item labels.
 - [item](/Documentation/ApiReference/UI_Components/dxFunnel/Configuration/item/)    
-Customizes the visual appearance of items.
+Customizes item appearance.
 
 [note]
 
-Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
+Use the DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
 
-The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.
+Our Web Dashboard is a data analysis UI component you can embed into your ASP.NET Core or Angular, React, and Vue applications with a .NET backend. DevExpress Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an auto-arranged layout.
 
-The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).
+DevExpress Dashboard allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly within the web client (includes built-in adaptive layouts for tablet & mobile devices).
 
-The Web Dashboard is available as a part of a Universal subscription.
+DevExpress is available as part of a Universal subscription.
 
 [Get Started with DevExpress BI Dashboard](https://docs.devexpress.com/Dashboard/115955/web-dashboard) | [Explore Demos](https://demos.devexpress.com/Dashboard/)
 

apps/demos/Demos/Charts/HoverMode/description.md

@@ -1,2 +1,23 @@
-The Chart and PieChart components support different modes of series hovering. This demo shows the _«includePoints»_ mode, when all the points of a hovered series change their display style. In addition, you can specify a custom hover mode for legend items. Here, the _«excludePoints»_ mode is used, when only the series line changes its display style leaving the points as they were.
-<!--split-->
+DevExtreme Chart supports configurable hover modes for both series and points. This demo applies a common **hoverMode** for all series/points and a custom mode for the component legend.
+<!--split-->
+
+You can specify **hoverMode** for the following Chart elements:
+
+- [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#hoverMode)    
+A specific series.
+- [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/#hoverMode)    
+All series.
+- **commonSeriesSettings**.[spline](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/#spline) (or other [Series Type](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/) objects)    
+All series (specific type).
+- [legend](/Documentation/ApiReference/UI_Components/dxChart/Configuration/legend/#hoverMode)    
+Series hovered in the Chart legend.
+- **series**.[point](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/point/#hoverMode)    
+Points in a specific series.
+- **commonSeriesSettings**.[point](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#hoverMode) (or other Series Type objects)    
+All points.
+- **commonSeriesSettings**.**spline**.**point**    
+All points in series (specific type).
+- [argumentAxis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/#hoverMode)    
+All points at common argument values.
+
+To further customize Chart behavior, define the [stickyHovering](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#stickyHovering) property. When enabled (default), points remain in a hovered state until users hover the mouse pointer over other points or move it outside the bounds of the component.

apps/demos/Demos/Charts/MultiplePanes/description.md

@@ -1,7 +1,7 @@
-The DevExtreme Chart component allows you to display data in multiple panes. To configure a multi-pane chart, specify the [panes[]](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/) array. The component stacks panes vertically (or horizontally when [rotated](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#rotated) is `true`).
+The DevExtreme Chart component allows you to display data across multiple panes. DevExtreme Chart stacks panes vertically (or horizontally when Chart axes are [rotated](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#rotated)). To create a multi-pane chart, add items to the [panes[]](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/) array.
 
 <!--split-->
 
-Chart assigns unique [value axes](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/) and a shared [argument axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/) to all panes. To configure the value axis of a specific pane, define **valueAxis** properties and assign the **pane**.[name](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/#name) value to **valueAxis**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#pane).
+The Chart renders multiple [value axes](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/) and a shared [argument axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/). To create multiple value axes, add a **valueAxis[]** object for each value axis. To assign a value axis to a pane, pass the pane [name](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/#name) to the **valueAxis**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#pane) property.
 
-DevExtreme Chart can display multiple [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) in a single pane. Specify the **series**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#pane) property to display a series in a specific pane.
+DevExtreme Chart can display multiple [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) within a single pane. Specify the **series**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#pane) property to display a series in a specific pane.

apps/demos/Demos/Charts/ParetoChart/description.md

@@ -1,5 +1,9 @@
-You can utilize the DevExtreme Chart component to display data in a [Pareto chart](https://en.wikipedia.org/wiki/Pareto_chart). A Pareto chart displays individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are represented as percentages.
+You can use DevExtreme Chart to visualize data as a [Pareto chart](https://en.wikipedia.org/wiki/Pareto_chart) and display individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are given in percentages.
 
 <!--split-->
 
-To create a Pareto chart, configure two [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) objects. Assign the [Bar](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) and [Line](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/LineSeries/)/[Spline](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/SplineSeries/) series types to **series**.[type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type). To represent the numbers of the [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle) (80/20), you can specify constant lines. This demo configures a **valueAxis**.[constantLines](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/constantLines/) object to display a constant line at 80% of the cumulative total axis.
+To create a Pareto chart you must:
+
+1. Configure a [Bar](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) series and assign your primary data to this series (specify **series**.[valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField) property).
+2. Add a [Line](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/LineSeries/) or [Spline](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/SplineSeries/) series and assign cumulative total values to this series.
+3. Specify **valueAxis**.[constantLines](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/constantLines/) to illustrate [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle) correlations (80/20).

apps/demos/Demos/Charts/PieResolveLabelOverlap/description.md

@@ -1,2 +1,2 @@
-In the PieChart, series may include a large number of points, which may result in point label overlapping. This demo illustrates the **resolveLabelOverlapping** property that allows you to specify how the component must behave when point labels overlap.
-<!--split-->
+When a DevExtreme PieChart contains a large number of data points or if data points are compressed visually, point labels may overlap. Use the [resolveLabelOverlapping](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#resolveLabelOverlapping) property to minimize the impact of overlapping labels. In this demo, you can hide or shift overlapping labels.
+<!--split-->

apps/demos/Demos/Charts/PointImage/description.md

@@ -1,2 +1,4 @@
-This demo shows that the Chart can display custom images instead of standard point symbols.
-<!--split-->
+DevExtreme Chart can display custom images for series points. Specify the **point**.**image** object within [common series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/image/) or [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/point/image/) settings to display these images.
+<!--split-->
+
+This demo [hides](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#visible) default point [symbols](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/point/#symbol) and calls the [customizePoint](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#customizePoint) function to display images (based on point values).

apps/demos/Demos/Charts/PointSelectionAPI/Angular/app/app.component.html

@@ -3,8 +3,8 @@
   [dataSource]="catBreedsData"
   [rotated]="true"
   title="Most Popular US Cat Breeds"
-  (onPointClick)="pointClick($event)"
   (onDone)="done($event)"
+  (onPointClick)="pointClick($event)"
 >
   <dxi-series valueField="count" name="breeds" color="#a3d6d2">
     <dxo-selection-style color="#ec2e7a">

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

@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DxChartModule, DxChartTypes } from 'devextreme-angular/ui/chart';
+import { DxChartModule, type DxChartTypes } from 'devextreme-angular/ui/chart';
 import { Service, CatBreed } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
@@ -27,17 +27,18 @@ export class AppComponent {
     this.catBreedsData = service.getCatBreedsData();
   }
 
-  pointClick({ target: point }: DxChartTypes.PointClickEvent) {
+  done(e: DxChartTypes.DoneEvent) {
+    e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
+  }
+
+  pointClick(e: DxChartTypes.PointClickEvent) {
+    const point = e.target;
     if (point.isSelected()) {
       point.clearSelection();
     } else {
       point.select();
     }
   }
-
-  done(e: DxChartTypes.DoneEvent) {
-    e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
-  }
 }
 
 @NgModule({

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

@@ -1,19 +1,22 @@
 import React from 'react';
-import Chart, {
+import {
+  Chart,
   CommonSeriesSettings,
   Series,
   SelectionStyle,
   Hatching,
   Legend,
   Export,
+  type ChartTypes,
 } from 'devextreme-react/chart';
 import { catBreedsData } from './data.ts';
 
-function onDone({ component }) {
-  component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
+function onDone(e: ChartTypes.DoneEvent) {
+  e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
 }
 
-function onPointClick({ target: point }) {
+function onPointClick(e: ChartTypes.PointClickEvent) {
+  const point = e.target;
   if (point.isSelected()) {
     point.clearSelection();
   } else {
@@ -27,9 +30,9 @@ function App() {
       id="chart"
       dataSource={catBreedsData}
       rotated={true}
+      title="Most Popular US Cat Breeds"
       onDone={onDone}
       onPointClick={onPointClick}
-      title="Most Popular US Cat Breeds"
     >
       <CommonSeriesSettings
         argumentField="breed"

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import Chart, {
+import {
+  Chart,
   CommonSeriesSettings,
   Series,
   SelectionStyle,
@@ -9,10 +10,11 @@ import Chart, {
 } from 'devextreme-react/chart';
 import { catBreedsData } from './data.js';
 
-function onDone({ component }) {
-  component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
+function onDone(e) {
+  e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
 }
-function onPointClick({ target: point }) {
+function onPointClick(e) {
+  const point = e.target;
   if (point.isSelected()) {
     point.clearSelection();
   } else {
@@ -25,9 +27,9 @@ function App() {
       id="chart"
       dataSource={catBreedsData}
       rotated={true}
+      title="Most Popular US Cat Breeds"
       onDone={onDone}
       onPointClick={onPointClick}
-      title="Most Popular US Cat Breeds"
     >
       <CommonSeriesSettings
         argumentField="breed"

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

@@ -25,21 +25,23 @@
   </DxChart>
 </template>
 <script setup lang="ts">
-import DxChart, {
+import {
+  DxChart,
   DxCommonSeriesSettings,
+  DxSeries,
   DxSelectionStyle,
   DxHatching,
-  DxSeries,
   DxLegend,
   DxExport,
   type DxChartTypes,
 } from 'devextreme-vue/chart';
 import { catBreedsData } from './data.ts';
 
-function onDone({ component }) {
-  component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
+function onDone(e: DxChartTypes.DoneEvent) {
+  e.component.getSeriesByPos(0).getPointsByArg('Siamese')[0].select();
 }
-function onPointClick({ target: point }: DxChartTypes.PointClickEvent) {
+function onPointClick(e: DxChartTypes.PointClickEvent) {
+  const point = e.target;
   if (point.isSelected()) {
     point.clearSelection();
   } else {