@blotch/dolan 22.2.1 → 22.2.3

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

@@ -1,174 +1,58 @@
-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,
+  SceneRect,
+} 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 { UiBarChart, UiBarSeries } from './bar-chart';
+import { UiBarChart } from './bar-chart';
+
+/**
+ * Every bar in a definition's scene.
+ */
+const bars = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 300,
+    height: 200,
+  });
+  const found: SceneRect[] = [];
+  const walk = (nodes: readonly SceneNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') {
+        if (!node.focus) walk(node.children);
+      } else if (node.kind === 'rect') found.push(node);
+    }
+  };
+  walk(scene.nodes);
+  return { scene, found };
+};
 
 describe('UiBarChart', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiBarChart);
-    expect(container).toBeTruthy();
-  });
-
-  it('folds the baseline into the y-axis domain', async () => {
-    const { componentRef } = await render(UiBarChart);
-    const inst = componentRef.instance as UiBarChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 5 },
-      { x: 1, y: 10 },
-      { x: 2, y: 8 },
-    ]);
-    setInputSignal(inst.baseline, 0);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      xAxis: () => { domain: readonly [number, number] };
-      yAxis: () => { domain: readonly [number, number] };
-      effectivePadding: () => { left?: number; right?: number };
-    };
-    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(0);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(10);
-    // 3 bars → half-bar inset = 0.5 / (3-1) = 0.25
-    expect(cast.effectivePadding().left).toBeCloseTo(0.25);
-    expect(cast.effectivePadding().right).toBeCloseTo(0.25);
-  });
-
-  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
-    const { componentRef } = await render(UiBarChart);
-    const inst = componentRef.instance as UiBarChart;
-    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);
-  });
-
-  it('single-datum series drops the half-bar padding', async () => {
-    const { componentRef } = await render(UiBarChart);
-    const inst = componentRef.instance as UiBarChart;
-    setInputSignal(inst.data, [{ x: 0, y: 5 }]);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      effectivePadding: () => { left?: number; right?: number };
-    };
-    // n === 1 → half === 0
-    expect(cast.effectivePadding().left).toBe(0);
-    expect(cast.effectivePadding().right).toBe(0);
-  });
+  type Internals = {
+    definition: () => ChartDefinition<any, any, any>;
+    onSelect(point: ChartPoint | null): void;
+  };
 
-  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+  it('builds its definition from its inputs', async () => {
     const { componentRef } = await render(UiBarChart);
-    const inst = componentRef.instance as UiBarChart;
-    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
-    expect(inst.yTickFormat()(1.005)).toBe('1');
+    const chart = componentRef.instance as UiBarChart;
+    setInputSignal(chart.data, [{ x: 'a', y: 1 }]);
+    setInputSignal(chart.color, 'red');
+    const { found } = bars((chart as unknown as Internals).definition());
+    expect(found[0]!.style?.fill).toBe('red');
   });
 
-  it('user padding overrides the auto half-bar inset per side', async () => {
+  it('emits the tapped datum', async () => {
     const { componentRef } = await render(UiBarChart);
-    const inst = componentRef.instance as UiBarChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 5 },
-      { x: 1, y: 10 },
-    ]);
-    setInputSignal(inst.padding, { left: 0.1 });
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      effectivePadding: () => { left?: number; right?: number };
-    };
-    // left explicitly set → wins; right still auto = 0.5
-    expect(cast.effectivePadding().left).toBeCloseTo(0.1);
-    expect(cast.effectivePadding().right).toBeCloseTo(0.5);
-  });
-});
-
-describe('UiBarSeries', () => {
-  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(UiBarSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiBarSeries;
-    setInputSignal(series.data, [
-      { x: 0, y: 2 },
-      { x: 5, y: 8 },
-      { x: 10, y: 5 },
-    ]);
-    await waitForUpdate();
-    return { parent, series };
-  };
-
-  it('renders a rectangle per datum with the fallback color', async () => {
-    const { series } = await renderSeries();
-    const cast = series as unknown as {
-      bars: () => { style: string; point: { x: number; y: number } }[];
-    };
-    const bars = cast.bars();
-    expect(bars.length).toBe(3);
-    for (const b of bars) {
-      expect(b.style).toContain('background-color: var(--primary)');
-    }
-  });
-
-  it('cycles through the per-bar palette when colors are provided', async () => {
-    const { series } = await renderSeries();
-    setInputSignal(series.colors, ['#f00', '#0f0']);
-    await waitForUpdate();
-    const cast = series as unknown as { bars: () => { style: string }[] };
-    const bars = cast.bars();
-    expect(bars[0].style).toContain('#f00');
-    expect(bars[1].style).toContain('#0f0');
-    // wraps around
-    expect(bars[2].style).toContain('#f00');
-  });
-
-  it('emits barTap with the source point when a bar is tapped', async () => {
-    const { series } = await renderSeries();
-    const cb = vi.fn();
-    series.barTap.subscribe(cb);
-    (
-      series as unknown as { onBarTap: (p: { x: number; y: number }) => void }
-    ).onBarTap({ x: 1, y: 2 });
-    expect(cb).toHaveBeenCalledWith({ x: 1, y: 2 });
-  });
-
-  it('single-datum series uses the fallback bar width', 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(UiBarSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiBarSeries;
-    setInputSignal(series.data, [{ x: 5, y: 5 }]);
-    await waitForUpdate();
-    const cast = series as unknown as { bars: () => { style: string }[] };
-    const [bar] = cast.bars();
-    // fallback = 24px
-    expect(bar.style).toContain('width: 24.00px');
-  });
-
-  it('clamps the baseline into the plot when it lies outside the domain', async () => {
-    const { series } = await renderSeries();
-    setInputSignal(series.baseline, 999);
-    await waitForUpdate();
-    const cast = series as unknown as { bars: () => { style: string }[] };
-    expect(cast.bars().length).toBe(3);
+    const chart = componentRef.instance as UiBarChart;
+    const tapped = vi.fn();
+    chart.barTap.subscribe(tapped);
+    const internals = chart as unknown as Internals;
+    internals.onSelect({ datum: { x: 'a', y: 1 } } as ChartPoint);
+    internals.onSelect(null);
+    expect(tapped.mock.calls).toEqual([[{ x: 'a', y: 1 }]]);
   });
 });

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

@@ -1,73 +1,97 @@
-import { describe, expect, it, vi } from 'vitest';
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import type {
+  ChartDefinition,
+  SceneNode,
+  SceneRect,
+} from '@tanstack/charts/types';
+import { describe, expect, it } from 'vitest';
+import { barChartDefinition } from './bar-chart';
 
-// Mock Angular (and the transitively-loaded cartesian-chart Angular usage) so
-// importing the module needs no framework runtime. Only the exported pure
-// `computeBars` is exercised; the components are never built.
-vi.mock('@angular/core', () => ({
-  Component: () => () => {},
-  ViewEncapsulation: { None: 0 },
-  computed: () => () => {},
-  inject: () => ({}),
-  input: () => () => {},
-  output: () => () => {},
-}));
-
-vi.mock('@blotch/angular-lynx', () => ({
-  LYNX_ELEMENTS: [],
-  // cartesian-chart (imported transitively) registers these in its decorator.
-  LynxGestureDetector: class {},
-  PanGesture: class {},
-  PinchGesture: class {},
-  Gesture: { Simultaneous: () => ({}) },
-}));
+/**
+ * Every bar in a definition's scene.
+ */
+const bars = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 300,
+    height: 200,
+  });
+  const found: SceneRect[] = [];
+  const walk = (nodes: readonly SceneNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') {
+        if (!node.focus) walk(node.children);
+      } else if (node.kind === 'rect') found.push(node);
+    }
+  };
+  walk(scene.nodes);
+  return { scene, found };
+};
 
-const { computeBars } = await import('./bar-chart');
+describe('barChartDefinition', () => {
+  const week = [
+    { x: 'Mon', y: 5 },
+    { x: 'Tue', y: 8 },
+    { x: 'Wed', y: 3 },
+  ];
 
-// Screen y grows downward, so a value ABOVE the baseline has a SMALLER pixel y
-// than baseY. Baseline pixel y = 100 in these cases (bottom of the plot).
-describe('computeBars', () => {
-  it('draws a positive bar from the baseline up to the value, centered on cx', () => {
-    // value projects to y=30 (above the baseline at y=100).
-    const [bar] = computeBars([{ cx: 50, valueY: 30 }], 100, 12);
-    expect(bar.top).toBe(30); // min(valueY, baseY) — the higher edge
-    expect(bar.height).toBe(70); // |valueY - baseY|
-    expect(bar.width).toBe(12);
-    expect(bar.left).toBe(50 - 6); // cx - barWidth/2
+  it('puts category labels on a band scale', () => {
+    const { scene, found } = bars(
+      barChartDefinition({ data: week, radius: 4 }),
+    );
+    expect(found).toHaveLength(3);
+    expect(scene.scales['x']!.bandwidth).toBeGreaterThan(0);
+    expect(found[0]!.style?.fill).toBe('var(--primary)');
   });
 
-  it('draws a negative bar growing downward from the baseline', () => {
-    // value projects BELOW the baseline, so valueY (140) > baseY (100).
-    const [bar] = computeBars([{ cx: 20, valueY: 140 }], 100, 10);
-    expect(bar.top).toBe(100); // min(valueY, baseY) = baseY here
-    expect(bar.height).toBe(40); // grows down to the value
+  it('cycles per-bar colors on categories', () => {
+    const { found } = bars(
+      barChartDefinition({ data: week, colors: ['red', 'blue'] }),
+    );
+    expect(found.map((bar) => bar.style?.fill)).toEqual(['red', 'blue', 'red']);
   });
 
-  it('draws nothing (zero height) for a value exactly on the baseline', () => {
-    // A bar's height is its datum: on the baseline there is nothing to draw, so
-    // the default minBarHeight of 0 leaves it invisible rather than a sliver.
-    const [bar] = computeBars([{ cx: 0, valueY: 100 }], 100, 12);
-    expect(bar.height).toBe(0);
+  it('sizes bars on a band scale by barWidthRatio, clamped to 0–1', () => {
+    const wide = bars(
+      barChartDefinition({
+        data: week,
+        barWidthRatio: 2,
+        showXGrid: true,
+        xAxisLabel: 'Day',
+      }),
+    );
+    const narrow = bars(barChartDefinition({ data: week, barWidthRatio: 0.2 }));
+    expect(narrow.found[0]!.width).toBeLessThan(wide.found[0]!.width);
   });
 
-  it('honors a custom minimum bar height', () => {
-    const [bar] = computeBars([{ cx: 0, valueY: 100 }], 100, 12, 3);
-    expect(bar.height).toBe(3);
-  });
+  const series = [
+    { x: 0, y: 4 },
+    { x: 1, y: -2 },
+    { x: 3, y: 6 },
+  ];
 
-  it('centers every bar on its own cx', () => {
-    const bars = computeBars(
-      [
-        { cx: 10, valueY: 40 },
-        { cx: 60, valueY: 20 },
-      ],
-      100,
-      8,
+  it('places numeric bars at their values, the ratio of the smallest gap wide', () => {
+    const { scene, found } = bars(
+      barChartDefinition({ data: series, barWidthRatio: 0.5 }),
     );
-    expect(bars[0].left).toBe(10 - 4);
-    expect(bars[1].left).toBe(60 - 4);
+    const x = scene.scales['x']!;
+    expect(x.bandwidth).toBe(0);
+    // The x axis has half a gap of room either side for the edge bars.
+    expect(x.domain[0]).toBeLessThanOrEqual(-0.5);
+    const unit = Math.abs(x.map(1) - x.map(0));
+    // rect trims a hair off each edge, so allow a couple of pixels.
+    expect(Math.abs(found[0]!.width - unit * 0.5)).toBeLessThan(2);
+    // Negative values grow down from the baseline.
+    expect(Math.abs(found[1]!.y - scene.scales['y']!.map(0))).toBeLessThan(1);
   });
 
-  it('returns an empty array for no bars', () => {
-    expect(computeBars([], 100, 12)).toEqual([]);
+  it('colors numeric bars through the color scale', () => {
+    const { found } = bars(
+      barChartDefinition({
+        data: series,
+        colors: ['red', 'blue'],
+        tooltip: false,
+      }),
+    );
+    expect(found.map((bar) => bar.style?.fill)).toEqual(['red', 'blue', 'red']);
   });
 });