@usetheo/ui 0.31.0 → 0.32.0

package/dist/components/composites/trend-chart/trend-chart.d.ts

@@ -31,7 +31,24 @@ export interface TrendSeries {
 export declare function linScale(domain: [number, number], range: [number, number]): (v: number) => number;
 /** A clean upper Y bound ≥ max(values). Returns 0 when there is no positive value. */
 export declare function niceMax(values: number[]): number;
-/** SVG path `d` for a polyline over the given scales. Non-finite points are skipped. */
+/**
+ * SVG path `d` for a polyline over the given scales. A non-finite point is a GAP: the path BREAKS
+ * there and resumes with a new `M` subpath.
+ *
+ * M144 — this used to `filter(Number.isFinite)` and then join everything with `L`, which drew a
+ * continuous line straight over the hole. The filter is what made it wrong: it erased the
+ * information of WHERE the gap was, so the line could not break even in principle.
+ *
+ * Breaking is what every serious charting library does by default — `spanGaps` (Chart.js),
+ * `connectNulls` (Highcharts, ECharts, Recharts) and `connectgaps` (Plotly) all default to `false`,
+ * and Grafana ships "Connect null values: Never". It is also the only honest reading: connecting
+ * asserts continuity the data does not have, and the rest of THIS file already treats a non-finite
+ * `y` as absent (`niceMax` filters it, `hasData` filters it, and the accessible table renders `—`
+ * for a period a series has no point for).
+ *
+ * A run of one point emits a lone `M` and no `L` — a one-point line has no length, and the sparse
+ * marker is what makes it visible.
+ */
 export declare function seriesPath(points: TrendPoint[], xScale: (x: number) => number, yScale: (y: number) => number): string;
 export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
     title: string;

package/dist/index.js

@@ -5095,9 +5095,17 @@ function niceMax(values) {
   return Number((Math.ceil(m / pow) * pow).toPrecision(12));
 }
 function seriesPath(points, xScale, yScale) {
-  const finite = points.filter((p) => Number.isFinite(p.y));
-  if (finite.length === 0) return "";
-  return finite.map((p, i) => `${i === 0 ? "M" : "L"}${xScale(p.x).toFixed(2)},${yScale(p.y).toFixed(2)}`).join(" ");
+  const out = [];
+  let emTrecho = false;
+  for (const p of points) {
+    if (!Number.isFinite(p.y)) {
+      emTrecho = false;
+      continue;
+    }
+    out.push(`${emTrecho ? "L" : "M"}${xScale(p.x).toFixed(2)},${yScale(p.y).toFixed(2)}`);
+    emTrecho = true;
+  }
+  return out.join(" ");
 }
 var VIEW_W = 600;
 var PAD = { top: 8, right: 8, bottom: 4, left: 40 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "type": "module",
   "license": "Apache-2.0",
-  "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
+  "description": "Violet Forge design system \u2014 generic React components + primitives (the non-AI foundation of @theokit/ui).",
   "sideEffects": false,
   "files": [
     "dist"