Merge pull request #13638 from areo/fix-10228

fix(lines): discard extraneous data-points during lines animation

Merge pull request #13638 from areo/fix-10228
fix(lines): discard extraneous data-points during lines animation
d80deef4 · Yi Shen · GitHub · a39c4a18 · 41551faa · d80deef4
3 changed file
--- a/src/chart/line/lineAnimationDiff.ts
+++ b/src/chart/line/lineAnimationDiff.ts
@@ -132,30 +132,7 @@ export default function lineAnimationDiff(
                rawIndices.push(newData.getRawIndex(newIdx));
                break;
            case '-':
-                const oldIdx = diffItem.idx;
-                const rawIndex = oldData.getRawIndex(oldIdx);
-                const oldDataDimsForPoint = oldDataNewCoordInfo.dataDimsForPoint;
-                oldIdx2 = oldIdx * 2;
-                // Data is replaced. In the case of dynamic data queue
-                // FIXME FIXME FIXME
-                if (rawIndex !== oldIdx) {
-                    const newPt = newCoordSys.dataToPoint([
-                        oldData.get(oldDataDimsForPoint[0], oldIdx),
-                        oldData.get(oldDataDimsForPoint[1], oldIdx)
-                    ]);
-                    const newStackedOnPt = getStackedOnPoint(oldDataNewCoordInfo, newCoordSys, oldData, oldIdx);
-
-                    currPoints.push(oldPoints[oldIdx2], oldPoints[oldIdx2 + 1]);
-                    nextPoints.push(newPt[0], newPt[1]);
-
-                    currStackedPoints.push(oldStackedOnPoints[oldIdx2], oldStackedOnPoints[oldIdx2 + 1]);
-                    nextStackedPoints.push(newStackedOnPt[0], newStackedOnPt[1]);
-
-                    rawIndices.push(rawIndex);
-                }
-                else {
-                    pointAdded = false;
-                }
+                pointAdded = false;
        }

        // Original indices
@@ -205,4 +182,4 @@ export default function lineAnimationDiff(

        status: sortedStatus
    };
-}
\ No newline at end of file
+}
--- a/test/lines-extraneous.html
+++ b/test/lines-extraneous.html
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/esl.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+        .test-title {
+            background: #146402;
+            color: #fff;
+        }
+    </style>
+
+
+    <div id="main0"></div>
+
+    <script>
+
+        /**
+         * Related issues:
+         * - https://github.com/apache/incubator-echarts/issues/10228
+         * - https://github.com/apache/incubator-echarts/issues/11633
+         * - https://github.com/apache/incubator-echarts/issues/12164
+         * - https://github.com/apache/incubator-echarts/issues/12433
+         */
+
+        var chart;
+        var myChart;
+
+        const datasetSource1 = [['2019-04-14', 17], ['2019-04-16', 13], ['2019-04-17', 5]];
+        const datasetSource2 = [['2019-04-13', 0], ['2019-04-18', 23]];
+
+        require([
+            'echarts'
+        ], function (echarts) {
+            const option1 = {
+                dataset: [
+                    {
+                        source: datasetSource1,
+                        sourceHeader: false
+                    }
+                ],
+                dataZoom: [
+                    { show: true }
+                ],
+                xAxis: {
+                    type: 'time',
+                    min: '2019-04-15',
+                    max: '2019-04-18',
+                },
+                yAxis: [
+                    {
+                        scale: true,
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        type: 'line',
+                        showSymbol: false,
+                        animation: false,
+                    }
+                ]
+            };
+
+            const option2 = {
+                dataset: [
+                    {
+                        source: datasetSource2,
+                        sourceHeader: false
+                    }
+                ],
+                dataZoom: [
+                    {
+                        show: true,
+                        start: 0,
+                        end: 100,
+                    }
+                ],
+                xAxis: {
+                    type: 'time',
+                    min: '2019-04-12',
+                    max: '2019-04-19',
+                },
+                yAxis: [
+                    {
+                        scale: true,
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        type: 'line',
+                        showSymbol: false,
+                    }
+                ]
+            };
+
+            chart = myChart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Lines series should not show extraneous points when updating options',
+                    'Only **one**  segment (e.g.: **two** data points) should be displayed after pressing the button'
+                ],
+                option: option1,
+                button: {
+                    text: 'Click to trigger extraneous lines bug',
+                    onClick: () => {
+                        myChart.setOption(option2, true);
+                    }
+                }
+            });
+        });
+
+    </script>
+
+</body>
+
+</html>
--- a/test/runTest/actions/lines-extraneous.json
+++ b/test/runTest/actions/lines-extraneous.json
+[{"name":"Action 1","ops":[{"type":"mousedown","time":596,"x":28,"y":93},{"type":"mouseup","time":698,"x":28,"y":93},{"time":699,"delay":2000,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568042380534}]
\ No newline at end of file