Fix using above/below filling option with discontinuous lines

Added a test in the boundary folder
chartjs · Dec 26, 2021 · 2e65fc9 · 2e65fc9
1 parent 4a9f446
commit 2e65fc9
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 2 deletions.
diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js
@@ -383,9 +383,31 @@ function resolveTarget(sources, index, propagate) {
 }
 
 function _clip(ctx, target, clipY) {
+  const {segments, points} = target;
+  let first = true;
+
   ctx.beginPath();
-  target.path(ctx);
-  ctx.lineTo(target.last().x, clipY);
+
+  let lineLoop = false;
+  for (const segment of segments) {
+    const {start, end} = segment;
+    const firstPoint = points[start];
+    const lastPoint = points[findSegmentEnd(start, end, points)];
+    if (first) {
+      ctx.moveTo(firstPoint.x, firstPoint.y);
+      first = false;
+    } else {
+      ctx.lineTo(firstPoint.x, clipY);
+      ctx.lineTo(firstPoint.x, firstPoint.y);
+    }
+    lineLoop = !!target.pathSegment(ctx, segment, {move: lineLoop});
+    if (lineLoop) {
+      ctx.closePath();
+    } else {
+      ctx.lineTo(lastPoint.x, clipY);
+    }
+  }
+
   ctx.lineTo(target.first().x, clipY);
   ctx.closePath();
   ctx.clip();

diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.json b/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.json
@@ -0,0 +1,53 @@
+{
+    "config": {
+        "type": "line",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
+            "datasets": [{
+                "borderColor": "rgb(42, 90, 145)",
+                "data": [null, 12, 30, 36, 45, 53, 68, 79, null, 95, 18, 18, 180],
+                "fill": {
+                  "target": "+1",
+                  "above": "rgba(4, 142, 43, 0.5)",
+                  "below": "rgba(241, 49, 34, 0.5)"
+                }
+            }, {
+                "borderColor": "#00ADEE",
+                "data": [null, 0, 0, 0, 0, 0, 20, 108, null, 72, 72, 72, 72],
+                "fill": false
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "spanGaps": false,
+            "scales": {
+                "x": {
+                    "display": false
+                },
+                "y": {
+                    "display": false
+                }
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "cubicInterpolationMode": "monotone",
+                    "borderColor": "transparent"
+                }
+            },
+            "plugins": {
+                "legend": false,
+                "title": false,
+                "tooltip": false
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}
diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.png b/test/fixtures/plugin.filler/line/boundary/above-below-line-null-start.png
diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null.json b/test/fixtures/plugin.filler/line/boundary/above-below-line-null.json
@@ -0,0 +1,53 @@
+{
+    "config": {
+        "type": "line",
+        "data": {
+            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"],
+            "datasets": [{
+                "borderColor": "rgb(42, 90, 145)",
+                "data": [4, 12, 30, 36, 45, 53, 68, 79, null, 95, 18, null, 18, 180],
+                "fill": {
+                  "target": "+1",
+                  "above": "rgba(4, 142, 43, 0.5)",
+                  "below": "rgba(241, 49, 34, 0.5)"
+                }
+            }, {
+                "borderColor": "#00ADEE",
+                "data": [0, 0, 0, 0, 0, 0, 20, 108, null, 72, 72, null, 72, 72],
+                "fill": false
+            }]
+        },
+        "options": {
+            "responsive": false,
+            "spanGaps": false,
+            "scales": {
+                "x": {
+                    "display": false
+                },
+                "y": {
+                    "display": false
+                }
+            },
+            "elements": {
+                "point": {
+                    "radius": 0
+                },
+                "line": {
+                    "cubicInterpolationMode": "monotone",
+                    "borderColor": "transparent"
+                }
+            },
+            "plugins": {
+                "legend": false,
+                "title": false,
+                "tooltip": false
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 256,
+            "width": 512
+        }
+    }
+}
diff --git a/test/fixtures/plugin.filler/line/boundary/above-below-line-null.png b/test/fixtures/plugin.filler/line/boundary/above-below-line-null.png