@opendata-ai/openchart-engine 6.27.0 → 6.28.2

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

@@ -386,6 +386,108 @@ describe('computeBarMarks', () => {
     });
   });
 
+  describe('stacked vs grouped (wage data reproduction)', () => {
+    // 2 years × 2 firm-size categories — the canonical grouped-bar use case
+    const wageData = [
+      { size: '<5 employees', year: '2018', pay: 48200 },
+      { size: '<5 employees', year: '2022', pay: 56400 },
+      { size: '5,000+ employees', year: '2018', pay: 62300 },
+      { size: '5,000+ employees', year: '2022', pay: 74800 },
+    ];
+
+    function makeWageSpec(stackNull = false): NormalizedChartSpec {
+      return {
+        markType: 'bar',
+        markDef: { type: 'bar' },
+        data: wageData,
+        encoding: {
+          x: {
+            field: 'pay',
+            type: 'quantitative',
+            ...(stackNull ? { stack: null } : {}),
+          },
+          y: { field: 'size', type: 'nominal' },
+          color: { field: 'year', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+    }
+
+    it('stacks by default: segments are contiguous end-to-end within each category', () => {
+      const spec = makeWageSpec(false);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      // 2 firm sizes × 2 years = 4 bars
+      expect(marks).toHaveLength(4);
+
+      // For stacked bars, the second segment starts exactly where the first ends.
+      const smallFirmMarks = marks
+        .filter((m) => m.aria.label.includes('<5'))
+        .sort((a, b) => a.x - b.x);
+      expect(smallFirmMarks).toHaveLength(2);
+      expect(smallFirmMarks[1].x).toBeCloseTo(smallFirmMarks[0].x + smallFirmMarks[0].width, 1);
+    });
+
+    it('stacks by default: segments share the same y position (stacked on same row)', () => {
+      const spec = makeWageSpec(false);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const smallFirmMarks = marks.filter((m) => m.aria.label.includes('<5'));
+      expect(smallFirmMarks).toHaveLength(2);
+      expect(smallFirmMarks[0].y).toBe(smallFirmMarks[1].y);
+    });
+
+    it('grouped with stack:null: bar widths match individual pay values (not cumulative)', () => {
+      const stackedSpec = makeWageSpec(false);
+      const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
+      const stackedMarks = computeBarMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
+
+      const groupedSpec = makeWageSpec(true);
+      const groupedScales = computeScales(groupedSpec, chartArea, groupedSpec.data);
+      const groupedMarks = computeBarMarks(groupedSpec, groupedScales, chartArea, fullStrategy);
+
+      expect(groupedMarks).toHaveLength(4);
+
+      // Grouped bars each start from the baseline (same x for both years within a firm size)
+      const smallFirmGrouped = groupedMarks.filter((m) => m.aria.label.includes('<5'));
+      expect(smallFirmGrouped[0].x).toBe(smallFirmGrouped[1].x);
+
+      // Stacked bars for the same category have different x positions (end-to-end)
+      const smallFirmStacked = stackedMarks.filter((m) => m.aria.label.includes('<5'));
+      expect(smallFirmStacked[0].x).not.toBe(smallFirmStacked[1].x);
+    });
+
+    it('grouped with stack:null: bars sit at different y positions within each category', () => {
+      const spec = makeWageSpec(true);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const smallFirmMarks = marks.filter((m) => m.aria.label.includes('<5'));
+      expect(smallFirmMarks).toHaveLength(2);
+      expect(smallFirmMarks[0].y).not.toBe(smallFirmMarks[1].y);
+    });
+
+    it('grouped with stack:null: scale domain covers max individual value, not stacked sum', () => {
+      const spec = makeWageSpec(true);
+      const scales = computeScales(spec, chartArea, spec.data);
+
+      // Max individual pay is 74800. Stacked sum for 5000+ employees = 62300 + 74800 = 137100.
+      // With stack:null the domain should NOT reach 137100.
+      const xScale = scales.x!.scale;
+      const domain = xScale.domain() as number[];
+      expect(domain[1]).toBeLessThan(137100);
+      // But it should cover the max individual value
+      expect(domain[1]).toBeGreaterThanOrEqual(74800);
+    });
+  });
+
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {
@@ -507,4 +609,124 @@ describe('computeBarLabels', () => {
     expect(texts).toContain('30%');
     expect(texts).toContain('70%');
   });
+
+  it('applies fixed label color to outside labels', () => {
+    // Narrow chart area forces bars < 40px, putting labels outside
+    const smallArea: Rect = { x: 80, y: 20, width: 30, height: 300 };
+    const spec: NormalizedChartSpec = {
+      markType: 'bar',
+      markDef: { type: 'bar', size: 6, cornerRadius: 'pill' },
+      data: [
+        { category: 'A', value: 1 },
+        { category: 'B', value: 2 },
+      ],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '', prefix: '' },
+    };
+    const scales = computeScales(spec, smallArea, spec.data);
+    const marks = computeBarMarks(spec, scales, smallArea, fullStrategy);
+    const labels = computeBarLabels(
+      marks,
+      smallArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      '#a1a1aa',
+    );
+
+    // Outside labels should use the fixed color; inside labels use contrast-adjusted colors
+    const outsideLabels = labels.filter((l) => l.style.textAnchor === 'start');
+    expect(outsideLabels.length).toBeGreaterThan(0);
+    for (const label of outsideLabels) {
+      expect(label.style.fill).toBe('#a1a1aa');
+    }
+  });
+});
+
+describe('markDef overrides', () => {
+  it('markDef.size reduces bar height and centers within band', () => {
+    const spec = makeSimpleBarSpec();
+    spec.markDef = { type: 'bar', size: 6 };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+    for (const mark of marks) {
+      expect(mark.height).toBe(6);
+    }
+
+    // Bars should be centered: offset = (bandwidth - 6) / 2
+    const specDefault = makeSimpleBarSpec();
+    const scalesDefault = computeScales(specDefault, chartArea, specDefault.data);
+    const marksDefault = computeBarMarks(specDefault, scalesDefault, chartArea, fullStrategy);
+    for (let i = 0; i < marks.length; i++) {
+      expect(marks[i].y).toBeGreaterThan(marksDefault[i].y);
+    }
+  });
+
+  it('markDef.size is capped at bandwidth', () => {
+    const spec = makeSimpleBarSpec();
+    spec.markDef = { type: 'bar', size: 9999 };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+    const bandwidth = marks[0].height;
+    // Should be capped at bandwidth, not 9999
+    expect(bandwidth).toBeLessThan(9999);
+  });
+
+  it('markDef.cornerRadius "pill" resolves to half the bar height', () => {
+    const spec = makeSimpleBarSpec();
+    spec.markDef = { type: 'bar', size: 6, cornerRadius: 'pill' };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+    for (const mark of marks) {
+      expect(mark.cornerRadius).toBe(3);
+    }
+  });
+
+  it('markDef.cornerRadius as number overrides default', () => {
+    const spec = makeSimpleBarSpec();
+    spec.markDef = { type: 'bar', cornerRadius: 8 };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+    for (const mark of marks) {
+      expect(mark.cornerRadius).toBe(8);
+    }
+  });
+
+  it('markDef.size is skipped for stacked bars', () => {
+    const spec = makeGroupedBarSpec();
+    spec.markDef = { type: 'bar', size: 6 };
+    // Enable stacking (default for grouped)
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+    const stackedMarks = marks.filter((m) => m.stackGroup !== undefined);
+    for (const mark of stackedMarks) {
+      expect(mark.height).not.toBe(6);
+    }
+  });
+
+  it('combined size + pill uses adjusted size for radius', () => {
+    const spec = makeSimpleBarSpec();
+    spec.markDef = { type: 'bar', size: 10, cornerRadius: 'pill' };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+    for (const mark of marks) {
+      expect(mark.height).toBe(10);
+      expect(mark.cornerRadius).toBe(5);
+    }
+  });
 });

package/src/charts/bar/compute.ts

@@ -97,9 +97,11 @@ export function computeBarMarks(
   const colorField = colorEnc?.field;
   const isSequentialColor = colorEnc?.type === 'quantitative';
 
+  let marks: RectMark[];
+
   // If no color encoding, or sequential color (value-based gradient), render simple bars
   if (!colorField || isSequentialColor) {
-    return computeSimpleBars(
+    marks = computeSimpleBars(
       spec.data,
       xChannel.field,
       yChannel.field,
@@ -111,17 +113,51 @@ export function computeBarMarks(
       isSequentialColor,
       conditionalColor,
     );
-  }
-
-  // Color encoding present: decide between colored simple bars vs stacked
-  const categoryGroups = groupByField(spec.data, yChannel.field);
-  const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
-
-  if (needsStacking) {
-    const stackDisabled = xChannel.stack === null || xChannel.stack === false;
-
-    if (stackDisabled) {
-      return computeGroupedBars(
+  } else {
+    // Color encoding present: decide between colored simple bars vs stacked
+    const categoryGroups = groupByField(spec.data, yChannel.field);
+    const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
+
+    if (needsStacking) {
+      // stack: null or false -> grouped (side-by-side) bars
+      const stackDisabled = xChannel.stack === null || xChannel.stack === false;
+
+      if (stackDisabled) {
+        marks = computeGroupedBars(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales,
+        );
+      } else {
+        const stackMode =
+          xChannel.stack === 'normalize'
+            ? 'normalize'
+            : xChannel.stack === 'center'
+              ? 'center'
+              : 'zero';
+
+        marks = computeStackedBars(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales,
+          stackMode,
+        );
+      }
+    } else {
+      // Single row per category: render like simple bars but with color from scale
+      marks = computeColoredBars(
         spec.data,
         xChannel.field,
         yChannel.field,
@@ -133,40 +169,9 @@ export function computeBarMarks(
         scales,
       );
     }
-
-    const stackMode =
-      xChannel.stack === 'normalize'
-        ? 'normalize'
-        : xChannel.stack === 'center'
-          ? 'center'
-          : 'zero';
-
-    return computeStackedBars(
-      spec.data,
-      xChannel.field,
-      yChannel.field,
-      colorField,
-      xScale,
-      yScale,
-      bandwidth,
-      baseline,
-      scales,
-      stackMode,
-    );
   }
 
-  // Single row per category: render like simple bars but with color from scale
-  return computeColoredBars(
-    spec.data,
-    xChannel.field,
-    yChannel.field,
-    colorField,
-    xScale,
-    yScale,
-    bandwidth,
-    baseline,
-    scales,
-  );
+  return applyMarkDefOverrides(marks, spec, bandwidth);
 }
 
 /** Compute stacked horizontal bars with support for zero/normalize/center modes. */
@@ -356,6 +361,34 @@ function computeColoredBars(
   return marks;
 }
 
+function applyMarkDefOverrides(
+  marks: RectMark[],
+  spec: NormalizedChartSpec,
+  bandwidth: number,
+): RectMark[] {
+  const { markDef } = spec;
+  const fixedSize = markDef.size;
+  const crSpec = markDef.cornerRadius;
+
+  if (fixedSize == null && crSpec == null) return marks;
+
+  for (const mark of marks) {
+    if (fixedSize != null && mark.stackGroup === undefined) {
+      const barHeight = Math.min(fixedSize, bandwidth);
+      const offset = (bandwidth - barHeight) / 2;
+      mark.y = mark.y + offset;
+      mark.height = barHeight;
+    }
+    const effectiveHeight = mark.height;
+    if (crSpec === 'pill') {
+      mark.cornerRadius = effectiveHeight / 2;
+    } else if (typeof crSpec === 'number') {
+      mark.cornerRadius = crSpec;
+    }
+  }
+  return marks;
+}
+
 /** Compute simple (non-grouped) horizontal bars. */
 function computeSimpleBars(
   data: DataRow[],

package/src/charts/bar/index.ts

@@ -26,6 +26,7 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
     spec.labels.format,
     spec.labels.prefix,
     valueField,
+    spec.labels.color,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -94,6 +94,7 @@ export function computeBarLabels(
   labelFormat?: string,
   labelPrefix?: string,
   valueField?: string,
+  labelColor?: string,
 ): ResolvedLabel[] {
   const targetMarks = filterByDensity(marks, density);
 
@@ -166,12 +167,12 @@ export function computeBarLabels(
       if (isNegative) {
         // Outside negative bar: just past the bar's left edge
         anchorX = mark.x - LABEL_PADDING;
-        fill = getRepresentativeColor(mark.fill);
+        fill = labelColor ?? getRepresentativeColor(mark.fill);
         textAnchor = 'end';
       } else {
         // Outside positive bar: just past the bar's right edge
         anchorX = mark.x + mark.width + LABEL_PADDING;
-        fill = getRepresentativeColor(mark.fill);
+        fill = labelColor ?? getRepresentativeColor(mark.fill);
         textAnchor = 'start';
       }
     }

package/src/charts/column/compute.ts

@@ -78,6 +78,8 @@ export function computeColumnMarks(
 
   const isSequentialColor = colorEnc?.type === 'quantitative';
 
+  let marks: RectMark[];
+
   // Color encoding present: decide between colored simple columns vs stacked
   if (colorField && !isSequentialColor) {
     // Check if any category has multiple rows (actual stacking needed)
@@ -88,7 +90,26 @@ export function computeColumnMarks(
       const stackDisabled = yChannel.stack === null || yChannel.stack === false;
 
       if (stackDisabled) {
-        return computeGroupedColumns(
+        marks = computeGroupedColumns(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales,
+        );
+      } else {
+        const stackMode =
+          yChannel.stack === 'normalize'
+            ? 'normalize'
+            : yChannel.stack === 'center'
+              ? 'center'
+              : 'zero';
+
+        marks = computeStackedColumns(
           spec.data,
           xChannel.field,
           yChannel.field,
@@ -98,17 +119,12 @@ export function computeColumnMarks(
           bandwidth,
           baseline,
           scales,
+          stackMode,
         );
       }
-
-      const stackMode =
-        yChannel.stack === 'normalize'
-          ? 'normalize'
-          : yChannel.stack === 'center'
-            ? 'center'
-            : 'zero';
-
-      return computeStackedColumns(
+    } else {
+      // Single row per category: render like simple columns but with color from scale
+      marks = computeColoredColumns(
         spec.data,
         xChannel.field,
         yChannel.field,
@@ -118,36 +134,24 @@ export function computeColumnMarks(
         bandwidth,
         baseline,
         scales,
-        stackMode,
       );
     }
-
-    // Single row per category: render like simple columns but with color from scale
-    return computeColoredColumns(
+  } else {
+    marks = computeSimpleColumns(
       spec.data,
       xChannel.field,
       yChannel.field,
-      colorField,
       xScale,
       yScale,
       bandwidth,
       baseline,
       scales,
+      isSequentialColor,
+      conditionalColor,
     );
   }
 
-  return computeSimpleColumns(
-    spec.data,
-    xChannel.field,
-    yChannel.field,
-    xScale,
-    yScale,
-    bandwidth,
-    baseline,
-    scales,
-    isSequentialColor,
-    conditionalColor,
-  );
+  return applyMarkDefOverrides(marks, spec, bandwidth);
 }
 
 /** Compute simple (non-grouped) vertical columns. */
@@ -407,3 +411,32 @@ function computeStackedColumns(
 
   return marks;
 }
+
+function applyMarkDefOverrides(
+  marks: RectMark[],
+  spec: NormalizedChartSpec,
+  bandwidth: number,
+): RectMark[] {
+  const { markDef } = spec;
+  const fixedSize = markDef.size;
+  const crSpec = markDef.cornerRadius;
+
+  if (fixedSize == null && crSpec == null) return marks;
+
+  for (const mark of marks) {
+    if (fixedSize != null && mark.stackGroup === undefined) {
+      const barWidth = Math.min(fixedSize, bandwidth);
+      const offset = (bandwidth - barWidth) / 2;
+      mark.x = mark.x + offset;
+      mark.width = barWidth;
+    }
+    const effectiveWidth = mark.width;
+    if (crSpec === 'pill') {
+      mark.cornerRadius = effectiveWidth / 2;
+    } else if (typeof crSpec === 'number') {
+      mark.cornerRadius = crSpec;
+    }
+  }
+
+  return marks;
+}

package/src/charts/column/index.ts

@@ -26,6 +26,7 @@ export const columnRenderer: ChartRenderer = (spec, scales, chartArea, strategy,
     spec.labels.format,
     spec.labels.prefix,
     valueField,
+    spec.labels.color,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/column/labels.ts

@@ -50,6 +50,7 @@ export function computeColumnLabels(
   labelFormat?: string,
   labelPrefix?: string,
   valueField?: string,
+  labelColor?: string,
 ): ResolvedLabel[] {
   const targetMarks = filterByDensity(marks, density);
 
@@ -107,7 +108,7 @@ export function computeColumnLabels(
         fontFamily: 'system-ui, -apple-system, sans-serif',
         fontSize: LABEL_FONT_SIZE,
         fontWeight: LABEL_FONT_WEIGHT,
-        fill: getRepresentativeColor(mark.fill),
+        fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
         dominantBaseline: isNegative ? 'hanging' : 'auto',

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

@@ -896,7 +896,7 @@ describe('seriesStyles', () => {
     const usLine = lineMarks.find((m) => m.seriesKey === 'US');
 
     expect(ukLine?.strokeWidth).toBe(1.5);
-    expect(usLine?.strokeWidth).toBe(2.5); // default
+    expect(usLine?.strokeWidth).toBe(1.5); // default
   });
 
   it('sets opacity on a series', () => {
@@ -941,7 +941,7 @@ describe('seriesStyles', () => {
     for (const line of lineMarks) {
       expect(line.strokeDasharray).toBeUndefined();
       expect(line.opacity).toBeUndefined();
-      expect(line.strokeWidth).toBe(2.5);
+      expect(line.strokeWidth).toBe(1.5);
     }
   });
 });

package/src/charts/line/area.ts

@@ -137,10 +137,31 @@ function computeSingleArea(
 
     // Allow markDef.fill to override color with a gradient.
     // When a gradient is provided, set fillOpacity=1 so gradient stop-opacity controls the fade.
+    // When no fill is provided, auto-generate a top-to-bottom fade gradient.
     const markFill = spec.markDef.fill;
-    const fillValue = markFill != null ? markFill : color;
-    const defaultFillOpacity = y2Channel ? 0.25 : DEFAULT_FILL_OPACITY;
-    const fillOpacity = isGradientDef(fillValue) ? 1 : (spec.markDef.opacity ?? defaultFillOpacity);
+    let fillValue: string | import('@opendata-ai/openchart-core').GradientDef;
+    let fillOpacity: number;
+
+    if (markFill != null) {
+      fillValue = markFill;
+      fillOpacity = isGradientDef(markFill)
+        ? 1
+        : (spec.markDef.opacity ?? (y2Channel ? 0.25 : DEFAULT_FILL_OPACITY));
+    } else {
+      const colorStr = getRepresentativeColor(color);
+      fillValue = {
+        gradient: 'linear',
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 1,
+        stops: [
+          { offset: 0, color: colorStr, opacity: 0.12 },
+          { offset: 1, color: colorStr, opacity: 0 },
+        ],
+      };
+      fillOpacity = 1;
+    }
 
     marks.push({
       type: 'area',
@@ -151,7 +172,7 @@ function computeSingleArea(
       fill: fillValue,
       fillOpacity: fillOpacity,
       stroke: getRepresentativeColor(isGradientDef(fillValue) ? color : fillValue),
-      strokeWidth: spec.display === 'sparkline' ? 1.25 : 2,
+      strokeWidth: spec.markDef.strokeWidth ?? (spec.display === 'sparkline' ? 1.25 : 1.5),
       seriesKey: seriesKey === '__default__' ? undefined : seriesKey,
       data: validPoints.map((p) => p.row),
       dataPoints: validPoints.map((p) => ({ x: p.x, y: p.yTop, datum: p.row })),