@quantumwake/terminal-ux-dashboard-components 0.1.20 → 0.1.22

package/dist/index.cjs

@@ -281,6 +281,9 @@ var DEFAULT_CHART_STYLE = {
   height: 0,
   margin: null,
   maxXTicks: 0,
+  maxYTicks: 0,
+  areaOpacity: 0.15,
+  barLabels: true,
   seriesColors: []
 };
 var DEFAULT_SERIES_COLORS = [
@@ -573,9 +576,11 @@ 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);
@@ -584,18 +589,24 @@ function BarView({ records, groupColumn, valueColumn, aggFn = "count", data: pre
   const data = presetData || computed;
   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",
+      layout,
       margin,
       padding: 0.3,
       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]] },
@@ -641,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) => {
@@ -661,7 +672,21 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
     serie.id,
     s.seriesColors.length || data.length > 1 ? seriesColor(i, s) : "rgba(96, 165, 250, 0.9)"
   ]));
-  const tickValues = thinTicks(data[0]?.data.map((d) => d.x) ?? [], s.maxXTicks);
+  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,
     {
@@ -670,10 +695,10 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       xScale: { type: "point" },
       yScale: { type: "linear", min: "auto", max: "auto" },
       curve: "monotoneX",
-      enableArea: true,
-      areaOpacity: 0.15,
+      enableArea: s.areaOpacity > 0,
+      areaOpacity: s.areaOpacity,
       colors: ((serie) => colorById.get(serie.id)),
-      pointSize: (data[0]?.data.length ?? 0) > 50 ? 0 : 6,
+      pointSize: 0,
       pointColor: { theme: "background" },
       pointBorderWidth: 2,
       pointBorderColor: { from: "serieColor" },
@@ -681,11 +706,12 @@ function LineView({ records, xColumn, yColumn, data: presetData, style }) {
       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" }) {
+function SparklineView({ data, height = 56, color = "#3987e5", showValue = false, format }) {
   const gradientId = react.useId();
   const width = 260;
   const pts = data && data.length ? data : [0];
@@ -694,13 +720,18 @@ function SparklineView({ data, height = 56, color = "#3987e5" }) {
   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" })
+  const current = pts[pts.length - 1];
+  const readout = format ? format(current) : current.toLocaleString(void 0, { maximumFractionDigits: 1 });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__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" })
+    ] }),
+    showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-1 top-0 font-mono text-lg text-midnight-text-primary", children: readout })
   ] });
 }
 function ScatterView({ records, xColumn, yColumn, data: presetData, style }) {