DevExpress · VasilyStrelyaev · Jan 22, 2025 · Jan 24, 2025 · Jan 29, 2025 · Jan 30, 2025
diff --git a/.github/workflows/ci_tests.yml b/.github/workflows/ci_tests.yml
@@ -10,7 +10,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     name: Build, Lint & Jest Test
     steps:
     - name: Get sources
@@ -47,7 +47,7 @@ jobs:
         retention-days: 1
 
   test_cafe:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: build
     strategy:
       matrix:
@@ -79,7 +79,7 @@ jobs:
       run: yarn testcafe:ci:${{ matrix.component }}
 
   site:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: build
     name: Site
     steps:

diff --git a/.github/workflows/lint-pr.yml b/.github/workflows/lint-pr.yml
@@ -10,7 +10,7 @@ on:
 jobs:
   main:
     name: Validate PR title
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: amannn/action-semantic-pull-request@v4
         env:

diff --git a/packages/dx-react-chart-demos/src/demo-sources/animation/$migration/custom-easing.jsx b/packages/dx-react-chart-demos/src/demo-sources/animation/$migration/custom-easing.jsx
@@ -0,0 +1,50 @@
+export default () => {
+    const [currentData, setCurrentData] = useState(data[2017]);
+
+    const changeData = useCallback(e => {
+      setCurrentData(data[e.target.value]);
+    };
+
+    return (
+      <React.Fragment>
+        <Chart dataSource={currentData}>
+          <ValueAxis
+            name="total"
+          />
+          <ValueAxis
+            name="sale"
+            position="right"
+          >
+            <Label format="currency" />
+          </ValueAxis>
+          <CommonSeriesSettings
+            argumentField="month"
+          />
+          <Series
+            name="Units Sold"
+            valueField="sale"
+            type="bar"
+            axis="sale"
+          />
+          <Series
+            name="Total Transactions"
+            valueField="total"
+            type="spline"
+            axis="total"
+          />
+          <Animation
+            duration={2000}
+            easing='easeOutCubic'
+          />
+        </Chart>
+        <select
+          style={{ width: '100px', margin: '10px' }}
+          onChange={changeData}
+        >
+          <option>2017</option>
+          <option>2018</option>
+          <option>2019</option>
+        </select>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/animation/$migration/simple-animation.jsx b/packages/dx-react-chart-demos/src/demo-sources/animation/$migration/simple-animation.jsx
@@ -0,0 +1,30 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData}>
+          <ValueAxis
+            name="total"
+            position="right"
+          />
+          <ValueAxis
+            name="sale"
+          />
+          <CommonSeriesSettings
+            argumentField="month"
+          />
+          <Series
+            name="Units Sold"
+            valueField="sale"
+            type="bar"
+            axis="sale"
+          />
+          <Series
+            name="Total Transactions"
+            valueField="total"
+            type="spline"
+            axis="total"
+          />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/animation/$migration/with-transition.jsx b/packages/dx-react-chart-demos/src/demo-sources/animation/$migration/with-transition.jsx
@@ -0,0 +1,67 @@
+const option = [2017, 2018, 2019];
+
+export default () => {
+  const [currentData, setCurrentData] = useState(data[2017]);
+  const id = useRef(undefined);
+  const index = useRef(1);
+  const selectRef = useRef(null);
+
+  useEffect(() => {
+    id.current = setInterval(() => {
+      selectRef.selectedIndex = index.current;
+      setCurrentData(data[option[index.current]]);
+
+      if (index.current === 2) {
+        index.current = 0;
+      } else {
+        index.current += 1;
+      }
+    }, 4000);
+
+    return () => clearTimeout(id.current);
+  }, []);
+
+  const changeData = useCallback(e => {
+    setCurrentData(data[e.target.value]);
+  };
+
+  return (
+    <React.Fragment>
+      <Chart dataSource={currentData}>
+        <ValueAxis
+          name="total"
+        />
+        <ValueAxis
+          name="sale"
+          position="right"
+        >
+          <Label format="currency" />
+        </ValueAxis>
+        <CommonSeriesSettings
+          argumentField="month"
+        />
+        <Series
+          name="Units Sold"
+          valueField="sale"
+          type="bar"
+          axis="sale"
+        />
+        <Series
+          name="Total Transactions"
+          valueField="total"
+          type="spline"
+          axis="total"
+        />
+      </Chart>
+      <select
+        ref={selectRef}
+        style={{ width: '100px', margin: '10px' }}
+        onChange={changeData}
+      >
+        <option>{ option[0] }</option>
+        <option>{ option[1] }</option>
+        <option>{ option[2] }</option>
+      </select>
+    </React.Fragment>
+  );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/bar-chart/$migration/rotated-bar.jsx b/packages/dx-react-chart-demos/src/demo-sources/bar-chart/$migration/rotated-bar.jsx
@@ -0,0 +1,17 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart
+          dataSource={chartData}
+          rotated={true}
+        >
+          <Series
+            type="bar"
+            valueField="population"
+            argumentField="year"
+          />
+          <Title text="World population" />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/area.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/area.jsx
@@ -0,0 +1,12 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData}>
+          <CommonSeriesSettings argumentField="year" type="area" />
+          <Series valueField="ru"/>
+          <Series valueField="ch"/>
+          <Series valueField="us"/>
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/band-axis.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/band-axis.jsx
@@ -0,0 +1,12 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData}>
+          <CommonSeriesSettings argumentField="state" type="bar" />
+          <Series valueField="young" name="Young" />
+          <Series valueField="middle" name="Middle" />
+          <Series valueField="older" name="Older" />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/bar-line.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/bar-line.jsx
@@ -0,0 +1,51 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData}>
+          <ValueAxis
+            name="oil"
+          />
+          <ValueAxis
+            name="price"
+            position="right"
+          >
+            <Label format="currency" />
+          </ValueAxis>
+          <CommonSeriesSettings
+            argumentField="year"
+            axis="oil"
+            type="stackedbar"
+          />
+          <Title
+            text="Oil production vs Oil price"
+          />
+          <Series
+            name="USA"
+            valueField="usa"
+          />
+          <Series
+            name="Saudi Arabia"
+            valueField="saudiArabia"
+          />
+          <Series
+            name="Iran"
+            valueField="iran"
+          />
+          <Series
+            name="Mexico"
+            valueField="mexico"
+          />
+          <Series
+            name="Russia"
+            valueField="russia"
+          />
+          <Series
+            name="Oil Price"
+            valueField="price"
+            axis="price"
+            type="line"
+          />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/bar.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/bar.jsx
@@ -0,0 +1,13 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData}>
+          <Series
+            type="bar"
+            valueField="population"
+            argumentField="year"
+          />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/basic-legend.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/basic-legend.jsx
@@ -0,0 +1,16 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData} height={height}>
+          <Series
+            name="Series name"
+            valueField="ch"
+            argumentField="year"
+            type="area"
+          />
+          <Title text="Title" />
+          <Legend visible={true} />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/default-axis.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/default-axis.jsx
@@ -0,0 +1,11 @@
+export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData}>
+          <CommonSeriesSettings argumentField="argument" />
+          <Series valueField="lineValue" type="line" />
+          <Series valueField="splineValue" type="spline" />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/...ges/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/legend-customization.jsx b/...ges/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/legend-customization.jsx
@@ -0,0 +1,40 @@
+const markerPath = {
+    'Original Signal': 'M 0 8 C 2 4 7 4 9.5 8 C 11 12 16 12 18 8 L 18 10 C 16 14 11 14 8.5 10 C 7 6 2 6 0 10 Z',
+    'Noisy Signal': 'M 18 8 L 12 12 L 7 3 L 0 7.4 L 0 10 L 6 6 L 11 15 L 18 10.6 Z',
+  };
+
+  const markerRender = ({ series, marker: { fill } }) => {
+    return (
+      <svg>
+        <rect x={0} y={0} width={18} height={18} fill={color} opacity={0.3}></rect>
+        <path d={markerPath[series.name]} fill={color}></path>
+      </svg>
+    );
+  };
+
+  export default () => {
+    return (
+      <React.Fragment>
+        <Chart dataSource={chartData} height={height}>
+          <Series
+            name="Noisy signal"
+            valueField="value"
+            argumentField="argument"
+            type="line"
+          />
+          <Series
+            name="Original signal"
+            valueField="originalValue"
+            argumentField="argument"
+            type="line"
+          />
+          <Title
+            text="Noisy and Original signals"
+          >
+            <Font size={32} weight={300} />
+          </Title>
+          <Legend markerRender={markerRender} />
+        </Chart>
+      </React.Fragment>
+    );
+}
diff --git a/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/line-spline.jsx b/packages/dx-react-chart-demos/src/demo-sources/chart-basic/$migration/line-spline.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+  Chart,
+  Series,
+  CommonSeriesSettings,
+} from 'devextreme-react/chart';
+
+/* ... */
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Chart dataSource={chartData}>
+        <CommonSeriesSettings argumentField="argument" />
+        <Series valueField="lineValue" type="line" />
+        <Series valueField="splineValue" type="spline" />
+      </Chart>
+    </React.Fragment>
+  );
+}