@opendata-ai/openchart-engine 6.27.2 → 6.28.2

package/src/barlist/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Internal normalized barlist spec type used by the compilation pipeline.
+ */
+
+import type {
+  AnimationSpec,
+  BarListEncoding,
+  DarkMode,
+  DataRow,
+  ThemeConfig,
+} from '@opendata-ai/openchart-core';
+
+import type { NormalizedChrome } from '../compiler/types';
+
+export interface NormalizedBarListSpec {
+  type: 'barlist';
+  data: DataRow[];
+  encoding: BarListEncoding;
+  barHeight: number;
+  cornerRadius: number | 'pill';
+  maxItems: number;
+  chrome: NormalizedChrome;
+  theme: ThemeConfig;
+  darkMode: DarkMode;
+  watermark: boolean;
+  animation?: AnimationSpec;
+  valueFormat?: string;
+}

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

@@ -609,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,18 +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) {
-    // stack: null or false -> grouped (side-by-side) bars
-    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,
@@ -134,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. */
@@ -357,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 })),

package/src/charts/line/compute.ts

@@ -30,7 +30,7 @@ import { resolveCurve } from './curves';
 // ---------------------------------------------------------------------------
 
 /** Default stroke width for line marks. */
-const DEFAULT_STROKE_WIDTH = 2.5;
+const DEFAULT_STROKE_WIDTH = 1.5;
 
 /** Sparkline mode uses a thinner stroke since the chart area is tiny and a
  *  2.5px line reads as clunky. 1.25px keeps the trend legible without dominating. */
@@ -180,6 +180,7 @@ export function computeLineMarks(
       stroke: strokeColor,
       strokeWidth:
         styleOverride?.strokeWidth ??
+        spec.markDef.strokeWidth ??
         (spec.display === 'sparkline' ? SPARKLINE_STROKE_WIDTH : DEFAULT_STROKE_WIDTH),
       strokeDasharray,
       opacity: styleOverride?.opacity,
@@ -194,29 +195,38 @@ export function computeLineMarks(
     // Emit PointMark objects when markDef.point is truthy, or when sequential
     // color is active (points carry the gradient since SVG paths are single-color).
     const markPoint = spec.markDef.point;
-    const showPoints = markPoint === true || markPoint === 'transparent' || isSequentialColor;
+    const showPoints =
+      markPoint === true ||
+      markPoint === 'transparent' ||
+      markPoint === 'endpoints' ||
+      isSequentialColor;
 
     if (showPoints) {
       const isTransparent = markPoint === 'transparent';
+      const isEndpoints = markPoint === 'endpoints';
       // Also respect per-series showPoints override
       const seriesShowPoints = styleOverride?.showPoints !== false;
+      const lastIdx = pointsWithData.length - 1;
 
       for (let i = 0; i < pointsWithData.length; i++) {
         const p = pointsWithData[i];
-        const visible = seriesShowPoints && !isTransparent;
+        const isEndpoint = i === 0 || i === lastIdx;
+        const visible = seriesShowPoints && !isTransparent && (!isEndpoints || isEndpoint);
         // Sequential color: each point gets colored by its data value
         let pointColor = color;
         if (isSequentialColor) {
           const val = Number(p.row[sequentialColorField!]);
           pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color;
         }
+        const hollow = isEndpoints && visible;
+        const pointColorStr = getRepresentativeColor(pointColor);
         const pointMark: PointMark = {
           type: 'point',
           cx: p.x,
           cy: p.y,
           r: visible ? DEFAULT_POINT_RADIUS : 0,
-          fill: pointColor,
-          stroke: visible ? '#ffffff' : 'transparent',
+          fill: hollow ? 'transparent' : pointColorStr,
+          stroke: hollow ? pointColorStr : visible ? '#ffffff' : 'transparent',
           strokeWidth: visible ? 1.5 : 0,
           fillOpacity: isTransparent ? 0 : 1,
           data: p.row,

package/src/compile.ts

@@ -55,6 +55,7 @@ import { computeAnnotations } from './annotations/compute';
 // registry on module load. Tests that clear the registry can import
 // `registerBuiltinRenderers` from `./charts/builtin` to restore defaults.
 import './charts/builtin';
+import { compileBarList as compileBarListImpl } from './barlist/compile-barlist';
 import {
   assignAnimationIndices,
   computeMarkObstacles,
@@ -816,7 +817,8 @@ function compileLayerIndependent(
   const theme = resolveTheme(layerSpec.theme ?? leaf1.theme);
   const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
   const rightAxisWidth = estimateYAxisLabelWidth(leaf1.data, leaf1.encoding, axisFontSize);
-  const hasRightAxisTitle = !!leaf1.encoding?.y?.axis?.title;
+  const yAxisConfig = leaf1.encoding?.y?.axis || undefined;
+  const hasRightAxisTitle = !!yAxisConfig?.title;
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
   const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
   const axisTitleOffset = getAxisTitleOffset(options.width);
@@ -1316,3 +1318,26 @@ export function compileTileMap(
 ): import('@opendata-ai/openchart-core').TileMapLayout {
   return compileTileMapImpl(spec, options);
 }
+
+// ---------------------------------------------------------------------------
+// BarList compilation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a barlist spec into a BarListLayout.
+ *
+ * Takes a raw barlist spec, validates, normalizes, resolves theme and chrome,
+ * computes row layout with proportional bars, builds tooltips, and returns
+ * a BarListLayout ready for rendering.
+ *
+ * @param spec - Raw barlist spec (validated and normalized internally).
+ * @param options - Compile options (width, height, theme, darkMode).
+ * @returns BarListLayout with computed positions and visual properties.
+ * @throws Error if spec is invalid or not a barlist type.
+ */
+export function compileBarList(
+  spec: unknown,
+  options: CompileOptions,
+): import('@opendata-ai/openchart-core').BarListLayout {
+  return compileBarListImpl(spec, options);
+}