@blotch/dolan 22.2.2 → 22.2.3

package/dist/ui/components/area-chart/area-chart-render.test.ts

@@ -1,121 +1,63 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { render } from '@blotch/angular-lynx-testing-library';
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import type {
+  ChartDefinition,
+  ChartPoint,
+  SceneNode,
+} from '@tanstack/charts/types';
 import { describe, expect, it, vi } from 'vitest';
 import { setInputSignal } from '../../../test-utils/set-input-signal';
-import { UiCartesianChart } from '../cartesian-chart/cartesian-chart';
-import { UiAreaChart, UiAreaSeries } from './area-chart';
+import { UiAreaChart } from './area-chart';
+
+const data = [
+  { x: 0, y: 4 },
+  { x: 1, y: -2 },
+  { x: 2, y: 6 },
+];
+
+/**
+ * Every drawn shape in a definition's scene, labels excluded.
+ */
+const shapes = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 300,
+    height: 200,
+  });
+  const found: SceneNode[] = [];
+  const walk = (nodes: readonly SceneNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') {
+        if (!node.focus) walk(node.children);
+      } else if (node.kind !== 'label') found.push(node);
+    }
+  };
+  walk(scene.nodes);
+  return { scene, found };
+};
 
 describe('UiAreaChart', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiAreaChart);
-    expect(container).toBeTruthy();
-  });
-
-  it('folds the baseline into the y-axis domain', async () => {
-    const { componentRef } = await render(UiAreaChart);
-    const inst = componentRef.instance as UiAreaChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 5 },
-      { x: 5, y: 10 },
-      { x: 10, y: 8 },
-    ]);
-    setInputSignal(inst.baseline, 0);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      xAxis: () => { domain: readonly [number, number]; ticks: number[] };
-      yAxis: () => { domain: readonly [number, number]; ticks: number[] };
-    };
-    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(0);
-    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(10);
-    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(0);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(10);
-  });
+  type Internals = {
+    definition: () => ChartDefinition<any, any, any>;
+    onSelect(point: ChartPoint | null): void;
+  };
 
-  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
+  it('builds its definition from its inputs', async () => {
     const { componentRef } = await render(UiAreaChart);
-    const inst = componentRef.instance as UiAreaChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 0 },
-      { x: 10, y: 10 },
-    ]);
-    setInputSignal(inst.xMin, -5);
-    setInputSignal(inst.xMax, 20);
-    setInputSignal(inst.yMin, -1);
-    setInputSignal(inst.yMax, 15);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      xAxis: () => { domain: readonly [number, number] };
-      yAxis: () => { domain: readonly [number, number] };
-    };
-    expect(cast.xAxis().domain[0]).toBeLessThanOrEqual(-5);
-    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(20);
-    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(-1);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(15);
+    const chart = componentRef.instance as UiAreaChart;
+    setInputSignal(chart.data, data);
+    setInputSignal(chart.baseline, -20);
+    const { scene } = shapes((chart as unknown as Internals).definition());
+    expect(scene.scales['y']!.domain[0]).toBeLessThanOrEqual(-20);
   });
 
-  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+  it('emits the tapped datum', async () => {
     const { componentRef } = await render(UiAreaChart);
-    const inst = componentRef.instance as UiAreaChart;
-    // JIT doesn't wire the child cartesian chart's [xTickFormat] input, so the
-    // default formatter never fires through the template. Invoke it directly.
-    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
-    expect(inst.yTickFormat()(1.005)).toBe('1');
-  });
-});
-
-describe('UiAreaSeries', () => {
-  const renderSeries = async () => {
-    const parentResult = await render(UiCartesianChart);
-    const parent = parentResult.componentRef.instance as UiCartesianChart;
-    setInputSignal(parent.xDomain, [0, 10]);
-    setInputSignal(parent.yDomain, [0, 10]);
-    await waitForUpdate();
-    const seriesResult = await render(UiAreaSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiAreaSeries;
-    setInputSignal(series.data, [
-      { x: 0, y: 0 },
-      { x: 5, y: 5 },
-      { x: 10, y: 10 },
-    ]);
-    await waitForUpdate();
-    return { parent, series };
-  };
-
-  it('renders fill columns and a translucent fill layer', async () => {
-    const { series } = await renderSeries();
-    const cast = series as unknown as {
-      columns: () => { style: string }[];
-      fillLayerStyle: () => string;
-    };
-    expect(cast.columns().length).toBeGreaterThan(0);
-    expect(cast.fillLayerStyle()).toContain('opacity');
-  });
-
-  it('smooth mode densely resamples the fill columns', async () => {
-    const { series } = await renderSeries();
-    const cast = series as unknown as { columns: () => { style: string }[] };
-    const straight = cast.columns().length;
-    setInputSignal(series.smooth, true);
-    await waitForUpdate();
-    // Smoothed curve produces at least as many columns as the straight one.
-    expect(cast.columns().length).toBeGreaterThanOrEqual(straight);
-  });
-
-  it('emits pointTap when the nested line series taps', async () => {
-    const { series } = await renderSeries();
-    const cb = vi.fn();
-    series.pointTap.subscribe(cb);
-    series.pointTap.emit({ x: 1, y: 2 });
-    expect(cb).toHaveBeenCalledWith({ x: 1, y: 2 });
-  });
-
-  it('clamps the baseline into the plot when it lies outside the domain', async () => {
-    const { series } = await renderSeries();
-    // baseline > yDomain upper bound → clamp to top of plot; columns still render
-    setInputSignal(series.baseline, 999);
-    await waitForUpdate();
-    const cast = series as unknown as { columns: () => { style: string }[] };
-    expect(Array.isArray(cast.columns())).toBe(true);
+    const chart = componentRef.instance as UiAreaChart;
+    const tapped = vi.fn();
+    chart.pointTap.subscribe(tapped);
+    const internals = chart as unknown as Internals;
+    internals.onSelect({ datum: data[0] } as ChartPoint);
+    internals.onSelect(null);
+    expect(tapped.mock.calls).toEqual([[data[0]]]);
   });
 });

package/dist/ui/components/area-chart/area-chart.test.ts

@@ -1,136 +1,71 @@
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import type { ChartDefinition, SceneNode } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { computeAreaColumns } from './area-chart';
+import { areaChartDefinition } from './area-chart';
 
-describe('computeAreaColumns', () => {
-  it('fills a flat line down to the baseline with uniform columns', () => {
-    // Horizontal line at pixel y=20, baseline at y=100, 30px plot, 10px strips.
-    const columns = computeAreaColumns(
-      [
-        { x: 0, y: 20 },
-        { x: 30, y: 20 },
-      ],
-      100,
-      30,
-      10,
-    );
-    expect(columns.map((c) => c.x)).toEqual([0, 10, 20]);
-    for (const column of columns) {
-      expect(column.top).toBeCloseTo(20);
-      expect(column.height).toBeCloseTo(80);
-    }
-  });
-
-  it('fills on both sides when the line crosses the baseline', () => {
-    // Line y = x from (0,0) to (100,100); baseline pixel y = 50.
-    const columns = computeAreaColumns(
-      [
-        { x: 0, y: 0 },
-        { x: 100, y: 100 },
-      ],
-      50,
-      100,
-      50,
-    );
-    expect(columns).toHaveLength(2);
-    // Strip centered at x=25 → line above the baseline: top at the line, down to it.
-    expect(columns[0].top).toBeCloseTo(25);
-    expect(columns[0].height).toBeCloseTo(25);
-    // Strip centered at x=75 → line below the baseline: top at the baseline.
-    expect(columns[1].top).toBeCloseTo(50);
-    expect(columns[1].height).toBeCloseTo(25);
-  });
-
-  it('skips strips whose center falls outside the data x-range', () => {
-    // Data spans x=[40,60] but the plot is 100 wide → only strips inside fill.
-    const columns = computeAreaColumns(
-      [
-        { x: 40, y: 10 },
-        { x: 60, y: 10 },
-      ],
-      100,
-      100,
-      10,
-    );
-    expect(columns.map((c) => c.x)).toEqual([40, 50]);
-    expect(columns.every((c) => c.x >= 40 && c.x <= 60)).toBe(true);
-  });
+const data = [
+  { x: 0, y: 4 },
+  { x: 1, y: -2 },
+  { x: 2, y: 6 },
+];
 
-  it('skips columns where the line sits on the baseline', () => {
-    // Flat line exactly at the baseline → zero height everywhere, nothing to fill.
-    const columns = computeAreaColumns(
-      [
-        { x: 0, y: 50 },
-        { x: 30, y: 50 },
-      ],
-      50,
-      30,
-      10,
-    );
-    expect(columns).toEqual([]);
+/**
+ * Every drawn shape in a definition's scene, labels excluded.
+ */
+const shapes = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 300,
+    height: 200,
   });
+  const found: SceneNode[] = [];
+  const walk = (nodes: readonly SceneNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') {
+        if (!node.focus) walk(node.children);
+      } else if (node.kind !== 'label') found.push(node);
+    }
+  };
+  walk(scene.nodes);
+  return { scene, found };
+};
 
-  it('returns no columns for fewer than two points', () => {
-    expect(computeAreaColumns([], 100, 100, 10)).toEqual([]);
-    expect(computeAreaColumns([{ x: 0, y: 0 }], 100, 100, 10)).toEqual([]);
+describe('areaChartDefinition', () => {
+  it('fills to the baseline under the line, with dots', () => {
+    const { found } = shapes(areaChartDefinition({ data, fillOpacity: 0.3 }));
+    const area = found.find((n) => n.kind === 'area')!;
+    expect(area.style).toMatchObject({
+      fill: 'var(--primary)',
+      fillOpacity: 0.3,
+    });
+    expect(found.filter((n) => n.kind === 'polyline')).toHaveLength(1);
+    expect(found.filter((n) => n.kind === 'dot')).toHaveLength(3);
   });
 
-  it('returns no columns for a non-positive plot width', () => {
-    expect(
-      computeAreaColumns(
-        [
-          { x: 0, y: 0 },
-          { x: 10, y: 10 },
+  it('keeps the baseline in view', () => {
+    const { scene } = shapes(
+      areaChartDefinition({
+        data: [
+          { x: 0, y: 5 },
+          { x: 1, y: 8 },
         ],
-        100,
-        0,
-        10,
-      ),
-    ).toEqual([]);
-  });
-
-  it('handles duplicate consecutive x values without dividing by zero', () => {
-    // Two points share x=10 → span === 0 branch. Choose plotWidth/stripWidth
-    // so that a strip's center lands exactly on x=10: stripWidth=20 puts the
-    // very first strip's center at x=0 + 20/2 = 10.
-    const columns = computeAreaColumns(
-      [
-        { x: 10, y: 20 },
-        { x: 10, y: 40 },
-      ],
-      100,
-      21,
-      20,
+        baseline: -10,
+      }),
     );
-    // Strip at x=0 has center=10 which is inside the (degenerate) segment.
-    expect(columns.length).toBeGreaterThan(0);
-    expect(columns[0].top).toBeCloseTo(20);
+    expect(scene.scales['y']!.domain[0]).toBeLessThanOrEqual(-10);
   });
 
-  it('falls back to the final y when interpolation hits the last-point edge', () => {
-    // Single-point case: points.length - 1 === 0 so the for-loop never runs.
-    // With x === first.x === last.x, `interpolateY` falls through to the
-    // defensive `return last.y` branch. Since a single point can't produce a
-    // fill on its own, `computeAreaColumns` returns [] due to the `< 2` guard —
-    // so drive the branch via a duplicate-x-at-both-ends 3-point series where
-    // the intermediate segment is degenerate but sits inside the domain.
-    // Easier: 3 collinear points where the middle segment has span=0 and the
-    // sample lands there but is *equal* to the endpoints.
-    // {x:0}, {x:5}, {x:5}, {x:10} - with samples at x=5.
-    // Actually the simplest reachable case is: [{x:5,y:1},{x:5,y:2}] with a
-    // strip whose center = 5. Then first.x=5, last.x=5, x >= first.x && x <= last.x
-    // enters loop, p1=p2 with span=0 → returns p1.y in the loop. Not the fallback.
-    // The fallback is only reachable if points contains a "gap": e.g. after the
-    // duplicate, but that violates the sorted-input contract. Accept as
-    // defensive — see the v8 ignore in the source.
-    const columns = computeAreaColumns(
-      [
-        { x: 0, y: 0 },
-        { x: 10, y: 10 },
-      ],
-      100,
-      10,
-      10,
-    );
-    expect(columns.length).toBeGreaterThan(0);
+  it('can leave out the dots, curve the line and drop the tooltip', () => {
+    const definition = areaChartDefinition({
+      data,
+      showDots: false,
+      smooth: true,
+      tooltip: false,
+    });
+    const { found } = shapes(definition);
+    expect(found.some((n) => n.kind === 'dot')).toBe(false);
+    expect(
+      (found.find((n) => n.kind === 'polyline') as { path?: string }).path,
+    ).toContain('C');
+    expect(definition.tooltip).toBe(false);
   });
 });