@quantumwake/terminal-ux-dashboard-components 0.1.19 → 0.1.21

package/dist/index.d.cts

@@ -104,6 +104,12 @@ declare const shapeChartData: (chartType: ChartType, rows: Row[], { yFields }?:
 type LegendAnchor = 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
 type LegendPosition = 'start' | 'middle' | 'end';
 type TitleAlign = 'left' | 'center' | 'right';
+interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
 interface ChartStyle {
     background: string;
     textColor: string;
@@ -135,8 +141,26 @@ interface ChartStyle {
     titleBold: boolean;
     titleBackground: string;
     titleColor: string;
+    height: number;
+    margin: Partial<ChartMargin> | null;
+    maxXTicks: number;
+    maxYTicks: number;
+    areaOpacity: number;
+    barLabels: boolean;
+    seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
+declare const DEFAULT_SERIES_COLORS: string[];
+declare const SERIES_OVERFLOW_COLOR = "#707078";
+declare const seriesColor: (i: number, style?: Partial<ChartStyle> | null) => string;
+declare const chartSizing: (style: Partial<ChartStyle> | null | undefined, defaultMargin: ChartMargin) => {
+    frameClass: string;
+    frameStyle: {
+        height?: number;
+    };
+    margin: ChartMargin;
+};
+declare function thinTicks<T>(values: T[], max: number): T[] | undefined;
 declare const LEGEND_ANCHORS: LegendAnchor[];
 declare const withStyleDefaults: (style?: Partial<ChartStyle> | null) => ChartStyle;
 declare const buildNivoTheme: (style?: Partial<ChartStyle> | null) => {
@@ -276,9 +300,12 @@ interface BarViewProps {
     aggFn?: string;
     /** Pre-aggregated [{group, value}] bypasses client-side aggregation. */
     data?: BarDatum[];
+    /** 'horizontal' lays categories on the y axis — the readable form for
+     *  many bars with long names (labels never collide). Default vertical. */
+    layout?: 'vertical' | 'horizontal';
     style?: Partial<ChartStyle>;
 }
-declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, style }: BarViewProps): react.JSX.Element;
+declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style }: BarViewProps): react.JSX.Element;
 
 interface PieDatum {
     id: string;
@@ -307,9 +334,22 @@ interface LineViewProps {
     yColumn: string;
     /** Pre-shaped Nivo line series bypasses client-side processing. */
     data?: LineSerie[];
+    /** Serie ids to draw dotted — the aggregate-vs-individual distinction
+     *  (an average line reads as derived, a member line as observed). */
+    dashedIds?: string[];
     style?: Partial<ChartStyle>;
 }
-declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
+declare function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }: LineViewProps): react.JSX.Element;
+
+interface SparklineViewProps {
+    /** The series, oldest first. */
+    data: number[];
+    /** Viewbox height in px (the svg scales to its container's width). */
+    height?: number;
+    /** Line + area hue. */
+    color?: string;
+}
+declare function SparklineView({ data, height, color }: SparklineViewProps): react.JSX.Element;
 
 interface ScatterSerie {
     id: string;
@@ -606,4 +646,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 ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, 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, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, 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, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.d.ts

@@ -104,6 +104,12 @@ declare const shapeChartData: (chartType: ChartType, rows: Row[], { yFields }?:
 type LegendAnchor = 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none';
 type LegendPosition = 'start' | 'middle' | 'end';
 type TitleAlign = 'left' | 'center' | 'right';
+interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
 interface ChartStyle {
     background: string;
     textColor: string;
@@ -135,8 +141,26 @@ interface ChartStyle {
     titleBold: boolean;
     titleBackground: string;
     titleColor: string;
+    height: number;
+    margin: Partial<ChartMargin> | null;
+    maxXTicks: number;
+    maxYTicks: number;
+    areaOpacity: number;
+    barLabels: boolean;
+    seriesColors: string[];
 }
 declare const DEFAULT_CHART_STYLE: ChartStyle;
+declare const DEFAULT_SERIES_COLORS: string[];
+declare const SERIES_OVERFLOW_COLOR = "#707078";
+declare const seriesColor: (i: number, style?: Partial<ChartStyle> | null) => string;
+declare const chartSizing: (style: Partial<ChartStyle> | null | undefined, defaultMargin: ChartMargin) => {
+    frameClass: string;
+    frameStyle: {
+        height?: number;
+    };
+    margin: ChartMargin;
+};
+declare function thinTicks<T>(values: T[], max: number): T[] | undefined;
 declare const LEGEND_ANCHORS: LegendAnchor[];
 declare const withStyleDefaults: (style?: Partial<ChartStyle> | null) => ChartStyle;
 declare const buildNivoTheme: (style?: Partial<ChartStyle> | null) => {
@@ -276,9 +300,12 @@ interface BarViewProps {
     aggFn?: string;
     /** Pre-aggregated [{group, value}] bypasses client-side aggregation. */
     data?: BarDatum[];
+    /** 'horizontal' lays categories on the y axis — the readable form for
+     *  many bars with long names (labels never collide). Default vertical. */
+    layout?: 'vertical' | 'horizontal';
     style?: Partial<ChartStyle>;
 }
-declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, style }: BarViewProps): react.JSX.Element;
+declare function BarView({ records, groupColumn, valueColumn, aggFn, data: presetData, layout, style }: BarViewProps): react.JSX.Element;
 
 interface PieDatum {
     id: string;
@@ -307,9 +334,22 @@ interface LineViewProps {
     yColumn: string;
     /** Pre-shaped Nivo line series bypasses client-side processing. */
     data?: LineSerie[];
+    /** Serie ids to draw dotted — the aggregate-vs-individual distinction
+     *  (an average line reads as derived, a member line as observed). */
+    dashedIds?: string[];
     style?: Partial<ChartStyle>;
 }
-declare function LineView({ records, xColumn, yColumn, data: presetData, style }: LineViewProps): react.JSX.Element;
+declare function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }: LineViewProps): react.JSX.Element;
+
+interface SparklineViewProps {
+    /** The series, oldest first. */
+    data: number[];
+    /** Viewbox height in px (the svg scales to its container's width). */
+    height?: number;
+    /** Line + area hue. */
+    color?: string;
+}
+declare function SparklineView({ data, height, color }: SparklineViewProps): react.JSX.Element;
 
 interface ScatterSerie {
     id: string;
@@ -606,4 +646,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 ChartPanel, type ChartStyle, ChartStyleControls, type ChartStyleControlsProps, type ChartType, type ColorMethod, type ColorOptions, type ColorScope, DEFAULT_CHART_STYLE, 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, type SavedDashboard, type ScatterSerie, ScatterView, type ScatterViewProps, SqlConsole, type SqlConsoleColumn, type SqlConsoleProps, type TitleAlign, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, 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, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, Suspense } from 'react';
+import { createContext, useContext, useMemo, useId, useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { interpolateRdYlGn } from 'd3-scale-chromatic';
 import { ResponsiveBar } from '@nivo/bar';
@@ -268,8 +268,57 @@ var DEFAULT_CHART_STYLE = {
   titleAlign: "left",
   titleBold: false,
   titleBackground: "",
-  titleColor: ""
+  titleColor: "",
+  // Chart frame + series color model.
+  height: 0,
+  margin: null,
+  maxXTicks: 0,
+  maxYTicks: 0,
+  areaOpacity: 0.15,
+  barLabels: true,
+  seriesColors: []
 };
+var DEFAULT_SERIES_COLORS = [
+  "#3987e5",
+  // blue
+  "#d95926",
+  // orange
+  "#199e70",
+  // aqua
+  "#c98500",
+  // yellow
+  "#d55181",
+  // magenta
+  "#008300",
+  // green
+  "#9085e9",
+  // violet
+  "#e66767"
+  // red
+];
+var SERIES_OVERFLOW_COLOR = "#707078";
+var seriesColor = (i, style) => {
+  const s = withStyleDefaults(style);
+  const palette = s.seriesColors.length ? s.seriesColors : DEFAULT_SERIES_COLORS;
+  return i < palette.length ? palette[i] : SERIES_OVERFLOW_COLOR;
+};
+var chartSizing = (style, defaultMargin) => {
+  const s = withStyleDefaults(style);
+  return {
+    frameClass: s.height > 0 ? "w-full" : "h-full w-full min-h-[160px]",
+    frameStyle: s.height > 0 ? { height: s.height } : {},
+    margin: { ...defaultMargin, ...s.margin || {} }
+  };
+};
+function thinTicks(values, max) {
+  if (max <= 0 || values.length <= max) return void 0;
+  if (max === 1) return [values[values.length - 1]];
+  const picked = [];
+  for (let i = 0; i < max; i++) {
+    picked.push(values[Math.round(i * (values.length - 1) / (max - 1))]);
+  }
+  return [...new Set(picked)];
+}
 var LEGEND_ANCHORS = ["right", "top-left", "top-right", "bottom-left", "bottom-right", "none"];
 var withStyleDefaults = (style) => ({
   ...DEFAULT_CHART_STYLE,
@@ -519,27 +568,37 @@ function makeAxis(style, axis, columnName, opts2 = {}) {
     out.tickRotation = rotate;
     out.format = (v) => formatVal(v, s, numeric);
   }
+  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, style }) {
+function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: presetData, layout = "vertical", style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
     const groups = groupBy(records, groupColumn);
     return Object.entries(groups).map(([key, recs]) => ({ group: key, value: aggregate(recs, valueColumn, aggFn) })).sort((a, b) => b.value - a.value).slice(0, 50);
   }, [records, groupColumn, valueColumn, aggFn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  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 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveBar,
     {
-      data,
+      data: plotted,
       keys: ["value"],
       indexBy: "group",
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      layout,
+      margin,
       padding: 0.3,
-      colors: ["rgba(74, 222, 128, 0.8)"],
+      colors: [s.seriesColors[0] || "rgba(74, 222, 128, 0.8)"],
       borderColor: { from: "color", modifiers: [["darker", 1.6]] },
-      axisBottom: makeAxis(style, "x", groupColumn),
-      axisLeft: makeAxis(style, "y", valueColumn, { numeric: true }),
+      axisBottom,
+      axisLeft,
+      enableLabel: s.barLabels,
       labelSkipWidth: 12,
       labelSkipHeight: 12,
       labelTextColor: { from: "color", modifiers: [["darker", 3]] },
@@ -560,16 +619,19 @@ function PieView({ records, groupColumn, data: presetData, style }) {
   }, [records, groupColumn, presetData]);
   const data = presetData || computed;
   const legend = legendConfig(style);
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const s = withStyleDefaults(style);
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 20, right: 120, bottom: 20, left: 20 });
+  const colorById = new Map(data.map((d, i) => [d.id, seriesColor(i, s)]));
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsivePie,
     {
       data,
-      margin: { top: 20, right: 120, bottom: 20, left: 20 },
+      margin,
       innerRadius: 0.4,
       padAngle: 1,
       cornerRadius: 3,
       activeOuterRadiusOffset: 8,
-      colors: { scheme: "set2" },
+      colors: ((d) => colorById.get(d.id)),
       borderWidth: 1,
       borderColor: { from: "color", modifiers: [["darker", 0.2]] },
       arcLinkLabelsSkipAngle: 10,
@@ -582,7 +644,7 @@ function PieView({ records, groupColumn, data: presetData, style }) {
     }
   ) });
 }
-function LineView({ records, xColumn, yColumn, data: presetData, style }) {
+function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -596,29 +658,69 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  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)"
+  ]));
+  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 dashed = new Set(dashedIds || []);
+  const linesLayer = ({ series, lineGenerator }) => /* @__PURE__ */ jsx(Fragment, { children: series.map((serie) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: lineGenerator(serie.data.map((d) => d.position)),
+      fill: "none",
+      stroke: serie.color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeDasharray: dashed.has(String(serie.id)) ? "1 5" : void 0
+    },
+    serie.id
+  )) });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveLine,
     {
       data,
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       xScale: { type: "point" },
       yScale: { type: "linear", min: "auto", max: "auto" },
       curve: "monotoneX",
-      enableArea: true,
-      areaOpacity: 0.15,
-      colors: ["rgba(96, 165, 250, 0.9)"],
-      pointSize: (data[0]?.data.length ?? 0) > 50 ? 0 : 6,
+      enableArea: s.areaOpacity > 0,
+      areaOpacity: s.areaOpacity,
+      colors: ((serie) => colorById.get(serie.id)),
+      pointSize: 0,
       pointColor: { theme: "background" },
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
       enableGridX: false,
-      axisBottom: makeAxis(style, "x", xColumn),
+      axisBottom: { ...makeAxis(style, "x", xColumn), ...tickValues ? { tickValues } : {} },
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
       useMesh: true,
+      layers: ["grid", "markers", "axes", "areas", linesLayer, "crosshair", "slices", "mesh", "legends"],
       theme: buildNivoTheme(style)
     }
   ) });
 }
+function SparklineView({ data, height = 56, color = "#3987e5" }) {
+  const gradientId = useId();
+  const width = 260;
+  const pts = data && data.length ? data : [0];
+  const max = Math.max(...pts, 1);
+  const dx = pts.length > 1 ? width / (pts.length - 1) : width;
+  const xy = (v, i) => [i * dx, height - v / max * (height - 4) - 2];
+  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`;
+  return /* @__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: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.25" }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsx("path", { d: area, fill: `url(#${gradientId})` }),
+    /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })
+  ] });
+}
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = useMemo(() => {
     if (presetData || !records) return [];
@@ -626,14 +728,20 @@ function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
     return [{ id: `${xColumn} vs ${yColumn}`, data: points }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  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(167, 139, 250, 0.7)"
+  ]));
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveScatterPlot,
     {
       data,
-      margin: { top: 20, right: 20, bottom: 60, left: 60 },
+      margin,
       xScale: { type: "linear", min: "auto", max: "auto" },
       yScale: { type: "linear", min: "auto", max: "auto" },
-      colors: ["rgba(167, 139, 250, 0.7)"],
+      colors: ((serie) => colorById.get(serie.serieId ?? serie.id ?? "")),
       nodeSize: 6,
       axisBottom: makeAxis(style, "x", xColumn, { numeric: true }),
       axisLeft: makeAxis(style, "y", yColumn, { numeric: true }),
@@ -729,8 +837,8 @@ function HeatmapView({
   if (!data.length || !data[0].data.length) {
     return /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-midnight-text-muted", children: "Not enough distinct values for a heatmap" });
   }
-  const margin = showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 };
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const { frameClass, frameStyle, margin } = chartSizing(style, showTotals ? { top: 60, right: 70, bottom: 60, left: 100 } : { top: 60, right: 20, bottom: 20, left: 100 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveHeatMap,
     {
       data,
@@ -884,11 +992,12 @@ function HeatmapPlusView({
   }
   const { nivoData, t } = built;
   const tAt = (serieId, x) => t.get(cellKey(serieId, x)) ?? 0;
-  return /* @__PURE__ */ jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsx(
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 });
+  return /* @__PURE__ */ jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsx(
     ResponsiveHeatMap,
     {
       data: nivoData,
-      margin: { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 },
+      margin,
       valueFormat: ((v) => fmtNum2(v)),
       axisTop: { tickSize: 5, tickPadding: 5, tickRotation: s.xTickRotation, legend: s.showXLegend ? s.xAxisLabel || colColumn : "", legendPosition: s.xLegendPosition, legendOffset: -50 },
       axisLeft: { tickSize: 5, tickPadding: 5, legend: s.showYLegend ? s.yAxisLabel || rowColumn : "", legendPosition: s.yLegendPosition, legendOffset: -80 },
@@ -2900,6 +3009,6 @@ function DataExplorer({
   ] });
 }
 
-export { BarView, ChartBuilder, ChartStyleControls, DEFAULT_CHART_STYLE, DashboardProvider, DashboardRenderer, DataExplorer, HEAT_STATS, HeatmapPlusView, HeatmapView, InsightView, LEGEND_ANCHORS, LineView, MetricView, PanelChart, PieView, PivotView, ScatterView, SqlConsole, aggExpr, aggregate, axisLegend, buildChartSQL, buildNivoTheme, compileWhere, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, shapeChartData, 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, groupBy, heatColor, heatLabelColor, legendConfig, normalizeCells, qIdent, qLit, seriesColor, shapeChartData, thinTicks, useCapabilities, useDashboard, withStyleDefaults };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map