@opendata-ai/openchart-engine 8.0.0-rc.12 → 8.0.0-rc.3

package/src/charts/bar/__tests__/gradient-orient.test.ts

@@ -0,0 +1,127 @@
+/**
+ * Characterization tests for horizontal-bar gradient auto-orientation.
+ *
+ * Part of refactor/v7-cohesion step 1. Pins the behavior of
+ * `orientGradientForHorizontalBar` in `packages/engine/src/charts/bar/compute.ts`:
+ * when a user supplies the default vertical gradient (top-to-bottom) as a
+ * horizontal-bar fill, the engine rotates it to horizontal (left-to-right) so
+ * the gradient follows the bar's data direction. Vertical bars (columns) keep
+ * the gradient unchanged. Explicit non-default coordinates are never rewritten.
+ *
+ * These tests protect the behavior through upcoming refactors that may consolidate
+ * gradient logic across bar/column/stacked variants.
+ */
+
+import type { ChartSpec, LinearGradient, RectMark } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../../../compile';
+
+// A default-vertical linear gradient (no explicit coords — defaults resolve to
+// x1:0, y1:0, x2:0, y2:1 which is the "top-to-bottom" default).
+const defaultVerticalGradient: LinearGradient = {
+  gradient: 'linear',
+  stops: [
+    { offset: 0, color: '#1b7fa3', opacity: 0.4 },
+    { offset: 1, color: '#1b7fa3' },
+  ],
+};
+
+function firstGradientRectFill(marks: RectMark[]): LinearGradient {
+  const mark = marks.find((m) => m.type === 'rect' && isGradientDef(m.fill));
+  if (!mark) throw new Error('expected at least one RectMark with a gradient fill');
+  const fill = mark.fill;
+  if (!isGradientDef(fill) || fill.gradient !== 'linear') {
+    throw new Error('expected a linear gradient fill');
+  }
+  return fill as LinearGradient;
+}
+
+describe('horizontal bar gradient auto-orientation', () => {
+  it('rotates the default vertical gradient to horizontal on horizontal bars', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: defaultVerticalGradient },
+      data: [
+        { category: 'A', value: 10 },
+        { category: 'B', value: 20 },
+        { category: 'C', value: 30 },
+      ],
+      // Horizontal bar: x is quantitative, y is nominal
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    // Horizontal gradient: x1 != x2, y1 == y2
+    expect(grad.x1).toBe(0);
+    expect(grad.y1).toBe(0);
+    expect(grad.x2).toBe(1);
+    expect(grad.y2).toBe(0);
+    expect(grad.x1).not.toBe(grad.x2);
+    expect(grad.y1).toBe(grad.y2);
+  });
+
+  it('leaves the default vertical gradient unchanged on vertical (column) bars', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: defaultVerticalGradient },
+      data: [
+        { category: 'A', value: 10 },
+        { category: 'B', value: 20 },
+        { category: 'C', value: 30 },
+      ],
+      // Vertical bar (column): x is nominal, y is quantitative
+      encoding: {
+        x: { field: 'category', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    // Vertical gradient preserved: x1 == x2 (both 0), y1 != y2 (0 vs 1)
+    expect(grad.x1 ?? 0).toBe(0);
+    expect(grad.x2 ?? 0).toBe(0);
+    expect(grad.y1 ?? 0).toBe(0);
+    expect(grad.y2 ?? 1).toBe(1);
+    expect(grad.x1 ?? 0).toBe(grad.x2 ?? 0);
+    expect(grad.y1 ?? 0).not.toBe(grad.y2 ?? 1);
+  });
+
+  it('leaves an explicitly-oriented gradient unchanged on horizontal bars', () => {
+    // Explicit non-default direction — user knows what they want, the engine
+    // must not rewrite it. Here we pass a diagonal gradient.
+    const explicitDiagonal: LinearGradient = {
+      gradient: 'linear',
+      x1: 0,
+      y1: 0,
+      x2: 1,
+      y2: 1,
+      stops: [
+        { offset: 0, color: '#1b7fa3' },
+        { offset: 1, color: '#ff6600' },
+      ],
+    };
+
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: explicitDiagonal },
+      data: [{ category: 'A', value: 10 }],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    expect(grad.x1).toBe(0);
+    expect(grad.y1).toBe(0);
+    expect(grad.x2).toBe(1);
+    expect(grad.y2).toBe(1);
+  });
+});

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

@@ -0,0 +1,292 @@
+import type { RectMark } from '@opendata-ai/openchart-core';
+import { buildD3Formatter } 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);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Stacked bar segment-fit tests (BUG-4)
+// ---------------------------------------------------------------------------
+
+function makeStackedMark(index: number, value: number, width: number): RectMark {
+  return {
+    type: 'rect',
+    x: index * 50,
+    y: 0,
+    width,
+    height: 25,
+    fill: '#4e79a7',
+    cornerRadius: 0,
+    stackGroup: `Cat${index}`,
+    data: { category: `Cat${index}`, value },
+    aria: { label: `Cat${index}: ${value}` },
+  };
+}
+
+describe('stacked bar label segment-fit', () => {
+  it('density "all" hides labels that do not fit in narrow stacked segments', () => {
+    const stackedMarks: RectMark[] = [
+      // Narrow segment: 30px wide, label for "8003" will be wider than 30 - 12 = 18px
+      makeStackedMark(0, 8003, 30),
+      // Wide segment: 200px wide, label should fit easily
+      makeStackedMark(1, 5000, 200),
+    ];
+    const labels = computeBarLabels(stackedMarks, chartArea, 'all');
+    expect(labels).toHaveLength(2);
+    // Narrow segment label should be hidden
+    expect(labels[0].visible).toBe(false);
+    // Wide segment label should still be visible
+    expect(labels[1].visible).toBe(true);
+  });
+
+  it('density "auto" hides labels that do not fit in narrow stacked segments', () => {
+    const stackedMarks: RectMark[] = [makeStackedMark(0, 8003, 30), makeStackedMark(1, 5000, 200)];
+    const labels = computeBarLabels(stackedMarks, chartArea, 'auto');
+    expect(labels).toHaveLength(2);
+    // Narrow segment label should be hidden
+    expect(labels[0].visible).toBe(false);
+    // Wide segment label should still be visible
+    expect(labels[1].visible).toBe(true);
+  });
+
+  it('non-stacked bars still show labels regardless of width', () => {
+    // Non-stacked marks have no stackGroup
+    const nonStackedMarks: RectMark[] = [
+      makeMark(0, 10), // width = 50
+      makeMark(1, 20), // width = 100
+    ];
+    const labels = computeBarLabels(nonStackedMarks, chartArea, 'all');
+    expect(labels).toHaveLength(2);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('wide stacked segments still show labels', () => {
+    const wideStacked: RectMark[] = [makeStackedMark(0, 42, 200), makeStackedMark(1, 99, 200)];
+    const labels = computeBarLabels(wideStacked, chartArea, 'all');
+    expect(labels).toHaveLength(2);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Format with abbreviated aria values (BUG-3)
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels with $~s format and abbreviated aria values', () => {
+  function makeAbbreviatedMark(index: number, value: number, abbr: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: index * 30,
+      width: 200,
+      height: 25,
+      fill: '#4e79a7',
+      data: { category: `Cat${index}`, value },
+      aria: { label: `Cat${index}: ${abbr}` },
+    };
+  }
+
+  it('$~s format preserves SI suffix for low thousands', () => {
+    const thousandMarks: RectMark[] = [
+      makeAbbreviatedMark(0, 6000, '6K'),
+      makeAbbreviatedMark(1, 7000, '7K'),
+      makeAbbreviatedMark(2, 14000, '14K'),
+    ];
+
+    const labels = computeBarLabels(thousandMarks, chartArea, 'all', buildD3Formatter('$~s'));
+    expect(labels).toHaveLength(3);
+    expect(labels[0].text).toBe('$6k');
+    expect(labels[1].text).toBe('$7k');
+    expect(labels[2].text).toBe('$14k');
+  });
+
+  it('$~s format works for millions', () => {
+    const millionMarks: RectMark[] = [makeAbbreviatedMark(0, 1500000, '1.5M')];
+
+    const labels = computeBarLabels(millionMarks, chartArea, 'all', buildD3Formatter('$~s'));
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('$1.5M');
+  });
+
+  it('handles comma-formatted aria values', () => {
+    const commaMarks: RectMark[] = [makeAbbreviatedMark(0, 500, '500')];
+
+    const labels = computeBarLabels(commaMarks, chartArea, 'all', buildD3Formatter('$,.0f'));
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('$500');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Unicode minus sign handling
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels with Unicode minus (U+2212) in aria values', () => {
+  function makeUnicodeMinusMark(index: number, ariaValue: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: index * 30,
+      width: 200,
+      height: 25,
+      fill: '#4e79a7',
+      data: { category: `Cat${index}` },
+      aria: { label: `Cat${index}: ${ariaValue}` },
+    };
+  }
+
+  it('parses Unicode minus and applies format with % suffix', () => {
+    const unicodeMarks: RectMark[] = [
+      makeUnicodeMinusMark(0, '\u221234'), // −34
+      makeUnicodeMinusMark(1, '\u22125'), // −5
+    ];
+
+    const labels = computeBarLabels(unicodeMarks, chartArea, 'all', buildD3Formatter('+.0f%'));
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('\u221234%'); // −34%
+    expect(labels[1].text).toBe('\u22125%'); // −5%
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Dark-mode inside-label color
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels inside-label color by mode', () => {
+  // Wide bar (>= 40px) so the label is placed inside and uses pickLabelColor.
+  function makeFilledMark(fill: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 25,
+      fill,
+      data: { category: 'A', value: 100 },
+      aria: { label: 'A: 100' },
+    };
+  }
+
+  it('mid-tone fill gets white inside-label in light mode, dark in dark mode', () => {
+    const slate = [makeFilledMark('#94a3b8')];
+    const light = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#111111');
+  });
+
+  it('saturated fill keeps white inside-label in both modes', () => {
+    const red = [makeFilledMark('#c0392b')];
+    const light = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#ffffff');
+  });
+});