From ea82aa4aaea1d8fb75fbb3a6a48f5ad7280c5511 Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Thu, 31 Jul 2025 14:50:30 +0800 Subject: [PATCH 1/4] Use matplotlib-inspired color cycle --- src/components/ChartContainer.jsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index b10f0f5..6eff787 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -176,7 +176,19 @@ export default function ChartContainer({ } }, [parsedData, onXRangeChange]); - const colors = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#f97316']; + // Use a lower saturation palette inspired by matplotlib + const colors = [ + '#1f77b4', // blue + '#ff7f0e', // orange + '#2ca02c', // green + '#d62728', // red + '#9467bd', // purple + '#8c564b', // brown + '#e377c2', // pink + '#7f7f7f', // gray + '#bcbd22', // olive + '#17becf' // cyan + ]; const createChartData = dataArray => ({ datasets: dataArray.map((item, index) => { const color = colors[index % colors.length]; From 37f9dc1727c6ab58d4551f570460933a91859c70 Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Thu, 31 Jul 2025 15:01:02 +0800 Subject: [PATCH 2/4] chore: refresh color palette --- src/components/ChartContainer.jsx | 46 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index 6eff787..a9c84de 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -176,18 +176,18 @@ export default function ChartContainer({ } }, [parsedData, onXRangeChange]); - // Use a lower saturation palette inspired by matplotlib + // Use a modern palette inspired by Tableau 10 const colors = [ - '#1f77b4', // blue - '#ff7f0e', // orange - '#2ca02c', // green - '#d62728', // red - '#9467bd', // purple - '#8c564b', // brown - '#e377c2', // pink - '#7f7f7f', // gray - '#bcbd22', // olive - '#17becf' // cyan + '#4e79a7', // blue + '#f28e2c', // orange + '#e15759', // red + '#76b7b2', // teal + '#59a14f', // green + '#edc948', // yellow + '#b07aa1', // purple + '#ff9da7', // pink + '#9c755f', // brown + '#bab0ab' // gray ]; const createChartData = dataArray => ({ datasets: dataArray.map((item, index) => { @@ -399,18 +399,18 @@ export default function ChartContainer({ { label: `${title} 差值`, data: comparisonData, - borderColor: '#dc2626', - backgroundColor: '#dc2626', + borderColor: '#e15759', + backgroundColor: '#e15759', borderWidth: 2, fill: false, tension: 0, pointRadius: 0, pointHoverRadius: 4, - pointBackgroundColor: '#dc2626', - pointBorderColor: '#dc2626', + pointBackgroundColor: '#e15759', + pointBorderColor: '#e15759', pointBorderWidth: 1, - pointHoverBackgroundColor: '#dc2626', - pointHoverBorderColor: '#dc2626', + pointHoverBackgroundColor: '#e15759', + pointHoverBorderColor: '#e15759', pointHoverBorderWidth: 1, animation: false, animations: { colors: false, x: false, y: false }, @@ -421,19 +421,19 @@ export default function ChartContainer({ datasets.push({ label: 'Baseline', data: baselineData, - borderColor: '#10b981', - backgroundColor: '#10b981', + borderColor: '#76b7b2', + backgroundColor: '#76b7b2', borderWidth: 2, borderDash: [5, 5], fill: false, tension: 0, pointRadius: 0, pointHoverRadius: 4, - pointBackgroundColor: '#10b981', - pointBorderColor: '#10b981', + pointBackgroundColor: '#76b7b2', + pointBorderColor: '#76b7b2', pointBorderWidth: 1, - pointHoverBackgroundColor: '#10b981', - pointHoverBorderColor: '#10b981', + pointHoverBackgroundColor: '#76b7b2', + pointHoverBorderColor: '#76b7b2', pointHoverBorderWidth: 1, animation: false, animations: { colors: false, x: false, y: false }, From 0eb3a49757bd74bceb31d5be4eb54ff10ccb77ab Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Thu, 31 Jul 2025 15:30:03 +0800 Subject: [PATCH 3/4] tune chart palette --- src/components/ChartContainer.jsx | 73 +++++++++++++++++++------------ 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index a9c84de..ee98787 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -176,28 +176,45 @@ export default function ChartContainer({ } }, [parsedData, onXRangeChange]); - // Use a modern palette inspired by Tableau 10 - const colors = [ - '#4e79a7', // blue - '#f28e2c', // orange - '#e15759', // red - '#76b7b2', // teal - '#59a14f', // green - '#edc948', // yellow - '#b07aa1', // purple - '#ff9da7', // pink - '#9c755f', // brown - '#bab0ab' // gray + // Matplotlib tab10 palette with slightly reduced saturation + const baseColors = [ + '#1f77b4', // blue + '#ff7f0e', // orange + '#2ca02c', // green + '#d62728', // red + '#9467bd', // purple + '#8c564b', // brown + '#e377c2', // pink + '#7f7f7f', // gray + '#bcbd22', // olive + '#17becf' // cyan ]; + + const lightenColor = (hex, factor = 0.2) => { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + const nr = Math.round(r + (255 - r) * factor) + .toString(16) + .padStart(2, '0'); + const ng = Math.round(g + (255 - g) * factor) + .toString(16) + .padStart(2, '0'); + const nb = Math.round(b + (255 - b) * factor) + .toString(16) + .padStart(2, '0'); + return `#${nr}${ng}${nb}`; + }; const createChartData = dataArray => ({ datasets: dataArray.map((item, index) => { - const color = colors[index % colors.length]; + const base = baseColors[index % baseColors.length]; + const color = lightenColor(base, 0.2); return { label: item.name?.replace(/\.(log|txt)$/i, '') || `File ${index + 1}`, data: item.data, borderColor: color, backgroundColor: `${color}33`, - borderWidth: 2, + borderWidth: 1.5, fill: false, tension: 0, pointRadius: 0, @@ -399,18 +416,18 @@ export default function ChartContainer({ { label: `${title} 差值`, data: comparisonData, - borderColor: '#e15759', - backgroundColor: '#e15759', - borderWidth: 2, + borderColor: lightenColor('#d62728', 0.2), + backgroundColor: lightenColor('#d62728', 0.2), + borderWidth: 1.5, fill: false, tension: 0, pointRadius: 0, pointHoverRadius: 4, - pointBackgroundColor: '#e15759', - pointBorderColor: '#e15759', + pointBackgroundColor: lightenColor('#d62728', 0.2), + pointBorderColor: lightenColor('#d62728', 0.2), pointBorderWidth: 1, - pointHoverBackgroundColor: '#e15759', - pointHoverBorderColor: '#e15759', + pointHoverBackgroundColor: lightenColor('#d62728', 0.2), + pointHoverBorderColor: lightenColor('#d62728', 0.2), pointHoverBorderWidth: 1, animation: false, animations: { colors: false, x: false, y: false }, @@ -421,19 +438,19 @@ export default function ChartContainer({ datasets.push({ label: 'Baseline', data: baselineData, - borderColor: '#76b7b2', - backgroundColor: '#76b7b2', - borderWidth: 2, + borderColor: lightenColor('#17becf', 0.2), + backgroundColor: lightenColor('#17becf', 0.2), + borderWidth: 1.5, borderDash: [5, 5], fill: false, tension: 0, pointRadius: 0, pointHoverRadius: 4, - pointBackgroundColor: '#76b7b2', - pointBorderColor: '#76b7b2', + pointBackgroundColor: lightenColor('#17becf', 0.2), + pointBorderColor: lightenColor('#17becf', 0.2), pointBorderWidth: 1, - pointHoverBackgroundColor: '#76b7b2', - pointHoverBorderColor: '#76b7b2', + pointHoverBackgroundColor: lightenColor('#17becf', 0.2), + pointHoverBorderColor: lightenColor('#17becf', 0.2), pointHoverBorderWidth: 1, animation: false, animations: { colors: false, x: false, y: false }, From e9b9364b8a6089c1229d58a16587bacb8e141c25 Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Thu, 31 Jul 2025 16:29:44 +0800 Subject: [PATCH 4/4] Use raw Matplotlib colors --- src/components/ChartContainer.jsx | 42 ++++++++++--------------------- 1 file changed, 13 insertions(+), 29 deletions(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index ee98787..6ab9bc7 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -190,25 +190,9 @@ export default function ChartContainer({ '#17becf' // cyan ]; - const lightenColor = (hex, factor = 0.2) => { - const r = parseInt(hex.slice(1, 3), 16); - const g = parseInt(hex.slice(3, 5), 16); - const b = parseInt(hex.slice(5, 7), 16); - const nr = Math.round(r + (255 - r) * factor) - .toString(16) - .padStart(2, '0'); - const ng = Math.round(g + (255 - g) * factor) - .toString(16) - .padStart(2, '0'); - const nb = Math.round(b + (255 - b) * factor) - .toString(16) - .padStart(2, '0'); - return `#${nr}${ng}${nb}`; - }; const createChartData = dataArray => ({ datasets: dataArray.map((item, index) => { - const base = baseColors[index % baseColors.length]; - const color = lightenColor(base, 0.2); + const color = baseColors[index % baseColors.length]; return { label: item.name?.replace(/\.(log|txt)$/i, '') || `File ${index + 1}`, data: item.data, @@ -416,18 +400,18 @@ export default function ChartContainer({ { label: `${title} 差值`, data: comparisonData, - borderColor: lightenColor('#d62728', 0.2), - backgroundColor: lightenColor('#d62728', 0.2), + borderColor: '#d62728', + backgroundColor: '#d62728', borderWidth: 1.5, fill: false, tension: 0, pointRadius: 0, pointHoverRadius: 4, - pointBackgroundColor: lightenColor('#d62728', 0.2), - pointBorderColor: lightenColor('#d62728', 0.2), + pointBackgroundColor: '#d62728', + pointBorderColor: '#d62728', pointBorderWidth: 1, - pointHoverBackgroundColor: lightenColor('#d62728', 0.2), - pointHoverBorderColor: lightenColor('#d62728', 0.2), + pointHoverBackgroundColor: '#d62728', + pointHoverBorderColor: '#d62728', pointHoverBorderWidth: 1, animation: false, animations: { colors: false, x: false, y: false }, @@ -438,19 +422,19 @@ export default function ChartContainer({ datasets.push({ label: 'Baseline', data: baselineData, - borderColor: lightenColor('#17becf', 0.2), - backgroundColor: lightenColor('#17becf', 0.2), + borderColor: '#17becf', + backgroundColor: '#17becf', borderWidth: 1.5, borderDash: [5, 5], fill: false, tension: 0, pointRadius: 0, pointHoverRadius: 4, - pointBackgroundColor: lightenColor('#17becf', 0.2), - pointBorderColor: lightenColor('#17becf', 0.2), + pointBackgroundColor: '#17becf', + pointBorderColor: '#17becf', pointBorderWidth: 1, - pointHoverBackgroundColor: lightenColor('#17becf', 0.2), - pointHoverBorderColor: lightenColor('#17becf', 0.2), + pointHoverBackgroundColor: '#17becf', + pointHoverBorderColor: '#17becf', pointHoverBorderWidth: 1, animation: false, animations: { colors: false, x: false, y: false },