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

package/dist/index.d.cts

@@ -248,6 +248,14 @@ type AggFn = 'count' | 'distinct' | 'sum' | 'avg' | 'min' | 'max' | 'median';
 declare const groupBy: (records: Row[], column: string) => Record<string, Row[]>;
 declare const aggregate: (records: Row[], column: string, fn: AggFn | string) => number;
 
+/**
+ * Formats a byte count as a human-readable string: plain bytes under 1024
+ * ("999 B"), then KB/MB/GB/TB with one decimal place ("1.0 KB", "1.5 MB",
+ * "2.0 GB"), capped at TB (no PB+). `perSecond` appends "/s" — for
+ * throughput series (KB/s, MB/s, GB/s).
+ */
+declare function formatBytes(value: number, perSecond?: boolean): string;
+
 type HeatStat = 'count' | 'sum' | 'avg' | 'min' | 'max' | 'median';
 type ColorScope = 'global' | 'row' | 'column' | 'block';
 type ColorMethod = 'linear' | 'rank';
@@ -306,8 +314,11 @@ interface BarViewProps {
      *  many bars with long names (labels never collide). Default vertical. */
     layout?: 'vertical' | 'horizontal';
     style?: Partial<ChartStyle>;
+    /** Value-axis tick + tooltip + in-bar label formatter (e.g. formatBytes
+     *  for a throughput series). Default: Number(value).toLocaleString(). */
+    yFormat?: (value: number) => string;
 }
-declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style }: BarViewProps): react.JSX.Element;
+declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style, yFormat }: BarViewProps): react.JSX.Element;
 
 interface PieDatum {
     id: string;
@@ -335,7 +346,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 +359,25 @@ 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];
+    /** Y-axis tick + tooltip value formatter (e.g. formatBytes for a
+     *  throughput series). Default: Number(value).toLocaleString(). */
+    yFormat?: (value: number) => string;
+}
+declare function LineView({ records, xColumn, yColumn, data: presetData, style, xScale, xFormat, xDomain, yFormat }: LineViewProps): react.JSX.Element;
 
 interface SparklineViewProps {
     /** The series, oldest first. */
@@ -361,10 +389,15 @@ interface SparklineViewProps {
     /** Show the CURRENT (last) value as a readout over the mark — a trend
      *  shape without its number answers "which way", never "how much". */
     showValue?: boolean;
-    /** Formats the readout (e.g. v => `${v.toFixed(1)} ms`). Default: locale. */
+    /** Formats the readout (e.g. v => `${v.toFixed(1)} ms`). Default: locale.
+     *  Prefer yFormat in new code — kept for existing callers. */
     format?: (v: number) => string;
+    /** Same as `format` — named to match LineView/BarView's yFormat prop
+     *  (e.g. formatBytes for a throughput sparkline). `format` wins if both
+     *  are given. */
+    yFormat?: (v: number) => string;
 }
-declare function SparklineView({ data, height, color, showValue, format }: SparklineViewProps): react.JSX.Element;
+declare function SparklineView({ data, height, color, showValue, format, yFormat }: SparklineViewProps): react.JSX.Element;
 
 interface ScatterSerie {
     id: string;
@@ -661,4 +694,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartMargin, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, SERIES_OVERFLOW_COLOR, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SparklineView, type SparklineViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartMargin, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, SERIES_OVERFLOW_COLOR, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SparklineView, type SparklineViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, formatBytes, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.d.ts

@@ -248,6 +248,14 @@ type AggFn = 'count' | 'distinct' | 'sum' | 'avg' | 'min' | 'max' | 'median';
 declare const groupBy: (records: Row[], column: string) => Record<string, Row[]>;
 declare const aggregate: (records: Row[], column: string, fn: AggFn | string) => number;
 
+/**
+ * Formats a byte count as a human-readable string: plain bytes under 1024
+ * ("999 B"), then KB/MB/GB/TB with one decimal place ("1.0 KB", "1.5 MB",
+ * "2.0 GB"), capped at TB (no PB+). `perSecond` appends "/s" — for
+ * throughput series (KB/s, MB/s, GB/s).
+ */
+declare function formatBytes(value: number, perSecond?: boolean): string;
+
 type HeatStat = 'count' | 'sum' | 'avg' | 'min' | 'max' | 'median';
 type ColorScope = 'global' | 'row' | 'column' | 'block';
 type ColorMethod = 'linear' | 'rank';
@@ -306,8 +314,11 @@ interface BarViewProps {
      *  many bars with long names (labels never collide). Default vertical. */
     layout?: 'vertical' | 'horizontal';
     style?: Partial<ChartStyle>;
+    /** Value-axis tick + tooltip + in-bar label formatter (e.g. formatBytes
+     *  for a throughput series). Default: Number(value).toLocaleString(). */
+    yFormat?: (value: number) => string;
 }
-declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style }: BarViewProps): react.JSX.Element;
+declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style, yFormat }: BarViewProps): react.JSX.Element;
 
 interface PieDatum {
     id: string;
@@ -335,7 +346,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 +359,25 @@ 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];
+    /** Y-axis tick + tooltip value formatter (e.g. formatBytes for a
+     *  throughput series). Default: Number(value).toLocaleString(). */
+    yFormat?: (value: number) => string;
+}
+declare function LineView({ records, xColumn, yColumn, data: presetData, style, xScale, xFormat, xDomain, yFormat }: LineViewProps): react.JSX.Element;
 
 interface SparklineViewProps {
     /** The series, oldest first. */
@@ -361,10 +389,15 @@ interface SparklineViewProps {
     /** Show the CURRENT (last) value as a readout over the mark — a trend
      *  shape without its number answers "which way", never "how much". */
     showValue?: boolean;
-    /** Formats the readout (e.g. v => `${v.toFixed(1)} ms`). Default: locale. */
+    /** Formats the readout (e.g. v => `${v.toFixed(1)} ms`). Default: locale.
+     *  Prefer yFormat in new code — kept for existing callers. */
     format?: (v: number) => string;
+    /** Same as `format` — named to match LineView/BarView's yFormat prop
+     *  (e.g. formatBytes for a throughput sparkline). `format` wins if both
+     *  are given. */
+    yFormat?: (v: number) => string;
 }
-declare function SparklineView({ data, height, color, showValue, format }: SparklineViewProps): react.JSX.Element;
+declare function SparklineView({ data, height, color, showValue, format, yFormat }: SparklineViewProps): react.JSX.Element;
 
 interface ScatterSerie {
     id: string;
@@ -661,4 +694,4 @@ interface DataExplorerProps {
 }
 declare function DataExplorer({ records, columns, states, activeStateId, profile, dashboard, dashboardId, savedDashboards, loading, analyzing, defaultMode, tabs, onSelectState, onRefreshStates, }: DataExplorerProps): react.JSX.Element;
 
-export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartMargin, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, SERIES_OVERFLOW_COLOR, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SparklineView, type SparklineViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
+export { type AggFn, type BarDatum, BarView, type BarViewProps, ChartBuilder, type ChartBuilderColumn, type ChartBuilderProps, type ChartConfig, type ChartField, type ChartFilter, type ChartMargin, type ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, type Dashboard$1 as Dashboard, type DashboardCapabilities, type DashboardContextValue, type DashboardPanel$1 as DashboardPanel, DashboardProvider, type DashboardProviderProps, DashboardRenderer, type DashboardRendererProps, type DashboardTheme, DataExplorer, type DataExplorerProps, HEAT_STATS, type HeatCell, type HeatPlusDatum, type HeatStat, HeatmapPlusView, type HeatmapPlusViewProps, type HeatmapSerie, HeatmapView, type HeatmapViewProps, type InsightConfig, InsightView, type InsightViewProps, LEGEND_ANCHORS, type LegendAnchor, type LegendPosition, type LineSerie, LineView, type LineViewProps, type MetricConfig, MetricView, type MetricViewProps, PanelChart, type PanelChartProps, type PanelInput, type PanelLayout, type PanelRef, type PieDatum, PieView, type PieViewProps, PivotView, type PivotViewProps, type QueryResult, type Row, SERIES_OVERFLOW_COLOR, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SparklineView, type SparklineViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, formatBytes, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.js

@@ -428,6 +428,23 @@ var aggregate = (records, column, fn) => {
       return records.length;
   }
 };
+
+// src/format.ts
+var BYTE_UNITS = ["KB", "MB", "GB", "TB"];
+function formatBytes(value, perSecond = false) {
+  const suffix = perSecond ? "/s" : "";
+  if (!Number.isFinite(value)) return `\u2014 B${suffix}`;
+  const sign = value < 0 ? "-" : "";
+  const abs = Math.abs(value);
+  if (abs < 1024) return `${sign}${Math.round(abs)} B${suffix}`;
+  let scaled = abs / 1024;
+  let unit = 0;
+  while (scaled >= 1024 && unit < BYTE_UNITS.length - 1) {
+    scaled /= 1024;
+    unit++;
+  }
+  return `${sign}${scaled.toFixed(1)} ${BYTE_UNITS[unit]}${suffix}`;
+}
 var HEAT_STATS = ["count", "sum", "avg", "min", "max", "median"];
 var cellKey = (row, col) => `${row}\0${col}`;
 var normalizePartition = (cells, method, vmin, vmax) => {
@@ -500,8 +517,8 @@ function MetricView({ records, config, value: presetValue }) {
 function InsightView({ config }) {
   return /* @__PURE__ */ jsx("div", { className: "h-full p-4 overflow-auto", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-midnight-text-body leading-relaxed whitespace-pre-wrap", children: config.text }) });
 }
-function formatVal(value, s, numeric) {
-  let str = numeric ? Number(value).toLocaleString() : String(value);
+function formatVal(value, s, numeric, custom) {
+  let str = custom ? custom(value) : numeric ? Number(value).toLocaleString() : String(value);
   if (s.tickTruncate > 0 && str.length > s.tickTruncate) str = `${str.slice(0, s.tickTruncate)}\u2026`;
   return str;
 }
@@ -550,7 +567,7 @@ function makeAxis(style, axis, columnName, opts2 = {}) {
   }
   if (s.tickWrap) {
     out.renderTick = (tick) => {
-      const lines = wrapText(formatVal(tick.value, s, numeric), s.tickWrapWidth);
+      const lines = wrapText(formatVal(tick.value, s, numeric, opts2.format), s.tickWrapWidth);
       const firstDy = isX ? "0" : `${-((lines.length - 1) * 0.55)}em`;
       return /* @__PURE__ */ jsxs("g", { transform: `translate(${tick.x},${tick.y})`, children: [
         /* @__PURE__ */ jsx("line", { x2: isX ? 0 : -5, y2: isX ? 5 : 0, style: { stroke: s.textColor, strokeWidth: 1, opacity: 0.3 } }),
@@ -568,13 +585,13 @@ function makeAxis(style, axis, columnName, opts2 = {}) {
     };
   } else {
     out.tickRotation = rotate;
-    out.format = (v) => formatVal(v, s, numeric);
+    out.format = (v) => formatVal(v, s, numeric, opts2.format);
   }
   const maxTicks = isX ? s.maxXTicks : s.maxYTicks;
   if (numeric && maxTicks > 0) out.tickValues = maxTicks;
   return out;
 }
-function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, layout = "vertical", style }) {
+function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, layout = "vertical", style, yFormat }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
     const groups = groupBy(records, groupColumn);
@@ -585,8 +602,9 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
   const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 20, bottom: 60, left: 60 });
   const horizontal = layout === "horizontal";
   const plotted = horizontal ? [...data].reverse() : data;
-  const axisBottom = horizontal ? makeAxis(style, "x", valueColumn, { numeric: true }) : makeAxis(style, "x", groupColumn);
-  const axisLeft = horizontal ? makeAxis(style, "y", groupColumn) : makeAxis(style, "y", valueColumn, { numeric: true });
+  const valueFormat = yFormat ? (v) => yFormat(Number(v)) : void 0;
+  const axisBottom = horizontal ? makeAxis(style, "x", valueColumn, { numeric: true, format: valueFormat }) : makeAxis(style, "x", groupColumn);
+  const axisLeft = horizontal ? makeAxis(style, "y", groupColumn) : makeAxis(style, "y", valueColumn, { numeric: true, format: valueFormat });
   return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
@@ -600,6 +618,7 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
       borderColor: { from: "color", modifiers: [["darker", 1.6]] },
       axisBottom,
       axisLeft,
+      valueFormat,
       enableLabel: s.barLabels,
       labelSkipWidth: 12,
       labelSkipHeight: 12,
@@ -648,7 +667,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, yFormat }) {
+  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,15 +684,27 @@ 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 yTickFormat = yFormat ? (v) => yFormat(Number(v)) : void 0;
   const colorById = new Map(data.map((serie, i) => [
     serie.id,
     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 +735,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,8 +747,9 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: { ...makeAxis(style, "x", xColumn), ...tickValues ? { tickValues } : {} },
-      axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
+      axisBottom,
+      axisLeft: makeAxis(style, "y", yColumn, { numeric: true, format: yTickFormat }),
+      yFormat: yTickFormat,
       useMesh: true,
       layers: ["grid", "markers", "axes", "areas", bandsLayer, linesLayer, "crosshair", "slices", "mesh", "legends"],
       animate: s.animate,
@@ -729,7 +766,7 @@ function niceCeil(v) {
   }
   return 10 * mag;
 }
-function SparklineView({ data, height = 56, color = "#3987e5", showValue = false, format }) {
+function SparklineView({ data, height = 56, color = "#3987e5", showValue = false, format, yFormat }) {
   const gradientId = useId();
   const width = 260;
   const pts = data && data.length ? data : [0];
@@ -739,7 +776,8 @@ function SparklineView({ data, height = 56, color = "#3987e5", showValue = false
   const line = pts.map((v, i) => `${i === 0 ? "M" : "L"} ${xy(v, i)[0].toFixed(1)} ${xy(v, i)[1].toFixed(1)}`).join(" ");
   const area = `${line} L ${width} ${height} L 0 ${height} Z`;
   const current = pts[pts.length - 1];
-  const readout = format ? format(current) : current.toLocaleString(void 0, { maximumFractionDigits: 1 });
+  const fmt = format ?? yFormat;
+  const readout = fmt ? fmt(current) : current.toLocaleString(void 0, { maximumFractionDigits: 1 });
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, height, className: "w-full", preserveAspectRatio: "none", children: [
       /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
@@ -3043,6 +3081,6 @@ function DataExplorer({
   ] });
 }
 
-export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, SERIES_OVERFLOW_COLOR, ScatterView, SparklineView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
+export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DEFAULT_SERIES_COLORS, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, SERIES_OVERFLOW_COLOR, ScatterView, SparklineView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, chartSizing, compileWhere, formatBytes, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map