fix: refactor trend chart

Author: eWloYW8

components/charts/echarts-trend-chart.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import ReactECharts from 'echarts-for-react';
-// Import specific types from ECharts
 import type { EChartsOption, LineSeriesOption } from 'echarts';
 import { useTheme } from 'next-themes';
 import { format } from 'date-fns';
@@ -34,23 +33,21 @@ const EchartsTrendChart: React.FC<EchartsTrendChartProps> = ({ trendData }) => {
 
     const seriesData: LineSeriesOption[] = trendData.map(user => {
         const data = sortedTimePoints.map(time => {
-            // Find the last recorded score for the user at or before the current time point
             const lastPoint = [...user.history]
                 .filter(p => new Date(p.time).getTime() <= time)
-                .pop(); // The last element is the latest score
-            return lastPoint ? lastPoint.score : 0;
+                .pop();
+            const score = lastPoint ? lastPoint.score : 0;
+            return [time, score];
         });
         return {
             name: user.nickname,
             type: 'line',
-            step: 'end', // Use a step chart to accurately represent score changes over time
-            symbol: 'none', // Do not show symbols on data points for a cleaner look
+            step: 'end',
+            symbol: 'none',
             data: data,
         };
     });
 
-    const xAxisData = sortedTimePoints.map(time => format(new Date(time), 'HH:mm:ss'));
-
     const option: EChartsOption = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -60,38 +57,47 @@ const EchartsTrendChart: React.FC<EchartsTrendChartProps> = ({ trendData }) => {
                 label: {
                     backgroundColor: '#6a7985'
                 }
+            },
+            formatter: (params: any) => {
+                const time = format(new Date(params[0].axisValue), 'yyyy-MM-dd HH:mm:ss');
+                let tooltipHtml = `${time}<br/>`;
+                params.forEach((param: any) => {
+                    tooltipHtml += `${param.marker} ${param.seriesName}: <strong>${param.value[1]}</strong><br/>`;
+                });
+                return tooltipHtml;
             }
         },
         legend: {
             data: trendData.map(user => user.nickname),
             textStyle: {
                 color: theme === 'dark' ? '#ccc' : '#333',
             },
-            bottom: 45, // Position legend 45px from the bottom, above the slider
-            type: 'scroll', // Allow legend to scroll if it has too many items
+            bottom: 45,
+            type: 'scroll',
         },
         grid: {
             left: '3%',
-            right: '50px', // Increase right margin for vertical dataZoom slider
-            bottom: 80, // Reserve 80px at the bottom for controls to prevent overlap
+            right: '50px',
+            bottom: 80,
             containLabel: true
         },
         toolbox: {
             feature: {
                 saveAsImage: {
                     title: 'Download',
                     name: 'contest-trend',
-                    backgroundColor: theme === 'dark' ? '#1f2937' : '#fff' // Set background for saved image
+                    backgroundColor: theme === 'dark' ? '#1f2937' : '#fff'
                 }
             }
         },
         xAxis: [
             {
-                type: 'category',
-                boundaryGap: false,
-                data: xAxisData,
+                type: 'time',
                 axisLabel: {
-                    color: theme === 'dark' ? '#ccc' : '#333'
+                    color: theme === 'dark' ? '#ccc' : '#333',
+                    formatter: (value: number) => {
+                        return format(new Date(value), 'yyyy-MM-dd HH:mm');
+                    }
                 }
             }
         ],
@@ -104,29 +110,25 @@ const EchartsTrendChart: React.FC<EchartsTrendChartProps> = ({ trendData }) => {
             }
         ],
         dataZoom: [
-            // Horizontal slider for X-axis
             {
                 type: 'slider',
                 xAxisIndex: 0,
                 start: 0,
                 end: 100,
-                bottom: 10, // Position 10px from the bottom
+                bottom: 10,
                 height: 20,
             },
-            // Vertical slider for Y-axis
             {
                 type: 'slider',
                 yAxisIndex: 0,
                 start: 0,
                 end: 100,
-                right: 10, // Position 10px from the right
+                right: 10,
                 width: 20,
             },
-            // Inside zooming (mouse wheel) for both axes
             {
                 type: 'inside',
                 xAxisIndex: 0,
-                yAxisIndex: 0,
                 start: 0,
                 end: 100,
             },