@opendata-ai/openchart-engine 2.9.0 → 2.10.0

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   generateAltText,
   generateDataTable,
   getBreakpoint,
+  getHeightClass,
   getLayoutStrategy,
   resolveTheme as resolveTheme2
 } from "@opendata-ai/openchart-core";
@@ -5979,6 +5980,7 @@ var DEFAULT_COLLISION_PADDING = 5;
 import {
   abbreviateNumber as abbreviateNumber3,
   buildD3Formatter as buildD3Formatter3,
+  estimateTextWidth as estimateTextWidth7,
   formatDate,
   formatNumber as formatNumber3
 } from "@opendata-ai/openchart-core";
@@ -6086,13 +6088,29 @@ function computeAxes(scales, chartArea, strategy, theme) {
       position: t.position,
       major: true
     }));
+    let tickAngle = scales.x.channel.axis?.tickAngle;
+    if (tickAngle === void 0 && scales.x.type === "band" && ticks2.length > 1) {
+      const bandwidth = scales.x.scale.bandwidth();
+      let maxLabelWidth = 0;
+      for (const t of ticks2) {
+        const w = estimateTextWidth7(
+          t.label,
+          theme.fonts.sizes.axisTick,
+          theme.fonts.weights.normal
+        );
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+      if (maxLabelWidth > bandwidth * 0.85) {
+        tickAngle = -45;
+      }
+    }
     result.x = {
       ticks: ticks2,
       gridlines: scales.x.channel.axis?.grid ? gridlines : [],
       label: scales.x.channel.axis?.label,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
-      tickAngle: scales.x.channel.axis?.tickAngle,
+      tickAngle,
       start: { x: chartArea.x, y: chartArea.y + chartArea.height },
       end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height }
     };
@@ -6119,7 +6137,7 @@ function computeAxes(scales, chartArea, strategy, theme) {
 }
 
 // src/layout/dimensions.ts
-import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth7 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
 function chromeToInput(chrome) {
   return {
     title: chrome.title,
@@ -6129,11 +6147,28 @@ function chromeToInput(chrome) {
     footer: chrome.footer
   };
 }
-function computeDimensions(spec, options, legendLayout, theme) {
+function scalePadding(basePadding, width, height) {
+  const minDim = Math.min(width, height);
+  if (minDim >= 500) return basePadding;
+  if (minDim <= 200) return Math.max(Math.round(basePadding * 0.5), 4);
+  const t = (minDim - 200) / 300;
+  return Math.max(Math.round(basePadding * (0.5 + t * 0.5)), 4);
+}
+var MIN_CHART_WIDTH = 60;
+var MIN_CHART_HEIGHT = 40;
+function computeDimensions(spec, options, legendLayout, theme, strategy) {
   const { width, height } = options;
-  const padding = theme.spacing.padding;
+  const padding = scalePadding(theme.spacing.padding, width, height);
   const axisMargin = theme.spacing.axisMargin;
-  const chrome = computeChrome2(chromeToInput(spec.chrome), theme, width, options.measureText);
+  const chromeMode = strategy?.chromeMode ?? "full";
+  const chrome = computeChrome2(
+    chromeToInput(spec.chrome),
+    theme,
+    width,
+    options.measureText,
+    chromeMode,
+    padding
+  );
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.type === "pie" || spec.type === "donut";
   const encoding = spec.encoding;
@@ -6150,7 +6185,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
     if (xField) {
       for (const row of spec.data) {
         const label = String(row[xField] ?? "");
-        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth8(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
     }
@@ -6176,7 +6211,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
         const label = String(row[colorField] ?? "");
         if (!seen.has(label)) {
           seen.add(label);
-          const w = estimateTextWidth7(label, 11, 600);
+          const w = estimateTextWidth8(label, 11, 600);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
       }
@@ -6191,7 +6226,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
       let maxLabelWidth = 0;
       for (const row of spec.data) {
         const label = String(row[yField] ?? "");
-        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth8(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       if (maxLabelWidth > 0) {
@@ -6213,7 +6248,7 @@ function computeDimensions(spec, options, legendLayout, theme) {
       else sampleLabel = "0.0";
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? "-" : "";
       const labelEst = negPrefix + sampleLabel;
-      const labelWidth = estimateTextWidth7(
+      const labelWidth = estimateTextWidth8(
         labelEst,
         theme.fonts.sizes.axisTick,
         theme.fonts.weights.normal
@@ -6234,12 +6269,38 @@ function computeDimensions(spec, options, legendLayout, theme) {
       margins.bottom += legendLayout.bounds.height + 4;
     }
   }
-  const chartArea = {
+  let chartArea = {
     x: margins.left,
     y: margins.top,
     width: Math.max(0, width - margins.left - margins.right),
     height: Math.max(0, height - margins.top - margins.bottom)
   };
+  if ((chartArea.width < MIN_CHART_WIDTH || chartArea.height < MIN_CHART_HEIGHT) && chromeMode !== "hidden") {
+    const fallbackMode = chromeMode === "full" ? "compact" : "hidden";
+    const fallbackChrome = computeChrome2(
+      chromeToInput(spec.chrome),
+      theme,
+      width,
+      options.measureText,
+      fallbackMode,
+      padding
+    );
+    const newTop = padding + fallbackChrome.topHeight + axisMargin;
+    const topDelta = margins.top - newTop;
+    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);
+      margins.bottom = newBottom;
+      chartArea = {
+        x: margins.left,
+        y: margins.top,
+        width: Math.max(0, width - margins.left - margins.right),
+        height: Math.max(0, height - margins.top - margins.bottom)
+      };
+      return { total, chrome: fallbackChrome, chartArea, margins, theme };
+    }
+  }
   return { total, chrome, chartArea, margins, theme };
 }
 
@@ -6482,12 +6543,14 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
+import { estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
 var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
+var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
+var TOP_LEGEND_MAX_ROWS = 2;
 function swatchShapeForType(chartType) {
   switch (chartType) {
     case "line":
@@ -6513,8 +6576,41 @@ function extractColorEntries(spec, theme) {
     active: true
   }));
 }
+function entriesThatFit(entries, maxWidth, maxRows, labelStyle) {
+  let row = 1;
+  let rowWidth = 0;
+  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) {
+      row++;
+      rowWidth = entryWidth;
+      if (row > maxRows) return i;
+    } else {
+      rowWidth += entryWidth;
+    }
+  }
+  return entries.length;
+}
+function truncateEntries(entries, maxCount) {
+  if (maxCount >= entries.length || maxCount <= 0) return entries;
+  const truncated = entries.slice(0, maxCount);
+  const remaining = entries.length - maxCount;
+  truncated.push({
+    label: `+${remaining} more`,
+    color: "#999999",
+    shape: "square",
+    active: false,
+    overflow: true
+  });
+  return truncated;
+}
 function computeLegend(spec, strategy, theme, chartArea) {
-  if (spec.legend?.show === false) {
+  if (spec.legend?.show === false || strategy.legendMaxHeight === 0) {
     return {
       position: "top",
       entries: [],
@@ -6531,7 +6627,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: ENTRY_GAP2
     };
   }
-  const entries = extractColorEntries(spec, theme);
+  let entries = extractColorEntries(spec, theme);
   const labelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
@@ -6553,13 +6649,22 @@ function computeLegend(spec, strategy, theme, chartArea) {
   }
   if (resolvedPosition === "right" || resolvedPosition === "bottom-right") {
     const maxLabelWidth = Math.max(
-      ...entries.map((e) => estimateTextWidth8(e.label, labelStyle.fontSize, labelStyle.fontWeight))
+      ...entries.map((e) => estimateTextWidth9(e.label, labelStyle.fontSize, labelStyle.fontWeight))
     );
     const legendWidth = Math.min(
       LEGEND_RIGHT_WIDTH,
       SWATCH_SIZE2 + SWATCH_GAP2 + maxLabelWidth + LEGEND_PADDING * 2
     );
     const entryHeight = Math.max(SWATCH_SIZE2, labelStyle.fontSize * labelStyle.lineHeight);
+    const maxHeightRatio = strategy.legendMaxHeight > 0 ? strategy.legendMaxHeight : RIGHT_LEGEND_MAX_HEIGHT_RATIO;
+    const maxLegendHeight = chartArea.height * maxHeightRatio;
+    const maxEntries = Math.max(
+      1,
+      Math.floor((maxLegendHeight - LEGEND_PADDING * 2) / (entryHeight + 4))
+    );
+    if (entries.length > maxEntries) {
+      entries = truncateEntries(entries, maxEntries);
+    }
     const legendHeight2 = entries.length * entryHeight + (entries.length - 1) * 4 + LEGEND_PADDING * 2;
     const clampedHeight = Math.min(legendHeight2, chartArea.height);
     const legendY = resolvedPosition === "bottom-right" ? chartArea.y + chartArea.height - clampedHeight : chartArea.y;
@@ -6580,11 +6685,29 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: 4
     };
   }
+  const availableWidth = chartArea.width - LEGEND_PADDING * 2;
+  const maxFit = entriesThatFit(entries, availableWidth, TOP_LEGEND_MAX_ROWS, labelStyle);
+  if (maxFit < entries.length) {
+    entries = truncateEntries(entries, maxFit);
+  }
   const totalWidth = entries.reduce((sum, entry) => {
-    const labelWidth = estimateTextWidth8(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const labelWidth = estimateTextWidth9(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
     return sum + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
   }, 0);
-  const legendHeight = SWATCH_SIZE2 + LEGEND_PADDING * 2;
+  let rowCount = 1;
+  let rowWidth = 0;
+  for (const entry of entries) {
+    const labelWidth = estimateTextWidth9(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const entryWidth = SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
+    if (rowWidth + entryWidth > availableWidth && rowWidth > 0) {
+      rowCount++;
+      rowWidth = entryWidth;
+    } else {
+      rowWidth += entryWidth;
+    }
+  }
+  const rowHeight = SWATCH_SIZE2 + 4;
+  const legendHeight = rowCount * rowHeight + LEGEND_PADDING * 2;
   const offsetDx = spec.legend?.offset?.dx ?? 0;
   const offsetDy = spec.legend?.offset?.dy ?? 0;
   return {
@@ -6604,7 +6727,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
 }
 
 // src/tables/compile-table.ts
-import { computeChrome as computeChrome3, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome3, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
 
 // src/tables/bar-column.ts
 var NEGATIVE_BAR_COLOR = "#c44e52";
@@ -7011,13 +7134,13 @@ function estimateColumnWidth(col, data, fontSize) {
   if (col.image) return (col.image.width ?? 24) + PADDING;
   if (col.flag) return 60;
   const label = col.label ?? col.key;
-  const headerWidth = estimateTextWidth9(label, fontSize, 600) + PADDING;
+  const headerWidth = estimateTextWidth10(label, fontSize, 600) + PADDING;
   const sampleSize = Math.min(100, data.length);
   let maxDataWidth = 0;
   for (let i = 0; i < sampleSize; i++) {
     const val = data[i][col.key];
     const text = val == null ? "" : String(val);
-    const width = estimateTextWidth9(text, fontSize, 400) + PADDING;
+    const width = estimateTextWidth10(text, fontSize, 400) + PADDING;
     if (width > maxDataWidth) maxDataWidth = width;
   }
   return Math.max(MIN_WIDTH, headerWidth, maxDataWidth);
@@ -7427,7 +7550,8 @@ function compileChart(spec, options) {
   }
   let chartSpec = normalized;
   const breakpoint = getBreakpoint(options.width);
-  const strategy = getLayoutStrategy(breakpoint);
+  const heightClass = getHeightClass(options.height);
+  const strategy = getLayoutStrategy(breakpoint, heightClass);
   const rawSpec = spec;
   const overrides = rawSpec.overrides;
   if (overrides?.[breakpoint]) {
@@ -7478,7 +7602,7 @@ function compileChart(spec, options) {
     height: options.height
   };
   const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea);
-  const dims = computeDimensions(chartSpec, options, legendLayout, theme);
+  const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy);
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if (legendLayout.entries.length > 0) {