Chart: fix set visualRangeUpdateMode (T1315301) (24_2) (#31931)

Author: anna-shakhova

packages/devextreme/js/__internal/viz/chart_components/m_advanced_chart.ts

@@ -711,7 +711,7 @@ export const AdvancedChart = BaseChart.inherit({
 
     index = _isDefined(index) ? parseInt(index[0], 10) : index;
 
-    if (fullName.indexOf('visualRange') > 0) {
+    if (fullName.split('.').indexOf('visualRange') > 0) {
       if (type(value) !== 'object') {
         value = wrapVisualRange(fullName, value) ?? value;
       }
@@ -832,16 +832,17 @@ export const AdvancedChart = BaseChart.inherit({
   _optionChanged(arg) {
     if (!this._optionChangedLocker) {
       const optionName = 'visualRange';
-      let axes;
-      const isDirectOption = arg.fullName.indexOf(optionName) > 0 ? true
+      const isDirectOption = arg.fullName.split('.').indexOf(optionName) > 0 ? true
         : this.getPartialChangeOptionsName(arg).indexOf(optionName) > -1 ? false : undefined;
 
       if (_isDefined(isDirectOption)) {
-        axes = this._getAxesByOptionPath(arg, isDirectOption, optionName);
+        const axes: (typeof Axis)[] = this._getAxesByOptionPath(arg, isDirectOption, optionName);
 
         if (axes) {
           if (axes.length > 1 || isArray(arg.value)) {
-            axes.forEach((a, index) => setAxisVisualRangeByOption(arg, a, isDirectOption, index));
+            axes.forEach((a, index: number) => {
+              setAxisVisualRangeByOption(arg, a, isDirectOption, index);
+            });
           } else if (axes.length === 1) {
             setAxisVisualRangeByOption(arg, axes[0], isDirectOption);
           }

packages/devextreme/testing/tests/DevExpress.viz.charts/chart.integration.tests.js

@@ -1031,6 +1031,53 @@ QUnit.test('Set the visualRange option by the different ways', function(assert)
     assert.deepEqual(chart.option('valueAxis._customVisualRange'), { length: 2 });
 });
 
+QUnit.test('visualRangeUpdateMode change should not corrupt _customVisualRange causing incorrect visualRange on subsequent axis rerender (T1315301)', function(assert) {
+    this.$container.css({ width: '1000px', height: '600px' });
+    const dataSource = [{
+        arg: 1,
+        val: 4
+    }, {
+        arg: 2,
+        val: 5
+    }, {
+        arg: 5,
+        val: 7
+    }, {
+        arg: 8,
+        val: 3
+    }, {
+        arg: 11,
+        val: 8
+    }];
+
+    const chart = this.createChart({
+        size: {
+            width: 1000,
+            height: 600
+        },
+        dataSource: dataSource,
+        series: { type: 'bar' },
+        valueAxis: {
+            visualRangeUpdateMode: 'auto',
+        }
+    });
+
+    const initialVisualRange = chart.option('valueAxis.visualRange');
+
+    chart.option('valueAxis.visualRangeUpdateMode', 'keep');
+
+    assert.strictEqual(chart.option('valueAxis.visualRangeUpdateMode'), 'keep', 'visualRangeUpdateMode has changed to "keep"');
+    assert.deepEqual(chart.option('valueAxis.visualRange'), initialVisualRange, 'visualRange remains unchanged');
+    assert.deepEqual(chart.option('valueAxis._customVisualRange'), undefined, '_customVisualRange not set');
+
+    chart.option('commonAxisSettings.title', 'custom');
+
+    assert.strictEqual(chart.option('valueAxis.visualRangeUpdateMode'), 'keep', 'visualRangeUpdateMode is still "keep" after rerender');
+    assert.strictEqual(chart.option('commonAxisSettings.title'), 'custom', 'commonAxisSettings.title was successfully changed');
+    assert.deepEqual(chart.option('valueAxis.visualRange'), initialVisualRange, 'visualRange remains correct after axis rerender');
+    assert.deepEqual(chart.option('valueAxis._customVisualRange'), undefined, '_customVisualRange not set');
+});
+
 QUnit.test('Reload dataSource - visualRange option should be changed', function(assert) {
     this.$container.css({ width: '1000px', height: '600px' });
     const visualRangeChanged = sinon.spy();