update App_New

src/App_New.tsx

@@ -69,7 +69,6 @@ function generateFakeJSON(maxLen = 500): DataDict {
         intraday.push(Number(p.toFixed(2)));
       }
       series.push({ date: dates[i], close: intraday });
-      // update end-of-day anchor for next day open drift
       const drift = mu + (sigma / Math.sqrt(252)) * ((Math.random() - 0.5) * 2.0);
       price = intraday[intraday.length - 1] * (1 + drift);
     }
@@ -315,83 +314,62 @@ export default function App() {
     return rows;
   }, [assets, rawData, dates.length, activeIntradayIdx]);
 
-  /* ---------- Multi-day intraday with hard carry-forward ---------- */
+  // Multi-day intraday with robust carry-forward
   const { multiRows, dayStarts } = useMemo(() => {
     const rows: any[] = [];
     const starts: { x: number; date: string }[] = [];
     if (!dates.length || windowLen < 1) return { multiRows: rows, dayStarts: starts };
 
-    // last seen price across minutes & days
-    const lastSeen: Record<string, number | null> = {};
-    // cumulative index per asset (for normalized mode)
+    // previous minute price & cumulative index across days
+    const prevPrice: Record<string, number | null> = {};
     const cumIdx: Record<string, number> = {};
-    assets.forEach(a => { lastSeen[a] = null; cumIdx[a] = 1; });
+    assets.forEach(a => { prevPrice[a] = null; cumIdx[a] = 1; });
+
+    // helper: forward-fill within the day if possible; otherwise use prevPrice
+    function resolvePriceForMinute(arr: number[] | undefined, i: number, a: string): number | null {
+      if (arr && typeof arr[i] === "number") return arr[i]!;
+      if (prevPrice[a] != null) return prevPrice[a] as number;
+      // look ahead within the same day to find the first future tick to backfill start-of-day
+      if (arr && arr.length) {
+        for (let j = i + 1; j < arr.length; j++) {
+          if (typeof arr[j] === "number") return arr[j]!;
+        }
+      }
+      return null;
+    }
 
     let x = 0;
-    const maxD = Math.min(windowLen, dates.length);
+    for (let d = 0; d < Math.min(windowLen, dates.length); d++) {
+      const startX = x + 1;
+      starts.push({ x: startX, date: dates[d] });
 
-    for (let d = 0; d < maxD; d++) {
-      const dayLen = assets.reduce((m, a) => Math.max(m, rawData[a]?.[d]?.close?.length ?? 0), 0);
-      if (dayLen === 0) continue;
-
-      // first valid price of the day per asset (fallback for day start)
-      const firstOfDay: Record<string, number | null> = {};
-      assets.forEach(a => {
-        const arr = rawData[a]?.[d]?.close ?? [];
-        let v: number | null = null;
-        for (let j = 0; j < arr.length; j++) {
-          if (typeof arr[j] === "number" && Number.isFinite(arr[j])) { v = arr[j]!; break; }
-        }
-        firstOfDay[a] = v;
-      });
-
-      const dayStartX = x + 1;
+      const dayLenRaw = assets.reduce((m, a) => Math.max(m, rawData[a]?.[d]?.close?.length ?? 0), 0);
+      const dayLen = Math.max(1, dayLenRaw); // ensure at least one row per day
 
       for (let i = 0; i < dayLen; i++) {
         const row: Record<string, any> = { x: x + 1, day: dates[d], minute: i + 1 };
-        let anyValue = false;
 
         assets.forEach(a => {
-          const arr = rawData[a]?.[d]?.close ?? [];
-          let v: number | null = null;
-
-          // minute value
-          if (typeof arr[i] === "number" && Number.isFinite(arr[i])) {
-            v = arr[i]!;
-          } else {
-            // carry-forward from last seen
-            if (lastSeen[a] != null) v = lastSeen[a] as number;
-            else if (firstOfDay[a] != null) v = firstOfDay[a] as number; // fallback to first valid of the day
-          }
-
-          if (v != null) {
-            if (multiNormalize) {
-              if (lastSeen[a] != null && v !== lastSeen[a]) {
-                const r = v / (lastSeen[a] as number);
-                if (Number.isFinite(r) && r > 0) cumIdx[a] *= r;
-              }
-              row[a] = cumIdx[a];
-            } else {
-              row[a] = v;
+          const arr = rawData[a]?.[d]?.close;
+          const resolved = resolvePriceForMinute(arr, i, a);
+
+          if (resolved != null) {
+            // update cumIdx only when a "new real tick" occurs
+            if (prevPrice[a] != null && resolved !== prevPrice[a]) {
+              const r = resolved / (prevPrice[a] as number);
+              if (Number.isFinite(r) && r > 0) cumIdx[a] *= r;
             }
-            lastSeen[a] = v;
-            anyValue = true;
+            row[a] = multiNormalize ? cumIdx[a] : resolved;
+            prevPrice[a] = resolved;
           } else {
             row[a] = null;
           }
         });
 
-        if (anyValue) {
-          rows.push(row);
-          x++;
-        }
-      }
-
-      if (x >= dayStartX) {
-        starts.push({ x: dayStartX, date: dates[d] });
+        rows.push(row);
+        x++;
       }
     }
-
     return { multiRows: rows, dayStarts: starts };
   }, [assets, rawData, dates, windowLen, multiNormalize]);
 
@@ -557,6 +535,20 @@ export default function App() {
     </div>
   );
 
+  // ------- helper to give Y-axis safe padding even when dataMin == dataMax -------
+  const multiYAxisDomain: any = [
+    (min: number) => {
+      if (!Number.isFinite(min)) return "auto";
+      const pad = Math.abs(min) * 0.005 || 0.01;
+      return min - pad;
+    },
+    (max: number) => {
+      if (!Number.isFinite(max)) return "auto";
+      const pad = Math.abs(max) * 0.005 || 0.01;
+      return max + pad;
+    }
+  ];
+
   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">
@@ -647,8 +639,8 @@ export default function App() {
                     tick={{ fontSize: 10 }}
                     label={{ value: "Minute (concatenated days)", position: "insideBottomRight", offset: -2, fontSize: 10 }}
                   />
-                  {/* IMPORTANT: keep auto to avoid empty scale at early minutes */}
-                  <YAxis domain={["auto", "auto"]} tick={{ fontSize: 10 }} />
+                  {/* FIX 1: robust Y domain with padding so flat lines are visible */}
+                  <YAxis domain={multiYAxisDomain} tick={{ fontSize: 10 }} allowDataOverflow />
                   <Tooltip
                     contentStyle={{ fontSize: 12 }}
                     labelFormatter={(_, payload: any) => {
@@ -680,7 +672,8 @@ export default function App() {
                       onMouseEnter={() => setHoverAsset(a)}
                       onMouseLeave={() => setHoverAsset(null)}
                       onClick={() => setSelectedAsset((p) => (p === a ? null : a))}
-                      connectNulls={true}   // KEY: draw across sparse nulls
+                      /* FIX 2: connect null gaps so lines render across sparse minutes */
+                      connectNulls={true}
                     />
                   ))}
                 </LineChart>