Skip to content

Add decimation for large chart datasets#60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JavaZeroo wants to merge 1 commit into
base:master
Choose a base branch
from
Open

Add decimation for large chart datasets #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/components/ChartContainer.jsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand All@@ -25,6 +26,7 @@ ChartJS.register(
Title,
Tooltip,
Legend,
Decimation,
zoomPlugin
);

Expand DownExpand Up@@ -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
Comment on lines 392 to +397

@chatgpt-codex-connectorchatgpt-codex-connectorBotDec 9, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Decimation mutates data used for export and hover sync

Enabling the Chart.js decimation plugin here replaces each dataset’s data array with a ~2000-point LTTB sample whenever a series exceeds the 4k threshold. The rest of ChartContainer relies on chart.data.datasets for features like exportChartCSV and cross-chart hover sync, so large logs will now export only the decimated subset and most steps will no longer synchronize between charts because the searched x-values were removed during downsampling. Consider using the original data (_data/parsedData) for these operations or disabling decimation when exporting/syncing to avoid losing points.

Useful? React with 👍 / 👎.

},
zoom: {
pan: {
enabled: true,
Expand Down
1 change: 1 addition & 0 deletions src/components/__tests__/AppConfigPersistence.test.jsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ vi.mock('chart.js', () => {
Title: {},
Tooltip: {},
Legend: {},
Decimation: {},
};
});

Expand Down
1 change: 1 addition & 0 deletions src/components/__tests__/ChartContainer.test.jsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,6 +20,7 @@ vi.mock('chart.js', () => {
Title: {},
Tooltip: {},
Legend: {},
Decimation: {},
};
});

Expand Down
1 change: 1 addition & 0 deletions src/components/__tests__/GlobalConfigOverride.test.jsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ vi.mock('chart.js', () => {
Title: {},
Tooltip: {},
Legend: {},
Decimation: {},
};
});

Expand Down