@opendata-ai/openchart-engine 7.0.3 → 7.1.0

package/dist/index.js

@@ -1243,7 +1243,6 @@ function computeEndpointLabels(spec, marks, theme, chartArea, strategy) {
     32
   );
   const columnX = chartArea.x + chartArea.width + ENDPOINT_COLUMN_GAP;
-  const markerX = chartArea.x + chartArea.width;
   const showLeader = config?.showLeader === true;
   const entries = provisional.map((p, i) => {
     const labelY = sweptTops[i];
@@ -1260,8 +1259,9 @@ function computeEndpointLabels(spec, marks, theme, chartArea, strategy) {
     };
     if (showMarker) {
       entry.marker = {
-        x: markerX,
+        x: p.dataX + markerRadius,
         y: p.dataY,
+        dataX: p.dataX,
         fill: markerFill,
         stroke: config?.markerStyle?.stroke ?? p.color,
         strokeWidth: markerStrokeWidth,
@@ -1493,8 +1493,8 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
     const categoryGroups = groupByField(spec.data, yChannel.field);
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
     if (needsStacking) {
-      const stackDisabled = xChannel.stack === null || xChannel.stack === false;
-      if (stackDisabled) {
+      const stackEnabled = xChannel.stack === true || xChannel.stack === "zero" || xChannel.stack === "normalize" || xChannel.stack === "center";
+      if (!stackEnabled) {
         marks = computeGroupedBars(
           spec.data,
           xChannel.field,
@@ -1738,8 +1738,8 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 import {
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth4,
-  findAccessibleColor,
   getRepresentativeColor,
+  pickLabelColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
 
@@ -1806,7 +1806,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     if (labelPrefix) valuePart = labelPrefix + valuePart;
     const textWidth = estimateTextWidth4(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
     const textHeight = LABEL_FONT_SIZE * 1.2;
-    const isStacked2 = mark.cornerRadius === 0;
+    const isStacked2 = mark.stackGroup !== void 0;
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
     const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
     const bgColor = getRepresentativeColor(mark.fill);
@@ -1815,16 +1815,16 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     let textAnchor;
     if (isStacked2 && isInside) {
       anchorX = mark.x + mark.width / 2;
-      fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+      fill = pickLabelColor(bgColor);
       textAnchor = "middle";
     } else if (isInside) {
       if (isNegative) {
         anchorX = mark.x + LABEL_PADDING;
-        fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+        fill = pickLabelColor(bgColor);
         textAnchor = "start";
       } else {
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+        fill = pickLabelColor(bgColor);
         textAnchor = "end";
       }
     } else {
@@ -1944,8 +1944,8 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
     const categoryGroups = groupByField(spec.data, xChannel.field);
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
     if (needsStacking) {
-      const stackDisabled = yChannel.stack === null || yChannel.stack === false;
-      if (stackDisabled) {
+      const stackEnabled = yChannel.stack === true || yChannel.stack === "zero" || yChannel.stack === "normalize" || yChannel.stack === "center";
+      if (!stackEnabled) {
         marks = computeGroupedColumns(
           spec.data,
           xChannel.field,
@@ -2212,7 +2212,7 @@ import {
 } from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
-var LABEL_OFFSET_Y = 6;
+var LABEL_OFFSET_Y = 8;
 function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor) {
   const targetMarks = filterByDensity(marks, density);
   const formatter = buildD3Formatter2(labelFormat);
@@ -2258,7 +2258,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
         fill: labelColor ?? getRepresentativeColor2(mark.fill),
         lineHeight: 1.2,
         textAnchor: "middle",
-        dominantBaseline: isNegative ? "hanging" : "auto"
+        dominantBaseline: "hanging"
       }
     });
   }
@@ -3477,6 +3477,10 @@ var STACKED_GRADIENT_STOPS = [
   { offset: 0, opacity: 0.65 },
   { offset: 1, opacity: 0.35 }
 ];
+var STACKED_GRADIENT_STOPS_LIGHT = [
+  { offset: 0, opacity: 0.65 },
+  { offset: 1, opacity: 0 }
+];
 function buildGradientFill(colorStr, stops) {
   return {
     gradient: "linear",
@@ -3569,7 +3573,7 @@ function computeSingleArea(spec, scales, _chartArea) {
   }
   return marks;
 }
-function computeStackedArea(spec, scales, chartArea) {
+function computeStackedArea(spec, scales, chartArea, darkMode) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -3647,7 +3651,8 @@ function computeStackedArea(spec, scales, chartArea) {
       fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? 0.7;
     } else {
       const colorStr = getRepresentativeColor4(color2);
-      fillValue = buildGradientFill(colorStr, STACKED_GRADIENT_STOPS);
+      const stackedStops = darkMode ? STACKED_GRADIENT_STOPS : STACKED_GRADIENT_STOPS_LIGHT;
+      fillValue = buildGradientFill(colorStr, stackedStops);
       fillOpacity = 1;
     }
     marks.push({
@@ -3675,11 +3680,11 @@ function computeStackedArea(spec, scales, chartArea) {
   }
   return marks;
 }
-function computeAreaMarks(spec, scales, chartArea) {
+function computeAreaMarks(spec, scales, chartArea, darkMode) {
   const encoding = spec.encoding;
   const yChannel = encoding.y;
   if (yChannel && isStacked(yChannel.stack)) {
-    return computeStackedArea(spec, scales, chartArea);
+    return computeStackedArea(spec, scales, chartArea, darkMode);
   }
   return computeSingleArea(spec, scales, chartArea);
 }
@@ -3938,8 +3943,8 @@ var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
   }
   return marks;
 };
-var areaRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  const areas = computeAreaMarks(spec, scales, chartArea);
+var areaRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const areas = computeAreaMarks(spec, scales, chartArea, theme.isDark);
   const encoding = spec.encoding;
   const hasColor = !!(encoding.color && "field" in encoding.color);
   const lines = hasColor ? linesFromAreas(areas) : computeLineMarks(spec, scales, chartArea, strategy);
@@ -9657,7 +9662,7 @@ var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/axes/thinning.ts
 import { estimateTextWidth as estimateTextWidth11 } from "@opendata-ai/openchart-core";
-var MIN_TICK_GAP_FACTOR = 1;
+var MIN_TICK_GAP_FACTOR = 0.5;
 var MIN_TICK_COUNT = 2;
 function measureLabel(text, fontSize, fontWeight, measureText) {
   return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth11(text, fontSize, fontWeight);
@@ -10159,6 +10164,7 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
+  TICK_LABEL_OFFSET as TICK_LABEL_OFFSET2,
   TOP_PAD_EXTRA_NARROW
 } from "@opendata-ai/openchart-core";
 
@@ -10316,6 +10322,9 @@ function chromeToInput(chrome) {
     brand: chrome.brand
   };
 }
+function bottomMargin(bottomHeight, padding, xAxisHeight) {
+  return (bottomHeight > 0 ? bottomHeight : padding) + xAxisHeight;
+}
 function scalePadding(basePadding, width, height) {
   const minDim = Math.min(width, height);
   if (minDim >= 500) return basePadding;
@@ -10436,7 +10445,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const margins = {
     top: topPad + chrome.topHeight + tentativeMetricsHeight,
     right: hPad + (isRadial ? hPad : axisMargin),
-    bottom: padding + chrome.bottomHeight + xAxisHeight,
+    bottom: bottomMargin(chrome.bottomHeight, padding, xAxisHeight),
     left: hPad + (isRadial ? hPad : axisMargin)
   };
   const labelDensity = spec.labels.density;
@@ -10573,7 +10582,41 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   }
   const yAxis = encoding.y?.axis;
   if (yAxis && (yAxis.title || yAxis.label) && !isRadial) {
-    const axisTitleOffset = getAxisTitleOffset2(width);
+    const yFieldForTitle = encoding.y?.field;
+    const yAxisFormatForTitle = yAxis?.format;
+    let estTickLabelWidth = 0;
+    if (yFieldForTitle && (encoding.y?.type === "quantitative" || encoding.y?.type === "temporal")) {
+      let maxAbsValForTitle = 0;
+      for (const row of spec.data) {
+        const v = Number(row[yFieldForTitle]);
+        if (Number.isFinite(v) && Math.abs(v) > maxAbsValForTitle) maxAbsValForTitle = Math.abs(v);
+      }
+      let sampleLabelForTitle;
+      if (yAxisFormatForTitle) {
+        try {
+          const fmt = format(yAxisFormatForTitle);
+          sampleLabelForTitle = fmt(maxAbsValForTitle);
+        } catch {
+          sampleLabelForTitle = String(maxAbsValForTitle);
+        }
+      } else {
+        if (maxAbsValForTitle >= 1e9) sampleLabelForTitle = "1.5B";
+        else if (maxAbsValForTitle >= 1e6) sampleLabelForTitle = "1.5M";
+        else if (maxAbsValForTitle >= 1e3) sampleLabelForTitle = "1.5K";
+        else if (maxAbsValForTitle >= 100) sampleLabelForTitle = "100";
+        else if (maxAbsValForTitle >= 10) sampleLabelForTitle = "10";
+        else sampleLabelForTitle = "0.0";
+      }
+      const negPrefixForTitle = spec.data.some((r) => Number(r[yFieldForTitle]) < 0) ? "-" : "";
+      estTickLabelWidth = estimateTextWidth16(
+        negPrefixForTitle + sampleLabelForTitle,
+        theme.fonts.sizes.axisTick,
+        theme.fonts.weights.normal
+      );
+    }
+    const AXIS_TITLE_GAP = 8;
+    const dynamicTitleOffset = TICK_LABEL_OFFSET2 + estTickLabelWidth + AXIS_TITLE_GAP;
+    const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset2(width));
     const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
     const rotatedLabelMargin = axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2);
     margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
@@ -10612,7 +10655,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
-    const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
+    const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
     if (topDelta > 0 || bottomDelta > 0) {
       const gap = legendGap(width);
@@ -11018,8 +11061,8 @@ function computeScales(spec, chartArea, data) {
   if (encoding.x) {
     let xData = data;
     let xChannel = encoding.x;
-    const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
-    if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative" && !xStackDisabled) {
+    const xStackEnabled = encoding.x.stack === true || encoding.x.stack === "zero" || encoding.x.stack === "normalize" || encoding.x.stack === "center";
+    if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative" && xStackEnabled) {
       if (encoding.x.stack === "normalize") {
         xChannel = { ...encoding.x, scale: { ...encoding.x.scale, domain: [0, 1], nice: false } };
       } else if (encoding.x.stack === "center") {
@@ -11074,7 +11117,7 @@ function computeScales(spec, chartArea, data) {
     const stackProp = encoding.y.stack;
     const isExplicitlyStacked = stackProp === true || stackProp === "zero" || stackProp === "normalize" || stackProp === "center";
     const isAreaStacked = spec.markType === "area" && isExplicitlyStacked;
-    const isBarStacked = isVerticalBar && stackProp !== null && stackProp !== false;
+    const isBarStacked = isVerticalBar && isExplicitlyStacked;
     const hasStackingGroup = isBarStacked && encoding.color !== void 0;
     const userRequestedStack = isExplicitlyStacked;
     const isLineOrArea2 = spec.markType === "line" || spec.markType === "area";