revised App_New

src/App_New.tsx

@@ -74,6 +74,10 @@ export default function App() {
   const [confirming, setConfirming] = useState(false);
   const [finalSaved, setFinalSaved] = useState(false);
 
+  // 方案A：分时视图切换
+  const [intradayMode, setIntradayMode] = useState(false);
+  const currentDayIdx = Math.min(windowLen - 1, dates.length - 1);
+
   useEffect(() => {
     if (Object.keys(rawData).length === 0) {
       const example = generateFakeJSON();
@@ -92,6 +96,7 @@ export default function App() {
 
   const isFinal = windowLen >= MAX_DAYS || selections.length >= maxSteps;
 
+  // 日线数据（归一到第0天）
   const windowData = useMemo(() => {
     if (!dates.length || windowLen < 2) return [] as any[];
     const sliceDates = dates.slice(0, windowLen);
@@ -106,6 +111,41 @@ export default function App() {
     });
   }, [assets, dates, windowLen, rawData]);
 
+  // 分时数据：展示“当前窗口最后一天”的分钟级走势（当日内归一）
+  const intradayData = useMemo(() => {
+    if (!dates.length || currentDayIdx < 0) return [] as any[];
+
+    // 当日各资产的分钟序列长度最大值
+    const maxBars = assets.reduce((m, a) => {
+      const arr = rawData[a]?.[currentDayIdx]?.close ?? [];
+      return Math.max(m, arr.length);
+    }, 0);
+
+    // 当日内归一：每个资产以当日首笔为1
+    const dayFirstPrice: Record<string, number> = {};
+    assets.forEach(a => {
+      const arr = rawData[a]?.[currentDayIdx]?.close ?? [];
+      dayFirstPrice[a] = arr.length ? arr[0] : 1;
+    });
+
+    const rows: any[] = [];
+    for (let i = 0; i < maxBars; i++) {
+      const row: Record<string, any> = { idx: i + 1 };
+      assets.forEach(a => {
+        const arr = rawData[a]?.[currentDayIdx]?.close ?? [];
+        const val = arr[i];
+        if (typeof val === "number") {
+          const base = dayFirstPrice[a] || 1;
+          row[a] = base ? val / base : null;
+        } else {
+          row[a] = null; // 该分钟无数据则断线
+        }
+      });
+      rows.push(row);
+    }
+    return rows;
+  }, [assets, rawData, currentDayIdx, dates.length]);
+
   function realizedNextDayReturn(asset: string) {
     const t = windowLen - 1;
     if (t + 1 >= dates.length) return null as any;
@@ -135,6 +175,7 @@ export default function App() {
     setStep(1);
     setWindowLen(START_DAY);
     setMessage("Session reset.");
+    setIntradayMode(false);
     try { localStorage.removeItem("asset_experiment_selections"); } catch {}
   }
 
@@ -191,6 +232,7 @@ export default function App() {
         setWindowLen(START_DAY);
         setSelections([]);
         setSelectedAsset(null);
+        setIntradayMode(false);
         setMessage(`Loaded file: ${keys.length} assets, ${firstArr.length} days.`);
         try { localStorage.removeItem("asset_experiment_selections"); } catch {}
       } catch (err: any) {
@@ -339,11 +381,19 @@ export default function App() {
           <input type="file" accept="application/json" onChange={onFile} className="text-sm" />
           <button onClick={loadExample} className="text-sm px-3 py-1.5 rounded-xl bg-blue-100 text-blue-800 hover:bg-blue-200">Load Example</button>
           <button onClick={resetSession} className="text-sm px-3 py-1.5 rounded-xl bg-gray-200 hover:bg-gray-300">Reset</button>
+          <button
+            onClick={() => setIntradayMode(m => !m)}
+            className="text-sm px-3 py-1.5 rounded-xl bg-indigo-100 text-indigo-800 hover:bg-indigo-200"
+            title="Toggle intraday view for the last visible day"
+          >
+            {intradayMode ? "View Daily" : "View Intraday (current day)"}
+          </button>
           <button onClick={exportLog} className="text-sm px-3 py-1.5 rounded-xl bg-gray-900 text-white hover:bg-black">Export Log</button>
         </div>
       </div>
 
       <div className="bg-white p-4 rounded-2xl shadow">
+        {/* 快捷选择器 */}
         <div className="flex flex-wrap items-center gap-2 mb-3">
           {assets.map((a, i) => (
             <button
@@ -360,35 +410,65 @@ export default function App() {
             <span className="text-xs text-gray-500 ml-1">Hotkeys: 1 to {assets.length}, Enter to confirm</span>
           )}
         </div>
+
+        {/* 图表：日线 / 分时切换 */}
         <div className="h-80">
           <ResponsiveContainer width="100%" height="100%">
-            <LineChart data={windowData}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="date" tick={{ fontSize: 10 }} />
-              <YAxis domain={["auto", "auto"]} tick={{ fontSize: 10 }} />
-              <Tooltip contentStyle={{ fontSize: 12 }} />
-              <Legend onClick={(o: any) => setSelectedAsset(o.value)} wrapperStyle={{ cursor: "pointer" }} />
-              {assets.map((a, i) => (
-                <Line
-                  key={a}
-                  type="monotone"
-                  dataKey={a}
-                  strokeWidth={selectedAsset === a ? 5 : hoverAsset === a ? 4 : 2.5}
-                  strokeOpacity={selectedAsset && selectedAsset !== a ? 0.3 : 1}
-                  dot={false}
-                  isAnimationActive={false}
-                  stroke={`hsl(${(360 / assets.length) * i},70%,50%)`}
-                  onMouseEnter={() => setHoverAsset(a)}
-                  onMouseLeave={() => setHoverAsset(null)}
-                  onClick={() => setSelectedAsset((p) => (p === a ? null : a))}
-                />
-              ))}
-            </LineChart>
+            {intradayMode ? (
+              <LineChart data={intradayData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="idx" tick={{ fontSize: 10 }} />
+                <YAxis domain={["auto", "auto"]} tick={{ fontSize: 10 }} />
+                <Tooltip contentStyle={{ fontSize: 12 }} />
+                <Legend onClick={(o: any) => setSelectedAsset(o.value)} wrapperStyle={{ cursor: "pointer" }} />
+                {assets.map((a, i) => (
+                  <Line
+                    key={a}
+                    type="monotone"
+                    dataKey={a}
+                    strokeWidth={selectedAsset === a ? 5 : hoverAsset === a ? 4 : 2.5}
+                    strokeOpacity={selectedAsset && selectedAsset !== a ? 0.3 : 1}
+                    dot={false}
+                    isAnimationActive={false}
+                    stroke={`hsl(${(360 / assets.length) * i},70%,50%)`}
+                    onMouseEnter={() => setHoverAsset(a)}
+                    onMouseLeave={() => setHoverAsset(null)}
+                    onClick={() => setSelectedAsset((p) => (p === a ? null : a))}
+                    connectNulls={false}
+                  />
+                ))}
+              </LineChart>
+            ) : (
+              <LineChart data={windowData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="date" tick={{ fontSize: 10 }} />
+                <YAxis domain={["auto", "auto"]} tick={{ fontSize: 10 }} />
+                <Tooltip contentStyle={{ fontSize: 12 }} />
+                <Legend onClick={(o: any) => setSelectedAsset(o.value)} wrapperStyle={{ cursor: "pointer" }} />
+                {assets.map((a, i) => (
+                  <Line
+                    key={a}
+                    type="monotone"
+                    dataKey={a}
+                    strokeWidth={selectedAsset === a ? 5 : hoverAsset === a ? 4 : 2.5}
+                    strokeOpacity={selectedAsset && selectedAsset !== a ? 0.3 : 1}
+                    dot={false}
+                    isAnimationActive={false}
+                    stroke={`hsl(${(360 / assets.length) * i},70%,50%)`}
+                    onMouseEnter={() => setHoverAsset(a)}
+                    onMouseLeave={() => setHoverAsset(null)}
+                    onClick={() => setSelectedAsset((p) => (p === a ? null : a))}
+                  />
+                ))}
+              </LineChart>
+            )}
           </ResponsiveContainer>
         </div>
 
         <div className="flex justify-between items-center mt-3">
-          <div className="text-sm text-gray-600">Selected: {selectedAsset ?? "(none)"} {message && <span className="ml-2 text-gray-500">{message}</span>}</div>
+          <div className="text-sm text-gray-600">
+            Selected: {selectedAsset ?? "(none)"} {message && <span className="ml-2 text-gray-500">{message}</span>}
+          </div>
           <button
             onClick={confirmSelection}
             disabled={!selectedAsset || windowLen >= MAX_DAYS}