add a normalized function

src/App_New.tsx

@@ -12,7 +12,7 @@ import {
 } from "./api";
 
 type SeriesPoint = { date: string; close: number[] };
-type ViewMode = "daily" | "intraday"; // 移除 multi
+type ViewMode = "daily" | "intraday";
 
 const START_DAY = 7;
 
@@ -59,7 +59,6 @@ function generateFakeJSON(maxLen = 500): DataDict {
     const sigma = 0.15 + Math.random() * 0.35;
     const series: SeriesPoint[] = [];
     for (let i = 0; i < dates.length; i++) {
-      // Fake minute series (varying length)
       const mins = 200 + Math.floor(Math.random() * 100);
       const intraday: number[] = [];
       let p = price;
@@ -104,6 +103,9 @@ export default function App() {
   const [viewMode, setViewMode] = useState<ViewMode>("daily");
   const [intradayDayIdx, setIntradayDayIdx] = useState<number | null>(null);
 
+  // NEW: global normalize toggle
+  const [normalize, setNormalize] = useState<boolean>(true);
+
   /* ---------- localStorage keys ---------- */
   const LS_DATASET_KEY = "annot_dataset_meta";
   const LS_DATA_PREFIX = (id: string) => `annot_dataset_${id}`;
@@ -274,7 +276,7 @@ export default function App() {
   /* ---------- computed ---------- */
   const isFinal = windowLen >= maxDays || selections.length >= maxSteps;
 
-  // Daily (normalized to day 0)
+  // Daily
   const windowData = useMemo(() => {
     if (!dates.length || windowLen < 2) return [] as any[];
     const sliceDates = dates.slice(0, windowLen);
@@ -282,14 +284,18 @@ export default function App() {
       const row: Record<string, any> = { date };
       assets.forEach((a) => {
         const base = rawData[a]?.[0] ? latestClose(rawData[a][0]) : 1;
-        const val = rawData[a]?.[idx] ? latestClose(rawData[a][idx]) : base;
-        row[a] = base ? val / base : 1;
+        const val = rawData[a]?.[idx] ? latestClose(rawData[a][idx]) : (normalize ? base : null);
+        if (normalize) {
+          row[a] = base ? (val as number) / base : 1; // normalize to day 0
+        } else {
+          row[a] = typeof val === "number" ? val : null; // raw price
+        }
       });
       return row;
     });
-  }, [assets, dates, windowLen, rawData]);
+  }, [assets, dates, windowLen, rawData, normalize]);
 
-  // Intraday (single day, normalized to first tick of the day)
+  // Intraday (single day)
   const visibleDates = useMemo(() => dates.slice(0, Math.max(0, windowLen)), [dates, windowLen]);
   const activeIntradayIdx = intradayDayIdx ?? Math.min(windowLen - 1, dates.length - 1);
   const intradayData = useMemo(() => {
@@ -306,12 +312,16 @@ export default function App() {
       assets.forEach(a => {
         const arr = rawData[a]?.[activeIntradayIdx]?.close ?? [];
         const val = arr[i];
-        row[a] = typeof val === "number" ? (dayFirstPrice[a] ? val / dayFirstPrice[a] : null) : null;
+        if (normalize) {
+          row[a] = typeof val === "number" ? (dayFirstPrice[a] ? val / dayFirstPrice[a] : null) : null; // normalized to first tick
+        } else {
+          row[a] = typeof val === "number" ? val : null; // raw price
+        }
       });
       rows.push(row);
     }
     return rows;
-  }, [assets, rawData, dates.length, activeIntradayIdx]);
+  }, [assets, rawData, dates.length, activeIntradayIdx, normalize]);
 
   function realizedNextDayReturn(asset: string) {
     const t = windowLen - 1;
@@ -440,7 +450,7 @@ export default function App() {
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
       const tag = (e.target && (e.target as HTMLElement).tagName) || "";
-      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      if (tag === "INPUT" || "TEXTAREA") return;
       const idx = parseInt((e as any).key, 10) - 1;
       if (!Number.isNaN(idx) && idx >= 0 && idx < assets.length) setSelectedAsset(assets[idx]);
       if ((e as any).key === "Enter" && Boolean(selectedAsset) && windowLen < maxDays) confirmSelection();
@@ -475,12 +485,20 @@ export default function App() {
     </div>
   );
 
+  // Tooltip 格式化：normalized 用“×”，raw 用价格两位小数
+  function tooltipFormatter(value: any, name: any) {
+    if (normalize) {
+      return [Number.isFinite(value) ? `${Number(value).toFixed(4)}×` : value, aliasMap[name] || name];
+    }
+    return [Number.isFinite(value) ? Number(value).toFixed(2) : value, aliasMap[name] || name];
+  }
+
   return (
     <div className="p-6 bg-gray-50 min-h-screen flex flex-col gap-6">
       <div className="flex flex-wrap justify-between items-center gap-3">
         <div className="flex items-center gap-2">
           <h1 className="text-xl font-semibold">Asset Choice Simulation</h1>
-          <span className="text-[10px] ml-2 px-1.5 py-0.5 rounded bg-amber-200 text-amber-900">BUILD_TAG: 2025-10-28</span>
+          <span className="text-[10px] ml-2 px-1.5 py-0.5 rounded bg-amber-200 text-amber-900">BUILD_TAG: 2025-10-29</span>
           <span className="text-xs text-gray-500">Dataset: {datasetName || datasetId}</span>
           <span className="text-xs text-gray-500">User: {userId.slice(0,8)}…</span>
           <span className="text-xs text-gray-500">Day {windowLen} / {maxDays}</span>
@@ -495,6 +513,15 @@ export default function App() {
             <button className={`text-xs px-3 py-1.5 ${viewMode==="intraday" ? "bg-gray-900 text-white" : "bg-white text-gray-700 hover:bg-gray-50"}`} onClick={()=>setViewMode("intraday")}>Intraday (1 day)</button>
           </div>
 
+          {/* NEW: Normalize/Raw toggle */}
+          <button
+            className="text-xs px-3 py-1.5 rounded-xl border border-gray-200 hover:bg-gray-50"
+            onClick={() => setNormalize(v => !v)}
+            title="Toggle normalized ratio vs raw price"
+          >
+            {normalize ? "Normalized" : "Raw Price"}
+          </button>
+
           <button onClick={exportLog} className="text-sm px-3 py-1.5 rounded-xl bg-gray-900 text-white hover:bg-black">Export My Log</button>
         </div>
       </div>
@@ -513,6 +540,9 @@ export default function App() {
             </button>
           ))}
           {assets.length>0 && <span className="text-xs text-gray-500 ml-1">Hotkeys: 1..{assets.length}, Enter confirm</span>}
+          <span className="text-[10px] px-2 py-0.5 rounded bg-black/60 text-white">
+            {normalize ? "Viewing: Normalized (×)" : "Viewing: Raw Price"}
+          </span>
         </div>
 
         <div className="h-80 relative">
@@ -522,7 +552,7 @@ export default function App() {
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="idx" tick={{ fontSize: 10 }} />
                 <YAxis domain={["auto", "auto"]} tick={{ fontSize: 10 }} />
-                <Tooltip contentStyle={{ fontSize: 12 }} formatter={(v: any, n: any) => [v, aliasMap[n] || n]} />
+                <Tooltip contentStyle={{ fontSize: 12 }} formatter={tooltipFormatter as any} />
                 <Legend onClick={(o: any) => setSelectedAsset(o.value)} wrapperStyle={{ cursor: "pointer" }} formatter={(v: any) => aliasMap[v] || v} />
                 {assets.map((a, i) => (
                   <Line
@@ -547,7 +577,7 @@ export default function App() {
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="date" tick={{ fontSize: 10 }} />
                 <YAxis domain={["auto", "auto"]} tick={{ fontSize: 10 }} />
-                <Tooltip contentStyle={{ fontSize: 12 }} formatter={(v: any, n: any) => [v, aliasMap[n] || n]} />
+                <Tooltip contentStyle={{ fontSize: 12 }} formatter={tooltipFormatter as any} />
                 <Legend onClick={(o: any) => setSelectedAsset(o.value)} wrapperStyle={{ cursor: "pointer" }} formatter={(v: any) => aliasMap[v] || v} />
                 {assets.map((a, i) => (
                   <Line