@xemahq/ui-kernel 0.6.0 → 0.6.1

package/src/ui/charts/bar-chart.tsx

@@ -0,0 +1,135 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// BarChart — categorical bars, pure SVG (Wave 9.2)
+// ═══════════════════════════════════════════════════════════════════════════
+import type { ReactNode } from 'react';
+
+import { ChartEmpty, ChartFrame, type ChartLegendItem } from './chart-frame';
+import type { ChartBaseProps, ChartDatum } from './chart-types';
+import {
+  buildAriaSummary,
+  chartColorAt,
+  defaultFormatValue,
+  finitePoints,
+  niceScale,
+} from './chart-utils';
+
+// Internal coordinate space — the `viewBox`. `width="100%"` makes the SVG scale
+// to its container (D20 fluid), so these are ratios, not device pixels.
+const VIEW_W = 640;
+const VIEW_H = 360;
+const PAD = { top: 12, right: 12, bottom: 44, left: 48 } as const;
+const PLOT_L = PAD.left;
+const PLOT_R = VIEW_W - PAD.right;
+const PLOT_T = PAD.top;
+const PLOT_B = VIEW_H - PAD.bottom;
+const PLOT_W = PLOT_R - PLOT_L;
+const PLOT_H = PLOT_B - PLOT_T;
+
+export interface BarChartProps extends ChartBaseProps {
+  /** The bars — one per labelled datum. */
+  readonly data: readonly ChartDatum[];
+}
+
+export function BarChart({
+  data,
+  title,
+  ariaLabel,
+  formatValue,
+  className,
+  emptyLabel = 'No data',
+}: BarChartProps): ReactNode {
+  const format = formatValue ?? defaultFormatValue;
+  const points = finitePoints(data);
+
+  if (points.length === 0) {
+    return <ChartEmpty title={title} label={emptyLabel} className={className} />;
+  }
+
+  const values = points.map((p) => p.value);
+  const scale = niceScale(Math.min(...values), Math.max(...values));
+  const span = scale.max - scale.min;
+  const yToPx = (v: number): number => PLOT_B - ((v - scale.min) / span) * PLOT_H;
+  const baseline = yToPx(0);
+
+  const band = PLOT_W / points.length;
+  const barW = Math.min(band * 0.62, 72);
+
+  const legend: ChartLegendItem[] = points.map((p, i) => ({
+    label: p.label,
+    value: format(p.value),
+    color: chartColorAt(i, p.color),
+  }));
+
+  const summary = ariaLabel ?? buildAriaSummary(title, points, format, 'bar');
+
+  const plot = (
+    <svg
+      role="img"
+      aria-label={summary}
+      width="100%"
+      viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
+      preserveAspectRatio="xMidYMid meet"
+      className="block h-auto w-full overflow-visible text-ink-4"
+    >
+      {/* y gridlines + tick labels */}
+      {scale.ticks.map((t) => {
+        const y = yToPx(t);
+        return (
+          <g key={`y-${t}`}>
+            <line
+              x1={PLOT_L}
+              x2={PLOT_R}
+              y1={y}
+              y2={y}
+              stroke="currentColor"
+              strokeOpacity={t === 0 ? 0.35 : 0.12}
+            />
+            <text
+              x={PLOT_L - 8}
+              y={y}
+              textAnchor="end"
+              dominantBaseline="middle"
+              fontSize={12}
+              fill="currentColor"
+            >
+              {format(t)}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* bars + x labels */}
+      {points.map((p, i) => {
+        const cx = PLOT_L + band * i + band / 2;
+        const yv = yToPx(p.value);
+        const top = Math.min(yv, baseline);
+        const h = Math.max(1, Math.abs(baseline - yv));
+        return (
+          <g key={`bar-${p.label}-${i}`}>
+            <rect
+              x={cx - barW / 2}
+              y={top}
+              width={barW}
+              height={h}
+              rx={3}
+              fill={chartColorAt(i, p.color)}
+            >
+              <title>{`${p.label}: ${format(p.value)}`}</title>
+            </rect>
+            <text
+              x={cx}
+              y={PLOT_B + 16}
+              textAnchor="middle"
+              fontSize={12}
+              fill="currentColor"
+            >
+              {p.label}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+
+  return <ChartFrame plot={plot} legend={legend} className={className} />;
+}

package/src/ui/charts/chart-frame.tsx

@@ -0,0 +1,112 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Chart primitives — shared layout frame, legend and empty state (Wave 9.2)
+//
+// `ChartFrame` owns the D20 responsive contract: the plot is a fluid container
+// and the legend sits BESIDE it on wide viewports but MOVES BELOW the plot
+// below `md`. That decision is driven by `useIsMobile()` — which reads the one
+// shared `MOBILE_BREAKPOINT` token — never a second breakpoint.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { ReactNode } from 'react';
+
+import { cn } from '../cn';
+import { useIsMobile } from '../hooks/use-is-mobile';
+
+/** One row of the legend: a color swatch + its label + (optional) value. */
+export interface ChartLegendItem {
+  readonly label: string;
+  readonly color: string;
+  readonly value?: string;
+}
+
+interface ChartLegendProps {
+  readonly items: readonly ChartLegendItem[];
+  /** `below` stacks items into a wrapping row; `beside` stacks them vertically. */
+  readonly layout: 'beside' | 'below';
+}
+
+/**
+ * The legend. Meaning is carried by the text label + value — the swatch is a
+ * secondary cue, so a color-blind or monochrome reader loses nothing.
+ */
+export function ChartLegend({ items, layout }: ChartLegendProps): ReactNode {
+  if (items.length === 0) return null;
+  return (
+    <ul
+      className={cn(
+        'm-0 list-none p-0 text-body-2 text-ink-3',
+        layout === 'below'
+          ? 'flex flex-row flex-wrap gap-x-4 gap-y-1.5'
+          : 'flex flex-col gap-1.5',
+      )}
+    >
+      {items.map((item, i) => (
+        <li key={`${item.label}-${i}`} className="flex items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="inline-block h-2.5 w-2.5 shrink-0 rounded-sm"
+            style={{ backgroundColor: item.color }}
+          />
+          <span className="text-ink-3">{item.label}</span>
+          {item.value !== undefined && (
+            <span className="ml-auto font-medium tabular-nums text-ink">{item.value}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+interface ChartFrameProps {
+  /** The plot itself — a fluid `<svg>` with `width="100%"` + a `viewBox`. */
+  readonly plot: ReactNode;
+  readonly legend: readonly ChartLegendItem[];
+  readonly className?: string;
+}
+
+/**
+ * Wraps a plot + legend with the responsive D20 layout. Uses `useIsMobile()`
+ * so below `md` the legend renders BELOW the plot; at/above `md` it sits to the
+ * right. One token (`MOBILE_BREAKPOINT`), no second breakpoint.
+ */
+export function ChartFrame({ plot, legend, className }: ChartFrameProps): ReactNode {
+  const isMobile = useIsMobile();
+  return (
+    <div className={cn('w-full min-w-0 text-ink-3', className)}>
+      <div
+        className={cn(
+          'flex min-w-0 gap-4',
+          isMobile ? 'flex-col' : 'flex-row items-start',
+        )}
+      >
+        <div className="min-w-0 flex-1">{plot}</div>
+        <ChartLegend items={legend} layout={isMobile ? 'below' : 'beside'} />
+      </div>
+    </div>
+  );
+}
+
+interface ChartEmptyProps {
+  readonly title: string;
+  readonly label: string;
+  readonly className?: string;
+}
+
+/**
+ * Explicit empty state — rendered instead of a broken/NaN SVG when a series has
+ * no finite points. Still carries `role="img"` + an `aria-label` so assistive
+ * tech announces the (empty) chart rather than a silent gap.
+ */
+export function ChartEmpty({ title, label, className }: ChartEmptyProps): ReactNode {
+  return (
+    <div
+      role="img"
+      aria-label={`${title}: ${label}`}
+      className={cn(
+        'flex w-full items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/20 px-4 py-10 text-body-2 text-ink-4',
+        className,
+      )}
+    >
+      {label}
+    </div>
+  );
+}

package/src/ui/charts/chart-types.ts

@@ -0,0 +1,52 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Chart primitives — public typed contracts (Wave 9.2)
+//
+// Pure-SVG chart primitives shipped by the kernel (NO external chart library).
+// These are the closed, typed shapes every chart primitive consumes. No `any`.
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** A single labelled numeric point. The atom of every chart series. */
+export interface ChartDatum {
+  /** Human-readable category / x-axis label. Always present (never color-only). */
+  readonly label: string;
+  /** The numeric value. Non-finite values (NaN/Infinity) are skipped, never plotted. */
+  readonly value: number;
+  /**
+   * Optional per-datum color override — any CSS color, `currentColor`, or a
+   * `var(--…)` token. When omitted the themeable palette assigns one by index.
+   */
+  readonly color?: string;
+}
+
+/** A named line series over a shared set of x-labels (LineChart). */
+export interface ChartLineSeries {
+  /** Series name — shown in the legend and the aria summary. */
+  readonly name: string;
+  /** The ordered points of this line. */
+  readonly points: readonly ChartDatum[];
+  /** Optional color override (CSS color / `currentColor` / `var(--…)`). */
+  readonly color?: string;
+}
+
+/** Formats a raw numeric value for axis ticks, legend and the aria summary. */
+export type ChartValueFormatter = (value: number) => string;
+
+/** Props shared by every chart primitive. */
+export interface ChartBaseProps {
+  /**
+   * Chart title — the spine of the `aria-label` summary and (optionally) a
+   * visible caption. Required: an accessible chart always announces what it is.
+   */
+  readonly title: string;
+  /**
+   * Overrides the auto-generated `aria-label`. When omitted, each primitive
+   * builds a deterministic summary from `title` + the data.
+   */
+  readonly ariaLabel?: string;
+  /** Formats values in ticks / legend / summary. Deterministic by contract. */
+  readonly formatValue?: ChartValueFormatter;
+  /** Extra classes for the outermost wrapper. */
+  readonly className?: string;
+  /** Label rendered by the empty state when the series has no finite points. */
+  readonly emptyLabel?: string;
+}

package/src/ui/charts/chart-utils.ts

@@ -0,0 +1,158 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Chart primitives — deterministic, pure helpers (Wave 9.2)
+//
+// Scale/tick maths, the themeable color palette, value formatting, finite-value
+// filtering and aria-summary construction. Everything here is a pure function:
+// given the same input it returns the same output (no Math.random, no Date.now)
+// so the same data always yields the same SVG.
+// ═══════════════════════════════════════════════════════════════════════════
+import type { ChartDatum, ChartValueFormatter } from './chart-types';
+
+/**
+ * Themeable categorical palette. Each slot is a CSS custom property with a
+ * graceful fallback: a host that defines `--chart-N` (per theme) wins; slot 0
+ * additionally follows the app brand via `--app-primary-color`. The fallbacks
+ * are the platform's bold, dark-mode-safe primaries — used only when no token
+ * is defined, so a chart is never invisible. Data is NEVER conveyed by color
+ * alone: every primitive also renders the label + value.
+ */
+export const CHART_PALETTE: readonly string[] = [
+  'var(--app-primary-color, var(--chart-1, #00A4EF))',
+  'var(--chart-2, #7FBA00)',
+  'var(--chart-3, #FFB900)',
+  'var(--chart-4, #F25022)',
+  'var(--chart-5, #8B5CF6)',
+  'var(--chart-6, #EC4899)',
+  'var(--chart-7, #06B6D4)',
+  'var(--chart-8, #F59E0B)',
+];
+
+/** Resolve the color for the datum at `index`: explicit override wins, else palette (wraps). */
+export function chartColorAt(index: number, override?: string): string {
+  if (override !== undefined && override.length > 0) return override;
+  return CHART_PALETTE[index % CHART_PALETTE.length];
+}
+
+/**
+ * Deterministic default value formatter. Integers render bare; fractions get a
+ * fixed 2 decimals (with trailing zeros trimmed). Locale-free on purpose so the
+ * SVG is byte-identical across machines/locales.
+ */
+export function defaultFormatValue(value: number): string {
+  if (!Number.isFinite(value)) return '—';
+  if (Number.isInteger(value)) return String(value);
+  return String(Number(value.toFixed(2)));
+}
+
+/** A datum whose value is a finite number (post-filter). */
+export interface FiniteDatum {
+  readonly label: string;
+  readonly value: number;
+  readonly color?: string;
+}
+
+/** Keep only points with a finite numeric value — NaN/±Infinity are dropped, never plotted. */
+export function finitePoints(points: readonly ChartDatum[]): FiniteDatum[] {
+  const out: FiniteDatum[] = [];
+  for (const p of points) {
+    if (Number.isFinite(p.value)) {
+      out.push({ label: p.label, value: p.value, color: p.color });
+    }
+  }
+  return out;
+}
+
+// ── nice-number axis scale (deterministic) ──────────────────────────────────
+
+function niceNum(range: number, round: boolean): number {
+  const exponent = Math.floor(Math.log10(range));
+  const pow = Math.pow(10, exponent);
+  const fraction = range / pow;
+  let niceFraction: number;
+  if (round) {
+    if (fraction < 1.5) niceFraction = 1;
+    else if (fraction < 3) niceFraction = 2;
+    else if (fraction < 7) niceFraction = 5;
+    else niceFraction = 10;
+  } else {
+    if (fraction <= 1) niceFraction = 1;
+    else if (fraction <= 2) niceFraction = 2;
+    else if (fraction <= 5) niceFraction = 5;
+    else niceFraction = 10;
+  }
+  return niceFraction * pow;
+}
+
+/** Trim binary-float dust so ticks like 0.30000000000000004 read as 0.3. */
+function tidy(value: number): number {
+  return Number(value.toPrecision(12));
+}
+
+export interface NiceScale {
+  readonly min: number;
+  readonly max: number;
+  readonly ticks: readonly number[];
+}
+
+export interface NiceScaleOptions {
+  /**
+   * Pin the baseline at 0 so heights are proportional (bars, donuts). When
+   * `false` the domain hugs the data — better for line charts over a narrow
+   * band. Defaults to `true`.
+   */
+  readonly pinZero?: boolean;
+  readonly maxTicks?: number;
+}
+
+/**
+ * Compute a "nice" axis domain + evenly-spaced ticks for `[dataMin, dataMax]`.
+ * With `pinZero` (default) the baseline is pinned at 0 so bar heights are
+ * proportional and negatives read below the axis. Fully deterministic; guards
+ * the degenerate all-equal / all-zero case instead of producing NaN.
+ */
+export function niceScale(
+  dataMin: number,
+  dataMax: number,
+  options: NiceScaleOptions = {},
+): NiceScale {
+  const pinZero = options.pinZero ?? true;
+  const maxTicks = options.maxTicks ?? 5;
+  let lo = pinZero ? Math.min(0, dataMin) : dataMin;
+  let hi = pinZero ? Math.max(0, dataMax) : dataMax;
+  if (lo === hi) {
+    // Flat series (e.g. all equal): open a unit window so we never divide by 0.
+    hi = lo + 1;
+  }
+  const ticks: number[] = [];
+  const range = niceNum(hi - lo, false);
+  const step = niceNum(range / Math.max(1, maxTicks - 1), true);
+  const niceMin = Math.floor(lo / step) * step;
+  const niceMax = Math.ceil(hi / step) * step;
+  for (let v = niceMin; v <= niceMax + step * 0.5; v += step) {
+    ticks.push(tidy(v));
+  }
+  return { min: tidy(niceMin), max: tidy(niceMax), ticks };
+}
+
+// ── aria summary ────────────────────────────────────────────────────────────
+
+/**
+ * Build a concise, deterministic aria-label summary from a title and the
+ * finite points. Keeps it readable: title, count, then up to `maxItems`
+ * "label value" pairs (with an ellipsis when truncated). Color is never the
+ * carrier of meaning — this text is.
+ */
+export function buildAriaSummary(
+  title: string,
+  points: readonly FiniteDatum[],
+  format: ChartValueFormatter,
+  noun: string,
+  maxItems = 8,
+): string {
+  if (points.length === 0) return `${title}: no data.`;
+  const shown = points.slice(0, maxItems);
+  const pairs = shown.map((p) => `${p.label} ${format(p.value)}`).join(', ');
+  const suffix = points.length > maxItems ? `, and ${points.length - maxItems} more` : '';
+  const count = points.length === 1 ? `1 ${noun}` : `${points.length} ${noun}s`;
+  return `${title}: ${count}. ${pairs}${suffix}.`;
+}

package/src/ui/charts/charts.test.tsx

@@ -0,0 +1,204 @@
+// ═══════════════════════════════════════════════════════════════════════════
+// Chart primitives — render proofs (Wave 9.2)
+//
+// Repo convention: `renderToStaticMarkup` (no @testing-library, effects DON'T
+// run — so `useIsMobile` stays false and the desktop layout renders). We assert
+// on the produced SVG markup: element counts, the fluid `viewBox` + width,
+// the aria summary, the legend, and — critically — that no coordinate ever
+// serializes as `NaN`.
+// ═══════════════════════════════════════════════════════════════════════════
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { BarChart } from './bar-chart';
+import { DonutChart } from './donut-chart';
+import { LineChart } from './line-chart';
+import { Sparkline } from './sparkline';
+
+const count = (markup: string, tag: string): number =>
+  markup.match(new RegExp(`<${tag}[\\s>]`, 'g'))?.length ?? 0;
+
+describe('BarChart', () => {
+  const data = [
+    { label: 'Q1', value: 120 },
+    { label: 'Q2', value: 340 },
+    { label: 'Q3', value: 210 },
+  ];
+
+  it('renders one bar per datum, fluid SVG, legend and aria summary', () => {
+    const markup = renderToStaticMarkup(<BarChart title="Revenue" data={data} />);
+    expect(count(markup, 'rect')).toBe(3);
+    expect(markup).toContain('viewBox="0 0 640 360"');
+    expect(markup).toContain('width="100%"');
+    expect(markup).toContain('role="img"');
+    // aria summary carries the title + the values (data is never color-only).
+    expect(markup).toContain('aria-label="Revenue:');
+    expect(markup).toContain('Q2 340');
+    // legend beside the plot (desktop: effects don't run so useIsMobile=false).
+    expect(count(markup, 'li')).toBe(3);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('renders an explicit empty state (no NaN) for an empty series', () => {
+    const markup = renderToStaticMarkup(<BarChart title="Revenue" data={[]} />);
+    expect(markup).toContain('role="img"');
+    expect(markup).toContain('aria-label="Revenue: No data"');
+    expect(count(markup, 'rect')).toBe(0);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('skips a non-finite value instead of emitting NaN coordinates', () => {
+    const markup = renderToStaticMarkup(
+      <BarChart
+        title="Revenue"
+        data={[
+          { label: 'Q1', value: 120 },
+          { label: 'Q2', value: Number.NaN },
+          { label: 'Q3', value: Number.POSITIVE_INFINITY },
+        ]}
+      />,
+    );
+    // only the one finite bar survives
+    expect(count(markup, 'rect')).toBe(1);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('honours a custom value formatter', () => {
+    const markup = renderToStaticMarkup(
+      <BarChart title="Revenue" data={data} formatValue={(v) => `$${v}`} />,
+    );
+    expect(markup).toContain('$340');
+  });
+});
+
+describe('LineChart', () => {
+  const series = [
+    {
+      name: 'Sessions',
+      points: [
+        { label: 'Mon', value: 10 },
+        { label: 'Tue', value: 30 },
+        { label: 'Wed', value: 20 },
+      ],
+    },
+    {
+      name: 'Errors',
+      points: [
+        { label: 'Mon', value: 2 },
+        { label: 'Tue', value: 5 },
+        { label: 'Wed', value: 1 },
+      ],
+    },
+  ];
+
+  it('renders a polyline per series with point markers, fluid + accessible', () => {
+    const markup = renderToStaticMarkup(<LineChart title="Traffic" series={series} />);
+    expect(count(markup, 'polyline')).toBe(2);
+    expect(count(markup, 'circle')).toBe(6);
+    expect(markup).toContain('viewBox="0 0 640 360"');
+    expect(markup).toContain('width="100%"');
+    expect(markup).toContain('role="img"');
+    expect(markup).toContain('aria-label="Traffic:');
+    // two named series => two legend rows
+    expect(count(markup, 'li')).toBe(2);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('breaks the line at a non-finite gap (no NaN, one fewer marker)', () => {
+    const markup = renderToStaticMarkup(
+      <LineChart
+        title="Traffic"
+        series={[
+          {
+            name: 'Sessions',
+            points: [
+              { label: 'Mon', value: 10 },
+              { label: 'Tue', value: Number.NaN },
+              { label: 'Wed', value: 20 },
+            ],
+          },
+        ]}
+      />,
+    );
+    // gap splits the single line into two 1-point segments; markers only for finite points
+    expect(count(markup, 'circle')).toBe(2);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('renders the empty state when no series has a finite point', () => {
+    const markup = renderToStaticMarkup(
+      <LineChart title="Traffic" series={[{ name: 'X', points: [] }]} />,
+    );
+    expect(markup).toContain('aria-label="Traffic: No data"');
+    expect(count(markup, 'polyline')).toBe(0);
+    expect(markup).not.toContain('NaN');
+  });
+});
+
+describe('Sparkline', () => {
+  it('renders a fluid trend polyline with an aria summary', () => {
+    const markup = renderToStaticMarkup(
+      <Sparkline title="Latency" values={[5, 8, 6, 9, 7]} />,
+    );
+    expect(count(markup, 'polyline')).toBe(1);
+    expect(markup).toContain('width="100%"');
+    expect(markup).toContain('viewBox="0 0 100 28"');
+    expect(markup).toContain('role="img"');
+    expect(markup).toContain('aria-label="Latency:');
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('renders an empty state for no finite values', () => {
+    const markup = renderToStaticMarkup(
+      <Sparkline title="Latency" values={[Number.NaN, Number.POSITIVE_INFINITY]} />,
+    );
+    expect(markup).toContain('aria-label="Latency: No data"');
+    expect(count(markup, 'polyline')).toBe(0);
+    expect(markup).not.toContain('NaN');
+  });
+});
+
+describe('DonutChart', () => {
+  const data = [
+    { label: 'Passed', value: 70 },
+    { label: 'Failed', value: 20 },
+    { label: 'Skipped', value: 10 },
+  ];
+
+  it('renders one arc path per positive slice, with legend percentages', () => {
+    const markup = renderToStaticMarkup(<DonutChart title="Results" data={data} />);
+    expect(count(markup, 'path')).toBe(3);
+    expect(markup).toContain('viewBox="0 0 200 200"');
+    expect(markup).toContain('width="100%"');
+    expect(markup).toContain('role="img"');
+    expect(markup).toContain('aria-label="Results:');
+    // legend shows label + value + percent (never color-only)
+    expect(markup).toContain('70%');
+    expect(count(markup, 'li')).toBe(3);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('skips negative / non-finite slices', () => {
+    const markup = renderToStaticMarkup(
+      <DonutChart
+        title="Results"
+        data={[
+          { label: 'Passed', value: 70 },
+          { label: 'Bad', value: -5 },
+          { label: 'Worse', value: Number.NaN },
+        ]}
+      />,
+    );
+    expect(count(markup, 'path')).toBe(1);
+    expect(markup).not.toContain('NaN');
+  });
+
+  it('renders the empty state when every value is zero', () => {
+    const markup = renderToStaticMarkup(
+      <DonutChart title="Results" data={[{ label: 'None', value: 0 }]} />,
+    );
+    expect(markup).toContain('aria-label="Results: No data"');
+    expect(count(markup, 'path')).toBe(0);
+    expect(markup).not.toContain('NaN');
+  });
+});