@blotch/dolan 22.2.2 → 22.2.4

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

@@ -1,136 +1,151 @@
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+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 type { XYDatum } from '../chart/chart-presets';
+import { UiAreaChart, 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);
-    }
-  });
+const data = [
+  { x: 0, y: 4 },
+  { x: 1, y: -2 },
+  { x: 2, y: 6 },
+];
 
-  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);
+/**
+ * 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('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);
+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('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,
+  it('keeps the baseline in view', () => {
+    const { scene } = shapes(
+      areaChartDefinition({
+        data: [
+          { x: 0, y: 5 },
+          { x: 1, y: 8 },
+        ],
+        baseline: -10,
+      }),
     );
-    expect(columns).toEqual([]);
+    expect(scene.scales['y']!.domain[0]).toBeLessThanOrEqual(-10);
   });
 
-  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([]);
-  });
-
-  it('returns no columns for a non-positive plot width', () => {
+  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(
-      computeAreaColumns(
-        [
-          { x: 0, y: 0 },
-          { x: 10, y: 10 },
-        ],
-        100,
-        0,
-        10,
-      ),
-    ).toEqual([]);
+      (found.find((n) => n.kind === 'polyline') as { path?: string }).path,
+    ).toContain('C');
+    expect(definition.tooltip).toBe(false);
   });
+});
 
-  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,
-    );
-    // Strip at x=0 has center=10 which is inside the (degenerate) segment.
-    expect(columns.length).toBeGreaterThan(0);
-    expect(columns[0].top).toBeCloseTo(20);
+@Component({
+  imports: [UiAreaChart],
+  template: `
+    <ui-area-chart
+      [data]="data"
+      [width]="300"
+      [baseline]="baseline()"
+      [fillOpacity]="0.3"
+      (pointTap)="tapped.push($event)"
+    />
+  `,
+})
+class AreaChartHost {
+  readonly data = data;
+  readonly baseline = signal(0);
+  /** Every `pointTap`, in order. */
+  readonly tapped: XYDatum[] = [];
+}
+
+/**
+ * The SVG the chart's marks layer draws.
+ */
+const marksSvg = (container: Element) =>
+  container.querySelectorAll('svg')[1]!.getAttribute('content')!;
+
+/**
+ * Where the chart drew each dot.
+ */
+const dotsDrawn = (container: Element) =>
+  [
+    ...marksSvg(container).matchAll(/<circle cx="([\d.-]+)" cy="([\d.-]+)"/g),
+  ].map(([, x, y]) => ({ x: Number(x), y: Number(y) }));
+
+/**
+ * Touches a spot of the chart and lifts the finger right there: a tap.
+ */
+const tap = async (container: Element, at: { x: number; y: number }) => {
+  const root = container.querySelector('[accessibility-label]')!;
+  fireEvent.touchstart(root, { touches: [at] });
+  fireEvent.touchend(root, { touches: [at] });
+  await waitForUpdate();
+};
+
+/**
+ * The texts of the chart's labels, such as its ticks.
+ */
+const labelTexts = (container: Element) =>
+  [...container.querySelectorAll('text')].map((text) => text.textContent);
+
+describe('UiAreaChart', () => {
+  it('fills under its line with its inputs, keeping the baseline in view', async () => {
+    const { componentRef, container } = await render(AreaChartHost);
+    expect(marksSvg(container)).toContain('fill-opacity="0.3"');
+    expect(dotsDrawn(container)).toHaveLength(3);
+    expect(labelTexts(container)).not.toContain('-20');
+
+    (componentRef.instance as AreaChartHost).baseline.set(-20);
+    await waitForUpdate();
+    expect(labelTexts(container)).toContain('-20');
   });
 
-  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("emits a tapped point's datum, and nothing for a tap off the points", async () => {
+    const { componentRef, container } = await render(AreaChartHost);
+    const host = componentRef.instance as AreaChartHost;
+    const first = dotsDrawn(container)[0]!;
+    await tap(container, { x: first.x + 1, y: first.y + 1 });
+    expect(host.tapped).toEqual([data[0]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([data[0]]);
   });
 });