Add decimation for large chart datasets

Author: JavaZeroo

src/components/ChartContainer.jsx

@@ -11,6 +11,7 @@ import {
   Title,
   Tooltip,
   Legend,
+  Decimation,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { ImageDown, Copy, FileDown } from 'lucide-react';
@@ -25,6 +26,7 @@ ChartJS.register(
   Title,
   Tooltip,
   Legend,
+  Decimation,
   zoomPlugin
 );
 
@@ -388,6 +390,12 @@ export default function ChartContainer({
     responsiveAnimationDuration: 0,
     interaction: { mode: 'nearest', intersect: false, axis: 'x' },
     plugins: {
+      decimation: {
+        enabled: true,
+        algorithm: 'lttb',
+        samples: 2000,
+        threshold: 4000
+      },
       zoom: {
         pan: {
           enabled: true,

src/components/__tests__/AppConfigPersistence.test.jsx

@@ -22,6 +22,7 @@ vi.mock('chart.js', () => {
     Title: {},
     Tooltip: {},
     Legend: {},
+    Decimation: {},
   };
 });
 

src/components/__tests__/ChartContainer.test.jsx

@@ -20,6 +20,7 @@ vi.mock('chart.js', () => {
     Title: {},
     Tooltip: {},
     Legend: {},
+    Decimation: {},
   };
 });
 

src/components/__tests__/GlobalConfigOverride.test.jsx

@@ -22,6 +22,7 @@ vi.mock('chart.js', () => {
     Title: {},
     Tooltip: {},
     Legend: {},
+    Decimation: {},
   };
 });