@tangle-network/ui 11.40.2 → 11.42.0

package/src/primitives/metric-chart.tsx

@@ -0,0 +1,246 @@
+import * as React from "react";
+import { chartPresentation } from "../presentation";
+import { cn } from "../lib/utils";
+import {
+  normalizeSeries,
+  seriesAreaPath,
+  seriesExtent,
+  seriesLinePath,
+  seriesMean,
+  seriesScale,
+  type SeriesPointInput,
+} from "../lib/series";
+
+export interface ChartReferenceLine {
+  value: number;
+  label?: string;
+  /** Which reading the line applies to for a dual series. A secondary line
+   * on a single-reading series is not drawn. */
+  series?: "primary" | "secondary";
+}
+
+export type MetricChartProps = Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
+  points: SeriesPointInput[];
+  /** Accessible name; also rendered as the svg title. */
+  title: string;
+  /** Unit noun for the generated description ("bpm", "ms"). */
+  unit?: string;
+  /** Fraction digits for tick labels and the description. Defaults to a
+   * maximum of two. */
+  decimals?: number;
+  referenceLines?: ChartReferenceLine[];
+  /** Overrides the generated <desc> summary. */
+  description?: string;
+  formatValue?: (value: number) => string;
+  formatTime?: (at: number) => string;
+};
+
+const defaultTimeLabel = (at: number) =>
+  new Date(at).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+
+const defaultValueLabel =
+  (decimals?: number) =>
+  (value: number) =>
+    value.toLocaleString(
+      undefined,
+      decimals === undefined
+        ? { maximumFractionDigits: 2 }
+        : { minimumFractionDigits: decimals, maximumFractionDigits: decimals },
+    );
+
+/**
+ * A labelled line chart: y gridlines, x date ticks, optional dashed
+ * reference lines and a dotted secondary series for dual readings
+ * (`value2`). Hand-rolled SVG, viewBox-scaled, currentColor throughout.
+ */
+const MetricChart = React.forwardRef<SVGSVGElement, MetricChartProps>(
+  (
+    {
+      points,
+      title,
+      unit,
+      decimals,
+      referenceLines,
+      description,
+      formatValue,
+      formatTime,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const series = normalizeSeries(points);
+    const width = 680;
+    const height = 260;
+    const padX = 46;
+    const padY = 16;
+    const dual = series.some((point) => point.value2 !== undefined);
+    const lines = (referenceLines ?? []).filter(
+      (line) => line.series !== "secondary" || dual,
+    );
+    // Plot box runs right of the y-label gutter; x() is box-local, hence +padX.
+    const extent = seriesExtent(series, {
+      include: lines.map((line) => line.value),
+    });
+    const plot = seriesScale(extent, width - padX - 8, height, padY);
+    const xAt = (at: number) => padX + plot.x(at);
+    const yAt = plot.y;
+    const { lo, hi, tLo, tHi } = extent;
+    const primary = series.map((point) => ({
+      x: xAt(point.at),
+      y: yAt(point.value),
+    }));
+    const secondary = series
+      .filter((point) => point.value2 !== undefined)
+      .map((point) => ({ x: xAt(point.at), y: yAt(point.value2!) }));
+    const ticks = Array.from(
+      { length: 4 },
+      (_, index) => lo + ((hi - lo) * (index + 1)) / 5,
+    );
+    const xTicks = [tLo, tLo + (tHi - tLo) / 2, tHi];
+    const lastPrimary = primary[primary.length - 1];
+    const valueLabel = formatValue ?? defaultValueLabel(decimals);
+    const timeLabel = formatTime ?? defaultTimeLabel;
+    const values = series.map((point) => point.value);
+    const describe =
+      description ??
+      `${title}: ${series.length} readings from ${timeLabel(tLo)} to ${timeLabel(tHi)}, ` +
+        `min ${valueLabel(series.length > 0 ? Math.min(...values) : 0)}, ` +
+        `max ${valueLabel(series.length > 0 ? Math.max(...values) : 0)}, ` +
+        `average ${valueLabel(seriesMean(values) ?? 0)}${unit ? ` ${unit}` : ""}.`;
+    return (
+      <svg
+        ref={ref}
+        viewBox={`0 0 ${width} ${height}`}
+        role="img"
+        aria-label={title}
+        className={cn(chartPresentation.root, className)}
+        {...props}
+      >
+        <title>{title}</title>
+        <desc>{describe}</desc>
+        {series.length > 0 && (
+          <>
+            {ticks.map((tick) => (
+              <g key={tick} className={chartPresentation.axis}>
+                <line
+                  x1={padX}
+                  x2={width - 8}
+                  y1={yAt(tick)}
+                  y2={yAt(tick)}
+                  stroke="currentColor"
+                  strokeWidth="1"
+                  className={chartPresentation.gridLine}
+                />
+                <text
+                  x={padX - 8}
+                  y={yAt(tick) + 4}
+                  textAnchor="end"
+                  fontSize="11"
+                  fill="currentColor"
+                >
+                  {valueLabel(tick)}
+                </text>
+              </g>
+            ))}
+            {xTicks.map((tick, index) => (
+              <text
+                key={tick}
+                className={chartPresentation.axis}
+                fontSize="11"
+                fill="currentColor"
+                x={xAt(tick)}
+                y={height - 4}
+                textAnchor={
+                  index === 0
+                    ? "start"
+                    : index === xTicks.length - 1
+                      ? "end"
+                      : "middle"
+                }
+              >
+                {timeLabel(tick)}
+              </text>
+            ))}
+            {lines.map((line, index) => (
+              <g key={line.label ?? index} className={chartPresentation.axis}>
+                <line
+                  x1={padX}
+                  x2={width - 8}
+                  y1={yAt(line.value)}
+                  y2={yAt(line.value)}
+                  stroke="currentColor"
+                  strokeWidth="1.25"
+                  strokeDasharray="5 4"
+                  className={chartPresentation.referenceLine}
+                />
+                {line.label && (
+                  <text
+                    x={width - 12}
+                    y={yAt(line.value) - 5}
+                    textAnchor="end"
+                    fontSize="11"
+                    fill="currentColor"
+                  >
+                    {line.label}
+                  </text>
+                )}
+              </g>
+            ))}
+            {primary.length > 1 && (
+              <path
+                d={seriesAreaPath(primary, yAt(lo))}
+                fill="currentColor"
+                stroke="none"
+                className={cn(chartPresentation.primarySeries, chartPresentation.area)}
+              />
+            )}
+            <path
+              d={seriesLinePath(primary)}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              className={chartPresentation.primarySeries}
+            />
+            {secondary.length > 0 && (
+              <path
+                d={seriesLinePath(secondary)}
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinejoin="round"
+                strokeLinecap="round"
+                strokeDasharray="2 5"
+                className={chartPresentation.secondarySeries}
+              />
+            )}
+            {primary.length === 1 ? (
+              <circle
+                cx={primary[0]!.x}
+                cy={primary[0]!.y}
+                r="4"
+                fill="currentColor"
+                className={chartPresentation.primarySeries}
+              />
+            ) : (
+              lastPrimary && (
+                <circle
+                  cx={lastPrimary.x}
+                  cy={lastPrimary.y}
+                  r="3.5"
+                  fill="currentColor"
+                  className={chartPresentation.primarySeries}
+                />
+              )
+            )}
+          </>
+        )}
+      </svg>
+    );
+  },
+);
+MetricChart.displayName = "MetricChart";
+
+export { MetricChart };

package/src/primitives/series-sparkline.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SeriesSparkline } from "./series-sparkline";
+
+const meta = {
+  title: "Primitives/SeriesSparkline",
+  component: SeriesSparkline,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof SeriesSparkline>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DAY = 86_400_000;
+const t0 = Date.parse("2026-09-22T07:00:00.000Z");
+const readings = [63, 61, 64, 60, 62, 65, 61, 63, 59, 62, 60, 61];
+
+export const Default: Story = {
+  args: {
+    label: "Resting heart rate, last twelve readings",
+    points: readings.map((value, index) => ({ at: t0 + index * DAY, value })),
+  },
+  render: (args) => (
+    <div className="w-40">
+      <SeriesSparkline {...args} />
+    </div>
+  ),
+};
+
+export const SingleReading: Story = {
+  args: {
+    label: "Weight, single reading",
+    points: [{ at: t0, value: 71.4 }],
+  },
+  render: (args) => (
+    <div className="w-40">
+      <SeriesSparkline {...args} />
+    </div>
+  ),
+};

package/src/primitives/series-sparkline.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { SeriesSparkline } from "./series-sparkline";
+
+afterEach(cleanup);
+
+const points = [
+  { at: "2026-10-19T07:00:00.000Z", value: 62 },
+  { at: "2026-10-20T07:00:00.000Z", value: 60 },
+  { at: "2026-10-21T07:00:00.000Z", value: 63 },
+];
+
+describe("SeriesSparkline", () => {
+  it("renders an accessible svg with line, area and a last-point marker", () => {
+    const { container } = render(<SeriesSparkline points={points} label="Resting heart rate" />);
+    const svg = screen.getByRole("img", { name: "Resting heart rate" });
+    expect(svg.tagName).toBe("svg");
+    expect(svg.querySelector("title")!.textContent).toBe("Resting heart rate");
+    const paths = container.querySelectorAll("path");
+    expect(paths).toHaveLength(2);
+    expect(paths[0]!.getAttribute("d")).toMatch(/^M.*Z$/);
+    expect(paths[1]!.getAttribute("d")).toMatch(/^M/);
+    expect(paths[1]!.getAttribute("d")).not.toContain("Z");
+    expect(container.querySelectorAll("circle")).toHaveLength(1);
+  });
+
+  it("keeps every stroke and fill on currentColor against token classes", () => {
+    const { container } = render(<SeriesSparkline points={points} label="Resting heart rate" />);
+    const svg = container.querySelector("svg")!;
+    expect(svg.getAttribute("class")).toContain("text-primary");
+    for (const element of Array.from(container.querySelectorAll("[stroke], [fill]"))) {
+      const paint = element.getAttribute("stroke") ?? element.getAttribute("fill");
+      expect(["currentColor", "none"]).toContain(paint);
+    }
+  });
+
+  it("draws only the marker for a single reading and nothing for none", () => {
+    const { container, rerender } = render(
+      <SeriesSparkline points={[points[0]!]} label="Resting heart rate" />,
+    );
+    expect(container.querySelectorAll("path")).toHaveLength(0);
+    expect(container.querySelectorAll("circle")).toHaveLength(1);
+    rerender(<SeriesSparkline points={[]} label="Resting heart rate" />);
+    expect(container.querySelectorAll("circle")).toHaveLength(0);
+  });
+
+  it("preserves ref, caller attributes and caller classes", () => {
+    const ref = React.createRef<SVGSVGElement>();
+    const { container } = render(
+      <SeriesSparkline ref={ref} points={points} label="HRV" data-testid="hrv" className="h-6" />,
+    );
+    expect(ref.current).toBe(container.querySelector("svg"));
+    expect(screen.getByTestId("hrv").getAttribute("class")).toContain("h-6");
+  });
+});

package/src/primitives/series-sparkline.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { chartPresentation } from "../presentation";
+import { cn } from "../lib/utils";
+import {
+  normalizeSeries,
+  seriesAreaPath,
+  seriesExtent,
+  seriesLinePath,
+  seriesScale,
+  type SeriesPointInput,
+} from "../lib/series";
+
+export type SeriesSparklineProps = Omit<React.SVGAttributes<SVGSVGElement>, "points"> & {
+  points: SeriesPointInput[];
+  /** Accessible name; also rendered as the svg title. */
+  label: string;
+};
+
+/** Inline trend glyph: viewBox-scaled, currentColor against `text-primary`. */
+const SeriesSparkline = React.forwardRef<SVGSVGElement, SeriesSparklineProps>(
+  ({ points, label, className, ...props }, ref) => {
+    const series = normalizeSeries(points);
+    const width = 120;
+    const height = 36;
+    const pad = 3;
+    const scale = seriesScale(seriesExtent(series), width, height, pad);
+    const placed = series.map((point) => ({
+      x: scale.x(point.at),
+      y: scale.y(point.value),
+    }));
+    const last = placed[placed.length - 1];
+    return (
+      <svg
+        ref={ref}
+        viewBox={`0 0 ${width} ${height}`}
+        preserveAspectRatio="none"
+        role="img"
+        aria-label={label}
+        className={cn(chartPresentation.sparkline, className)}
+        {...props}
+      >
+        <title>{label}</title>
+        {placed.length > 1 && (
+          <>
+            <path
+              d={seriesAreaPath(placed, height - pad)}
+              fill="currentColor"
+              className={chartPresentation.area}
+              stroke="none"
+            />
+            <path
+              d={seriesLinePath(placed)}
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              vectorEffect="non-scaling-stroke"
+            />
+          </>
+        )}
+        {last && <circle cx={last.x} cy={last.y} r="2" fill="currentColor" />}
+      </svg>
+    );
+  },
+);
+SeriesSparkline.displayName = "SeriesSparkline";
+
+export { SeriesSparkline };