From ec91581ec7fc7ad27406e4d5a451c056249f0e1a Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Mon, 28 Jul 2025 14:16:47 +0800 Subject: [PATCH 1/3] Add consistent fade-in animations --- src/App.jsx | 4 ++-- src/components/ChartContainer.jsx | 6 +++--- src/components/ComparisonControls.jsx | 2 +- src/components/FileConfigModal.jsx | 8 ++++---- src/components/FileList.jsx | 4 ++-- src/components/FileUpload.jsx | 2 +- src/components/RegexControls.jsx | 2 +- src/components/ResizablePanel.jsx | 4 ++-- src/index.css | 22 ++++++++++++++++++++++ 9 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index fce2a15..0247334 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -257,7 +257,7 @@ function App() { aria-label="控制面板" > {/* 标题信息 */} -
+
@@ -328,7 +328,7 @@ function App() { /> )} -
+

+

📊 暂无数据

📁 请上传日志文件开始分析

@@ -451,7 +451,7 @@ export default function ChartContainer({ if (metrics.length === 0) { return ( -
+

🎯 请选择要显示的图表

@@ -523,7 +523,7 @@ export default function ChartContainer({ {comparisonChart} {stats && ( -
+

{key} 差值统计

Mean Difference: {stats.meanNormal.toFixed(6)}

diff --git a/src/components/ComparisonControls.jsx b/src/components/ComparisonControls.jsx index e2661ee..aa93409 100644 --- a/src/components/ComparisonControls.jsx +++ b/src/components/ComparisonControls.jsx @@ -12,7 +12,7 @@ export function ComparisonControls({ ]; return ( -
+
-
e.stopPropagation()} >
diff --git a/src/components/FileList.jsx b/src/components/FileList.jsx index 37fb183..7286201 100644 --- a/src/components/FileList.jsx +++ b/src/components/FileList.jsx @@ -4,7 +4,7 @@ import { FileText, X, Settings } from 'lucide-react'; export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) { if (files.length === 0) { return ( -
+

+

+

+
diff --git a/src/index.css b/src/index.css index 3d38cda..86c9dca 100644 --- a/src/index.css +++ b/src/index.css @@ -247,6 +247,28 @@ input[type="checkbox"]:focus { } } +/* 通用元素入场动画 */ +@keyframes fadeSlideIn { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-slide-in { + animation: fadeSlideIn 0.4s ease-out; +} + +@media (prefers-reduced-motion: reduce) { + .fade-slide-in { + animation: none !important; + } +} + /* 渐变文字动画 */ @keyframes gradientShift { 0%, 100% { From 502c37f9f1cb531c12edbf92103d664f5c4cd175 Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Mon, 28 Jul 2025 14:27:37 +0800 Subject: [PATCH 2/3] Enable chart animations --- src/components/ChartContainer.jsx | 33 ++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index 9f436db..afc1d3e 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -54,7 +54,11 @@ const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover }) }, [onSyncHover, chartId]); return ( -
+
); @@ -196,8 +200,10 @@ export default function ChartContainer({ pointHoverBackgroundColor: color, pointHoverBorderColor: color, pointHoverBorderWidth: 1, - animation: false, - animations: { colors: false, x: false, y: false }, + animation: { + duration: 500, + easing: 'easeOutQuart' + }, }; }) }); @@ -253,10 +259,10 @@ export default function ChartContainer({ const chartOptions = useMemo(() => ({ responsive: true, maintainAspectRatio: false, - animation: { duration: 0 }, - animations: { colors: false, x: false, y: false }, - hover: { animationDuration: 0 }, - responsiveAnimationDuration: 0, + animation: { + duration: 500, + easing: 'easeOutQuart' + }, interaction: { mode: 'index', intersect: false }, plugins: { zoom: { @@ -308,7 +314,6 @@ export default function ChartContainer({ tooltip: { mode: 'index', intersect: false, - animation: false, backgroundColor: 'rgba(15, 23, 42, 0.92)', titleColor: '#f1f5f9', bodyColor: '#cbd5e1', @@ -392,8 +397,10 @@ export default function ChartContainer({ pointHoverBackgroundColor: '#dc2626', pointHoverBorderColor: '#dc2626', pointHoverBorderWidth: 1, - animation: false, - animations: { colors: false, x: false, y: false }, + animation: { + duration: 500, + easing: 'easeOutQuart' + }, }, ]; if (baseline > 0 && (compareMode === 'relative' || compareMode === 'absolute')) { @@ -415,8 +422,10 @@ export default function ChartContainer({ pointHoverBackgroundColor: '#10b981', pointHoverBorderColor: '#10b981', pointHoverBorderWidth: 1, - animation: false, - animations: { colors: false, x: false, y: false }, + animation: { + duration: 500, + easing: 'easeOutQuart' + }, }); } return { datasets }; From 4f314b0b2e22c1c6879634599b0d25cb677390ba Mon Sep 17 00:00:00 2001 From: JavaZero <71128095+JavaZeroo@users.noreply.github.com> Date: Mon, 28 Jul 2025 14:59:30 +0800 Subject: [PATCH 3/3] Optimize large datasets --- src/components/ChartContainer.jsx | 13 +++++++++++-- src/components/__tests__/ChartContainer.test.jsx | 3 ++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx index afc1d3e..ae50754 100644 --- a/src/components/ChartContainer.jsx +++ b/src/components/ChartContainer.jsx @@ -13,6 +13,7 @@ import { Legend, } from 'chart.js'; import zoomPlugin from 'chartjs-plugin-zoom'; +import { Decimation } from 'chart.js'; import { getMinSteps } from "../utils/getMinSteps.js"; ChartJS.register( @@ -23,7 +24,8 @@ ChartJS.register( Title, Tooltip, Legend, - zoomPlugin + zoomPlugin, + Decimation ); const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover }) => { @@ -265,6 +267,13 @@ export default function ChartContainer({ }, interaction: { mode: 'index', intersect: false }, plugins: { + decimation: { + enabled: parsedData.some(file => + Object.values(file.metricsData || {}).some(arr => arr.length > 1000) + ), + algorithm: 'lttb', + samples: 1000 + }, zoom: { pan: { enabled: true, @@ -375,7 +384,7 @@ export default function ChartContainer({ } }, elements: { point: { radius: 0 } } - }), [xRange, onXRangeChange]); + }), [xRange, onXRangeChange, parsedData]); const createComparisonChartData = (item1, item2, title) => { const comparisonData = getComparisonData(item1.data, item2.data, compareMode); diff --git a/src/components/__tests__/ChartContainer.test.jsx b/src/components/__tests__/ChartContainer.test.jsx index bb7039d..a992796 100644 --- a/src/components/__tests__/ChartContainer.test.jsx +++ b/src/components/__tests__/ChartContainer.test.jsx @@ -20,7 +20,8 @@ vi.mock('chart.js', () => { LineElement: {}, Title: {}, Tooltip: {}, - Legend: {} + Legend: {}, + Decimation: {} }; });