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

package/dist/index.cjs

@@ -652,7 +652,7 @@ function PieView({ records, groupColumn, data: presetData, style }) {
     }
   ) });
 }
-function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, style }) {
+function LineView({ records, xColumn, yColumn, data: presetData, style }) {
   const computed = react.useMemo(() => {
     if (presetData || !records) return [];
     const sorted = [...records].filter((r) => r[xColumn] != null && r[yColumn] != null).sort((a, b) => {
@@ -674,16 +674,23 @@ function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, styl
   ]));
   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 bandedIds = new Set(data.filter((serie) => serie.data.some((d) => d.lo != null)).map((serie) => serie.id));
+  const bandsLayer = ({ series, yScale, lineGenerator }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: series.map((serie) => {
+    const pts = serie.data.filter((d) => d.data.lo != null && d.data.hi != null && d.position.x != null);
+    if (pts.length < 2) return null;
+    const upper = lineGenerator(pts.map((d) => ({ x: d.position.x, y: yScale(d.data.hi) })));
+    const lower = lineGenerator([...pts].reverse().map((d) => ({ x: d.position.x, y: yScale(d.data.lo) })));
+    if (!upper || !lower) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("path", { d: `${upper} L ${lower.slice(1)} Z`, fill: serie.color, opacity: 0.12 }, `band-${serie.id}`);
+  }) });
   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
+      strokeWidth: bandedIds.has(String(serie.id)) ? 2.5 : 1.5,
+      strokeLinecap: "round"
     },
     serie.id
   )) });
@@ -706,12 +713,12 @@ function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, styl
       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"],
+      layers: ["grid", "markers", "axes", "areas", bandsLayer, 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];
@@ -720,13 +727,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 }) {