From cb5bfadcd5925b963cfd4d429e86f25391a0beda Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Fri, 25 Jul 2025 16:41:08 +0800 Subject: [PATCH 1/4] Enhance UI styling --- index.html | 6 ++++++ src/App.jsx | 2 +- src/index.css | 4 ++++ tailwind.config.js | 12 +++++++++++- 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4d0ac0e..a75e427 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + + + diff --git a/src/App.jsx b/src/App.jsx index 6e9e216..1a2d1ac 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -242,7 +242,7 @@ function App() { )} -
+
Date: Fri, 25 Jul 2025 16:48:45 +0800 Subject: [PATCH 2/4] Fix layout width and refine chart colors --- src/App.jsx | 2 +- src/components/ChartContainer.jsx | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 1a2d1ac..6e9e216 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -242,7 +242,7 @@ function App() { )} -
+
({ datasets: dataArray.map((item, index) => { const color = colors[index % colors.length]; From 9fd4f40eb62344be5667b2d6b3772b6590218936 Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Fri, 25 Jul 2025 17:12:17 +0800 Subject: [PATCH 3/4] fix: ensure layout spans full screen --- src/index.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.css b/src/index.css index da9c1a1..753a262 100644 --- a/src/index.css +++ b/src/index.css @@ -17,6 +17,12 @@ border: 0; } + html, + body, + #root { + @apply w-full min-h-screen; + } + body { @apply font-sans bg-gray-50 text-gray-800 antialiased; } From c822e0fee374e834bd9d464bfb6687f828273156 Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Fri, 25 Jul 2025 17:29:23 +0800 Subject: [PATCH 4/4] Refine chart line colors and style --- src/components/ChartContainer.jsx | 34 +++++++++++++++++-------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index 281c57d..2f976de 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -164,16 +164,16 @@ export default function ChartContainer({ onMaxStepChange(maxStep); }, [parsedData, onMaxStepChange]); - // More distinct pastel-like colors for better readability + // Color-blind friendly palette for chart lines const colors = [ - '#2563eb', - '#16a34a', - '#dc2626', - '#f59e0b', - '#7c3aed', - '#0e7490', - '#d946ef', - '#fb7185' + '#377eb8', + '#e41a1c', + '#4daf4a', + '#984ea3', + '#ff7f00', + '#ffff33', + '#a65628', + '#f781bf' ]; const createChartData = dataArray => ({ datasets: dataArray.map((item, index) => { @@ -185,9 +185,11 @@ export default function ChartContainer({ backgroundColor: `${color}33`, borderWidth: 2, fill: false, - tension: 0, + tension: 0.3, + cubicInterpolationMode: 'monotone', + borderDash: index % 2 ? [4, 3] : [], pointRadius: 0, - pointHoverRadius: 4, + pointHoverRadius: 5, pointBackgroundColor: color, pointBorderColor: color, pointBorderWidth: 1, @@ -381,9 +383,10 @@ export default function ChartContainer({ backgroundColor: '#dc2626', borderWidth: 2, fill: false, - tension: 0, + tension: 0.3, + cubicInterpolationMode: 'monotone', pointRadius: 0, - pointHoverRadius: 4, + pointHoverRadius: 5, pointBackgroundColor: '#dc2626', pointBorderColor: '#dc2626', pointBorderWidth: 1, @@ -404,9 +407,10 @@ export default function ChartContainer({ borderWidth: 2, borderDash: [5, 5], fill: false, - tension: 0, + tension: 0.3, + cubicInterpolationMode: 'monotone', pointRadius: 0, - pointHoverRadius: 4, + pointHoverRadius: 5, pointBackgroundColor: '#10b981', pointBorderColor: '#10b981', pointBorderWidth: 1,