Store chart in local storage

[zion-off]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
tracker	Ready	Preview	Comment	Aug 23, 2025 5:44pm

[Copilot]

Pull Request Overview

This pull request refactors chart data handling to implement local storage caching functionality. The changes move chart data fetching from the server-side Chart component to the client-side Dots component with localStorage support.

• Moved chart data fetching logic from Chart component to Dots component
• Implemented localStorage caching with background refresh strategy
• Added error handling and fallback mechanisms for data loading

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/components/chart.tsx	Simplified to pass userId instead of pre-fetched chart data to Dots component
src/components/dots.tsx	Added localStorage caching, async data fetching, and background refresh functionality

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The maxValue parameter passed to getColorIndex is -1, which doesn't represent the actual maximum value in the dataset. This will result in incorrect color indexing for the initial data load. Consider calculating the actual maxValue from the fetched data before calling getColorIndex.

Suggested change

	const chartWithColors: ChartWithColorsType[] = fetchedChart.map(
	(item: number) => [item, getColorIndex(item, -1)]
	const maxValue = Math.max(...fetchedChart);
	const chartWithColors: ChartWithColorsType[] = fetchedChart.map(
	(item: number) => [item, getColorIndex(item, maxValue)]

[Copilot]

Using setTimeout with 0 delay to defer async operations is an anti-pattern. Consider using a proper background refresh mechanism or moving the refresh logic to a separate effect to avoid potential race conditions and improve code clarity.

Suggested change

	setTimeout(async () => {
	try {
	const fetchedChart = await fetchChartData();
	if (fetchedChart) {
	const chartWithColors: ChartWithColorsType[] = fetchedChart.map(
	(item: number) => [item, getColorIndex(item, maxValue)]
	);
	const newMaxValue = Math.max(
	...chartWithColors.map((item) => item[0])
	);
	updateMaxValue(newMaxValue);
	setAllDots(chartWithColors);
	localStorage.setItem(`chart-${id}`, JSON.stringify(chartWithColors));
	}
	} catch (error) {
	console.error('Error fetching fresh chart data:', error);
	}
	}, 0);
	} else {
	const fetchedChart = await fetchChartData();
	if (!fetchedChart) {
	setLoadedMaxValue(maxValue);
	setLoadedFromStorage(true);
	} else {
	const fetchedChart = await fetchChartData();
	if (!fetchedChart) {
	setHasLoadedFromStorage(true);

[Copilot]

The maxValue used here is from the stored chart data, not the newly fetched data. This could result in incorrect color indexing if the new data has a different maximum value. Use newMaxValue instead of maxValue.

Suggested change

	const chartWithColors: ChartWithColorsType[] = fetchedChart.map(
	(item: number) => [item, getColorIndex(item, maxValue)]
	);
	const newMaxValue = Math.max(
	...chartWithColors.map((item) => item[0])
	);
	const newMaxValue = Math.max(...fetchedChart);
	const chartWithColors: ChartWithColorsType[] = fetchedChart.map(
	(item: number) => [item, getColorIndex(item, newMaxValue)]
	);

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.