@opendata-ai/openchart-engine 7.0.4 → 7.1.1

package/dist/index.js

@@ -1259,8 +1259,9 @@ function computeEndpointLabels(spec, marks, theme, chartArea, strategy) {
     };
     if (showMarker) {
       entry.marker = {
-        x: p.dataX,
+        x: p.dataX + markerRadius,
         y: p.dataY,
+        dataX: p.dataX,
         fill: markerFill,
         stroke: config?.markerStyle?.stroke ?? p.color,
         strokeWidth: markerStrokeWidth,
@@ -2211,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);
@@ -2257,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"
       }
     });
   }
@@ -3476,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",
@@ -3568,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;
@@ -3646,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({
@@ -3674,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);
 }
@@ -3937,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);
@@ -9656,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);
@@ -10158,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";
 
@@ -10315,6 +10322,9 @@ function chromeToInput(chrome) {
     brand: chrome.brand
   };
 }
+function bottomMargin(bottomHeight, padding, xAxisHeight) {
+  return padding + bottomHeight + xAxisHeight;
+}
 function scalePadding(basePadding, width, height) {
   const minDim = Math.min(width, height);
   if (minDim >= 500) return basePadding;
@@ -10435,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;
@@ -10572,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);
@@ -10611,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);