@usetheo/ui 0.34.0 → 0.35.0

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

@@ -50,6 +50,17 @@ export declare function niceMax(values: number[]): number;
  * marker is what makes it visible.
  */
 export declare function seriesPath(points: TrendPoint[], xScale: (x: number) => number, yScale: (y: number) => number): string;
+/**
+ * Quais posicoes do eixo recebem rotulo.
+ *
+ * Rotular 31 pontos em ~450px e ilegivel; rotular so as pontas nao responde "quando foi o pico".
+ * A densidade sai da largura REAL (`viewW`, que o ResizeObserver ja rastreia), com o primeiro e o
+ * ultimo SEMPRE presentes: sao as bordas da janela, e sem eles o leitor nao sabe de quando ate
+ * quando o grafico fala.
+ *
+ * Fora do JSX porque e aritmetica, e aritmetica isolada e aritmetica que a mutacao alcanca.
+ */
+export declare function xTicks(axisXs: number[], viewW: number): number[];
 /**
  * Quais pontos recebem marcador.
  *
@@ -86,6 +97,20 @@ export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
      * Ignored when ≤ 0. Default: auto (`niceMax`).
      */
     yMax?: number;
+    /**
+     * Formata o `x` para o eixo e para a tabela acessivel. **Opcional de proposito.**
+     *
+     * O contrato do `x` e ambiguo — "bucket index or epoch-ms" — e na pratica quase unanime: das seis
+     * fabricas de serie do consumidor, cinco passam INDICE e uma passa epoch-ms. Inferir por magnitude
+     * funcionaria e seria a forma exata do defeito que este componente ja pagou (a regra de marcador
+     * do M76 chaveava em `points.length` em vez de perguntar o que queria saber, e a densificacao do
+     * M144 a desligou em silencio). Quem sabe o que o `x` significa e o chamador.
+     *
+     * Sem esta prop, nada muda: nenhum rotulo de eixo X e desenhado e a tabela segue numerando.
+     */
+    xFormatter?: (x: number) => string;
+    /** Cabecalho da primeira coluna da tabela acessivel. "Point" sobre datas seria desonesto. */
+    xLabel?: string;
 }
 declare const TrendChart: import("react").ForwardRefExoticComponent<TrendChartProps & import("react").RefAttributes<HTMLElement>>;
 export { TrendChart };

package/dist/index.js

@@ -5109,6 +5109,17 @@ function seriesPath(points, xScale, yScale) {
 }
 var VIEW_W = 600;
 var PAD = { top: 8, right: 8, bottom: 4, left: 40 };
+var X_AXIS_PX = 14;
+var MIN_TICK_PX2 = 70;
+function xTicks(axisXs, viewW) {
+  if (axisXs.length <= 2) return [...axisXs];
+  const maxTicks = Math.max(2, Math.floor((viewW - PAD.left - PAD.right) / MIN_TICK_PX2));
+  if (axisXs.length <= maxTicks) return [...axisXs];
+  const passo = (axisXs.length - 1) / (maxTicks - 1);
+  const escolhidos = /* @__PURE__ */ new Set();
+  for (let i = 0; i < maxTicks; i++) escolhidos.add(Math.round(i * passo));
+  return [...escolhidos].sort((a, b) => a - b).map((i) => axisXs[i]);
+}
 var SPARSE_MARKER_MAX = 5;
 function markedPoints(points) {
   const finito = (p) => Number.isFinite(p?.y);
@@ -5123,10 +5134,13 @@ var TrendChart = forwardRef(
     height = 180,
     valueFormatter = (v) => String(v),
     yMax: yMaxProp,
+    xFormatter,
+    xLabel,
     className,
     ...props
   }, ref) => {
     const [viewW, setViewW] = useState(VIEW_W);
+    const [hoverIdx, setHoverIdx] = useState(null);
     const roRef = useRef(null);
     const setSvgNode = useCallback((node) => {
       roRef.current?.disconnect();
@@ -5172,72 +5186,149 @@ var TrendChart = forwardRef(
     const yMax = yMaxProp != null && yMaxProp > 0 ? yMaxProp : niceMax(allPoints.map((p) => p.y)) || 1;
     const axisXs = Array.from(new Set(allPoints.map((p) => p.x))).sort((a, b) => a - b);
     const yByX = series.map((s) => new Map(s.points.map((p) => [p.x, p.y])));
+    const padBottom = PAD.bottom + (xFormatter ? X_AXIS_PX : 0);
     const xScale = linScale([xMin, xMax], [PAD.left, viewW - PAD.right]);
-    const yScale = linScale([0, yMax], [height - PAD.bottom, PAD.top]);
+    const yScale = linScale([0, yMax], [height - padBottom, PAD.top]);
     return /* @__PURE__ */ jsxs("figure", { "data-slot": "trend-chart", ref, className: cn("space-y-1", className), ...props, children: [
       /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
       /* @__PURE__ */ jsxs(
-        "svg",
+        "div",
         {
-          ref: setSvgNode,
-          viewBox: `0 0 ${viewW} ${height}`,
-          preserveAspectRatio: "none",
-          role: "img",
-          "aria-label": `${title} trend`,
-          className: "w-full",
-          style: { height },
+          "data-slot": "trend-chart-surface",
+          className: "relative",
+          onMouseMove: (e) => {
+            const caixa = e.currentTarget.getBoundingClientRect();
+            if (caixa.width === 0 || axisXs.length === 0) return;
+            const frac = (e.clientX - caixa.left) / caixa.width;
+            const alvo = xMin + frac * (xMax - xMin);
+            let melhor = 0;
+            for (let i = 1; i < axisXs.length; i++) {
+              if (Math.abs(axisXs[i] - alvo) < Math.abs(axisXs[melhor] - alvo))
+                melhor = i;
+            }
+            setHoverIdx(melhor);
+          },
+          onMouseLeave: () => setHoverIdx(null),
           children: [
-            /* @__PURE__ */ jsx(
-              "line",
+            /* @__PURE__ */ jsxs(
+              "svg",
               {
-                x1: PAD.left,
-                y1: height - PAD.bottom,
-                x2: viewW - PAD.right,
-                y2: height - PAD.bottom,
-                className: "stroke-border",
-                strokeWidth: 1
+                ref: setSvgNode,
+                viewBox: `0 0 ${viewW} ${height}`,
+                preserveAspectRatio: "none",
+                role: "img",
+                "aria-label": `${title} trend`,
+                className: "w-full",
+                style: { height },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: PAD.left,
+                      y1: height - padBottom,
+                      x2: viewW - PAD.right,
+                      y2: height - padBottom,
+                      className: "stroke-border",
+                      strokeWidth: 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: PAD.left,
+                      y1: PAD.top,
+                      x2: viewW - PAD.right,
+                      y2: PAD.top,
+                      className: "stroke-border/50",
+                      strokeWidth: 1,
+                      strokeDasharray: "2 3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("text", { x: 4, y: PAD.top + 8, className: "fill-muted-foreground text-[10px]", children: valueFormatter(yMax) }),
+                  /* @__PURE__ */ jsx("text", { x: 4, y: height - padBottom, className: "fill-muted-foreground text-[10px]", children: "0" }),
+                  xFormatter ? xTicks(axisXs, viewW).map((x, i, todos) => /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      "data-slot": "trend-chart-xtick",
+                      x: xScale(x),
+                      y: height - 2,
+                      textAnchor: i === 0 ? "start" : i === todos.length - 1 ? "end" : "middle",
+                      className: "fill-muted-foreground text-[10px]",
+                      children: xFormatter(x)
+                    },
+                    x
+                  )) : null,
+                  series.map((s) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        "data-slot": "trend-chart-line",
+                        "data-series": s.name,
+                        d: seriesPath(s.points, xScale, yScale),
+                        fill: "none",
+                        stroke: s.color,
+                        strokeWidth: 1.5,
+                        children: /* @__PURE__ */ jsx("title", { children: s.name })
+                      }
+                    ),
+                    markedPoints(s.points).map((p, i) => /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        "data-slot": "trend-chart-dot",
+                        cx: xScale(p.x),
+                        cy: yScale(p.y),
+                        r: 4,
+                        fill: s.color,
+                        children: /* @__PURE__ */ jsx("title", { children: s.name })
+                      },
+                      `${s.name}-${p.x}-${i}`
+                    ))
+                  ] }, s.name)),
+                  hoverIdx !== null && axisXs[hoverIdx] !== void 0 ? /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      "data-slot": "trend-chart-crosshair",
+                      x1: xScale(axisXs[hoverIdx]),
+                      y1: PAD.top,
+                      x2: xScale(axisXs[hoverIdx]),
+                      y2: height - padBottom,
+                      className: "stroke-muted-foreground/40",
+                      strokeWidth: 1
+                    }
+                  ) : null
+                ]
               }
             ),
-            /* @__PURE__ */ jsx(
-              "line",
+            hoverIdx !== null && axisXs[hoverIdx] !== void 0 ? /* @__PURE__ */ jsxs(
+              "div",
               {
-                x1: PAD.left,
-                y1: PAD.top,
-                x2: viewW - PAD.right,
-                y2: PAD.top,
-                className: "stroke-border/50",
-                strokeWidth: 1,
-                strokeDasharray: "2 3"
-              }
-            ),
-            /* @__PURE__ */ jsx("text", { x: 4, y: PAD.top + 8, className: "fill-muted-foreground text-[10px]", children: valueFormatter(yMax) }),
-            /* @__PURE__ */ jsx("text", { x: 4, y: height - PAD.bottom, className: "fill-muted-foreground text-[10px]", children: "0" }),
-            series.map((s) => /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  "data-slot": "trend-chart-line",
-                  "data-series": s.name,
-                  d: seriesPath(s.points, xScale, yScale),
-                  fill: "none",
-                  stroke: s.color,
-                  strokeWidth: 1.5,
-                  children: /* @__PURE__ */ jsx("title", { children: s.name })
-                }
-              ),
-              markedPoints(s.points).map((p, i) => /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  "data-slot": "trend-chart-dot",
-                  cx: xScale(p.x),
-                  cy: yScale(p.y),
-                  r: 4,
-                  fill: s.color,
-                  children: /* @__PURE__ */ jsx("title", { children: s.name })
+                "data-slot": "trend-chart-tooltip",
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute top-0 z-10 rounded border bg-popover px-2 py-1 text-[10px] text-popover-foreground shadow",
+                style: {
+                  left: `${xScale(axisXs[hoverIdx]) / viewW * 100}%`,
+                  transform: "translateX(-50%)"
                 },
-                `${s.name}-${p.x}-${i}`
-              ))
-            ] }, s.name))
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "font-medium", children: xFormatter ? xFormatter(axisXs[hoverIdx]) : `#${hoverIdx + 1}` }),
+                  series.map((s, si) => {
+                    const y = yByX[si]?.get(axisXs[hoverIdx]);
+                    return /* @__PURE__ */ jsxs("div", { className: "whitespace-nowrap", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "mr-1 inline-block size-2 rounded-full align-middle",
+                          style: { background: s.color }
+                        }
+                      ),
+                      s.name,
+                      ": ",
+                      y !== void 0 && Number.isFinite(y) ? valueFormatter(y) : "\u2014"
+                    ] }, s.name);
+                  })
+                ]
+              }
+            ) : null
           ]
         }
       ),
@@ -5265,11 +5356,11 @@ var TrendChart = forwardRef(
           " \u2014 data table"
         ] }),
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("th", { children: "Point" }),
+          /* @__PURE__ */ jsx("th", { children: xLabel ?? "Point" }),
           series.map((s) => /* @__PURE__ */ jsx("th", { children: s.name }, s.name))
         ] }) }),
         /* @__PURE__ */ jsx("tbody", { children: axisXs.map((x, i) => /* @__PURE__ */ jsxs("tr", { children: [
-          /* @__PURE__ */ jsx("td", { children: i + 1 }),
+          /* @__PURE__ */ jsx("td", { children: xFormatter ? xFormatter(x) : i + 1 }),
           series.map((s, si) => {
             const y = yByX[si]?.get(x);
             return /* @__PURE__ */ jsx("td", { children: y !== void 0 && Number.isFinite(y) ? valueFormatter(y) : "\u2014" }, s.name);

package/package.json

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