Fix tulip chart collapsing daily data points to monthly positions

The XAxis was using a formatted time string as the data key, so all
daily points within a month shared the same "Oct 25" label and
collapsed to one position. Now the raw ISO date string is the data
key (giving each point a unique X position), with formatting only
applied to tick labels and tooltips. Tooltip shows full date for
clarity when hovering individual days.

Moves formatTime to types.ts so both App and TulipCard can use it.

Author: gausie

packages/oaf/src/server/apps/tulips/types.ts

@@ -2,6 +2,35 @@ import type { Duration } from "date-fns";
 
 export type Range = "1D" | "1W" | "1M" | "YTD" | "1Y" | "10Y";
 
+export function formatTime(dateStr: string, range: Range): string {
+  const date = new Date(dateStr);
+  switch (range) {
+    case "1D":
+      return date.toLocaleTimeString(undefined, {
+        hour: "numeric",
+        minute: "2-digit",
+      });
+    case "1W":
+      return date.toLocaleDateString(undefined, {
+        weekday: "short",
+        hour: "numeric",
+      });
+    case "1M":
+    case "YTD":
+      return date.toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+      });
+    case "1Y":
+    case "10Y":
+      return date.toLocaleDateString(undefined, {
+        month: "short",
+        year: "2-digit",
+      });
+  }
+}
+
 export const RANGES: Record<
   Range,
   { duration: Duration | "YTD"; bucket: "hour" | "day" | null }

packages/oaf/src/server/apps/tulips/web/App.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { RANGES, type Range } from "../types.js";
+import { formatTime, RANGES, type Range } from "../types.js";
 import TulipCard from "./components/TulipCard.js";
 
 type OHLC = { open: number; high: number; low: number; close: number };
@@ -26,35 +26,6 @@ function toClose(v: ColorValue | null): number | null {
 
 const RANGE_KEYS = Object.keys(RANGES) as Range[];
 
-function formatTime(dateStr: string, range: Range): string {
-  const date = new Date(dateStr);
-  switch (range) {
-    case "1D":
-      return date.toLocaleTimeString(undefined, {
-        hour: "numeric",
-        minute: "2-digit",
-      });
-    case "1W":
-      return date.toLocaleDateString(undefined, {
-        weekday: "short",
-        hour: "numeric",
-      });
-    case "1M":
-    case "YTD":
-      return date.toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-        hour: "numeric",
-      });
-    case "1Y":
-    case "10Y":
-      return date.toLocaleDateString(undefined, {
-        month: "short",
-        year: "2-digit",
-      });
-  }
-}
-
 const tulips = [
   {
     name: "Red Tulips",
@@ -142,13 +113,14 @@ export default function App() {
               dataKey={t.key}
               current={toClose(current?.[t.key] ?? 0)}
               first={toClose(first?.[t.key] ?? null)}
+              range={range}
               history={prices.map((p) => {
                 const v = p[t.key];
                 if (!isOHLC(v)) {
-                  return { time: formatTime(p.createdAt, range), value: v };
+                  return { time: p.createdAt, value: v };
                 }
                 return {
-                  time: formatTime(p.createdAt, range),
+                  time: p.createdAt,
                   value: v.close,
                   open: v.open,
                   high: v.high,

packages/oaf/src/server/apps/tulips/web/components/TulipCard.tsx

@@ -8,6 +8,8 @@ import {
   type TooltipContentProps,
 } from "recharts";
 
+import { formatTime, type Range } from "../../types.js";
+
 const numberFormat = new Intl.NumberFormat();
 
 type RawEntry = { time: string; value: number };
@@ -31,6 +33,7 @@ export default function TulipCard({
   first,
   history,
   dataKey,
+  range,
 }: {
   name: string;
   color: string;
@@ -39,6 +42,7 @@ export default function TulipCard({
   first: number | null;
   history: HistoryEntry[];
   dataKey: string;
+  range: Range;
 }) {
   const bucketed = history.some(isOHLCEntry);
   const [high, low] = history.reduce<[number | null, number | null]>(
@@ -113,6 +117,7 @@ export default function TulipCard({
               axisLine={{ stroke: "#1a1a3e" }}
               interval="preserveStartEnd"
               minTickGap={40}
+              tickFormatter={(v: string) => formatTime(v, range)}
             />
             <YAxis
               domain={[
@@ -137,7 +142,18 @@ export default function TulipCard({
                 const entry: HistoryEntry = payload[0].payload;
                 return (
                   <div className="tulip-tooltip">
-                    <p className="tulip-tooltip-label">{entry.time}</p>
+                    <p className="tulip-tooltip-label">
+                      {new Date(entry.time).toLocaleDateString(undefined, {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                        ...(range === "1D" || range === "1W"
+                          ? { hour: "numeric", minute: "2-digit" }
+                          : range === "1M" || range === "YTD"
+                            ? { hour: "numeric" }
+                            : {}),
+                      })}
+                    </p>
                     {isOHLCEntry(entry) ? (
                       <p className="tulip-tooltip-value" style={{ color }}>
                         O: {numberFormat.format(entry.open)} H:{" "}