@opendata-ai/openchart-engine 6.23.1 → 6.24.1

package/dist/index.js

@@ -467,7 +467,9 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
     return null;
   }
   let strokeDasharray;
-  if (annotation.style === "dashed" || annotation.style === void 0) {
+  if (annotation.strokeDash && annotation.strokeDash.length > 0) {
+    strokeDasharray = annotation.strokeDash.join(" ");
+  } else if (annotation.style === "dashed" || annotation.style === void 0) {
     strokeDasharray = DEFAULT_REFLINE_DASH;
   } else if (annotation.style === "dotted") {
     strokeDasharray = "2 2";
@@ -549,11 +551,12 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
 
 // src/annotations/compute.ts
 function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, obstacles = [], svgDimensions) {
-  if (strategy.annotationPosition === "tooltip-only") {
-    return [];
-  }
+  const isCompact = strategy.annotationPosition === "tooltip-only";
   const annotations = [];
   for (const annotation of spec.annotations) {
+    if (isCompact && annotation.responsive !== false) {
+      continue;
+    }
     let resolved = null;
     switch (annotation.type) {
       case "text":
@@ -979,6 +982,7 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 import {
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth2,
+  findAccessibleColor,
   getRepresentativeColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
@@ -1047,21 +1051,35 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     const textHeight = LABEL_FONT_SIZE * 1.2;
     const isStacked = mark.cornerRadius === 0;
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
+    const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
+    const bgColor = getRepresentativeColor(mark.fill);
     let anchorX;
     let fill;
     let textAnchor;
     if (isStacked && isInside) {
       anchorX = mark.x + mark.width / 2;
-      fill = "#ffffff";
+      fill = findAccessibleColor("#ffffff", bgColor, 4.5);
       textAnchor = "middle";
     } else if (isInside) {
-      anchorX = mark.x + mark.width - LABEL_PADDING;
-      fill = "#ffffff";
-      textAnchor = "end";
+      if (isNegative) {
+        anchorX = mark.x + LABEL_PADDING;
+        fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+        textAnchor = "start";
+      } else {
+        anchorX = mark.x + mark.width - LABEL_PADDING;
+        fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+        textAnchor = "end";
+      }
     } else {
-      anchorX = mark.x + mark.width + LABEL_PADDING;
-      fill = getRepresentativeColor(mark.fill);
-      textAnchor = "start";
+      if (isNegative) {
+        anchorX = mark.x - LABEL_PADDING;
+        fill = getRepresentativeColor(mark.fill);
+        textAnchor = "end";
+      } else {
+        anchorX = mark.x + mark.width + LABEL_PADDING;
+        fill = getRepresentativeColor(mark.fill);
+        textAnchor = "start";
+      }
     }
     const anchorY = mark.y + mark.height / 2;
     const fits = !(isStacked && textWidth > mark.width - 2 * LABEL_PADDING);
@@ -1489,7 +1507,10 @@ function computeDotMarks(spec, scales, _chartArea, _strategy) {
     return [];
   }
   const bandwidth = yScale.bandwidth();
-  const baseline = xScale(0);
+  const [rangeStart, rangeEnd] = xScale.range();
+  const rangeMin = Math.min(rangeStart, rangeEnd);
+  const rangeMax = Math.max(rangeStart, rangeEnd);
+  const baseline = Math.max(rangeMin, Math.min(rangeMax, xScale(0)));
   const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
   const isSequentialColor = colorEnc?.type === "quantitative";
   const colorField = isSequentialColor ? void 0 : colorEnc?.field;
@@ -2659,14 +2680,16 @@ function computeSingleArea(spec, scales, _chartArea) {
     const color2 = getColor(scales, seriesKey);
     const sortedRows = xChannel.type === "nominal" || xChannel.type === "ordinal" ? rows : sortByField(rows, xChannel.field);
     const validPoints = [];
+    const y2Channel = encoding.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
       });
     }
@@ -2680,6 +2703,7 @@ function computeSingleArea(spec, scales, _chartArea) {
     const bottomPoints = validPoints.map((p) => ({ x: p.x, y: p.yBottom }));
     const ariaLabel = seriesKey === "__default__" ? `Area with ${validPoints.length} data points` : `${seriesKey}: area with ${validPoints.length} data points`;
     const aria = { label: ariaLabel };
+    const fillOpacity = y2Channel ? 0.25 : DEFAULT_FILL_OPACITY;
     marks.push({
       type: "area",
       topPoints,
@@ -2687,7 +2711,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       path: pathStr,
       topPath: topPathStr,
       fill: color2,
-      fillOpacity: DEFAULT_FILL_OPACITY,
+      fillOpacity,
       stroke: getRepresentativeColor4(color2),
       strokeWidth: 2,
       seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
@@ -6604,8 +6628,10 @@ function normalizeAnnotations(annotations) {
           fill: ann.fill ?? "#000000"
         };
       case "refline":
+      case "rule":
         return {
           ...ann,
+          type: "refline",
           style: ann.style ?? "dashed",
           strokeWidth: ann.strokeWidth ?? 1,
           stroke: ann.stroke ?? "#666666",
@@ -8117,7 +8143,8 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
       position: t.position,
       major: true
     }));
-    const shouldThin = scales.x.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
+    const hasExplicitValues = !!axisConfig?.values;
+    const shouldThin = scales.x.type !== "band" && !hasExplicitValues;
     let ticks2;
     if (!shouldThin) {
       ticks2 = allTicks;
@@ -8179,9 +8206,9 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     } else {
       allTicks = continuousTicks(scales.y, yDensity, yTargetCount);
     }
-    const shouldThin = scales.y.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
+    const shouldThinY = scales.y.type !== "band" && !axisConfig?.values;
     let ticks2;
-    if (!shouldThin) {
+    if (!shouldThinY) {
       ticks2 = allTicks;
     } else if (isContinuousY) {
       ticks2 = fitContinuousTicks(
@@ -8227,7 +8254,51 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
 }
 
 // src/layout/dimensions.ts
-import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+
+// src/legend/wrap.ts
+import { COMPACT_WIDTH, estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
+var SWATCH_SIZE2 = 12;
+var SWATCH_GAP2 = 6;
+var ENTRY_GAP2 = 16;
+var ENTRY_GAP_COMPACT = 10;
+var LEGEND_GAP = 4;
+function legendGap(width) {
+  return width < COMPACT_WIDTH ? 0 : LEGEND_GAP;
+}
+function measureLegendWrap(entries, maxWidth, labelStyle, maxRows, entryGap = ENTRY_GAP2) {
+  if (entries.length === 0) {
+    return { rowCount: 0, fittingCount: 0, rowWidths: [] };
+  }
+  let rowCount = 1;
+  let rowWidth = 0;
+  const rowWidths = [];
+  let fittingCount = entries.length;
+  let fittingCountLocked = false;
+  for (let i = 0; i < entries.length; i++) {
+    const labelWidth = estimateTextWidth8(
+      entries[i].label,
+      labelStyle.fontSize,
+      labelStyle.fontWeight
+    );
+    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + entryGap;
+    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
+      rowWidths.push(rowWidth);
+      rowCount++;
+      rowWidth = entryWidth;
+      if (!fittingCountLocked && maxRows != null && rowCount > maxRows) {
+        fittingCount = i;
+        fittingCountLocked = true;
+      }
+    } else {
+      rowWidth += entryWidth;
+    }
+  }
+  rowWidths.push(rowWidth);
+  return { rowCount, fittingCount, rowWidths };
+}
+
+// src/layout/dimensions.ts
 function chromeToInput(chrome) {
   return {
     title: chrome.title,
@@ -8276,7 +8347,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     if (xField) {
       for (const row of spec.data) {
         const label = String(row[xField] ?? "");
-        const w = estimateTextWidth8(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth9(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
     }
@@ -8294,7 +8365,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     left: padding + (isRadial ? padding : axisMargin)
   };
   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) {
     const colorEnc = encoding.color;
     const colorField = colorEnc && "field" in colorEnc ? colorEnc.field : void 0;
     if (colorField) {
@@ -8304,7 +8376,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         const label = String(row[colorField] ?? "");
         if (!seen.has(label)) {
           seen.add(label);
-          const w = estimateTextWidth8(label, 11, 600);
+          const w = estimateTextWidth9(label, 11, 600);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
       }
@@ -8324,7 +8396,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       const maxXStr = String(maxX);
       for (const ann of spec.annotations) {
         if (ann.type === "text" && String(ann.x) === maxXStr) {
-          const textWidth = estimateTextWidth8(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
+          const textWidth = estimateTextWidth9(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
           const dx = ann.offset?.dx ?? 0;
           const anchor = ann.anchor ?? "auto";
           const baseRightExtent = anchor === "left" ? textWidth : (
@@ -8348,11 +8420,15 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       let maxLabelWidth = 0;
       for (const row of spec.data) {
         const label = String(row[yField] ?? "");
-        const w = estimateTextWidth8(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth9(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
-        margins.left = Math.max(margins.left, padding + maxLabelWidth + 12);
+        const labelGap = width < 500 ? 8 : 12;
+        const maxLeftFraction = width < 400 ? 0.45 : width < 600 ? 0.55 : 1;
+        const maxLeftReserved = Math.floor(width * maxLeftFraction);
+        const reserved = Math.min(padding + maxLabelWidth + labelGap, maxLeftReserved);
+        margins.left = Math.max(margins.left, reserved);
       }
     } else if (encoding.y.type === "quantitative" || encoding.y.type === "temporal") {
       const yField = encoding.y.field;
@@ -8380,7 +8456,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       }
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? "-" : "";
       const labelEst = negPrefix + sampleLabel;
-      const labelWidth = estimateTextWidth8(
+      const labelWidth = estimateTextWidth9(
         labelEst,
         theme.fonts.sizes.axisTick,
         theme.fonts.weights.normal
@@ -8394,12 +8470,13 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     margins.left = Math.max(margins.left, padding + rotatedLabelMargin);
   }
   if (legendLayout.entries.length > 0) {
+    const gap = legendGap(width);
     if (legendLayout.position === "right" || legendLayout.position === "bottom-right") {
       margins.right += legendLayout.bounds.width + 8;
     } else if (legendLayout.position === "top") {
-      margins.top += legendLayout.bounds.height + 4;
+      margins.top += legendLayout.bounds.height + gap;
     } else if (legendLayout.position === "bottom") {
-      margins.bottom += legendLayout.bounds.height + 4;
+      margins.bottom += legendLayout.bounds.height + gap;
     }
   }
   let chartArea = {
@@ -8425,7 +8502,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
     const bottomDelta = margins.bottom - newBottom;
     if (topDelta > 0 || bottomDelta > 0) {
-      margins.top = newTop + (legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + 4 : 0);
+      const gap = legendGap(width);
+      margins.top = newTop + (legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0);
       margins.bottom = newBottom;
       chartArea = {
         x: margins.left,
@@ -8894,46 +8972,7 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
-
-// src/legend/wrap.ts
-import { estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
-var SWATCH_SIZE2 = 12;
-var SWATCH_GAP2 = 6;
-var ENTRY_GAP2 = 16;
-function measureLegendWrap(entries, maxWidth, labelStyle, maxRows) {
-  if (entries.length === 0) {
-    return { rowCount: 0, fittingCount: 0, rowWidths: [] };
-  }
-  let rowCount = 1;
-  let rowWidth = 0;
-  const rowWidths = [];
-  let fittingCount = entries.length;
-  let fittingCountLocked = false;
-  for (let i = 0; i < entries.length; i++) {
-    const labelWidth = estimateTextWidth9(
-      entries[i].label,
-      labelStyle.fontSize,
-      labelStyle.fontWeight
-    );
-    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
-    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
-      rowWidths.push(rowWidth);
-      rowCount++;
-      rowWidth = entryWidth;
-      if (!fittingCountLocked && maxRows != null && rowCount > maxRows) {
-        fittingCount = i;
-        fittingCountLocked = true;
-      }
-    } else {
-      rowWidth += entryWidth;
-    }
-  }
-  rowWidths.push(rowWidth);
-  return { rowCount, fittingCount, rowWidths };
-}
-
-// src/legend/compute.ts
+import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2, COMPACT_WIDTH as COMPACT_WIDTH2, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
 var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
@@ -8955,11 +8994,16 @@ function extractColorEntries(spec, theme) {
   if (!colorEnc) return [];
   if ("condition" in colorEnc) return [];
   if (colorEnc.type === "quantitative") return [];
-  const uniqueValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
+  const dataValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
   const explicitDomain = colorEnc.scale?.domain;
   const explicitRange = colorEnc.scale?.range;
   const palette = explicitRange ?? theme.colors.categorical;
   const shape = swatchShapeForType(spec.markType);
+  const uniqueValues = explicitDomain ? [
+    ...explicitDomain.filter((v) => dataValues.includes(v)),
+    ...dataValues.filter((v) => !explicitDomain.includes(v))
+  ] : dataValues;
+  const excludeSet = new Set(spec.legend?.exclude ?? []);
   return uniqueValues.map((value2, i) => {
     let colorIndex = i;
     if (explicitDomain && explicitRange) {
@@ -8972,7 +9016,7 @@ function extractColorEntries(spec, theme) {
       shape,
       active: true
     };
-  });
+  }).filter((entry) => !excludeSet.has(entry.label));
 }
 function truncateEntries(entries, maxCount) {
   if (maxCount >= entries.length || maxCount <= 0) return entries;
@@ -9010,7 +9054,10 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   const hasLabels = spec.labels.density !== "none";
   const labelsWillRender = strategy.labelMode !== "none";
   const hasColorEncoding = spec.encoding.color != null;
-  const legendNotForced = spec.legend?.show !== true;
+  const userConfiguredLegend = spec.legend != null && Object.keys(spec.legend).some(
+    (k) => k !== "show" || spec.legend[k] !== false
+  );
+  const legendNotForced = !userConfiguredLegend;
   if (isLineOrArea && hasLabels && labelsWillRender && hasColorEncoding && legendNotForced) {
     const isArea = spec.markType === "area";
     const quantChannel = spec.encoding.y?.type === "quantitative" ? spec.encoding.y : spec.encoding.x;
@@ -9079,7 +9126,10 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     };
   }
   const reserveBrand = watermark && resolvedPosition === "bottom";
-  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - (reserveBrand ? BRAND_RESERVE_WIDTH2 : 0);
+  const isCompact = chartArea.width < COMPACT_WIDTH2;
+  const effectivePadding = isCompact ? 2 : LEGEND_PADDING;
+  const effectiveEntryGap = isCompact ? ENTRY_GAP_COMPACT : ENTRY_GAP2;
+  const availableWidth = chartArea.width - effectivePadding * 2 - (reserveBrand ? BRAND_RESERVE_WIDTH2 : 0);
   if (spec.legend?.symbolLimit != null) {
     const limit = Math.max(1, spec.legend.symbolLimit);
     if (limit < entries.length) {
@@ -9087,17 +9137,29 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     }
   }
   const maxRows = spec.legend?.maxRows != null ? Math.max(1, spec.legend.maxRows) : spec.legend?.columns != null ? Math.ceil(entries.length / spec.legend.columns) : TOP_LEGEND_MAX_ROWS;
-  const { fittingCount } = measureLegendWrap(entries, availableWidth, labelStyle, maxRows);
+  const { fittingCount } = measureLegendWrap(
+    entries,
+    availableWidth,
+    labelStyle,
+    maxRows,
+    effectiveEntryGap
+  );
   if (fittingCount < entries.length) {
     entries = truncateEntries(entries, fittingCount);
   }
   const totalWidth = entries.reduce((sum2, entry) => {
     const labelWidth = estimateTextWidth10(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
-    return sum2 + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
+    return sum2 + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + effectiveEntryGap;
   }, 0);
-  const { rowCount } = measureLegendWrap(entries, availableWidth, labelStyle);
+  const { rowCount } = measureLegendWrap(
+    entries,
+    availableWidth,
+    labelStyle,
+    void 0,
+    effectiveEntryGap
+  );
   const rowHeight = SWATCH_SIZE2 + 4;
-  const legendHeight = rowCount * rowHeight + LEGEND_PADDING * 2;
+  const legendHeight = rowCount * rowHeight + effectivePadding * 2;
   const offsetDx = spec.legend?.offset?.dx ?? 0;
   const offsetDy = spec.legend?.offset?.dy ?? 0;
   return {
@@ -9112,7 +9174,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     labelStyle,
     swatchSize: SWATCH_SIZE2,
     swatchGap: SWATCH_GAP2,
-    entryGap: ENTRY_GAP2
+    entryGap: effectiveEntryGap
   };
 }
 
@@ -9766,12 +9828,12 @@ function compileSankey(spec, options) {
     theme,
     fullArea
   );
-  const legendGap = legend.entries.length > 0 ? 4 : 0;
+  const legendGap2 = legend.entries.length > 0 ? 4 : 0;
   const area = {
     x: fullArea.x,
-    y: fullArea.y + legend.bounds.height + legendGap,
+    y: fullArea.y + legend.bounds.height + legendGap2,
     width: fullArea.width,
-    height: fullArea.height - legend.bounds.height - legendGap
+    height: fullArea.height - legend.bounds.height - legendGap2
   };
   if (area.height <= 0) {
     return emptyLayout(area, chrome, theme, options, watermark);
@@ -9929,7 +9991,8 @@ function compileSankey(spec, options) {
       height: options.height
     },
     animation: resolvedAnimation,
-    watermark
+    watermark,
+    measureText: options.measureText
   };
 }
 function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetField, theme, area) {
@@ -11320,13 +11383,14 @@ function compileChart(spec, options) {
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if (legendLayout.entries.length > 0) {
+    const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case "top":
-        legendArea.y -= legendLayout.bounds.height + 4;
-        legendArea.height += legendLayout.bounds.height + 4;
+        legendArea.y -= legendLayout.bounds.height + gap;
+        legendArea.height += legendLayout.bounds.height + gap;
         break;
       case "bottom":
-        legendArea.height += legendLayout.bounds.height + 4;
+        legendArea.height += legendLayout.bounds.height + gap;
         break;
       case "right":
       case "bottom-right":