@opendata-ai/openchart-engine 7.9.3 → 7.11.0

package/dist/index.d.ts

@@ -658,6 +658,25 @@ declare function getChartRenderer(type: string): ChartRenderer | undefined;
  */
 declare function clearRenderers(): void;
 
+/**
+ * Legend row-wrap geometry.
+ *
+ * Shared helper for measuring how legend entries flow across horizontal rows
+ * when wrapped at a max width. Both the main legend compute and the sankey
+ * legend compile use this to size their legends — the main legend uses
+ * `fittingCount` for truncation decisions, while sankey uses `rowCount` to
+ * reserve vertical height.
+ *
+ * The geometry matches the existing layout exactly: each entry occupies
+ * SWATCH_SIZE + SWATCH_GAP + labelWidth + ENTRY_GAP pixels, a new row is
+ * started when the accumulated row width plus the next entry would exceed
+ * maxWidth (and the current row is non-empty), and rowWidths captures the
+ * in-row accumulated width at the point of wrapping.
+ */
+
+/** Gap between legend and chart area, responsive to container width. */
+declare function legendGap(width: number): number;
+
 /**
  * Bin transform: discretizes a continuous field into bins.
  *
@@ -792,4 +811,4 @@ declare function runTimeUnit(data: DataRow[], transform: TimeUnitTransform): Dat
  */
 declare function runTransforms(data: DataRow[], transforms: Transform[]): DataRow[];
 
-export { type AnnotationContext, type AnnotationMeasureTextFn, type ChartRenderer, type CompileResult, type CompiledGraphEdge, type CompiledGraphNode, ENTER_DEFAULTS, EXIT_DEFAULTS, type GraphCompilation, type NormalizedBarListSpec, type NormalizedChartSpec, type NormalizedChrome, type NormalizedGraphSpec, type NormalizedSankeySpec, type NormalizedSpec, type NormalizedTableSpec, type NormalizedTileMapSpec, type ObstacleKind, type PlacementObstacle, type SimulationConfig, UPDATE_DEFAULTS, type ValidationError, type ValidationErrorCode, type ValidationResult, buildAreaPath, buildLinePath, clampStaggerDelay, clearRenderers, compile, compileBarList, compileChart, compileGraph, compileLayer, compileSankey, compileTable, compileTileMap, dedupeKeys, evaluatePredicate, getChartRenderer, heuristicMeasure, isConditionalValueDef, normalizeSpec, registerChartRenderer, resolveAnimation, resolveConditionalValue, runBin, runCalculate, runFilter, runTimeUnit, runTransforms, serializeKeyValue, validateSpec };
+export { type AnnotationContext, type AnnotationMeasureTextFn, type ChartRenderer, type CompileResult, type CompiledGraphEdge, type CompiledGraphNode, ENTER_DEFAULTS, EXIT_DEFAULTS, type GraphCompilation, type NormalizedBarListSpec, type NormalizedChartSpec, type NormalizedChrome, type NormalizedGraphSpec, type NormalizedSankeySpec, type NormalizedSpec, type NormalizedTableSpec, type NormalizedTileMapSpec, type ObstacleKind, type PlacementObstacle, type SimulationConfig, UPDATE_DEFAULTS, type ValidationError, type ValidationErrorCode, type ValidationResult, buildAreaPath, buildLinePath, clampStaggerDelay, clearRenderers, compile, compileBarList, compileChart, compileGraph, compileLayer, compileSankey, compileTable, compileTileMap, dedupeKeys, evaluatePredicate, getChartRenderer, heuristicMeasure, isConditionalValueDef, legendGap, normalizeSpec, registerChartRenderer, resolveAnimation, resolveConditionalValue, runBin, runCalculate, runFilter, runTimeUnit, runTransforms, serializeKeyValue, validateSpec };

package/dist/index.js

@@ -10153,6 +10153,7 @@ var SWATCH_GAP = 6;
 var ENTRY_GAP = 16;
 var ENTRY_GAP_COMPACT = 10;
 var LEGEND_GAP = 8;
+var TOP_LEGEND_GAP_ABOVE = 6;
 function legendGap(width) {
   return width < COMPACT_WIDTH ? 0 : LEGEND_GAP;
 }
@@ -10449,7 +10450,7 @@ function computeLegendContent(spec, strategy, theme, availableWidth, availableHe
     rowHeight
   };
 }
-function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight) {
+function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight, axisGapBelowLegend = 0) {
   const { position, entries, labelStyle, legendWidth, height, offset } = content;
   if (entries.length === 0) {
     return {
@@ -10477,7 +10478,7 @@ function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight) {
     boundsY = chartArea.y + chartArea.height + xAxisHeight + gap + offsetDy;
   } else {
     boundsX = chartArea.x + offsetDx;
-    boundsY = chartArea.y - gap - height + offsetDy;
+    boundsY = chartArea.y - axisGapBelowLegend - gap - height + offsetDy;
   }
   const bounds = { x: boundsX, y: boundsY, width: legendWidth, height };
   const entryPositions = resolveEntryPositions(content.relativePositions, bounds);
@@ -10637,7 +10638,7 @@ var NUMERIC_SCALE_TYPES = /* @__PURE__ */ new Set([
   "threshold"
 ]);
 var TEMPORAL_SCALE_TYPES = /* @__PURE__ */ new Set(["time", "utc"]);
-function formatTickLabel(value2, resolvedScale) {
+function formatTickLabel(value2, resolvedScale, compact = false) {
   const axisConfig = resolvedScale.channel.axis || void 0;
   const formatStr = axisConfig?.format;
   const suffix = axisConfig?.labelSuffix ?? "";
@@ -10645,7 +10646,7 @@ function formatTickLabel(value2, resolvedScale) {
     const temporalFmt = buildTemporalFormatter(formatStr);
     if (temporalFmt) return temporalFmt(value2) + suffix;
     const useUtc = resolvedScale.type === "utc";
-    return formatDate(value2, void 0, void 0, useUtc) + suffix;
+    return formatDate(value2, void 0, void 0, useUtc, compact) + suffix;
   }
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value2;
@@ -10672,7 +10673,7 @@ function continuousTicks(resolvedScale, density, targetCount) {
   const count = axCfg?.tickCount ?? targetCount ?? TICK_COUNTS[density];
   return buildContinuousTicks(resolvedScale, count);
 }
-function buildContinuousTicks(resolvedScale, count) {
+function buildContinuousTicks(resolvedScale, count, compact = false) {
   const scale = resolvedScale.scale;
   if (!("ticks" in scale) || typeof scale.ticks !== "function") {
     return continuousTicks(resolvedScale, "full");
@@ -10695,7 +10696,7 @@ function buildContinuousTicks(resolvedScale, count) {
   return ticks2.map((value2) => ({
     value: value2,
     position: scale(value2),
-    label: formatTickLabel(value2, resolvedScale)
+    label: formatTickLabel(value2, resolvedScale, compact)
   }));
 }
 function scaleSupportsTickCount(resolvedScale) {
@@ -10810,12 +10811,12 @@ function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThre
 var CONTINUOUS_TICK_FLOOR = 4;
 var OVERSHOOT_TOLERANCE = 1.5;
 var MIN_QUANTITATIVE_TICKS = 2;
-function ensureMinContinuousTicks(scale, ticks2, requestedCount) {
+function ensureMinContinuousTicks(scale, ticks2, requestedCount, compact = false) {
   if (ticks2.length >= MIN_QUANTITATIVE_TICKS) return ticks2;
   if (!scale || !scaleSupportsTickCount(scale)) return ticks2;
   let best = ticks2;
   for (let n = Math.max(requestedCount, MIN_QUANTITATIVE_TICKS) + 1; n <= 10; n++) {
-    const candidate = buildContinuousTicks(scale, n);
+    const candidate = buildContinuousTicks(scale, n, compact);
     if (candidate.length >= MIN_QUANTITATIVE_TICKS) return candidate;
     if (candidate.length > best.length) best = candidate;
   }
@@ -10828,26 +10829,30 @@ function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWei
   const overshoots = flooredTicks.length > tolerance;
   const overlaps = ticksOverlap(flooredTicks, fontSize, fontWeight, measureText, orientation);
   if (!overshoots && !overlaps) return flooredTicks;
+  const useCompact = (scale.type === "time" || scale.type === "utc") && orientation === "horizontal";
+  const fitsCleanly = (candidate) => candidate.length <= tolerance && !ticksOverlap(candidate, fontSize, fontWeight, measureText, orientation);
+  if (useCompact) {
+    const compactAtInitial = buildContinuousTicks(scale, initialCount, true);
+    if (fitsCleanly(compactAtInitial)) return compactAtInitial;
+  }
   const minThreshold = orientation === "vertical" ? HEIGHT_MINIMAL_THRESHOLD : WIDTH_MINIMAL_THRESHOLD;
   const floor = axisLength >= minThreshold ? CONTINUOUS_TICK_FLOOR : 2;
   let bestWithinFloor;
+  let bestWithinFloorCount;
   for (let n = initialCount - 1; n >= 2; n--) {
     const candidate = buildContinuousTicks(scale, n);
-    const candidateOvershoots = candidate.length > tolerance;
-    const candidateOverlaps = ticksOverlap(
-      candidate,
-      fontSize,
-      fontWeight,
-      measureText,
-      orientation
-    );
-    if (!candidateOvershoots && !candidateOverlaps) {
-      return candidate;
+    if (fitsCleanly(candidate)) return candidate;
+    if (useCompact) {
+      const compact = buildContinuousTicks(scale, n, true);
+      if (fitsCleanly(compact)) return compact;
+    }
+    if (candidate.length >= floor) {
+      bestWithinFloor = candidate;
+      bestWithinFloorCount = n;
     }
-    if (candidate.length >= floor) bestWithinFloor = candidate;
   }
-  const rawFallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
-  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor);
+  const rawFallback = useCompact ? buildContinuousTicks(scale, bestWithinFloorCount ?? floor, true) : bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor, useCompact);
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
 function applyBandLabelStride(ticks2, stride) {
@@ -11811,7 +11816,7 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
     const topAxisGap = axisMargin + inlineTickOverhang;
     const effectiveTopAxisGap = hasTopLegend ? inlineTickOverhang : topAxisGap;
     let topMargin = topPad + chrome.topHeight;
-    if (hasTopLegend) topMargin += legendContent.height + gap;
+    if (hasTopLegend) topMargin += TOP_LEGEND_GAP_ABOVE + legendContent.height + gap;
     topMargin += effectiveTopAxisGap;
     const bMargin = bottomMargin(chrome.bottomHeight, padding, xAxisExtent);
     const chartHeight = Math.max(0, height - topMargin - bMargin);
@@ -12965,7 +12970,15 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       width: Math.max(0, width - margins2.left - margins2.right),
       height: Math.max(0, height - margins2.top - margins2.bottom)
     };
-    return { total: total2, chrome, chartArea: chartArea2, margins: margins2, theme, xAxisHeight: xAxisSpace };
+    return {
+      total: total2,
+      chrome,
+      chartArea: chartArea2,
+      margins: margins2,
+      theme,
+      xAxisHeight: xAxisSpace,
+      effectiveAxisGap: 0
+    };
   }
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.markType === "arc";
@@ -13201,10 +13214,11 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     if (legendPos === "right" || legendPos === "bottom-right") {
       margins.right += legendBoundsWidth + 8;
     } else if (legendPos === "top") {
-      margins.top += legendHeight + gap;
+      margins.top += TOP_LEGEND_GAP_ABOVE + legendHeight + gap;
     }
   }
-  margins.top += hasTopLegend ? inlineTickOverhang : topAxisGap;
+  const effectiveAxisGap = hasTopLegend ? inlineTickOverhang : topAxisGap;
+  margins.top += effectiveAxisGap;
   let chartArea = {
     x: margins.left,
     y: margins.top,
@@ -13232,7 +13246,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const bottomDelta = margins.bottom - newBottom;
     if (topDelta > 0 || bottomDelta > 0) {
       const gap = legendGap(width);
-      margins.top = newTop + (hasTopLegend ? legendHeight + gap : 0) + fallbackEffectiveAxisGap;
+      margins.top = newTop + (hasTopLegend ? TOP_LEGEND_GAP_ABOVE + legendHeight + gap : 0) + fallbackEffectiveAxisGap;
       margins.bottom = newBottom;
       chartArea = {
         x: margins.left,
@@ -13265,7 +13279,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         margins,
         theme,
         metrics: fallbackMetrics,
-        xAxisHeight
+        xAxisHeight,
+        effectiveAxisGap: fallbackEffectiveAxisGap
       };
     }
   }
@@ -13287,7 +13302,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     margins,
     theme,
     metrics: resolvedMetrics,
-    xAxisHeight
+    xAxisHeight,
+    effectiveAxisGap
   };
 }
 function resolveMetrics(spec, metricsTopY, metricsArea, remainingChartHeight, measureText, theme) {
@@ -16462,7 +16478,8 @@ function compileChart(spec, options) {
     chartArea,
     options.width,
     theme,
-    plan.xAxisExtent
+    plan.xAxisExtent,
+    dims.effectiveAxisGap
   );
   let scaleArea = chartArea;
   if (plan.inlineYLabelInset > 0 && plan.inlineYLabelInset < chartArea.width) {
@@ -16636,7 +16653,8 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, options, theme, str
     chartArea,
     options.width,
     theme,
-    plan.xAxisExtent
+    plan.xAxisExtent,
+    dims.effectiveAxisGap
   );
   const leftReservation = plan.leftGutter;
   const bottomReservation = plan.xAxisExtent;
@@ -16835,6 +16853,7 @@ export {
   getChartRenderer,
   heuristicMeasure,
   isConditionalValueDef,
+  legendGap,
   normalizeSpec,
   registerChartRenderer,
   resolveAnimation,