Add drawTime option to filler plugin (#8796)

docs/.vuepress/config.js

@@ -133,6 +133,7 @@ module.exports = {
           children: [
             'area/line-boundaries',
             'area/line-datasets',
+            'area/line-drawtime',
             'area/line-stacked',
             'area/radar'
           ]

docs/charts/area.md

@@ -64,9 +64,12 @@ new Chart(ctx, {
 
 ## Configuration
 
+Namespace: `options.plugins.filler`
+
 | Option | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| [`plugins.filler.propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
+| `drawTime` | `string` | `beforeDatasetDraw` | Filler draw time. Supported values: `'beforeDatasetDraw'`, `'beforeDatasetsDraw'`
+| [`propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
 
 ### propagate
 

docs/samples/area/line-drawtime.md

@@ -0,0 +1,108 @@
+# Line Chart drawTime
+
+```js chart-editor
+// <block:setup:2>
+const inputs = {
+  min: -100,
+  max: 100,
+  count: 8,
+  decimals: 2,
+  continuity: 1
+};
+
+const generateLabels = () => {
+  return Utils.months({count: inputs.count});
+};
+
+Utils.srand(3);
+const generateData = () => (Utils.numbers(inputs));
+// </block:setup>
+
+// <block:data:0>
+const data = {
+  labels: generateLabels(),
+  datasets: [
+    {
+      label: 'Dataset 1',
+      data: generateData(),
+      borderColor: Utils.CHART_COLORS.red,
+      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
+      fill: true
+    },
+    {
+      label: 'Dataset 2',
+      data: generateData(),
+      borderColor: Utils.CHART_COLORS.blue,
+      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
+      fill: true
+    }
+  ]
+};
+// </block:data>
+
+// <block:actions:3>
+let smooth = false;
+
+const actions = [
+  {
+    name: 'drawTime: beforeDatasetDraw (default)',
+    handler: (chart) => {
+      chart.options.plugins.filler.drawTime = 'beforeDatasetDraw';
+      chart.update();
+    }
+  },
+  {
+    name: 'drawTime: beforeDatasetsDraw',
+    handler: (chart) => {
+      chart.options.plugins.filler.drawTime = 'beforeDatasetsDraw';
+      chart.update();
+    }
+  },
+  {
+    name: 'Randomize',
+    handler(chart) {
+      chart.data.datasets.forEach(dataset => {
+        dataset.data = generateData();
+      });
+      chart.update();
+    }
+  },
+  {
+    name: 'Smooth',
+    handler(chart) {
+      smooth = !smooth;
+      chart.options.elements.line.tension = smooth ? 0.4 : 0;
+      chart.update();
+    }
+  }
+];
+// </block:actions>
+
+// <block:config:1>
+const config = {
+  type: 'line',
+  data: data,
+  options: {
+    plugins: {
+      filler: {
+        propagate: false,
+      },
+      title: {
+        display: true,
+        text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
+      }
+    },
+    pointBackgroundColor: '#fff',
+    radius: 10,
+    interaction: {
+      intersect: false,
+    }
+  },
+};
+// </block:config>
+
+module.exports = {
+  actions: actions,
+  config: config,
+};
+```

src/plugins/plugin.filler.js

@@ -516,12 +516,25 @@ function doFill(ctx, cfg) {
   ctx.restore();
 }
 
+function drawfill(ctx, source, area) {
+  const target = getTarget(source);
+  const {line, scale} = source;
+  const lineOpts = line.options;
+  const fillOption = lineOpts.fill;
+  const color = lineOpts.backgroundColor;
+  const {above = color, below = color} = fillOption || {};
+  if (target && line.points.length) {
+    clipArea(ctx, area);
+    doFill(ctx, {line, target, above, below, area, scale});
+    unclipArea(ctx);
+  }
+}
+
 export default {
   id: 'filler',
 
   afterDatasetsUpdate(chart, _args, options) {
     const count = (chart.data.datasets || []).length;
-    const propagate = options.propagate;
     const sources = [];
     let meta, i, line, source;
 
@@ -537,7 +550,7 @@ export default {
           fill: decodeFill(line, i, count),
           chart,
           scale: meta.vScale,
-          line
+          line,
         };
       }
 
@@ -551,47 +564,39 @@ export default {
         continue;
       }
 
-      source.fill = resolveTarget(sources, i, propagate);
+      source.fill = resolveTarget(sources, i, options.propagate);
     }
   },
 
-  beforeDatasetsDraw(chart) {
+  beforeDatasetsDraw(chart, _args, options) {
     const metasets = chart.getSortedVisibleDatasetMetas();
     const area = chart.chartArea;
-    let i, meta;
 
-    for (i = metasets.length - 1; i >= 0; --i) {
-      meta = metasets[i].$filler;
+    for (let i = metasets.length - 1; i >= 0; --i) {
+      const source = metasets[i].$filler;
 
-      if (meta) {
-        meta.line.updateControlPoints(area);
+      if (source) {
+        source.line.updateControlPoints(area);
+
+        if (options.drawTime === 'beforeDatasetsDraw') {
+          drawfill(chart.ctx, source, area);
+        }
       }
     }
   },
 
-  beforeDatasetDraw(chart, args) {
-    const area = chart.chartArea;
-    const ctx = chart.ctx;
+  beforeDatasetDraw(chart, args, options) {
     const source = args.meta.$filler;
 
-    if (!source || source.fill === false) {
+    if (!source || source.fill === false || options.drawTime !== 'beforeDatasetDraw') {
       return;
     }
 
-    const target = getTarget(source);
-    const {line, scale} = source;
-    const lineOpts = line.options;
-    const fillOption = lineOpts.fill;
-    const color = lineOpts.backgroundColor;
-    const {above = color, below = color} = fillOption || {};
-    if (target && line.points.length) {
-      clipArea(ctx, area);
-      doFill(ctx, {line, target, above, below, area, scale});
-      unclipArea(ctx);
-    }
+    drawfill(chart.ctx, source, chart.chartArea);
   },
 
   defaults: {
-    propagate: true
+    propagate: true,
+    drawTime: 'beforeDatasetDraw'
   }
 };

test/fixtures/plugin.filler/line/before-dataset-draw.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      labels: ['15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
+      datasets: [
+        {
+          borderColor: '#00ADEE80',
+          backgroundColor: '#00ADEE',
+          data: [0, 1, 1, 2, 2, 0],
+        },
+        {
+          borderColor: '#BD262880',
+          backgroundColor: '#BD2628',
+          data: [0, 2, 2, 1, 1, 1],
+        }
+      ]
+    },
+    options: {
+      borderWidth: 4,
+      fill: true,
+      radius: 20,
+      pointBackgroundColor: '#ffff',
+      cubicInterpolationMode: 'monotone',
+      plugins: {
+        legend: false,
+        filler: {
+          drawTime: 'beforeDatasetDraw'
+        }
+      },
+      scales: {
+        x: {
+          display: false,
+        },
+        y: {
+          display: false
+        }
+      }
+    }
+  }
+};

test/fixtures/plugin.filler/line/before-datasets-draw.js

@@ -0,0 +1,41 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      labels: ['15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
+      datasets: [
+        {
+          borderColor: '#00ADEE80',
+          backgroundColor: '#00ADEE',
+          data: [0, 1, 1, 2, 2, 0],
+        },
+        {
+          borderColor: '#BD262880',
+          backgroundColor: '#BD2628',
+          data: [0, 2, 2, 1, 1, 1],
+        }
+      ]
+    },
+    options: {
+      borderWidth: 4,
+      fill: true,
+      radius: 20,
+      pointBackgroundColor: '#ffff',
+      cubicInterpolationMode: 'monotone',
+      plugins: {
+        legend: false,
+        filler: {
+          drawTime: 'beforeDatasetsDraw'
+        }
+      },
+      scales: {
+        x: {
+          display: false,
+        },
+        y: {
+          display: false
+        }
+      }
+    }
+  }
+};

types/index.esm.d.ts

@@ -1956,6 +1956,7 @@ export type DecimationOptions = LttbDecimationOptions | MinMaxDecimationOptions;
 
 export const Filler: Plugin;
 export interface FillerOptions {
+  drawTime: 'beforeDatasetDraw' | 'beforeDatasetsDraw';
   propagate: boolean;
 }