@opendata-ai/openchart-engine 1.2.0

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

@@ -0,0 +1,294 @@
+import type { LayoutStrategy, Rect } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { NormalizedChartSpec } from '../../../compiler/types';
+import { computeScales } from '../../../layout/scales';
+import { computeBarMarks } from '../compute';
+import { computeBarLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea: Rect = { x: 80, y: 20, width: 500, height: 300 };
+
+const fullStrategy: LayoutStrategy = {
+  labelMode: 'all',
+  legendPosition: 'right',
+  annotationPosition: 'inline',
+  axisLabelDensity: 'full',
+};
+
+function makeSimpleBarSpec(): NormalizedChartSpec {
+  return {
+    type: 'bar',
+    data: [
+      { category: 'Apple', value: 50 },
+      { category: 'Banana', value: 30 },
+      { category: 'Cherry', value: 70 },
+    ],
+    encoding: {
+      x: { field: 'value', type: 'quantitative' },
+      y: { field: 'category', type: 'nominal' },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+  };
+}
+
+function makeGroupedBarSpec(): NormalizedChartSpec {
+  return {
+    type: 'bar',
+    data: [
+      { category: 'Q1', value: 50, region: 'East' },
+      { category: 'Q1', value: 40, region: 'West' },
+      { category: 'Q2', value: 60, region: 'East' },
+      { category: 'Q2', value: 55, region: 'West' },
+      { category: 'Q3', value: 45, region: 'East' },
+      { category: 'Q3', value: 70, region: 'West' },
+    ],
+    encoding: {
+      x: { field: 'value', type: 'quantitative' },
+      y: { field: 'category', type: 'nominal' },
+      color: { field: 'region', type: 'nominal' },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+  };
+}
+
+function makeNegativeBarSpec(): NormalizedChartSpec {
+  return {
+    type: 'bar',
+    data: [
+      { category: 'Growth', value: 15 },
+      { category: 'Decline', value: -10 },
+      { category: 'Stable', value: 2 },
+    ],
+    encoding: {
+      x: { field: 'value', type: 'quantitative' },
+      y: { field: 'category', type: 'nominal' },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// computeBarMarks tests
+// ---------------------------------------------------------------------------
+
+describe('computeBarMarks', () => {
+  describe('simple bars', () => {
+    it('produces one RectMark per data row', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      expect(marks).toHaveLength(3);
+      expect(marks.every((m) => m.type === 'rect')).toBe(true);
+    });
+
+    it('bars have positive width and height', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      for (const mark of marks) {
+        expect(mark.width).toBeGreaterThan(0);
+        expect(mark.height).toBeGreaterThan(0);
+      }
+    });
+
+    it('wider bars correspond to larger values', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      // Cherry (70) should be wider than Banana (30)
+      const cherry = marks.find((m) => m.aria.label.includes('Cherry'))!;
+      const banana = marks.find((m) => m.aria.label.includes('Banana'))!;
+      expect(cherry.width).toBeGreaterThan(banana.width);
+    });
+
+    it('bars have corner radius applied', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      expect(marks[0].cornerRadius).toBe(2);
+    });
+
+    it('each bar has an aria label with category and value', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      expect(marks[0].aria.label).toContain('Apple');
+      expect(marks[0].aria.label).toContain('50');
+    });
+  });
+
+  describe('stacked bars', () => {
+    it('produces marks for all data rows', () => {
+      const spec = makeGroupedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      // 3 categories * 2 groups = 6
+      expect(marks).toHaveLength(6);
+    });
+
+    it('segments within a category have different colors', () => {
+      const spec = makeGroupedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      // Find Q1 bars
+      const q1Marks = marks.filter((m) => m.aria.label.includes('Q1'));
+      expect(q1Marks).toHaveLength(2);
+      expect(q1Marks[0].fill).not.toBe(q1Marks[1].fill);
+    });
+
+    it('stacked segments share the same y position within a category', () => {
+      const spec = makeGroupedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const q1East = marks.find(
+        (m) => m.aria.label.includes('Q1') && m.aria.label.includes('East'),
+      )!;
+      const q1West = marks.find(
+        (m) => m.aria.label.includes('Q1') && m.aria.label.includes('West'),
+      )!;
+
+      // Stacked bars share the same y position (full band height)
+      expect(q1East.y).toBe(q1West.y);
+    });
+
+    it('stacked segments are placed end-to-end horizontally', () => {
+      const spec = makeGroupedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const q1Marks = marks.filter((m) => m.aria.label.includes('Q1'));
+      // Second segment should start where first ends
+      const first = q1Marks[0];
+      const second = q1Marks[1];
+      expect(second.x).toBeCloseTo(first.x + first.width, 0);
+    });
+
+    it('stacked bars have zero corner radius', () => {
+      const spec = makeGroupedBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      for (const mark of marks) {
+        expect(mark.cornerRadius).toBe(0);
+      }
+    });
+  });
+
+  describe('negative values', () => {
+    it('negative bars extend leftward from baseline', () => {
+      const spec = makeNegativeBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const decline = marks.find((m) => m.aria.label.includes('Decline'))!;
+      const growth = marks.find((m) => m.aria.label.includes('Growth'))!;
+
+      // Negative bar should start to the left of where positive bar starts
+      expect(decline.x).toBeLessThan(growth.x);
+    });
+
+    it('negative bars still have positive width', () => {
+      const spec = makeNegativeBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      for (const mark of marks) {
+        expect(mark.width).toBeGreaterThan(0);
+      }
+    });
+  });
+
+  describe('edge cases', () => {
+    it('returns empty array when no x encoding', () => {
+      const spec: NormalizedChartSpec = {
+        type: 'bar',
+        data: [{ category: 'A', value: 10 }],
+        encoding: {
+          y: { field: 'category', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      expect(marks).toHaveLength(0);
+    });
+
+    it('returns empty array for empty data', () => {
+      const spec: NormalizedChartSpec = {
+        type: 'bar',
+        data: [],
+        encoding: {
+          x: { field: 'value', type: 'quantitative' },
+          y: { field: 'category', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      expect(marks).toHaveLength(0);
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// computeBarLabels tests
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels', () => {
+  it('produces one label per bar mark', () => {
+    const spec = makeSimpleBarSpec();
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const labels = computeBarLabels(marks, chartArea);
+
+    expect(labels).toHaveLength(marks.length);
+  });
+
+  it('labels contain the value text', () => {
+    const spec = makeSimpleBarSpec();
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const labels = computeBarLabels(marks, chartArea);
+
+    const texts = labels.map((l) => l.text);
+    expect(texts).toContain('50');
+    expect(texts).toContain('30');
+    expect(texts).toContain('70');
+  });
+});

package/src/charts/bar/__tests__/labels.test.ts

@@ -0,0 +1,75 @@
+import type { RectMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeBarLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 300 };
+
+function makeMark(index: number, value: number): RectMark {
+  return {
+    type: 'rect',
+    x: 0,
+    y: index * 30,
+    width: Math.abs(value) * 5,
+    height: 25,
+    fill: '#4e79a7',
+    data: { category: `Cat${index}`, value },
+    aria: { label: `Cat${index}: ${value}` },
+  };
+}
+
+const marks: RectMark[] = [
+  makeMark(0, 10),
+  makeMark(1, 20),
+  makeMark(2, 30),
+  makeMark(3, 40),
+  makeMark(4, 50),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computeBarLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    // Some labels may be hidden by collision detection
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computeBarLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computeBarLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computeBarLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    // First label should contain the first mark's value
+    expect(labels[0].text).toBe('10');
+    // Last label should contain the last mark's value
+    expect(labels[1].text).toBe('50');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computeBarLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('10');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computeBarLabels(marks, chartArea, 'auto');
+    const withDefault = computeBarLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+});

package/src/charts/bar/compute.ts

@@ -0,0 +1,205 @@
+/**
+ * Bar chart (horizontal) mark computation.
+ *
+ * Takes a normalized chart spec with resolved scales and produces
+ * RectMark[] for rendering horizontal bars. Supports grouped and
+ * stacked variants via the color encoding channel.
+ */
+
+import type {
+  DataRow,
+  Encoding,
+  LayoutStrategy,
+  MarkAria,
+  Rect,
+  RectMark,
+} from '@opendata-ai/openchart-core';
+import { abbreviateNumber, formatNumber } from '@opendata-ai/openchart-core';
+import type { ScaleBand, ScaleLinear } from 'd3-scale';
+
+import type { NormalizedChartSpec } from '../../compiler/types';
+import type { ResolvedScales } from '../../layout/scales';
+import { getColor, getSequentialColor, groupByField } from '../utils';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MIN_BAR_WIDTH = 1;
+
+/** Format a bar value for display (abbreviate large numbers). */
+function formatBarValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute horizontal bar marks from a normalized chart spec.
+ *
+ * Y axis uses a band scale for categories. X axis uses a linear scale
+ * for values. When a color encoding is present, bars within each category
+ * are grouped (subdivided bands) or stacked (cumulative widths).
+ */
+export function computeBarMarks(
+  spec: NormalizedChartSpec,
+  scales: ResolvedScales,
+  _chartArea: Rect,
+  _strategy: LayoutStrategy,
+): RectMark[] {
+  const encoding = spec.encoding as Encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+
+  const yScale = scales.y.scale as ScaleBand<string>;
+  const xScale = scales.x.scale as ScaleLinear<number, number>;
+
+  // Band scale should provide bandwidth
+  if (typeof yScale.bandwidth !== 'function') {
+    return [];
+  }
+
+  const bandwidth = yScale.bandwidth();
+  const baseline = xScale(0);
+  const colorField = encoding.color?.field;
+  const isSequentialColor = encoding.color?.type === 'quantitative';
+
+  // If no color encoding, or sequential color (value-based gradient), render simple bars
+  if (!colorField || isSequentialColor) {
+    return computeSimpleBars(
+      spec.data,
+      xChannel.field,
+      yChannel.field,
+      xScale,
+      yScale,
+      bandwidth,
+      baseline,
+      scales,
+      isSequentialColor,
+    );
+  }
+
+  // Stacked bars when color is present
+  return computeStackedBars(
+    spec.data,
+    xChannel.field,
+    yChannel.field,
+    colorField,
+    xScale,
+    yScale,
+    bandwidth,
+    baseline,
+    scales,
+  );
+}
+
+/** Compute stacked horizontal bars. */
+function computeStackedBars(
+  data: DataRow[],
+  valueField: string,
+  categoryField: string,
+  colorField: string,
+  xScale: ScaleLinear<number, number>,
+  yScale: ScaleBand<string>,
+  bandwidth: number,
+  _baseline: number,
+  scales: ResolvedScales,
+): RectMark[] {
+  const marks: RectMark[] = [];
+  const categoryGroups = groupByField(data, categoryField);
+
+  for (const [category, rows] of categoryGroups) {
+    const bandY = yScale(category);
+    if (bandY === undefined) continue;
+
+    let cumulativeValue = 0;
+
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? '');
+      const value = Number(row[valueField] ?? 0);
+      // Only stack positive values (same approach as stacked columns)
+      if (!Number.isFinite(value) || value <= 0) continue;
+
+      const color = getColor(scales, groupKey);
+
+      const xLeft = xScale(cumulativeValue);
+      const xRight = xScale(cumulativeValue + value);
+      const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
+
+      const aria: MarkAria = {
+        label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+      };
+
+      marks.push({
+        type: 'rect',
+        x: xLeft,
+        y: bandY,
+        width: barWidth,
+        height: bandwidth,
+        fill: color,
+        cornerRadius: 0,
+        data: row as Record<string, unknown>,
+        aria,
+      });
+
+      cumulativeValue += value;
+    }
+  }
+
+  return marks;
+}
+
+/** Compute simple (non-grouped) horizontal bars. */
+function computeSimpleBars(
+  data: DataRow[],
+  valueField: string,
+  categoryField: string,
+  xScale: ScaleLinear<number, number>,
+  yScale: ScaleBand<string>,
+  bandwidth: number,
+  baseline: number,
+  scales: ResolvedScales,
+  sequentialColor = false,
+): RectMark[] {
+  const marks: RectMark[] = [];
+
+  for (const row of data) {
+    const category = String(row[categoryField] ?? '');
+    const value = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value)) continue;
+
+    const bandY = yScale(category);
+    if (bandY === undefined) continue;
+
+    const color = sequentialColor
+      ? getSequentialColor(scales, value)
+      : getColor(scales, '__default__');
+    const xPos = value >= 0 ? baseline : xScale(value);
+    const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
+
+    const aria: MarkAria = {
+      label: `${category}: ${formatBarValue(value)}`,
+    };
+
+    marks.push({
+      type: 'rect',
+      x: xPos,
+      y: bandY,
+      width: barWidth,
+      height: bandwidth,
+      fill: color,
+      cornerRadius: 2,
+      data: row as Record<string, unknown>,
+      aria,
+    });
+  }
+
+  return marks;
+}

package/src/charts/bar/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Bar chart module (horizontal bars).
+ *
+ * Exports the bar chart renderer and computation functions.
+ */
+
+import type { Mark } from '@opendata-ai/openchart-core';
+import type { ChartRenderer } from '../registry';
+import { computeBarMarks } from './compute';
+import { computeBarLabels } from './labels';
+
+// ---------------------------------------------------------------------------
+// Bar chart renderer
+// ---------------------------------------------------------------------------
+
+export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const marks = computeBarMarks(spec, scales, chartArea, strategy);
+
+  // Compute and attach value labels (respects spec.labels.density)
+  const labels = computeBarLabels(marks, chartArea, spec.labels.density);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+
+  return marks as Mark[];
+};
+
+// ---------------------------------------------------------------------------
+// Public exports
+// ---------------------------------------------------------------------------
+
+export { computeBarMarks } from './compute';
+export { computeBarLabels } from './labels';