@opendata-ai/openchart-engine 6.23.1 → 6.24.0

package/dist/index.js

@@ -1489,7 +1489,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;
@@ -8117,7 +8120,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 +8183,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 +8231,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 +8324,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;
       }
     }
@@ -8304,7 +8352,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 +8372,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 +8396,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 +8432,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 +8446,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 +8478,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 +8948,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 +8970,15 @@ 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;
   return uniqueValues.map((value2, i) => {
     let colorIndex = i;
     if (explicitDomain && explicitRange) {
@@ -9079,7 +9098,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 +9109,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 +9146,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     labelStyle,
     swatchSize: SWATCH_SIZE2,
     swatchGap: SWATCH_GAP2,
-    entryGap: ENTRY_GAP2
+    entryGap: effectiveEntryGap
   };
 }
 
@@ -9766,12 +9800,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 +9963,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 +11355,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":