feat: y轴坐标改为左侧展示

app/components/FundIntradayChart.jsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useMemo, useRef, useEffect } from 'react';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -27,6 +27,9 @@ ChartJS.register(
  * referenceNav: 参考净值（最新单位净值），用于计算涨跌幅；未传则用当日第一个估值作为参考。
  */
 export default function FundIntradayChart({ series = [], referenceNav }) {
+  const chartRef = useRef(null);
+  const hoverTimeoutRef = useRef(null);
+
   const chartData = useMemo(() => {
     if (!series.length) return { labels: [], datasets: [] };
     const labels = series.map((d) => d.time);
@@ -91,7 +94,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
       },
       y: {
         display: true,
-        position: 'right',
+        position: 'left',
         grid: { color: '#1f2937', drawBorder: false },
         ticks: {
           color: '#9ca3af',
@@ -100,11 +103,45 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         }
       }
     },
-    onHover: (event, chartElement) => {
-      event.native.target.style.cursor = chartElement[0] ? 'crosshair' : 'default';
+    onHover: (event, chartElement, chart) => {
+      const target = event?.native?.target;
+      if (target) {
+        target.style.cursor = chartElement[0] ? 'crosshair' : 'default';
+      }
+
+      const currentChart = chart || chartRef.current;
+      if (!currentChart) return;
+
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+
+      if (chartElement[0]) {
+        hoverTimeoutRef.current = setTimeout(() => {
+          const c = chartRef.current || currentChart;
+          if (!c) return;
+          c.setActiveElements([]);
+          if (c.tooltip) {
+            c.tooltip.setActiveElements([], { x: 0, y: 0 });
+          }
+          c.update();
+          if (target) {
+            target.style.cursor = 'default';
+          }
+        }, 2000);
+      }
     }
   }), []);
 
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const plugins = useMemo(() => [{
     id: 'crosshair',
     afterDraw: (chart) => {
@@ -157,9 +194,9 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         const valueStr = typeof val === 'number' ? `${val >= 0 ? '+' : ''}${val.toFixed(2)}%` : String(val);
         const vw = ctx.measureText(valueStr).width + 8;
         ctx.fillStyle = prim;
-        ctx.fillRect(rightX - vw, y - 8, vw, 16);
+        ctx.fillRect(leftX, y - 8, vw, 16);
         ctx.fillStyle = bgText;
-        ctx.fillText(valueStr, rightX - vw / 2, y);
+        ctx.fillText(valueStr, leftX + vw / 2, y);
       }
       ctx.restore();
     }
@@ -191,7 +228,7 @@ export default function FundIntradayChart({ series = [], referenceNav }) {
         {displayDate && <span style={{ fontSize: 11 }}>估值日期 {displayDate}</span>}
       </div>
       <div style={{ position: 'relative', height: 100, width: '100%' }}>
-        <Line data={chartData} options={options} plugins={plugins} />
+        <Line ref={chartRef} data={chartData} options={options} plugins={plugins} />
       </div>
     </div>
   );

app/components/FundTrendChart.jsx

@@ -35,6 +35,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const chartRef = useRef(null);
+  const hoverTimeoutRef = useRef(null);
 
   useEffect(() => {
     // If collapsed, don't fetch data unless we have no data yet
@@ -198,7 +199,7 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         },
         y: {
           display: true,
-          position: 'right',
+          position: 'left',
           grid: {
             color: '#1f2937',
             drawBorder: false,
@@ -217,8 +218,42 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
         mode: 'index',
         intersect: false,
       },
-      onHover: (event, chartElement) => {
-        event.native.target.style.cursor = chartElement[0] ? 'crosshair' : 'default';
+      onHover: (event, chartElement, chart) => {
+        const target = event?.native?.target;
+        if (target) {
+          target.style.cursor = chartElement[0] ? 'crosshair' : 'default';
+        }
+
+        const currentChart = chart || chartRef.current;
+        if (!currentChart) return;
+
+        if (hoverTimeoutRef.current) {
+          clearTimeout(hoverTimeoutRef.current);
+          hoverTimeoutRef.current = null;
+        }
+
+        if (chartElement[0]) {
+          hoverTimeoutRef.current = setTimeout(() => {
+            const c = chartRef.current || currentChart;
+            if (!c) return;
+            c.setActiveElements([]);
+            if (c.tooltip) {
+              c.tooltip.setActiveElements([], { x: 0, y: 0 });
+            }
+            c.update();
+            if (target) {
+              target.style.cursor = 'default';
+            }
+          }, 2000);
+        }
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
       }
     };
   }, []);
@@ -360,10 +395,10 @@ export default function FundTrendChart({ code, isExpanded, onToggleExpand, trans
                const valueStr = (typeof value === 'number' ? value.toFixed(2) : value) + '%';
                const valWidth = ctx.measureText(valueStr).width + 8;
                ctx.fillStyle = primaryColor;
-               ctx.fillRect(rightX - valWidth, y - 8, valWidth, 16);
+               ctx.fillRect(leftX, y - 8, valWidth, 16);
                ctx.fillStyle = '#0f172a'; // --background
                ctx.textAlign = 'center';
-               ctx.fillText(valueStr, rightX - valWidth / 2, y);
+               ctx.fillText(valueStr, leftX + valWidth / 2, y);
            }
         }