@blotch/dolan 22.2.2 → 22.2.3

package/dist/ui/components/icon/icon.ts

@@ -1,6 +1,8 @@
 import { Component, ViewEncapsulation, input } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
+import { cn } from '../../utils/cn';
+import { injectIconColor } from './icon-theme';
 import { type IconName, ICONS } from './icons';
 
 const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
@@ -16,39 +18,54 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
-    <svg [attr.content]="svgContent()" [attr.style]="sizeStyle()" />
+    <svg
+      [attr.content]="svgContent()"
+      [attr.style]="sizeStyle()"
+      [class]="svgClass()"
+    />
   `,
 })
 export class UiIcon {
   readonly name = input.required<IconName>();
   readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+  /**
+   * A literal color or a theme token (`var(--primary)`). Without one, the icon
+   * takes the color its container sets (see `UI_ICON_COLOR`), then the theme's
+   * foreground.
+   */
   readonly color = input<string | undefined>(undefined);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly #resolveColor = injectIconColor();
 
   protected svgContent(): string {
-    let svg = ICONS[this.name()];
-    const c = this.color();
-    if (c) {
-      // Lynx SVG elements don't propagate the CSS `color` property into SVG
-      // stroke attributes, so we substitute the literal `currentColor` in the
-      // markup string rather than relying on `currentColor` CSS propagation.
-      //
-      // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
-      // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
-      // because it's a runtime method (not syntax) the build's down-leveling does
-      // not polyfill it, so it simply doesn't exist there. Calling it throws
-      // "main-thread.js exception: not a function" from inside Angular change
-      // detection, which aborts the whole tick before Lynx flushes the element
-      // tree — so NO icon paints (not just a colored one), and the error count
-      // climbs on every render/interaction as each tick re-runs and re-throws.
-      // split/join is ES2019-safe and is preferred over `replace(/.../g)` here
-      // because the search term is a plain literal and needs no regex escaping.
-      svg = svg.split('currentColor').join(c);
-    }
-    return svg;
+    // Lynx SVG elements don't propagate the CSS `color` property into SVG
+    // stroke attributes, so we substitute the literal `currentColor` in the
+    // markup string rather than relying on `currentColor` CSS propagation.
+    // The color is resolved first: the SVG parser can't read `var(--x)` either
+    // (see icon-theme.ts).
+    //
+    // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
+    // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
+    // because it's a runtime method (not syntax) the build's down-leveling does
+    // not polyfill it, so it simply doesn't exist there. Calling it throws
+    // "main-thread.js exception: not a function" from inside Angular change
+    // detection, which aborts the whole tick before Lynx flushes the element
+    // tree — so NO icon paints (not just a colored one), and the error count
+    // climbs on every render/interaction as each tick re-runs and re-throws.
+    // split/join is ES2019-safe and is preferred over `replace(/.../g)` here
+    // because the search term is a plain literal and needs no regex escaping.
+    return ICONS[this.name()]
+      .split('currentColor')
+      .join(this.#resolveColor(this.color()));
   }
 
   protected sizeStyle(): string {
     const px = SIZE_MAP[this.size()];
     return `width: ${px}px; height: ${px}px;`;
   }
+
+  protected svgClass(): string {
+    return cn(this.userClass());
+  }
 }

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

@@ -1,6 +1,5 @@
 export {
+  type LineChartOptions,
   UiLineChart,
-  UiLineSeries,
-  computeLineSegments,
-  type LineSegment,
+  lineChartDefinition,
 } from './line-chart';

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

@@ -1,121 +1,83 @@
-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 { UiLineChart, UiLineSeries } from './line-chart';
+import { UiLineChart } from './line-chart';
 
-describe('UiLineChart', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiLineChart);
-    expect(container).toBeTruthy();
-  });
-
-  it('computes axis domains from data', async () => {
-    const { componentRef } = await render(UiLineChart);
-    const inst = componentRef.instance as UiLineChart;
-    setInputSignal(inst.data, [
-      { x: 0, y: 0 },
-      { x: 5, y: 10 },
-      { x: 10, y: 5 },
-    ]);
-    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);
-  });
+const data = [
+  { x: 0, y: 10 },
+  { x: 5, y: 30 },
+  { x: 10, y: 20 },
+];
 
-  it('honors explicit xMin / xMax / yMin / yMax overrides', async () => {
-    const { componentRef } = await render(UiLineChart);
-    const inst = componentRef.instance as UiLineChart;
-    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('exposes the default tick formatter used by the child cartesian chart', async () => {
-    const { componentRef } = await render(UiLineChart);
-    const inst = componentRef.instance as UiLineChart;
-    // JIT doesn't wire the child cartesian chart's [xTickFormat] input, so the
-    // default formatter is never invoked through the template. Invoke it
-    // directly to cover its two-decimal rounding branch.
-    expect(inst.xTickFormat()(3.14159)).toBe('3.14');
-    expect(inst.yTickFormat()(1.005)).toBe('1');
+/**
+ * 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,
   });
-});
-
-describe('UiLineSeries', () => {
-  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(UiLineSeries, {
-      providers: [{ provide: UiCartesianChart, useValue: parent }],
-    });
-    const series = seriesResult.componentRef.instance as UiLineSeries;
-    setInputSignal(series.data, [
-      { x: 0, y: 0 },
-      { x: 5, y: 5 },
-      { x: 10, y: 10 },
-    ]);
-    await waitForUpdate();
-    return { parent, series, seriesResult };
+  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('renders segments and dots for the projected data', async () => {
-    const { series } = await renderSeries();
-    const cast = series as unknown as {
-      segments: () => { style: string }[];
-      dots: () => { style: string }[];
-    };
-    expect(cast.segments().length).toBeGreaterThan(0);
-    expect(cast.dots().length).toBe(3);
-  });
+describe('UiLineChart', () => {
+  type Internals = {
+    definition: () => ChartDefinition<any, any, any>;
+    onSelect(point: ChartPoint | null): void;
+    chart: unknown;
+  };
 
-  it('hides dots when showDots is false', async () => {
-    const { series } = await renderSeries();
-    setInputSignal(series.showDots, false);
-    await waitForUpdate();
-    const cast = series as unknown as { dots: () => { style: string }[] };
-    expect(cast.dots()).toEqual([]);
+  it('builds its definition from its inputs', async () => {
+    const { componentRef } = await render(UiLineChart);
+    const chart = componentRef.instance as UiLineChart;
+    setInputSignal(chart.data, data);
+    setInputSignal(chart.showDots, false);
+    setInputSignal(chart.yAxisLabel, 'Revenue');
+    const { found, scene } = shapes(
+      (chart as unknown as Internals).definition(),
+    );
+    expect(found.some((n) => n.kind === 'dot')).toBe(false);
+    expect(scene.nodes).toBeDefined();
   });
 
-  it('emits pointTap when onPointTap is invoked', async () => {
-    const { series } = await renderSeries();
-    const cb = vi.fn();
-    series.pointTap.subscribe(cb);
-    (series as unknown as { onPointTap: (p: unknown) => void }).onPointTap({
-      x: 1,
-      y: 2,
-    });
-    expect(cb).toHaveBeenCalledWith({ x: 1, y: 2 });
+  it('emits the tapped datum', async () => {
+    const { componentRef } = await render(UiLineChart);
+    const chart = componentRef.instance as UiLineChart;
+    const tapped = vi.fn();
+    chart.pointTap.subscribe(tapped);
+    const internals = chart as unknown as Internals;
+    internals.onSelect({ datum: data[1] } as ChartPoint);
+    internals.onSelect(null);
+    expect(tapped.mock.calls).toEqual([[data[1]]]);
   });
 
-  it('smooth mode resamples through sampleSmoothLine', async () => {
-    const { series } = await renderSeries();
-    setInputSignal(series.smooth, true);
-    await waitForUpdate();
-    const cast = series as unknown as { segments: () => { style: string }[] };
-    expect(cast.segments().length).toBeGreaterThan(2);
+  it('forwards the zoom API to its chart', async () => {
+    const { componentRef } = await render(UiLineChart);
+    const chart = componentRef.instance as UiLineChart;
+    const inner = { zoomIn: vi.fn(), zoomOut: vi.fn(), resetZoom: vi.fn() };
+    // Signal queries aren't wired under plain Vitest (JIT), so stand in for
+    // the inner <ui-chart>.
+    (chart as unknown as Internals).chart = () => inner;
+    chart.zoomIn();
+    chart.zoomOut();
+    chart.resetZoom();
+    expect(inner.zoomIn).toHaveBeenCalled();
+    expect(inner.zoomOut).toHaveBeenCalled();
+    expect(inner.resetZoom).toHaveBeenCalled();
   });
 });

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

@@ -1,59 +1,77 @@
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import type { ChartDefinition, SceneNode } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { computeLineSegments } from './line-chart';
+import { lineChartDefinition } from './line-chart';
 
-describe('computeLineSegments', () => {
-  it('produces a horizontal segment (angle 0)', () => {
-    const segments = computeLineSegments([
-      { x: 0, y: 10 },
-      { x: 100, y: 10 },
-    ]);
-    expect(segments).toHaveLength(1);
-    expect(segments[0].x).toBe(0);
-    expect(segments[0].y).toBe(10);
-    expect(segments[0].length).toBeCloseTo(100);
-    expect(segments[0].angle).toBeCloseTo(0);
+const data = [
+  { x: 0, y: 10 },
+  { x: 5, y: 30 },
+  { x: 10, y: 20 },
+];
+
+/**
+ * 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('measures a vertical segment as 90 degrees (screen y-down)', () => {
-    const segments = computeLineSegments([
-      { x: 0, y: 0 },
-      { x: 0, y: 50 },
-    ]);
-    expect(segments[0].length).toBeCloseTo(50);
-    expect(segments[0].angle).toBeCloseTo(90);
+describe('lineChartDefinition', () => {
+  it('draws the line and a dot per point', () => {
+    const { found } = shapes(lineChartDefinition({ data }));
+    expect(found.filter((n) => n.kind === 'polyline')).toHaveLength(1);
+    expect(found.filter((n) => n.kind === 'dot')).toHaveLength(3);
+    const line = found.find((n) => n.kind === 'polyline')!;
+    expect(line.style).toMatchObject({
+      stroke: 'var(--primary)',
+      strokeWidth: 2,
+    });
   });
 
-  it('measures a 45-degree diagonal', () => {
-    const segments = computeLineSegments([
-      { x: 0, y: 0 },
-      { x: 10, y: 10 },
-    ]);
-    expect(segments[0].length).toBeCloseTo(Math.sqrt(200));
-    expect(segments[0].angle).toBeCloseTo(45);
+  it('can leave the dots out', () => {
+    for (const options of [{ showDots: false }, { dotRadius: 0 }]) {
+      const { found } = shapes(lineChartDefinition({ data, ...options }));
+      expect(found.some((n) => n.kind === 'dot')).toBe(false);
+    }
   });
 
-  it('emits one segment per consecutive pair', () => {
-    const segments = computeLineSegments([
-      { x: 0, y: 0 },
-      { x: 10, y: 5 },
-      { x: 20, y: 0 },
-    ]);
-    expect(segments).toHaveLength(2);
+  it('draws a curve through the points when smooth', () => {
+    const { found } = shapes(
+      lineChartDefinition({ data, smooth: true, color: 'red' }),
+    );
+    const line = found.find((n) => n.kind === 'polyline') as { path?: string };
+    expect(line.path).toContain('C');
   });
 
-  it('skips zero-length (duplicate) points', () => {
-    const segments = computeLineSegments([
-      { x: 5, y: 5 },
-      { x: 5, y: 5 },
-      { x: 10, y: 5 },
-    ]);
-    expect(segments).toHaveLength(1);
-    expect(segments[0].x).toBe(5);
-    expect(segments[0].length).toBeCloseTo(5);
+  it('fits the axes to the data and honors the shared options', () => {
+    const { scene } = shapes(
+      lineChartDefinition({
+        data,
+        yMin: 0,
+        yMax: 40,
+        showGrid: false,
+        tooltip: false,
+      }),
+    );
+    expect(scene.scales['y']!.domain).toEqual([0, 40]);
+    expect(scene.scales['x']!.domain).toEqual([0, 10]);
   });
 
-  it('returns no segments for fewer than two points', () => {
-    expect(computeLineSegments([])).toEqual([]);
-    expect(computeLineSegments([{ x: 1, y: 1 }])).toEqual([]);
+  it('includes the tooltip unless turned off', () => {
+    expect(lineChartDefinition({ data }).tooltip).toBeTruthy();
+    expect(lineChartDefinition({ data, tooltip: false }).tooltip).toBe(false);
   });
 });