@opendata-ai/openchart-engine 8.0.0-rc.9 → 8.1.0

package/src/charts/text/index.ts

@@ -1,141 +0,0 @@
-/**
- * Text mark renderer.
- *
- * Computes TextMarkLayout marks from a normalized chart spec.
- * Positions text at data coordinates using x/y encoding channels,
- * with content from the text encoding channel.
- */
-
-import type { Encoding, Mark, MarkAria, TextMarkLayout } from '@opendata-ai/openchart-core';
-import { getRepresentativeColor } from '@opendata-ai/openchart-core';
-import { buildSizeScale, SIZE_SCALE_DEFAULTS } from '../../compile/size-scale';
-import { dedupeKeys, serializeKeyValue } from '../../compiler/keys';
-import type { NormalizedChartSpec } from '../../compiler/types';
-import type { ResolvedScales } from '../../layout/scales';
-import type { ChartRenderer } from '../registry';
-import { getColor, scaleValue } from '../utils';
-
-/** Font size for text marks with no `size` encoding and no `mark.fontSize`. */
-const DEFAULT_FONT_SIZE = 12;
-
-const ALIGN_TO_ANCHOR = {
-  left: 'start',
-  center: 'middle',
-  right: 'end',
-} as const satisfies Record<string, TextMarkLayout['textAnchor']>;
-
-const BASELINE_TO_DOMINANT = {
-  top: 'hanging',
-  middle: 'central',
-  bottom: 'text-after-edge',
-} as const satisfies Record<string, NonNullable<TextMarkLayout['dominantBaseline']>>;
-
-/**
- * Compute text marks from spec data and resolved scales.
- */
-export function computeTextMarks(
-  spec: NormalizedChartSpec,
-  scales: ResolvedScales,
-): TextMarkLayout[] {
-  const encoding = spec.encoding as Encoding;
-  const xChannel = encoding.x;
-  const yChannel = encoding.y;
-  const textChannel = encoding.text;
-
-  if (!textChannel || !('field' in textChannel)) return [];
-
-  const marks: TextMarkLayout[] = [];
-  const colorEncoding = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
-  const colorField = colorEncoding?.field;
-  const sizeEncoding = encoding.size && 'field' in encoding.size ? encoding.size : undefined;
-
-  const markDef = spec.markDef ?? {};
-  const dx = markDef.dx ?? 0;
-  const dy = markDef.dy ?? 0;
-  const isOffset = dx !== 0 || dy !== 0;
-  const textAnchor = ALIGN_TO_ANCHOR[markDef.align ?? 'center'];
-  const dominantBaseline = BASELINE_TO_DOMINANT[markDef.baseline ?? 'middle'];
-
-  // Map the `size` field onto a font-size range. Linear, not sqrt: sqrt is right
-  // for bubbles because perceived magnitude tracks *area* (∝ r²), but a glyph
-  // reads by its height, which is linear in font size.
-  //
-  // Unlike scatter/beeswarm, this channel is *not* keyed: the library ships no
-  // font-size legend, and no publication uses one. Treat it as emphasis, not as
-  // a channel a reader is expected to decode back into a value.
-  const fontSizeScale = buildSizeScale(sizeEncoding, spec.data, SIZE_SCALE_DEFAULTS.text)?.scale;
-
-  for (const row of spec.data) {
-    // Resolve x position (center of chart if no x encoding)
-    let x = 0;
-    if (xChannel && scales.x) {
-      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
-      if (xVal == null) continue;
-      x = xVal;
-    }
-
-    // Resolve y position (center of chart if no y encoding)
-    let y = 0;
-    if (yChannel && scales.y) {
-      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
-      if (yVal == null) continue;
-      y = yVal;
-    }
-
-    const text = String(row[textChannel.field] ?? '');
-    if (!text) continue;
-
-    const color = getRepresentativeColor(
-      colorField
-        ? getColor(scales, String(row[colorField] ?? '__default__'))
-        : getColor(scales, '__default__'),
-    );
-
-    const fallbackFontSize = markDef.fontSize ?? DEFAULT_FONT_SIZE;
-    const sizeValue = sizeEncoding ? Number(row[sizeEncoding.field]) : Number.NaN;
-    const fontSize =
-      fontSizeScale && Number.isFinite(sizeValue) ? fontSizeScale(sizeValue) : fallbackFontSize;
-
-    const aria: MarkAria = {
-      label: text,
-    };
-
-    // Bake the offset into x/y rather than emitting SVG dx/dy: the transition
-    // driver tweens the x/y attributes and rotation pivots on them, so a
-    // separate offset attribute would leave both reading the un-offset anchor.
-    marks.push({
-      type: 'textMark',
-      x: x + dx,
-      y: y + dy,
-      ...(isOffset ? { anchorX: x, anchorY: y } : {}),
-      text,
-      fill: color,
-      fontSize,
-      textAnchor,
-      dominantBaseline,
-      angle:
-        encoding.angle && 'field' in encoding.angle
-          ? Number(row[encoding.angle.field]) || 0
-          : undefined,
-      data: row as Record<string, unknown>,
-      aria,
-    });
-  }
-
-  // Stamp keys: position-defining value, fall back to index
-  const posField = xChannel?.field ?? yChannel?.field;
-  const rawKeys = marks.map((m, i) => (posField ? serializeKeyValue(m.data[posField]) : String(i)));
-  const keys = dedupeKeys(rawKeys);
-  for (let i = 0; i < marks.length; i++) {
-    marks[i].key = keys[i];
-  }
-
-  return marks;
-}
-
-/**
- * Text chart renderer.
- */
-export const textRenderer: ChartRenderer = (spec, scales, _chartArea, _strategy, _theme) => {
-  return computeTextMarks(spec, scales) as Mark[];
-};

package/src/charts/tick/__tests__/compute.test.ts

@@ -1,75 +0,0 @@
-import type { TickMarkLayout } from '@opendata-ai/openchart-core';
-import { describe, expect, it } from 'vitest';
-import { compileChart } from '../../../compile';
-
-const OPTIONS = { width: 800, height: 500 };
-
-const ROWS = [
-  { group: '20-29', hours: 3.1 },
-  { group: '20-29', hours: 4.7 },
-  { group: '60+', hours: 4.1 },
-  { group: '60+', hours: 7.0 },
-];
-
-function tickMarks(layout: ReturnType<typeof compileChart>): TickMarkLayout[] {
-  return layout.marks.filter((m): m is TickMarkLayout => m.type === 'tick');
-}
-
-describe('tick marks', () => {
-  it('draws vertical strokes when the value axis is x', () => {
-    const layout = compileChart(
-      {
-        mark: 'tick',
-        data: ROWS,
-        encoding: {
-          x: { field: 'hours', type: 'quantitative' },
-          y: { field: 'group', type: 'nominal' },
-        },
-      },
-      OPTIONS,
-    );
-
-    const marks = tickMarks(layout);
-    expect(marks).toHaveLength(ROWS.length);
-    // Perpendicular to the quantitative axis: values run left-to-right, so each
-    // observation is a vertical stroke. Horizontal strokes would lie along the
-    // value axis and butt end-to-end into a solid bar.
-    expect(marks.every((m) => m.orient === 'vertical')).toBe(true);
-  });
-
-  it('draws horizontal strokes when the value axis is y', () => {
-    const layout = compileChart(
-      {
-        mark: 'tick',
-        data: ROWS,
-        encoding: {
-          x: { field: 'group', type: 'nominal' },
-          y: { field: 'hours', type: 'quantitative' },
-        },
-      },
-      OPTIONS,
-    );
-
-    expect(tickMarks(layout).every((m) => m.orient === 'horizontal')).toBe(true);
-  });
-
-  it('separates observations within a category along the value axis', () => {
-    const layout = compileChart(
-      {
-        mark: 'tick',
-        data: ROWS,
-        encoding: {
-          x: { field: 'hours', type: 'quantitative' },
-          y: { field: 'group', type: 'nominal' },
-        },
-      },
-      OPTIONS,
-    );
-
-    const young = tickMarks(layout).filter((m) => m.data.group === '20-29');
-    expect(young).toHaveLength(2);
-    // Same row, different x: the strip plot's entire job.
-    expect(young[0].y).toBe(young[1].y);
-    expect(young[0].x).not.toBe(young[1].x);
-  });
-});

package/src/charts/tick/index.ts

@@ -1,99 +0,0 @@
-/**
- * Tick mark renderer.
- *
- * Computes TickMarkLayout marks from a normalized chart spec.
- * Ticks are short line segments used for strip/rug plots.
- * Each data point produces a small tick perpendicular to the data axis.
- */
-
-import type { Encoding, Mark, MarkAria, Rect, TickMarkLayout } from '@opendata-ai/openchart-core';
-import { getRepresentativeColor } from '@opendata-ai/openchart-core';
-
-import { dedupeKeys, serializeKeyValue } from '../../compiler/keys';
-import type { NormalizedChartSpec } from '../../compiler/types';
-import type { ResolvedScales } from '../../layout/scales';
-import type { ChartRenderer } from '../registry';
-import { getColor, scaleValue } from '../utils';
-
-/** Default tick length in pixels. */
-const DEFAULT_TICK_LENGTH = 18;
-
-/**
- * Compute tick marks from spec data and resolved scales.
- *
- * Orientation is inferred from the encoding:
- * - If x is quantitative and y is categorical (or vice versa), ticks are
- *   perpendicular to the quantitative axis.
- * - Default: vertical ticks (short vertical lines at each x position).
- */
-export function computeTickMarks(
-  spec: NormalizedChartSpec,
-  scales: ResolvedScales,
-  _chartArea: Rect,
-): TickMarkLayout[] {
-  const encoding = spec.encoding as Encoding;
-  const xChannel = encoding.x;
-  const yChannel = encoding.y;
-
-  if (!xChannel || !yChannel || !scales.x || !scales.y) return [];
-
-  const colorEncoding = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
-  const colorField = colorEncoding?.field;
-  const marks: TickMarkLayout[] = [];
-
-  // Ticks run perpendicular to the quantitative axis: a quantitative x (values
-  // spread left-to-right along a categorical row) gets vertical strokes, and a
-  // quantitative y gets horizontal ones. Drawing them parallel instead makes
-  // neighbouring observations butt end-to-end and read as one continuous bar.
-  const isQuantX = xChannel.type === 'quantitative' && yChannel.type !== 'quantitative';
-  const orient: 'horizontal' | 'vertical' = isQuantX ? 'vertical' : 'horizontal';
-
-  for (const row of spec.data) {
-    const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
-    const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
-    if (xVal == null || yVal == null) continue;
-
-    const color = getRepresentativeColor(
-      colorField
-        ? getColor(scales, String(row[colorField] ?? '__default__'))
-        : getColor(scales, '__default__'),
-    );
-
-    const aria: MarkAria = {
-      label: `${row[xChannel.field]}, ${row[yChannel.field]}`,
-    };
-
-    marks.push({
-      type: 'tick',
-      x: xVal,
-      y: yVal,
-      length: DEFAULT_TICK_LENGTH,
-      orient,
-      stroke: color,
-      strokeWidth: 1,
-      opacity:
-        encoding.opacity && 'field' in encoding.opacity
-          ? Math.max(0, Math.min(1, Number(row[encoding.opacity.field]) || 1))
-          : undefined,
-      data: row as Record<string, unknown>,
-      aria,
-    });
-  }
-
-  // Stamp keys: position-defining value, fall back to index
-  const posField = isQuantX ? xChannel.field : yChannel.field;
-  const rawKeys = marks.map((m) => serializeKeyValue(m.data[posField]));
-  const keys = dedupeKeys(rawKeys);
-  for (let i = 0; i < marks.length; i++) {
-    marks[i].key = keys[i];
-  }
-
-  return marks;
-}
-
-/**
- * Tick chart renderer.
- */
-export const tickRenderer: ChartRenderer = (spec, scales, chartArea, _strategy, _theme) => {
-  return computeTickMarks(spec, scales, chartArea) as Mark[];
-};

package/src/charts/utils.ts

@@ -1,170 +0,0 @@
-/**
- * Shared utilities for chart mark computation.
- *
- * Common helpers used across multiple chart types: scale value resolution,
- * data grouping, color lookup, and shared constants.
- */
-
-import type { DataRow, GradientDef } from '@opendata-ai/openchart-core';
-import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
-import type { D3Scale, ResolvedScales } from '../layout/scales';
-
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-
-/** Default single-series color when no color encoding is present. */
-export const DEFAULT_COLOR = '#1b7fa3';
-
-// ---------------------------------------------------------------------------
-// Scale helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Resolve a data value to a pixel position using a D3 scale.
- *
- * Handles time scales (parsing string dates), categorical scales
- * (point, band, ordinal - passing string values directly), and
- * linear/log scales (coercing to number). Returns null for values
- * that can't be resolved (null, NaN, invalid dates, or values not
- * in a categorical scale's domain).
- */
-export function scaleValue(scale: D3Scale, scaleType: string, value: unknown): number | null {
-  if (value == null) return null;
-
-  if (scaleType === 'time' || scaleType === 'utc') {
-    const date = value instanceof Date ? value : new Date(String(value));
-    if (Number.isNaN(date.getTime())) return null;
-    return (scale as ScaleTime<number, number>)(date);
-  }
-
-  // Categorical scales: pass string values directly
-  if (scaleType === 'point' || scaleType === 'band' || scaleType === 'ordinal') {
-    const result = (scale as ScalePoint<string> | ScaleBand<string>)(String(value));
-    return result ?? null;
-  }
-
-  const num = typeof value === 'number' ? value : Number(value);
-  if (!Number.isFinite(num)) return null;
-  return (scale as ScaleLinear<number, number>)(num);
-}
-
-// ---------------------------------------------------------------------------
-// Data grouping
-// ---------------------------------------------------------------------------
-
-/**
- * Group data rows by a field value.
- *
- * If no field is provided, all rows are grouped under '__default__'.
- * Returns a Map preserving insertion order.
- */
-export function groupByField(data: DataRow[], field: string | undefined): Map<string, DataRow[]> {
-  const groups = new Map<string, DataRow[]>();
-
-  if (!field) {
-    groups.set('__default__', data);
-    return groups;
-  }
-
-  for (const row of data) {
-    const key = String(row[field] ?? '__default__');
-    const existing = groups.get(key);
-    if (existing) {
-      existing.push(row);
-    } else {
-      groups.set(key, [row]);
-    }
-  }
-
-  return groups;
-}
-
-// ---------------------------------------------------------------------------
-// Sorting
-// ---------------------------------------------------------------------------
-
-/**
- * Sort data rows by a field value in ascending order.
- *
- * Type-aware: numbers compared numerically, Date objects by timestamp,
- * string-encoded numbers parsed and compared numerically, and everything
- * else compared lexicographically (which also handles ISO date strings).
- * Nulls are sorted last. Returns a new array (no mutation).
- */
-export function sortByField(data: DataRow[], field: string): DataRow[] {
-  if (data.length <= 1) return [...data];
-
-  return [...data].sort((a, b) => {
-    const aVal = a[field];
-    const bVal = b[field];
-
-    // Nulls last
-    if (aVal == null && bVal == null) return 0;
-    if (aVal == null) return 1;
-    if (bVal == null) return -1;
-
-    // Both numbers
-    if (typeof aVal === 'number' && typeof bVal === 'number') {
-      return aVal - bVal;
-    }
-
-    // Both Dates
-    if (aVal instanceof Date && bVal instanceof Date) {
-      return aVal.getTime() - bVal.getTime();
-    }
-
-    // String values: try numeric parse, then lexicographic
-    const aStr = String(aVal);
-    const bStr = String(bVal);
-
-    const aNum = Number(aStr);
-    const bNum = Number(bStr);
-    if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
-      return aNum - bNum;
-    }
-
-    return aStr.localeCompare(bStr);
-  });
-}
-
-// ---------------------------------------------------------------------------
-// Color helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Get the color for a series/category from the resolved color scale.
- *
- * For single-series charts (key === '__default__'), uses the theme's
- * first categorical color via scales.defaultColor.
- */
-export function getColor(
-  scales: ResolvedScales,
-  key: string,
-  _index?: number,
-  fallback: string = DEFAULT_COLOR,
-): string | GradientDef {
-  if (scales.color && key !== '__default__') {
-    const colorScale = scales.color.scale as (v: string) => string;
-    return colorScale(key);
-  }
-  return scales.defaultColor ?? fallback;
-}
-
-/**
- * Get color from a sequential (quantitative) color scale.
- * Maps a numeric value to a color via linear interpolation, or to a discrete
- * class color for binned (quantile/quantize/threshold) color scales.
- */
-export function getSequentialColor(
-  scales: ResolvedScales,
-  value: number,
-  fallback: string = DEFAULT_COLOR,
-): string | GradientDef {
-  const type = scales.color?.type;
-  if (type === 'sequential' || type === 'quantile' || type === 'quantize' || type === 'threshold') {
-    const colorScale = scales.color!.scale as unknown as (v: number) => string;
-    return colorScale(value);
-  }
-  return scales.defaultColor ?? fallback;
-}