Add 'shape' mode for filler-plugin (#9360)

chartjs · Jul 5, 2021 · 8405996 · 8405996
1 parent b4dee55
commit 8405996
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 12 deletions.
diff --git a/docs/charts/area.md b/docs/charts/area.md
@@ -16,6 +16,7 @@ This feature is implemented by the [`filler` plugin](https://github.com/chartjs/
 | Disabled <sup>1</sup> | `boolean` | `false` |
 | Stacked value below | `string` | `'stack'` |
 | Axis value | `object` | `{ value: number; }` |
+| Shape (fill inside line) | `string` | `'shape'` |
 
 > <sup>1</sup> for backward compatibility, `fill: true` is equivalent to `fill: 'origin'`<br/>
 

diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js
@@ -74,7 +74,7 @@ function decodeFill(line, index, count) {
     return target;
   }
 
-  return ['origin', 'start', 'end', 'stack'].indexOf(fill) >= 0 && fill;
+  return ['origin', 'start', 'end', 'stack', 'shape'].indexOf(fill) >= 0 && fill;
 }
 
 function computeLinearBoundary(source) {
@@ -315,6 +315,10 @@ function getTarget(source) {
     return buildStackLine(source);
   }
 
+  if (fill === 'shape') {
+    return true;
+  }
+
   const boundary = computeBoundary(source);
 
   if (boundary instanceof simpleArc) {
@@ -481,24 +485,30 @@ function _fill(ctx, cfg) {
 
   for (const {source: src, target: tgt, start, end} of segments) {
     const {style: {backgroundColor = color} = {}} = src;
+    const notShape = target !== true;
+
     ctx.save();
     ctx.fillStyle = backgroundColor;
 
-    clipBounds(ctx, scale, getBounds(property, start, end));
+    clipBounds(ctx, scale, notShape && getBounds(property, start, end));
 
     ctx.beginPath();
 
     const lineLoop = !!line.pathSegment(ctx, src);
-    if (lineLoop) {
-      ctx.closePath();
-    } else {
-      interpolatedLineTo(ctx, target, end, property);
-    }
 
-    const targetLoop = !!target.pathSegment(ctx, tgt, {move: lineLoop, reverse: true});
-    const loop = lineLoop && targetLoop;
-    if (!loop) {
-      interpolatedLineTo(ctx, target, start, property);
+    let loop;
+    if (notShape) {
+      if (lineLoop) {
+        ctx.closePath();
+      } else {
+        interpolatedLineTo(ctx, target, end, property);
+      }
+
+      const targetLoop = !!target.pathSegment(ctx, tgt, {move: lineLoop, reverse: true});
+      loop = lineLoop && targetLoop;
+      if (!loop) {
+        interpolatedLineTo(ctx, target, start, property);
+      }
     }
 
     ctx.closePath();

diff --git a/test/fixtures/plugin.filler/line/shape.js b/test/fixtures/plugin.filler/line/shape.js
@@ -0,0 +1,35 @@
+const data = [];
+for (let rad = 0; rad <= Math.PI * 2; rad += Math.PI / 45) {
+  data.push({
+    x: Math.cos(rad),
+    y: Math.sin(rad)
+  });
+}
+
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data,
+        fill: 'shape',
+        backgroundColor: 'rgba(255, 0, 0, 0.5)',
+      }]
+    },
+    options: {
+      plugins: {
+        legend: false
+      },
+      scales: {
+        x: {
+          type: 'linear',
+          display: false
+        },
+        y: {
+          type: 'linear',
+          display: false
+        },
+      },
+    }
+  }
+};
diff --git a/test/fixtures/plugin.filler/line/shape.png b/test/fixtures/plugin.filler/line/shape.png
diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -2011,7 +2011,7 @@ export interface FillerOptions {
   propagate: boolean;
 }
 
-export type FillTarget = number | string | { value: number } | 'start' | 'end' | 'origin' | 'stack' | boolean;
+export type FillTarget = number | string | { value: number } | 'start' | 'end' | 'origin' | 'stack' | 'shape' | boolean;
 
 export interface ComplexFillTarget {
   /**