Adding threshold option to decimation plugin (#9327)

chartjs · Jul 4, 2021 · b4dee55 · b4dee55
1 parent dac7101
commit b4dee55
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/docs/configuration/decimation.md b/docs/configuration/decimation.md
@@ -11,6 +11,7 @@ Namespace: `options.plugins.decimation`, the global options for the plugin are d
 | `enabled` | `boolean` | `false` | Is decimation enabled?
 | `algorithm` | `string` | `'min-max'` | Decimation algorithm to use. See the [more...](#decimation-algorithms)
 | `samples` | `number` | | If the `'lttb'` algorithm is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel.
+| `threshold` | `number` | | If the number of samples in the current axis range is above this value, the decimation will be triggered. Defaults to 4 times the canvas width.<br />The number of point after decimation can be higher than the `threshold` value.
 
 ## Decimation Algorithms
 

diff --git a/src/plugins/plugin.decimation.js b/src/plugins/plugin.decimation.js
@@ -234,7 +234,8 @@ export default {
       }
 
       let {start, count} = getStartAndCountOfVisiblePointsSimplified(meta, data);
-      if (count <= 4 * availableWidth) {
+      const threshold = options.threshold || 4 * availableWidth;
+      if (count <= threshold) {
         // No decimation is required until we are above this threshold
         cleanDecimatedDataset(dataset);
         return;

diff --git a/test/specs/plugin.decimation.tests.js b/test/specs/plugin.decimation.tests.js
@@ -15,7 +15,7 @@ describe('Plugin.decimation', function() {
       {x: 8, y: 8},
       {x: 9, y: 9}];
 
-    it('should draw all element if sample is greater than data', function() {
+    it('should draw all element if sample is greater than data based on canvas width', function() {
       var chart = window.acquireChart({
         type: 'line',
         data: {
@@ -54,7 +54,7 @@ describe('Plugin.decimation', function() {
       expect(chart.data.datasets[0].data.length).toBe(10);
     });
 
-    it('should draw the specified number of elements', function() {
+    it('should draw the specified number of elements based on canvas width', function() {
       var chart = window.acquireChart({
         type: 'line',
         data: {
@@ -94,6 +94,45 @@ describe('Plugin.decimation', function() {
       expect(chart.data.datasets[0].data.length).toBe(7);
     });
 
+    it('should draw the specified number of elements based on threshold', function() {
+      var chart = window.acquireChart({
+        type: 'line',
+        data: {
+          datasets: [{
+            data: originalData,
+            label: 'dataset1'
+          }]
+        },
+        options: {
+          parsing: false,
+          scales: {
+            x: {
+              type: 'linear'
+            }
+          },
+          plugins: {
+            decimation: {
+              enabled: true,
+              algorithm: 'lttb',
+              samples: 5,
+              threshold: 7
+            }
+          }
+        }
+      }, {
+        canvas: {
+          height: 100,
+          width: 100
+        },
+        wrapper: {
+          height: 100,
+          width: 100
+        }
+      });
+
+      expect(chart.data.datasets[0].data.length).toBe(5);
+    });
+
     it('should draw all element only in range', function() {
       var chart = window.acquireChart({
         type: 'line',

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
@@ -1991,6 +1991,7 @@ export const enum DecimationAlgorithm {
 }
 interface BaseDecimationOptions {
   enabled: boolean;
+  threshold?: number;
 }
 
 interface LttbDecimationOptions extends BaseDecimationOptions {