test(storybook): chart with decimation story (#813)

Author: dangreen

package.json

@@ -70,9 +70,11 @@
     "@typescript-eslint/parser": "^5.0.0",
     "browserslist": "^4.17.3",
     "chart.js": "^3.1.0",
+    "chartjs-adapter-date-fns": "^2.0.0",
     "clean-publish": "^3.4.1",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "3.3.0",
+    "date-fns": "^2.25.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",

stories/Chart.data.ts

@@ -153,3 +153,53 @@ export const sameData2 = {
     },
   ],
 };
+
+export const decimationOptions = {
+  // Turn off animations and data parsing for performance
+  animation: false,
+  parsing: false,
+
+  interaction: {
+    mode: 'nearest',
+    axis: 'x',
+    intersect: false,
+  },
+  plugins: {
+    decimation: {
+      enabled: true,
+      algorithm: 'lttb',
+      samples: 500,
+    },
+  },
+  scales: {
+    x: {
+      type: 'time',
+      ticks: {
+        source: 'auto',
+        // Disabled rotation for performance
+        maxRotation: 0,
+        autoSkip: true,
+      },
+    },
+  },
+};
+
+export const getDecimationData = () => {
+  const start = Date.now();
+  const data = Array.from({ length: 100000 }, (_, i) => ({
+    x: start + i * 30000,
+    y: faker.datatype.number({ min: 0, max: Math.random() < 0.001 ? 100 : 20 }),
+  }));
+
+  return {
+    datasets: [
+      {
+        borderColor: colorRed,
+        borderWidth: 1,
+        data,
+        label: 'Large Dataset',
+        radius: 0,
+      },
+    ],
+  };
+};

stories/Chart.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useReducer } from 'react';
 import { InteractionItem } from 'chart.js';
+import 'chartjs-adapter-date-fns';
 import Chart from '../src';
 import * as data from './Chart.data';
 
@@ -114,3 +115,17 @@ export const SameDataToggle = args => {
 SameDataToggle.args = {
   type: 'bar',
 };
+
+export const Decimation = args => {
+  const [currentData, toggleData] = useReducer(
+    data.getDecimationData,
+    data.getDecimationData()
+  );
+
+  return <Chart {...args} data={currentData} onClick={toggleData} />;
+};
+
+Decimation.args = {
+  type: 'line',
+  options: data.decimationOptions,
+};

yarn.lock

@@ -4699,6 +4699,11 @@ chart.js@^3.1.0:
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.6.0.tgz#a87fce8431d4e7c5523d721f487f53aada1e42fe"
   integrity sha512-iOzzDKePL+bj+ccIsVAgWQehCXv8xOKGbaU2fO/myivH736zcx535PGJzQGanvcSGVOqX6yuLZsN3ygcQ35UgQ==
 
+chartjs-adapter-date-fns@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
+  integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -5700,6 +5705,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.25.0:
+  version "2.25.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
+  integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"