@opendata-ai/openchart-engine 7.1.3 → 7.1.4

package/dist/index.js

@@ -1778,7 +1778,7 @@ var LABEL_FONT_SIZE = 11;
 var LABEL_FONT_WEIGHT = 600;
 var LABEL_PADDING = 6;
 var MIN_WIDTH_FOR_INSIDE_LABEL = 40;
-function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor) {
+function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor, darkMode = false) {
   const targetMarks = filterByDensity(marks, density);
   const candidates = [];
   const fitsInSegment = [];
@@ -1815,16 +1815,16 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     let textAnchor;
     if (isStacked2 && isInside) {
       anchorX = mark.x + mark.width / 2;
-      fill = pickLabelColor(bgColor);
+      fill = pickLabelColor(bgColor, darkMode);
       textAnchor = "middle";
     } else if (isInside) {
       if (isNegative) {
         anchorX = mark.x + LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = "start";
       } else {
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = "end";
       }
     } else {
@@ -1898,7 +1898,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
 }
 
 // src/charts/bar/index.ts
-var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
+var barRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
   const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
   const labels = computeBarLabels(
@@ -1908,7 +1908,8 @@ var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
     spec.labels.format,
     spec.labels.prefix,
     valueField,
-    spec.labels.color
+    spec.labels.color,
+    theme.isDark
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -10145,6 +10146,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
 
 // src/layout/dimensions.ts
 import {
+  AXIS_TITLE_GAP,
   AXIS_TITLE_TRAILING_PAD as AXIS_TITLE_TRAILING_PAD2,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeChrome as computeChrome3,
@@ -10609,7 +10611,6 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         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);
@@ -10619,6 +10620,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   if (options.rightAxisReserve && options.rightAxisReserve > 0) {
     margins.right = Math.max(margins.right, hPad + options.rightAxisReserve);
   }
+  const hasTopLegend = "entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top";
   if ("entries" in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(width);
     if (legendLayout.position === "right" || legendLayout.position === "bottom-right") {
@@ -10627,7 +10629,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       margins.top += legendLayout.bounds.height + gap;
     }
   }
-  margins.top += topAxisGap;
+  margins.top += hasTopLegend ? inlineTickOverhang : topAxisGap;
   let chartArea = {
     x: margins.left,
     y: margins.top,
@@ -10648,13 +10650,14 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       bottomLegendReservation
     );
     const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
+    const fallbackEffectiveAxisGap = hasTopLegend ? inlineTickOverhang : fallbackTopAxisGap;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
     const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
     if (topDelta > 0 || bottomDelta > 0) {
       const gap = legendGap(width);
-      margins.top = newTop + ("entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0) + fallbackTopAxisGap;
+      margins.top = newTop + ("entries" in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === "top" ? legendLayout.bounds.height + gap : 0) + fallbackEffectiveAxisGap;
       margins.bottom = newBottom;
       chartArea = {
         x: margins.left,
@@ -11059,7 +11062,13 @@ function computeScales(spec, chartArea, data) {
     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 } };
+        const existingAxis = encoding.x.axis;
+        const axis = existingAxis === false || existingAxis?.format ? existingAxis : { ...typeof existingAxis === "object" ? existingAxis : {}, format: ".0%" };
+        xChannel = {
+          ...encoding.x,
+          scale: { ...encoding.x.scale, domain: [0, 1], nice: false },
+          axis
+        };
       } else if (encoding.x.stack === "center") {
         const yField = encoding.y?.field;
         const xField = encoding.x.field;
@@ -11126,7 +11135,13 @@ function computeScales(spec, chartArea, data) {
     }
     if ((isBarStacked || isAreaStacked) && encoding.color && encoding.y.type === "quantitative") {
       if (encoding.y.stack === "normalize") {
-        yChannel = { ...encoding.y, scale: { ...encoding.y.scale, domain: [0, 1], nice: false } };
+        const existingAxis = encoding.y.axis;
+        const axis = existingAxis === false || existingAxis?.format ? existingAxis : { ...typeof existingAxis === "object" ? existingAxis : {}, format: ".0%" };
+        yChannel = {
+          ...encoding.y,
+          scale: { ...encoding.y.scale, domain: [0, 1], nice: false },
+          axis
+        };
       } else if (encoding.y.stack === "center") {
         const xField = encoding.x?.field;
         const yField = encoding.y.field;