@opendata-ai/openchart-engine 6.24.0 → 6.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.24.0",
+  "version": "6.24.1",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.24.0",
+    "@opendata-ai/openchart-core": "6.24.1",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/legend.test.ts

@@ -354,6 +354,17 @@ describe('computeLegend', () => {
       expect(legend.entries).toHaveLength(3);
     });
 
+    it('preserves legend when any legend config is present (e.g. position)', () => {
+      const spec: NormalizedChartSpec = {
+        ...lineWithLabels,
+        legend: { position: 'top' },
+        hiddenSeries: [],
+        seriesStyles: {},
+      };
+      const legend = computeLegend(spec, fullStrategy, theme, chartArea);
+      expect(legend.entries).toHaveLength(3);
+    });
+
     it('preserves legend when labels density is none', () => {
       const spec: NormalizedChartSpec = {
         ...lineWithLabels,

package/src/annotations/compute.ts

@@ -45,14 +45,15 @@ export function computeAnnotations(
   obstacles: Rect[] = [],
   svgDimensions?: { width: number; height: number },
 ): ResolvedAnnotation[] {
-  // At compact breakpoints, skip all annotations
-  if (strategy.annotationPosition === 'tooltip-only') {
-    return [];
-  }
+  const isCompact = strategy.annotationPosition === 'tooltip-only';
 
   const annotations: ResolvedAnnotation[] = [];
 
   for (const annotation of spec.annotations) {
+    // At compact breakpoints, skip annotations unless they opt out with responsive: false
+    if (isCompact && annotation.responsive !== false) {
+      continue;
+    }
     let resolved: ResolvedAnnotation | null = null;
 
     switch (annotation.type) {

package/src/annotations/resolve-refline.ts

@@ -43,9 +43,11 @@ export function resolveRefLineAnnotation(
     return null;
   }
 
-  // Determine dash pattern from style
+  // Determine dash pattern: strokeDash array wins, then style string
   let strokeDasharray: string | undefined;
-  if (annotation.style === 'dashed' || annotation.style === undefined) {
+  if (annotation.strokeDash && annotation.strokeDash.length > 0) {
+    strokeDasharray = annotation.strokeDash.join(' ');
+  } else if (annotation.style === 'dashed' || annotation.style === undefined) {
     strokeDasharray = DEFAULT_REFLINE_DASH;
   } else if (annotation.style === 'dotted') {
     strokeDasharray = '2 2';

package/src/charts/bar/labels.ts

@@ -20,6 +20,7 @@ import type {
 import {
   buildD3Formatter,
   estimateTextWidth,
+  findAccessibleColor,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
@@ -137,6 +138,8 @@ export function computeBarLabels(
 
     // Determine if label goes inside or outside the bar
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
+    const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
+    const bgColor = getRepresentativeColor(mark.fill);
 
     let anchorX: number;
     let fill: string;
@@ -145,18 +148,32 @@ export function computeBarLabels(
     if (isStacked && isInside) {
       // Stacked: centered within segment
       anchorX = mark.x + mark.width / 2;
-      fill = '#ffffff';
+      fill = findAccessibleColor('#ffffff', bgColor, 4.5);
       textAnchor = 'middle';
     } else if (isInside) {
-      // Simple: right-aligned within bar
-      anchorX = mark.x + mark.width - LABEL_PADDING;
-      fill = '#ffffff';
-      textAnchor = 'end';
+      if (isNegative) {
+        // Negative bar: left-aligned within bar (bar extends leftward)
+        anchorX = mark.x + LABEL_PADDING;
+        fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+        textAnchor = 'start';
+      } else {
+        // Positive bar: right-aligned within bar
+        anchorX = mark.x + mark.width - LABEL_PADDING;
+        fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+        textAnchor = 'end';
+      }
     } else {
-      // Outside: just past the bar's right edge
-      anchorX = mark.x + mark.width + LABEL_PADDING;
-      fill = getRepresentativeColor(mark.fill);
-      textAnchor = 'start';
+      if (isNegative) {
+        // Outside negative bar: just past the bar's left edge
+        anchorX = mark.x - LABEL_PADDING;
+        fill = 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);
+        textAnchor = 'start';
+      }
     }
 
     // anchorY = bar vertical center. With dominant-baseline: central,

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

@@ -477,6 +477,34 @@ describe('computeAreaMarks', () => {
     expect(marks[0].fillOpacity).toBeLessThanOrEqual(1);
   });
 
+  it('area with y2 encoding uses y2 field as bottom boundary instead of baseline', () => {
+    const spec: NormalizedChartSpec = {
+      ...makeSingleSeriesSpec(),
+      data: [
+        { date: '2020-01-01', value: 80, value_low: 60 },
+        { date: '2021-01-01', value: 90, value_low: 70 },
+        { date: '2022-01-01', value: 85, value_low: 65 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+        y2: { field: 'value_low', type: 'quantitative' },
+      },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea);
+
+    expect(marks).toHaveLength(1);
+    // Bottom points should NOT all be at the same baseline y coordinate
+    const bottomYValues = marks[0].bottomPoints.map((p) => p.y);
+    const allSame = bottomYValues.every((y) => y === bottomYValues[0]);
+    expect(allSame).toBe(false);
+    // Each bottom point should be between the top point and the chart bottom
+    for (let i = 0; i < marks[0].topPoints.length; i++) {
+      expect(marks[0].bottomPoints[i].y).toBeGreaterThan(marks[0].topPoints[i].y); // SVG coords: larger y = lower on screen
+    }
+  });
+
   it('stacked areas: produces multiple AreaMarks for multi-series', () => {
     const spec = makeMultiSeriesSpec();
     const scales = computeScales(spec, chartArea, spec.data);

package/src/charts/line/area.ts

@@ -84,16 +84,24 @@ function computeSingleArea(
     // Compute points, filtering out null values
     const validPoints: { x: number; yTop: number; yBottom: number; row: DataRow }[] = [];
 
+    // Check for y2 channel (band between y and y2)
+    const y2Channel = (encoding as Encoding & { y2?: { field: string; type: string } }).y2;
+
     for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
 
       if (xVal === null || yVal === null) continue;
 
+      const yBottomVal =
+        y2Channel && row[y2Channel.field] != null
+          ? scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field])
+          : null;
+
       validPoints.push({
         x: xVal,
         yTop: yVal,
-        yBottom: baselineY,
+        yBottom: yBottomVal ?? baselineY,
         row,
       });
     }
@@ -127,6 +135,8 @@ function computeSingleArea(
 
     const aria: MarkAria = { label: ariaLabel };
 
+    const fillOpacity = y2Channel ? 0.25 : DEFAULT_FILL_OPACITY;
+
     marks.push({
       type: 'area',
       topPoints,
@@ -134,7 +144,7 @@ function computeSingleArea(
       path: pathStr,
       topPath: topPathStr,
       fill: color,
-      fillOpacity: DEFAULT_FILL_OPACITY,
+      fillOpacity: fillOpacity,
       stroke: getRepresentativeColor(color),
       strokeWidth: 2,
       seriesKey: seriesKey === '__default__' ? undefined : seriesKey,

package/src/compiler/normalize.ts

@@ -174,8 +174,10 @@ function normalizeAnnotations(annotations: Annotation[] | undefined): Annotation
           fill: ann.fill ?? '#000000',
         };
       case 'refline':
+      case 'rule':
         return {
           ...ann,
+          type: 'refline' as const,
           style: ann.style ?? 'dashed',
           strokeWidth: ann.strokeWidth ?? 1,
           stroke: ann.stroke ?? '#666666',

package/src/layout/dimensions.ts

@@ -168,9 +168,14 @@ export function computeDimensions(
   };
 
   // Dynamic right margin for line/area end-of-line labels.
-  // Only reserve space when labels will actually render (density != 'none').
+  // Only reserve space when labels will actually render.
   const labelDensity = spec.labels.density;
-  if ((spec.markType === 'line' || spec.markType === 'area') && labelDensity !== 'none') {
+  const labelsHiddenByStrategy = strategy?.labelMode === 'none';
+  if (
+    (spec.markType === 'line' || spec.markType === 'area') &&
+    labelDensity !== 'none' &&
+    !labelsHiddenByStrategy
+  ) {
     // Estimate label width from longest series name (color encoding domain)
     const colorEnc = encoding.color;
     const colorField = colorEnc && 'field' in colorEnc ? colorEnc.field : undefined;

package/src/legend/compute.ts

@@ -83,21 +83,25 @@ function extractColorEntries(spec: NormalizedChartSpec, theme: ResolvedTheme): L
       ]
     : dataValues;
 
-  return uniqueValues.map((value, i) => {
-    // When explicit domain+range are provided, look up the color by domain index
-    // so legend colors match the mark colors exactly.
-    let colorIndex = i;
-    if (explicitDomain && explicitRange) {
-      const domainIdx = explicitDomain.indexOf(value);
-      if (domainIdx >= 0) colorIndex = domainIdx;
-    }
-    return {
-      label: value,
-      color: palette[colorIndex % palette.length],
-      shape,
-      active: true,
-    };
-  });
+  const excludeSet = new Set(spec.legend?.exclude ?? []);
+
+  return uniqueValues
+    .map((value, i) => {
+      // When explicit domain+range are provided, look up the color by domain index
+      // so legend colors match the mark colors exactly.
+      let colorIndex = i;
+      if (explicitDomain && explicitRange) {
+        const domainIdx = explicitDomain.indexOf(value);
+        if (domainIdx >= 0) colorIndex = domainIdx;
+      }
+      return {
+        label: value,
+        color: palette[colorIndex % palette.length],
+        shape,
+        active: true,
+      };
+    })
+    .filter((entry) => !excludeSet.has(entry.label));
 }
 
 /**
@@ -162,12 +166,22 @@ export function computeLegend(
 
   // Auto-suppress legend when endpoint labels identify series on line/area charts.
   // Guards: keep legend at compact breakpoints (labels hidden), for stacked areas
-  // (endpoint labels overlap), and when user explicitly forces legend on.
+  // (endpoint labels overlap), and when user has configured any legend property
+  // (position, columns, maxRows, etc.) — any explicit legend config signals intent
+  // to show a legend, not just show: true.
   const isLineOrArea = spec.markType === 'line' || spec.markType === 'area';
   const hasLabels = spec.labels.density !== 'none';
   const labelsWillRender = strategy.labelMode !== 'none';
   const hasColorEncoding = spec.encoding.color != null;
-  const legendNotForced = spec.legend?.show !== true;
+  // Legend is "forced" when the user set show: true OR specified any legend config
+  // other than show: false. Vega-Lite convention: legend is shown by default for
+  // multi-series charts; auto-suppression only fires when no legend config is present.
+  const userConfiguredLegend =
+    spec.legend != null &&
+    Object.keys(spec.legend).some(
+      (k) => k !== 'show' || spec.legend![k as keyof typeof spec.legend] !== false,
+    );
+  const legendNotForced = !userConfiguredLegend;
 
   if (isLineOrArea && hasLabels && labelsWillRender && hasColorEncoding && legendNotForced) {
     const isArea = spec.markType === 'area';