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

package/dist/index.d.cts

@@ -348,8 +348,13 @@ interface SparklineViewProps {
     height?: number;
     /** Line + area hue. */
     color?: string;
+    /** 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. */
+    format?: (v: number) => string;
 }
-declare function SparklineView({ data, height, color }: SparklineViewProps): react.JSX.Element;
+declare function SparklineView({ data, height, color, showValue, format }: SparklineViewProps): react.JSX.Element;
 
 interface ScatterSerie {
     id: string;

package/dist/index.d.ts

@@ -348,8 +348,13 @@ interface SparklineViewProps {
     height?: number;
     /** Line + area hue. */
     color?: string;
+    /** 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. */
+    format?: (v: number) => string;
 }
-declare function SparklineView({ data, height, color }: SparklineViewProps): react.JSX.Element;
+declare function SparklineView({ data, height, color, showValue, format }: SparklineViewProps): react.JSX.Element;
 
 interface ScatterSerie {
     id: string;

package/dist/index.js

@@ -703,7 +703,7 @@ function LineView({ records, xColumn, yColumn, data: presetData, dashedIds, styl
     }
   ) });
 }
-function SparklineView({ data, height = 56, color = "#3987e5" }) {
+function SparklineView({ data, height = 56, color = "#3987e5", showValue = false, format }) {
   const gradientId = useId();
   const width = 260;
   const pts = data && data.length ? data : [0];
@@ -712,13 +712,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__ */ 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" })
+  const current = pts[pts.length - 1];
+  const readout = format ? format(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: [
+        /* @__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" })
+    ] }),
+    showValue && /* @__PURE__ */ 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 }) {