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

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

@@ -1,127 +0,0 @@
-/**
- * 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

@@ -1,292 +0,0 @@
-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');
-  });
-});