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

package/dist/index.d.cts

@@ -325,12 +325,18 @@ declare function PieView({ records, groupColumn, data: presetData, style }: PieV
 
 interface LineSerie {
     id: string;
+    /** Explicit serie color — STABLE identity coloring: the host assigns a
+     *  color to the entity, so toggling other series never repaints this
+     *  one (index-based palette assignment reshuffles on every selection
+     *  change). Absent ⇒ the fixed-order palette by index. */
+    color?: string;
     /** lo/hi (optional, per point) draw a soft envelope band behind the
      *  line — the reading for "this line summarizes several": the band is
-     *  the min–max spread of what it aggregates. */
+     *  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;
-        y: number;
+        x: string | Date | number;
+        y: number | null;
         lo?: number;
         hi?: number;
     }[];
@@ -342,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

@@ -325,12 +325,18 @@ declare function PieView({ records, groupColumn, data: presetData, style }: PieV
 
 interface LineSerie {
     id: string;
+    /** Explicit serie color — STABLE identity coloring: the host assigns a
+     *  color to the entity, so toggling other series never repaints this
+     *  one (index-based palette assignment reshuffles on every selection
+     *  change). Absent ⇒ the fixed-order palette by index. */
+    color?: string;
     /** lo/hi (optional, per point) draw a soft envelope band behind the
      *  line — the reading for "this line summarizes several": the band is
-     *  the min–max spread of what it aggregates. */
+     *  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;
-        y: number;
+        x: string | Date | number;
+        y: number | null;
         lo?: number;
         hi?: number;
     }[];
@@ -342,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,18 +665,29 @@ 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) => [
     serie.id,
-    s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)"
+    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, d.hi ?? d.y))));
+    const dataMax = Math.max(0, ...data.flatMap((serie) => serie.data.map((d) => Math.max(d.y ?? 0, d.hi ?? d.y ?? 0))));
     yScale = { type: "linear", min: 0, max: niceCeil(dataMax) };
   }
   const bandedIds = new Set(data.filter((serie) => serie.data.some((d) => d.lo != null)).map((serie) => serie.id));
@@ -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"],