From 05ac7dd6efb7b7a512735552a90ba76fe9513508 Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 28 Jun 2024 10:43:15 +0800
Subject: [PATCH] fix(line): step areaStyle bug #20021

---
 src/chart/line/LineView.ts |  50 ++++++++++++------
 test/line-step.html        | 105 +++++++++++++++++++++++++++++++++++++
 2 files changed, 138 insertions(+), 17 deletions(-)

diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index 9672eb720b..21f8e4367b 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -147,8 +147,19 @@ function getStackedOnPoints(
     return points;
 }
 
+/**
+ * Filter the null data and extend data for step considering `stepTurnAt`
+ *
+ * @param points data to convert, that may containing null
+ * @param basePoints base data to reference, used only for areaStyle points
+ * @param coordSys coordinate system
+ * @param stepTurnAt 'start' | 'end' | 'middle' | true
+ * @param connectNulls whether to connect nulls
+ * @returns converted point positions
+ */
 function turnPointsIntoStep(
     points: ArrayLike<number>,
+    basePoints: ArrayLike<number> | null,
     coordSys: Cartesian2D | Polar,
     stepTurnAt: 'start' | 'end' | 'middle',
     connectNulls: boolean
@@ -163,12 +174,18 @@ function turnPointsIntoStep(
     const nextPt: number[] = [];
     const filteredPoints = [];
     if (connectNulls) {
-      for (i = 0; i < points.length; i += 2) {
-          if (!isNaN(points[i]) && !isNaN(points[i + 1])) {
-              filteredPoints.push(points[i], points[i + 1]);
-          }
-      }
-      points = filteredPoints;
+        for (i = 0; i < points.length; i += 2) {
+            /**
+             * For areaStyle of stepped lines, `stackedOnPoints` should be
+             * filtered the same as `points` so that the base axis values
+             * should stay the same as the lines above. See #20021
+             */
+            const reference = basePoints || points;
+            if (!isNaN(reference[i]) && !isNaN(reference[i + 1])) {
+                filteredPoints.push(points[i], points[i + 1]);
+            }
+        }
+        points = filteredPoints;
     }
     for (i = 0; i < points.length - 2; i += 2) {
         nextPt[0] = points[i + 2];
@@ -717,12 +734,11 @@ class LineView extends ChartView {
             );
 
             if (step) {
-                // TODO If stacked series is not step
-                points = turnPointsIntoStep(points, coordSys, step, connectNulls);
-
                 if (stackedOnPoints) {
-                    stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step, connectNulls);
+                    stackedOnPoints = turnPointsIntoStep(stackedOnPoints, points, coordSys, step, connectNulls);
                 }
+                // TODO If stacked series is not step
+                points = turnPointsIntoStep(points, null, coordSys, step, connectNulls);
             }
 
             polyline = this._newPolyline(points);
@@ -801,11 +817,11 @@ class LineView extends ChartView {
                 else {
                     // Not do it in update with animation
                     if (step) {
-                        // TODO If stacked series is not step
-                        points = turnPointsIntoStep(points, coordSys, step, connectNulls);
                         if (stackedOnPoints) {
-                            stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step, connectNulls);
+                            stackedOnPoints = turnPointsIntoStep(stackedOnPoints, points, coordSys, step, connectNulls);
                         }
+                        // TODO If stacked series is not step
+                        points = turnPointsIntoStep(points, null, coordSys, step, connectNulls);
                     }
 
                     polyline.setShape({
@@ -1337,10 +1353,10 @@ class LineView extends ChartView {
         let stackedOnNext = diff.stackedOnNext;
         if (step) {
             // TODO If stacked series is not step
-            current = turnPointsIntoStep(diff.current, coordSys, step, connectNulls);
-            stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, coordSys, step, connectNulls);
-            next = turnPointsIntoStep(diff.next, coordSys, step, connectNulls);
-            stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step, connectNulls);
+            stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, diff.current, coordSys, step, connectNulls);
+            current = turnPointsIntoStep(diff.current, null, coordSys, step, connectNulls);
+            stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, diff.next, coordSys, step, connectNulls);
+            next = turnPointsIntoStep(diff.next, null, coordSys, step, connectNulls);
         }
         // Don't apply animation if diff is large.
         // For better result and avoid memory explosion problems like
diff --git a/test/line-step.html b/test/line-step.html
index 7e07d0dec5..b4bac8cb37 100644
--- a/test/line-step.html
+++ b/test/line-step.html
@@ -38,6 +38,8 @@
 
 
         <div id="main0"></div>
+        <div id="main1"></div>
+        <div id="main2"></div>
 
 
 
@@ -105,6 +107,109 @@
         </script>
 
 
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        data: [null, 250, null, 260, 270, 280, null],
+                        type: 'line',
+                        areaStyle: { opacity: 0.2 },
+                        step: 'end',
+                        connectNulls: true
+                    },
+                    {
+                        data: [null, 150, 160, null, 170, 180, 190],
+                        type: 'line',
+                        areaStyle: { opacity: 0.2 },
+                        step: 'end',
+                        connectNulls: true
+                    },
+                    {
+                        data: [40, 50, 60, null, 70, null, null],
+                        type: 'line',
+                        areaStyle: { opacity: 0.2 },
+                        step: 'end',
+                        connectNulls: true
+                    },
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'null points in step line with connectNull: true',
+                    'AreaStyle should be correct.'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
+        <script>
+        require([
+            'echarts',
+            // 'map/js/china',
+            // './data/nutrients.json'
+        ], function (echarts) {
+            var option;
+
+            option = {
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        data: [null, 250, null, 260, 270, 280, null],
+                        type: 'line',
+                        areaStyle: { opacity: 0.2 },
+                        step: 'end',
+                        connectNulls: false
+                    },
+                    {
+                        data: [null, 150, 160, null, 170, 180, 190],
+                        type: 'line',
+                        areaStyle: { opacity: 0.2 },
+                        step: 'end',
+                        connectNulls: false
+                    },
+                    {
+                        data: [40, 50, 60, null, 70, null, null],
+                        type: 'line',
+                        areaStyle: { opacity: 0.2 },
+                        step: 'end',
+                        connectNulls: false
+                    },
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'null points in step line with connectNull: false',
+                    'AreaStyle should be correct.'
+                ],
+                option: option
+            });
+        });
+        </script>
     </body>
 </html>