@quantumwake/terminal-ux-dashboard-components 0.1.28 → 0.1.29

package/dist/index.d.cts

@@ -335,7 +335,7 @@ interface LineSerie {
      *  the min–max spread of what it aggregates. y may be null for an
      *  honest gap (the line breaks instead of bridging). */
     data: {
-        x: string;
+        x: string | Date | number;
         y: number | null;
         lo?: number;
         hi?: number;
@@ -348,8 +348,22 @@ interface LineViewProps {
     /** Pre-shaped Nivo line series bypasses client-side processing. */
     data?: LineSerie[];
     style?: Partial<ChartStyle>;
-}
-declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
+    /** 'point' (default): x values are CATEGORIES, placed at equal spacing
+     *  in encounter order and ticked by sampling every Nth one — right for
+     *  labels, wrong for timestamps (a missing bucket collapses, and the
+     *  ticks land on arbitrary samples). 'time': x values are Dates (or
+     *  epoch ms / ISO strings) on a continuous scale — gaps stretch, ticks
+     *  land on ROUND times (d3's time ticks, capped by maxXTicks), and the
+     *  series need not share buckets. */
+    xScale?: 'point' | 'time';
+    /** Time axis tick + tooltip formatter. Default: HH:MM:SS, local, 24h. */
+    xFormat?: (x: Date) => string;
+    /** Time axis: pin the visible domain — a live window keeps a steady
+     *  width instead of re-fitting to whatever samples exist. Default: fit
+     *  the data. */
+    xDomain?: [Date, Date];
+}
+declare function LineView({ records, xColumn, yColumn, data: presetData, style, xScale, xFormat, xDomain }: LineViewProps): react.JSX.Element;
 
 interface SparklineViewProps {
     /** The series, oldest first. */

package/dist/index.d.ts

@@ -335,7 +335,7 @@ interface LineSerie {
      *  the min–max spread of what it aggregates. y may be null for an
      *  honest gap (the line breaks instead of bridging). */
     data: {
-        x: string;
+        x: string | Date | number;
         y: number | null;
         lo?: number;
         hi?: number;
@@ -348,8 +348,22 @@ interface LineViewProps {
     /** Pre-shaped Nivo line series bypasses client-side processing. */
     data?: LineSerie[];
     style?: Partial<ChartStyle>;
-}
-declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
+    /** 'point' (default): x values are CATEGORIES, placed at equal spacing
+     *  in encounter order and ticked by sampling every Nth one — right for
+     *  labels, wrong for timestamps (a missing bucket collapses, and the
+     *  ticks land on arbitrary samples). 'time': x values are Dates (or
+     *  epoch ms / ISO strings) on a continuous scale — gaps stretch, ticks
+     *  land on ROUND times (d3's time ticks, capped by maxXTicks), and the
+     *  series need not share buckets. */
+    xScale?: 'point' | 'time';
+    /** Time axis tick + tooltip formatter. Default: HH:MM:SS, local, 24h. */
+    xFormat?: (x: Date) => string;
+    /** Time axis: pin the visible domain — a live window keeps a steady
+     *  width instead of re-fitting to whatever samples exist. Default: fit
+     *  the data. */
+    xDomain?: [Date, Date];
+}
+declare function LineView({ records, xColumn, yColumn, data: presetData, style, xScale, xFormat, xDomain }: LineViewProps): react.JSX.Element;
 
 interface SparklineViewProps {
     /** The series, oldest first. */

package/dist/index.js

@@ -648,7 +648,11 @@ function PieView({ records, groupColumn, data: presetData, style }) {
     }
   ) });
 }
-function LineView({ records, xColumn, yColumn, data: presetData, style }) {
+var fmtClock = (d) => d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hourCycle: "h23" });
+var toDate = (x) => x instanceof Date ? x : new Date(x);
+function LineView({ records, xColumn, yColumn, data: presetData, style, xScale = "point", xFormat, xDomain }) {
+  const timed = xScale === "time";
+  const clock = xFormat ?? fmtClock;
   const computed = useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -661,7 +665,11 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       data: sorted.map((r) => ({ x: String(r[xColumn]), y: Number(r[yColumn]) || 0 }))
     }];
   }, [records, xColumn, yColumn, presetData]);
-  const data = presetData || computed;
+  const shaped = presetData || computed;
+  const data = useMemo(
+    () => timed ? shaped.map((serie) => ({ ...serie, data: serie.data.map((d) => ({ ...d, x: toDate(d.x) })) })) : shaped,
+    [shaped, timed]
+  );
   const s = withStyleDefaults(style);
   const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
   const colorById = new Map(data.map((serie, i) => [
@@ -669,7 +677,14 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     serie.color ?? (s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)")
   ]));
   const longest = data.reduce((a, b) => b.data.length > a.data.length ? b : a, { id: "", data: [] });
-  const tickValues = thinTicks(longest.data.map((d) => d.x), s.maxXTicks);
+  const tickValues = timed ? void 0 : thinTicks(longest.data.map((d) => d.x), s.maxXTicks);
+  const axisBottom = (() => {
+    const base = makeAxis(style, "x", xColumn);
+    if (!timed) return { ...base, ...tickValues ? { tickValues } : {} };
+    delete base.renderTick;
+    return { ...base, tickRotation: s.xTickRotation, format: clock, ...s.maxXTicks > 0 ? { tickValues: s.maxXTicks } : {} };
+  })();
+  const nivoXScale = timed ? { type: "time", format: "native", precision: "millisecond", useUTC: false, min: xDomain?.[0] ?? "auto", max: xDomain?.[1] ?? "auto" } : { type: "point" };
   let yScale = { type: "linear", min: "auto", max: "auto" };
   if (s.yFromZero) {
     const dataMax = Math.max(0, ...data.flatMap((serie) => serie.data.map((d) => Math.max(d.y ?? 0, d.hi ?? d.y ?? 0))));
@@ -700,7 +715,8 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     {
       data,
       margin,
-      xScale: { type: "point" },
+      xScale: nivoXScale,
+      xFormat: timed ? (v) => clock(v) : void 0,
       yScale,
       curve: "monotoneX",
       enableArea: s.areaOpacity > 0,
@@ -711,7 +727,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: { ...makeAxis(style, "x", xColumn), ...tickValues ? { tickValues } : {} },
+      axisBottom,
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
       layers: ["grid", "markers", "axes", "areas", bandsLayer, linesLayer, "crosshair", "slices", "mesh", "legends"],