@usetheo/ui 0.31.0 → 0.33.0

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

@@ -1 +1 @@
-export { linScale, niceMax, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./trend-chart.js";
+export { linScale, niceMax, pontosComMarcador, seriesPath, TrendChart, type TrendChartProps, type TrendPoint, type TrendSeries, } from "./trend-chart.js";

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

@@ -31,8 +31,47 @@ 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;
+/**
+ * Quais pontos recebem marcador.
+ *
+ * Duas razões distintas para marcar, e a segunda só apareceu quando séries com lacuna passaram a
+ * existir (M144):
+ *
+ * 1. **Série esparsa** (< `SPARSE_MARKER_MAX` baldes) — 1-4 pontos leem como um penhasco dramático;
+ *    o marcador ancora o leitor no dado real. Regra do M76, preservada.
+ * 2. **Ponto isolado** — um ponto finito cercado de lacunas dos dois lados vira um `M` sozinho no
+ *    `path`, e um `M` sozinho **desenha nada**: bounding-box zero, invisível. O dado existe, está
+ *    correto, e o operador não vê. Medido no e2e do M144 (`d="M419.86,92.00 M448.00,36.00"`).
+ *
+ * A regra antiga só cobria (1), chaveando no TOTAL de pontos em vez de perguntar se o ponto de fato
+ * é desenhado — apesar de o comentário dela já declarar a intenção *"a dot keeps real data from
+ * rendering as an invisible line"*. Depois da densificação, uma série de 30 dias com dois dias
+ * finitos separados por lacuna cai fora de (1) e desaparece. Chart.js e Plotly marcam o ponto
+ * isolado exatamente por isto.
+ *
+ * Fora do JSX de propósito: é a aritmética da decisão, e aritmética isolada é aritmética que a
+ * mutação alcança.
+ */
+export declare function pontosComMarcador(points: TrendPoint[]): TrendPoint[];
 export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
     title: string;
     series: TrendSeries[];

package/dist/index.js

@@ -5095,13 +5095,26 @@ 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 };
 var SPARSE_MARKER_MAX = 5;
+function pontosComMarcador(points) {
+  const finito = (p) => Number.isFinite(p?.y);
+  if (points.length < SPARSE_MARKER_MAX) return points.filter(finito);
+  return points.filter((p, i) => finito(p) && !finito(points[i - 1]) && !finito(points[i + 1]));
+}
 var TrendChart = forwardRef(
   ({
     title,
@@ -5211,7 +5224,7 @@ var TrendChart = forwardRef(
                   children: /* @__PURE__ */ jsx("title", { children: s.name })
                 }
               ),
-              s.points.length < SPARSE_MARKER_MAX ? s.points.filter((p) => Number.isFinite(p.y)).map((p, i) => /* @__PURE__ */ jsx(
+              pontosComMarcador(s.points).map((p, i) => /* @__PURE__ */ jsx(
                 "circle",
                 {
                   "data-slot": "trend-chart-dot",
@@ -5222,7 +5235,7 @@ var TrendChart = forwardRef(
                   children: /* @__PURE__ */ jsx("title", { children: s.name })
                 },
                 `${s.name}-${p.x}-${i}`
-              )) : null
+              ))
             ] }, s.name))
           ]
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "type": "module",
   "license": "Apache-2.0",