@blotch/dolan 0.0.0-stage → 22.2.1

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

@@ -0,0 +1,174 @@
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+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 });
+
+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);
+  });
+
+  it('user padding overrides the auto half-candle inset per side', 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);
+  });
+
+  it('exposes the default tick formatter used by the child cartesian chart', 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');
+  });
+});

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

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock Angular (and the transitively-loaded cartesian-chart Angular usage) so
+// importing the module needs no framework runtime. Only the exported pure
+// `computeCandles` 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: () => ({}) },
+}));
+
+const { computeCandles } = await import('./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,
+};
+
+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);
+  });
+
+  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);
+  });
+
+  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,
+    };
+    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);
+  });
+
+  it('returns an empty array for no candles', () => {
+    expect(computeCandles([], 12)).toEqual([]);
+  });
+});

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

@@ -0,0 +1,355 @@
+import {
+  Component,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+
+import {
+  type ChartPadding,
+  UiCartesianChart,
+  niceScale,
+} from '../cartesian-chart/cartesian-chart';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * One OHLC period: the `open`, `high`, `low`, and `close` prices at position
+ * `x`. `x` is a plain number (a period index), not a `Date` — Lynx has no `Intl`
+ * to format dates, so the whole chart system keeps x numeric (see {@link
+ * ChartPoint}). Format the axis with `xTickFormat` if you need labels.
+ */
+export type CandlestickPoint = {
+  x: number;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+};
+
+/** One candle after projection into plot-local pixel space. */
+type ProjectedCandle = {
+  /** Center x of the candle, in px. */
+  cx: number;
+  openY: number;
+  highY: number;
+  lowY: number;
+  closeY: number;
+  /** `true` when the period closed at or above its open (a rising candle). */
+  up: boolean;
+};
+
+/** An axis-aligned rectangle in plot-local pixel space. */
+type Rect = { left: number; top: number; width: number; height: number };
+
+/**
+ * Render geometry for one candle: a thin vertical **wick** (high→low) and a
+ * **body** (open↔close), both plain axis-aligned rectangles. `up` is echoed from
+ * the input so the caller can pick the fill color.
+ */
+export type CandleShape = {
+  wick: Rect;
+  body: Rect;
+  up: boolean;
+};
+
+// ---------------------------------------------------------------------------
+// Pure geometry (exported so it can be unit-tested without Angular)
+// ---------------------------------------------------------------------------
+
+/**
+ * Turns projected candles — already in plot-local pixel space — into wick/body
+ * rectangles ready to render as `<view>`s. Unlike the line and area series, a
+ * candlestick needs no rotation or fill rasterization: each mark is a plain
+ * axis-aligned box, so this is a straight geometric mapping.
+ *
+ * Screen y grows *downward*, so a higher price projects to a *smaller* y. Hence
+ * the wick's top is `min(highY, lowY)` and the body's top is `min(openY,
+ * closeY)` — taking the pixel min picks the visually-higher (larger-value) edge.
+ *
+ * A doji (open === close) would give a zero-height body that renders invisibly,
+ * so the body height is clamped to `minBodyHeight` (a thin line, like a bar).
+ * Wick and body are both centered on the candle's `cx`.
+ *
+ * @param bodyWidth width of the body rectangle in px (the wick stays `wickWidth`).
+ * @param minBodyHeight floor for the body height so a doji is still visible.
+ */
+export const computeCandles = (
+  candles: readonly ProjectedCandle[],
+  bodyWidth: number,
+  wickWidth = 1,
+  minBodyHeight = 1,
+): CandleShape[] =>
+  candles.map((c) => {
+    const bodyTop = Math.min(c.openY, c.closeY);
+    const bodyHeight = Math.max(Math.abs(c.closeY - c.openY), minBodyHeight);
+    const wickTop = Math.min(c.highY, c.lowY);
+    const wickHeight = Math.abs(c.lowY - c.highY);
+    return {
+      wick: {
+        left: c.cx - wickWidth / 2,
+        top: wickTop,
+        width: wickWidth,
+        height: wickHeight,
+      },
+      body: {
+        left: c.cx - bodyWidth / 2,
+        top: bodyTop,
+        width: bodyWidth,
+        height: bodyHeight,
+      },
+      up: c.up,
+    };
+  });
+
+// ---------------------------------------------------------------------------
+// Rendering helpers (mirror the equivalents in line-chart.ts / area-chart.ts —
+// kept local so this module stays self-contained when scaffolded by `dolan add`)
+// ---------------------------------------------------------------------------
+
+/**
+ * Formats a pixel value for an inline style, avoiding scientific notation.
+ */
+const px = (n: number): string => `${n.toFixed(2)}px`;
+
+/**
+ * Default axis label formatter — plain JS only (no `Intl`, absent in Lynx).
+ */
+const defaultTickFormat = (value: number): string =>
+  String(Math.round(value * 100) / 100);
+
+// Fallback body width (px) when there is only a single candle, so there is no
+// neighbor to derive a spacing from. Matches the React source's `font(8)`.
+const SINGLE_CANDLE_BODY_WIDTH = 8;
+
+/**
+ * A single candlestick series drawn inside a `<ui-cartesian-chart>`. Reads the
+ * shared scales from the parent chart via DI and renders, per period, a wick
+ * `<view>` (high→low) and a body `<view>` (open↔close), colored by direction.
+ *
+ * ## Why the host is `position: absolute; width/height: 100%`
+ * Identical to `UiLineSeries`: Lynx resolves an absolute child against its
+ * **direct parent** (there is no `position: static`), so the host itself must be
+ * the plot-sized containing block. Every wick and body is a direct child of it.
+ *
+ * ## Differentiating up vs down
+ * On a color screen, the fill color carries direction — up candles use
+ * `upColor`, down candles `downColor`. (The React original also supported SVG
+ * *fill patterns* for e-ink displays where color can't be relied on; Lynx has
+ * no SVG patterns, so that is dropped in favor of solid color.)
+ */
+@Component({
+  selector: 'ui-candlestick-series',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style:
+      'position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;',
+    '[class]': 'userClass()',
+  },
+  template: `
+    <!-- Wick first so the body paints on top of it (Lynx paint order follows
+         source order; z-index is unnecessary). The body is the tap target. -->
+    @for (candle of candles(); track $index) {
+      <view [style]="candle.wickStyle"></view>
+      <view
+        [style]="candle.bodyStyle"
+        (bindtap)="onCandleTap(candle.point)"
+      ></view>
+    }
+  `,
+})
+export class UiCandlestickSeries {
+  readonly #chart = inject(UiCartesianChart);
+
+  readonly data = input.required<CandlestickPoint[]>();
+  /** Fill for rising candles (close ≥ open). Fixed data hue, not theme chrome. */
+  readonly upColor = input('rgba(34, 197, 94, 1)');
+  /** Fill for falling candles (close < open). */
+  readonly downColor = input('rgba(239, 68, 68, 1)');
+  /** Width of the high–low wick in px. */
+  readonly wickWidth = input(1);
+  /** Body width as a fraction of the spacing between adjacent candles. 0.6
+   * leaves a ~40% gap between bodies, the conventional candlestick look. */
+  readonly bodyWidthRatio = input(0.6);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly candleTap = output<CandlestickPoint>();
+
+  // Project each OHLC point into plot-local pixel space via the shared scales.
+  // Reading the chart's scale signals here makes this recompute whenever the
+  // domain or plot size changes.
+  readonly #projected = computed(() => {
+    const scaleX = this.#chart.xScale();
+    const scaleY = this.#chart.yScale();
+    return this.data().map((point) => ({
+      cx: scaleX(point.x),
+      openY: scaleY(point.open),
+      highY: scaleY(point.high),
+      lowY: scaleY(point.low),
+      closeY: scaleY(point.close),
+      up: point.close >= point.open,
+      point,
+    }));
+  });
+
+  // Body width = a fraction of the pixel spacing between candle centers, so
+  // bodies scale with the plot and never overlap. With one candle there is no
+  // spacing to measure, so fall back to a fixed width.
+  readonly #bodyWidth = computed(() => {
+    const projected = this.#projected();
+    const n = projected.length;
+    if (n < 2) return SINGLE_CANDLE_BODY_WIDTH;
+    const span = Math.abs(projected[n - 1].cx - projected[0].cx);
+    return (span / (n - 1)) * this.bodyWidthRatio();
+  });
+
+  protected readonly candles = computed(() => {
+    const projected = this.#projected();
+    const up = this.upColor();
+    const down = this.downColor();
+    // computeCandles works purely from the projected pixel fields; zip its output
+    // back with each source point so the body's tap can emit the original data.
+    return computeCandles(projected, this.#bodyWidth(), this.wickWidth()).map(
+      (shape, i) => {
+        const fill = shape.up ? up : down;
+        return {
+          point: projected[i].point,
+          wickStyle:
+            `position: absolute; left: ${px(shape.wick.left)}; top: ${px(shape.wick.top)}; ` +
+            `width: ${px(shape.wick.width)}; height: ${px(shape.wick.height)}; ` +
+            `background-color: ${fill};`,
+          bodyStyle:
+            `position: absolute; left: ${px(shape.body.left)}; top: ${px(shape.body.top)}; ` +
+            `width: ${px(shape.body.width)}; height: ${px(shape.body.height)}; ` +
+            `background-color: ${fill};`,
+        };
+      },
+    );
+  });
+
+  protected onCandleTap(point: CandlestickPoint): void {
+    this.candleTap.emit(point);
+  }
+}
+
+/**
+ * A ready-to-use candlestick (OHLC) chart for the common single-series case.
+ * Composes a `<ui-cartesian-chart>` with one `<ui-candlestick-series>` and
+ * auto-derives rounded axis domains + ticks from the data. For a moving-average
+ * line on top, or full control over the axes, use `<ui-cartesian-chart>` with a
+ * `<ui-candlestick-series>` (and optionally a `<ui-line-series>`) directly.
+ */
+@Component({
+  selector: 'ui-candlestick-chart',
+  standalone: true,
+  imports: [LYNX_ELEMENTS, UiCartesianChart, UiCandlestickSeries],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <ui-cartesian-chart
+      [xDomain]="xAxis().domain"
+      [yDomain]="yAxis().domain"
+      [xTicks]="xAxis().ticks"
+      [yTicks]="yAxis().ticks"
+      [width]="width()"
+      [height]="height()"
+      [tickCount]="tickCount()"
+      [showXGrid]="showXGrid()"
+      [xAxisLabel]="xAxisLabel()"
+      [yAxisLabel]="yAxisLabel()"
+      [padding]="effectivePadding()"
+      [xTickFormat]="xTickFormat()"
+      [yTickFormat]="yTickFormat()"
+      [zoomable]="zoomable()"
+      [zoomAxes]="zoomAxes()"
+      [showZoomControls]="showZoomControls()"
+      [minZoom]="minZoom()"
+      [maxZoom]="maxZoom()"
+      [zoomStep]="zoomStep()"
+      [class]="userClass()"
+    >
+      <ui-candlestick-series
+        [data]="data()"
+        [upColor]="upColor()"
+        [downColor]="downColor()"
+        [wickWidth]="wickWidth()"
+        [bodyWidthRatio]="bodyWidthRatio()"
+        (candleTap)="candleTap.emit($event)"
+      />
+    </ui-cartesian-chart>
+  `,
+})
+export class UiCandlestickChart {
+  readonly data = input.required<CandlestickPoint[]>();
+  readonly upColor = input('rgba(34, 197, 94, 1)');
+  readonly downColor = input('rgba(239, 68, 68, 1)');
+  readonly width = input(320);
+  readonly height = input(200);
+  readonly tickCount = input(5);
+  readonly wickWidth = input(1);
+  readonly bodyWidthRatio = input(0.6);
+  /** Draw vertical gridlines at each x tick. */
+  readonly showXGrid = input(false);
+  /** Title for the x-axis (centered below the tick labels). */
+  readonly xAxisLabel = input<string>('');
+  /** Title for the y-axis (rotated in the left gutter). */
+  readonly yAxisLabel = input<string>('');
+  /** Inner inset of the plot area — merged over the auto half-candle padding
+   * (below), so any side you set wins. See {@link ChartPadding}. */
+  readonly padding = input<ChartPadding>({});
+  /** Force the x-axis lower/upper bound instead of deriving it from the data.
+   * Omitted bounds fall back to the data extremes. */
+  readonly xMin = input<number | undefined>(undefined);
+  readonly xMax = input<number | undefined>(undefined);
+  /** Force the y-axis lower/upper bound (e.g. to compare two charts on one scale). */
+  readonly yMin = input<number | undefined>(undefined);
+  readonly yMax = input<number | undefined>(undefined);
+  readonly xTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly yTickFormat = input<(value: number) => string>(defaultTickFormat);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  // Pan/zoom — forwarded to the underlying <ui-cartesian-chart>. Off by default
+  // so a candlestick chart stays static unless opted in.
+  readonly zoomable = input(false);
+  readonly zoomAxes = input<'x' | 'y' | 'xy'>('xy');
+  readonly showZoomControls = input(true);
+  readonly minZoom = input(1);
+  readonly maxZoom = input(8);
+  readonly zoomStep = input(1.4);
+
+  readonly candleTap = output<CandlestickPoint>();
+
+  // Auto-compute rounded axes from the data extremes, letting an explicit
+  // min/max override either end. `Math.min/max(...[])` yield ±Infinity for empty
+  // data, which `niceScale` handles by padding.
+  protected readonly xAxis = computed(() => {
+    const xs = this.data().map((p) => p.x);
+    const lo = this.xMin() ?? Math.min(...xs);
+    const hi = this.xMax() ?? Math.max(...xs);
+    return niceScale(lo, hi, this.tickCount());
+  });
+  // The y-extent spans every wick: the lowest low to the highest high. Open and
+  // close always sit inside that range, so they need no separate consideration.
+  protected readonly yAxis = computed(() => {
+    const lows = this.data().map((p) => p.low);
+    const highs = this.data().map((p) => p.high);
+    const lo = this.yMin() ?? Math.min(...lows);
+    const hi = this.yMax() ?? Math.max(...highs);
+    return niceScale(lo, hi, this.tickCount());
+  });
+
+  // A candle body is centered on its x, so the first and last bodies would spill
+  // over the plot edges. Insetting the scales by half a candle's spacing keeps
+  // them fully inside. User `padding` is spread last, so an explicit side wins.
+  protected readonly effectivePadding = computed<ChartPadding>(() => {
+    const n = this.data().length;
+    const half = n > 1 ? 0.5 / (n - 1) : 0;
+    return { left: half, right: half, ...this.padding() };
+  });
+}

package/dist/ui/components/candlestick-chart/index.ts

@@ -0,0 +1,7 @@
+export {
+  UiCandlestickChart,
+  UiCandlestickSeries,
+  computeCandles,
+  type CandlestickPoint,
+  type CandleShape,
+} from './candlestick-chart';