@blotch/dolan 22.2.2 → 22.2.3

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

@@ -1,174 +1,59 @@
-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 {
-  UiCandlestickChart,
-  UiCandlestickSeries,
-  type CandlestickPoint,
-} from './candlestick-chart';
-
-const period = (
-  x: number,
-  o: number,
-  h: number,
-  l: number,
-  c: number,
-): CandlestickPoint => ({ x, open: o, high: h, low: l, close: c });
+import { UiCandlestickChart } from './candlestick-chart';
+
+const data = [
+  { x: 0, open: 100, high: 104, low: 98, close: 102 },
+  { x: 1, open: 102, high: 103, low: 97, close: 99 },
+];
+
+const render2 = (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('UiCandlestickChart', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiCandlestickChart);
-    expect(container).toBeTruthy();
-  });
-
-  it('derives the y-axis from the lowest low and highest high', async () => {
-    const { componentRef } = await render(UiCandlestickChart);
-    const inst = componentRef.instance as UiCandlestickChart;
-    setInputSignal(inst.data, [
-      period(0, 10, 15, 5, 12),
-      period(1, 12, 20, 8, 18),
-      period(2, 18, 22, 14, 16),
-    ]);
-    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.xAxis().domain[0]).toBeLessThanOrEqual(0);
-    expect(cast.xAxis().domain[1]).toBeGreaterThanOrEqual(2);
-    expect(cast.yAxis().domain[0]).toBeLessThanOrEqual(5);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(22);
-    // 3 candles → half = 0.5 / 2 = 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(UiCandlestickChart);
-    const inst = componentRef.instance as UiCandlestickChart;
-    setInputSignal(inst.data, [period(0, 10, 15, 5, 12)]);
-    setInputSignal(inst.xMin, -5);
-    setInputSignal(inst.xMax, 20);
-    setInputSignal(inst.yMin, 0);
-    setInputSignal(inst.yMax, 100);
-    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(0);
-    expect(cast.yAxis().domain[1]).toBeGreaterThanOrEqual(100);
-  });
-
-  it('single-datum series drops the half-candle padding', async () => {
-    const { componentRef } = await render(UiCandlestickChart);
-    const inst = componentRef.instance as UiCandlestickChart;
-    setInputSignal(inst.data, [period(0, 10, 15, 5, 12)]);
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      effectivePadding: () => { left?: number; right?: number };
-    };
-    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('user padding overrides the auto half-candle inset per side', async () => {
+  it('builds its definition from its inputs', async () => {
     const { componentRef } = await render(UiCandlestickChart);
-    const inst = componentRef.instance as UiCandlestickChart;
-    setInputSignal(inst.data, [
-      period(0, 10, 15, 5, 12),
-      period(1, 12, 20, 8, 18),
-    ]);
-    setInputSignal(inst.padding, { right: 0.05 });
-    await waitForUpdate();
-    const cast = inst as unknown as {
-      effectivePadding: () => { left?: number; right?: number };
-    };
-    expect(cast.effectivePadding().right).toBeCloseTo(0.05);
-    expect(cast.effectivePadding().left).toBeCloseTo(0.5);
+    const chart = componentRef.instance as UiCandlestickChart;
+    setInputSignal(chart.data, data);
+    setInputSignal(chart.upColor, 'blue');
+    const { found } = render2((chart as unknown as Internals).definition());
+    expect(found.filter((n) => n.kind === 'rect')[0]!.style?.fill).toBe('blue');
   });
 
-  it('exposes the default tick formatter used by the child cartesian chart', async () => {
+  it('emits the tapped datum', async () => {
     const { componentRef } = await render(UiCandlestickChart);
-    const inst = componentRef.instance as UiCandlestickChart;
-    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
-    expect(inst.yTickFormat()(1.005)).toBe('1');
-  });
-});
-
-describe('UiCandlestickSeries', () => {
-  const renderSeries = async () => {
-    const parentResult = await render(UiCartesianChart);
-    const parent = parentResult.componentRef.instance as UiCartesianChart;
-    setInputSignal(parent.xDomain, [0, 10]);
-    setInputSignal(parent.yDomain, [0, 100]);
-    await waitForUpdate();
-    const seriesResult = await render(UiCandlestickSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiCandlestickSeries;
-    setInputSignal(series.data, [
-      // up candle (close >= open)
-      period(0, 10, 20, 5, 15),
-      // down candle (close < open)
-      period(5, 60, 70, 50, 55),
-      // doji (close === open)
-      period(10, 40, 50, 30, 40),
-    ]);
-    await waitForUpdate();
-    return { parent, series };
-  };
-
-  it('renders a wick + body for each period, tinted by direction', async () => {
-    const { series } = await renderSeries();
-    const cast = series as unknown as {
-      candles: () => {
-        wickStyle: string;
-        bodyStyle: string;
-        point: CandlestickPoint;
-      }[];
-    };
-    const candles = cast.candles();
-    expect(candles.length).toBe(3);
-    // First: up candle → uses upColor (green rgba)
-    expect(candles[0].bodyStyle).toContain('rgba(34, 197, 94, 1)');
-    // Second: down candle → uses downColor (red rgba)
-    expect(candles[1].bodyStyle).toContain('rgba(239, 68, 68, 1)');
-    // Third: doji (open === close) is `up: true` (>= comparison)
-    expect(candles[2].bodyStyle).toContain('rgba(34, 197, 94, 1)');
-  });
-
-  it('emits candleTap with the source point when a body is tapped', async () => {
-    const { series } = await renderSeries();
-    const cb = vi.fn();
-    series.candleTap.subscribe(cb);
-    const p = period(1, 2, 3, 1, 2);
-    (
-      series as unknown as { onCandleTap: (point: CandlestickPoint) => void }
-    ).onCandleTap(p);
-    expect(cb).toHaveBeenCalledWith(p);
-  });
-
-  it('single-datum series uses the fallback body width', async () => {
-    const parentResult = await render(UiCartesianChart);
-    const parent = parentResult.componentRef.instance as UiCartesianChart;
-    setInputSignal(parent.xDomain, [0, 10]);
-    setInputSignal(parent.yDomain, [0, 100]);
-    await waitForUpdate();
-    const seriesResult = await render(UiCandlestickSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiCandlestickSeries;
-    setInputSignal(series.data, [period(5, 10, 15, 5, 12)]);
-    await waitForUpdate();
-    const cast = series as unknown as {
-      candles: () => { bodyStyle: string }[];
-    };
-    // fallback body width = 8px
-    expect(cast.candles()[0].bodyStyle).toContain('width: 8.00px');
+    const chart = componentRef.instance as UiCandlestickChart;
+    const tapped = vi.fn();
+    chart.candleTap.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/candlestick-chart/candlestick-chart.test.ts

@@ -1,74 +1,118 @@
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import { createChartTooltipContent } from '@tanstack/charts/tooltip/model';
+import type {
+  ChartDefinition,
+  ChartTooltipOptions,
+  SceneNode,
+} from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { computeCandles } from './candlestick-chart';
+import { candlestickChartDefinition } from './candlestick-chart';
 
-// A rising candle centered at cx=50. Screen y grows downward, so the projected
-// highY (top of the wick) is the smallest pixel value and lowY the largest.
-// close is above open (up), so closeY < openY in pixels.
-const upCandle = {
-  cx: 50,
-  highY: 10, // high price → top of plot
-  lowY: 90, // low price → bottom of plot
-  openY: 70,
-  closeY: 30,
-  up: true,
-};
+const data = [
+  { x: 0, open: 100, high: 104, low: 98, close: 102 },
+  { x: 1, open: 102, high: 103, low: 97, close: 99 },
+];
 
-describe('computeCandles', () => {
-  it('draws the wick spanning high to low, centered on cx', () => {
-    const [shape] = computeCandles([upCandle], 12);
-    expect(shape.wick.top).toBe(10); // min(highY, lowY)
-    expect(shape.wick.height).toBe(80); // |lowY - highY|
-    expect(shape.wick.width).toBe(1); // default wickWidth
-    // Centered: left = cx - wickWidth/2.
-    expect(shape.wick.left).toBe(50 - 0.5);
+const render2 = (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('draws the body between open and close, centered on cx', () => {
-    const [shape] = computeCandles([upCandle], 12);
-    expect(shape.body.top).toBe(30); // min(openY, closeY) — the higher price
-    expect(shape.body.height).toBe(40); // |closeY - openY|
-    expect(shape.body.width).toBe(12);
-    expect(shape.body.left).toBe(50 - 6); // cx - bodyWidth/2
-    expect(shape.up).toBe(true);
+describe('candlestickChartDefinition', () => {
+  it('draws a wick and a body per candle, colored by direction', () => {
+    const { scene, found } = render2(candlestickChartDefinition({ data }));
+    const bodies = found.filter((n) => n.kind === 'rect');
+    expect(bodies.map((body) => body.style?.fill)).toEqual([
+      'rgba(34, 197, 94, 1)',
+      'rgba(239, 68, 68, 1)',
+    ]);
+    // The y axis spans the lows and highs.
+    expect(scene.scales['y']!.domain[0]).toBeLessThanOrEqual(97);
+    expect(scene.scales['y']!.domain[1]).toBeGreaterThanOrEqual(104);
+    expect(found.some((n) => n.kind === 'rule' || n.kind === 'polyline')).toBe(
+      true,
+    );
   });
 
-  it('marks a falling candle as down and still tops the body at the higher price', () => {
-    // close below open: closeY (pixels) is BELOW openY, i.e. larger.
-    const downCandle = {
-      cx: 20,
-      highY: 5,
-      lowY: 95,
-      openY: 30,
-      closeY: 60,
-      up: false,
+  it('lists all four prices in the tooltip', () => {
+    const definition = candlestickChartDefinition({
+      data,
+      upColor: 'green',
+      downColor: 'red',
+    });
+    const { scene } = render2(definition);
+    const point = scene.points.find((p) => (p.datum as { x: number }).x === 1)!;
+    const content = createChartTooltipContent(
+      [point],
+      scene,
+      false,
+      definition.tooltip as unknown as ChartTooltipOptions,
+      point,
+    );
+    expect(content).toEqual({
+      title: '1',
+      color: 'red',
+      rows: [
+        { label: 'Open', value: '102' },
+        { label: 'High', value: '103' },
+        { label: 'Low', value: '97' },
+        { label: 'Close', value: '99' },
+      ],
+    });
+    const custom = (
+      definition.tooltip as unknown as Required<ChartTooltipOptions>
+    ).content;
+    const context = {
+      pinned: false,
+      xLabel: 'x',
+      yLabel: 'y',
+      formatX: (v: unknown) => `x${v}`,
+      formatY: (v: unknown) => `y${v}`,
     };
-    const [shape] = computeCandles([downCandle], 10);
-    expect(shape.up).toBe(false);
-    expect(shape.body.top).toBe(30); // min(openY, closeY) = openY here
-    expect(shape.body.height).toBe(30);
-  });
-
-  it('clamps a doji (open === close) to the minimum body height', () => {
-    const doji = {
-      cx: 0,
-      highY: 0,
-      lowY: 100,
-      openY: 50,
-      closeY: 50,
-      up: true,
-    };
-    // Zero-height body would be invisible; the floor keeps it a thin line.
-    expect(computeCandles([doji], 12)[0].body.height).toBe(1);
-    expect(computeCandles([doji], 12, 1, 3)[0].body.height).toBe(3);
-  });
-
-  it('honors a custom wick width', () => {
-    const [shape] = computeCandles([upCandle], 12, 3);
-    expect(shape.wick.width).toBe(3);
-    expect(shape.wick.left).toBe(50 - 1.5);
+    expect(custom([], context)).toEqual({ title: undefined, rows: [] });
+    // Points of other marks (say, a moving average added on top) get x/y rows.
+    expect(
+      custom(
+        [{ datum: { x: 1, y: 2 }, xValue: 1, yValue: 2 } as never],
+        context,
+      ),
+    ).toEqual({ title: 'x1', rows: [{ label: 'y', value: 'y2' }] });
+    expect(
+      custom([{ datum: null, xValue: 3, yValue: 4 } as never], context),
+    ).toMatchObject({
+      title: 'x3',
+    });
+    const up = scene.points.find((p) => (p.datum as { x: number }).x === 0)!;
+    expect(
+      createChartTooltipContent(
+        [up],
+        scene,
+        false,
+        definition.tooltip as unknown as ChartTooltipOptions,
+        up,
+      ),
+    ).toMatchObject({ color: 'green' });
   });
 
-  it('returns an empty array for no candles', () => {
-    expect(computeCandles([], 12)).toEqual([]);
+  it('can drop the tooltip, and clamps the body ratio', () => {
+    const definition = candlestickChartDefinition({
+      data,
+      tooltip: false,
+      bodyWidthRatio: 5,
+    });
+    expect(definition.tooltip).toBe(false);
+    expect(render2(definition).found.length).toBeGreaterThan(0);
   });
 });