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

package/dist/index.cjs

@@ -656,7 +656,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 = react.useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -669,7 +673,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 = react.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) => [
@@ -677,7 +685,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))));
@@ -708,7 +723,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,
@@ -719,7 +735,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"],