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

package/dist/index.cjs

@@ -276,8 +276,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,
@@ -527,27 +576,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 = react.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__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     bar.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]] },
@@ -568,16 +627,19 @@ function PieView({ records, groupColumn, data: presetData, style }) {
   }, [records, groupColumn, presetData]);
   const data = presetData || computed;
   const legend = legendConfig(style);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     pie.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,
@@ -590,7 +652,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 = react.useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -604,29 +666,69 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     }];
   }, [records, xColumn, yColumn, presetData]);
   const data = presetData || computed;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: series.map((serie) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     line.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 = react.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__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${width} ${height}`, height, className: "w-full", preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.25" }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: area, fill: `url(#${gradientId})` }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: "2", vectorEffect: "non-scaling-stroke" })
+  ] });
+}
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = react.useMemo(() => {
     if (presetData || !records) return [];
@@ -634,14 +736,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__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     scatterplot.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 }),
@@ -737,8 +845,8 @@ function HeatmapView({
   if (!data.length || !data[0].data.length) {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     heatmap.ResponsiveHeatMap,
     {
       data,
@@ -892,11 +1000,12 @@ function HeatmapPlusView({
   }
   const { nivoData, t } = built;
   const tAt = (serieId, x) => t.get(cellKey(serieId, x)) ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const { frameClass, frameStyle, margin } = chartSizing(style, { top: 60, right: 20, bottom: showMargins ? 60 : 20, left: 100 });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: frameClass, style: frameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     heatmap.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 },
@@ -2912,6 +3021,7 @@ exports.BarView = BarView;
 exports.ChartBuilder = ChartBuilder;
 exports.ChartStyleControls = ChartStyleControls;
 exports.DEFAULT_CHART_STYLE = DEFAULT_CHART_STYLE;
+exports.DEFAULT_SERIES_COLORS = DEFAULT_SERIES_COLORS;
 exports.DashboardProvider = DashboardProvider;
 exports.DashboardRenderer = DashboardRenderer;
 exports.DataExplorer = DataExplorer;
@@ -2925,13 +3035,16 @@ exports.MetricView = MetricView;
 exports.PanelChart = PanelChart;
 exports.PieView = PieView;
 exports.PivotView = PivotView;
+exports.SERIES_OVERFLOW_COLOR = SERIES_OVERFLOW_COLOR;
 exports.ScatterView = ScatterView;
+exports.SparklineView = SparklineView;
 exports.SqlConsole = SqlConsole;
 exports.aggExpr = aggExpr;
 exports.aggregate = aggregate;
 exports.axisLegend = axisLegend;
 exports.buildChartSQL = buildChartSQL;
 exports.buildNivoTheme = buildNivoTheme;
+exports.chartSizing = chartSizing;
 exports.compileWhere = compileWhere;
 exports.groupBy = groupBy;
 exports.heatColor = heatColor;
@@ -2940,7 +3053,9 @@ exports.legendConfig = legendConfig;
 exports.normalizeCells = normalizeCells;
 exports.qIdent = qIdent;
 exports.qLit = qLit;
+exports.seriesColor = seriesColor;
 exports.shapeChartData = shapeChartData;
+exports.thinTicks = thinTicks;
 exports.useCapabilities = useCapabilities;
 exports.useDashboard = useDashboard;
 exports.withStyleDefaults = withStyleDefaults;