@opendata-ai/openchart-engine 6.24.0 → 6.24.2

package/dist/index.js

@@ -380,7 +380,8 @@ function resolveTextAnnotation(annotation, scales, chartArea, isDark) {
       stroke: annotation.stroke ?? "#999999",
       style: connectorStyle
     } : void 0,
-    background: annotation.background
+    background: annotation.background,
+    halo: annotation.halo
   };
   return {
     type: "text",
@@ -467,7 +468,9 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
     return null;
   }
   let strokeDasharray;
-  if (annotation.style === "dashed" || annotation.style === void 0) {
+  if (annotation.strokeDash && annotation.strokeDash.length > 0) {
+    strokeDasharray = annotation.strokeDash.join(" ");
+  } else if (annotation.style === "dashed" || annotation.style === void 0) {
     strokeDasharray = DEFAULT_REFLINE_DASH;
   } else if (annotation.style === "dotted") {
     strokeDasharray = "2 2";
@@ -549,11 +552,12 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
 
 // src/annotations/compute.ts
 function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, obstacles = [], svgDimensions) {
-  if (strategy.annotationPosition === "tooltip-only") {
-    return [];
-  }
+  const isCompact = strategy.annotationPosition === "tooltip-only";
   const annotations = [];
   for (const annotation of spec.annotations) {
+    if (isCompact && annotation.responsive !== false) {
+      continue;
+    }
     let resolved = null;
     switch (annotation.type) {
       case "text":
@@ -979,6 +983,7 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 import {
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth2,
+  findAccessibleColor,
   getRepresentativeColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
@@ -1047,21 +1052,35 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     const textHeight = LABEL_FONT_SIZE * 1.2;
     const isStacked = mark.cornerRadius === 0;
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
+    const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
+    const bgColor = getRepresentativeColor(mark.fill);
     let anchorX;
     let fill;
     let textAnchor;
     if (isStacked && isInside) {
       anchorX = mark.x + mark.width / 2;
-      fill = "#ffffff";
+      fill = findAccessibleColor("#ffffff", bgColor, 4.5);
       textAnchor = "middle";
     } else if (isInside) {
-      anchorX = mark.x + mark.width - LABEL_PADDING;
-      fill = "#ffffff";
-      textAnchor = "end";
+      if (isNegative) {
+        anchorX = mark.x + LABEL_PADDING;
+        fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+        textAnchor = "start";
+      } else {
+        anchorX = mark.x + mark.width - LABEL_PADDING;
+        fill = findAccessibleColor("#ffffff", bgColor, 4.5);
+        textAnchor = "end";
+      }
     } else {
-      anchorX = mark.x + mark.width + LABEL_PADDING;
-      fill = getRepresentativeColor(mark.fill);
-      textAnchor = "start";
+      if (isNegative) {
+        anchorX = mark.x - LABEL_PADDING;
+        fill = getRepresentativeColor(mark.fill);
+        textAnchor = "end";
+      } else {
+        anchorX = mark.x + mark.width + LABEL_PADDING;
+        fill = getRepresentativeColor(mark.fill);
+        textAnchor = "start";
+      }
     }
     const anchorY = mark.y + mark.height / 2;
     const fits = !(isStacked && textWidth > mark.width - 2 * LABEL_PADDING);
@@ -2662,14 +2681,16 @@ function computeSingleArea(spec, scales, _chartArea) {
     const color2 = getColor(scales, seriesKey);
     const sortedRows = xChannel.type === "nominal" || xChannel.type === "ordinal" ? rows : sortByField(rows, xChannel.field);
     const validPoints = [];
+    const y2Channel = encoding.y2;
     for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
       const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
       if (xVal === null || yVal === null) continue;
+      const yBottomVal = y2Channel && row[y2Channel.field] != null ? scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field]) : null;
       validPoints.push({
         x: xVal,
         yTop: yVal,
-        yBottom: baselineY,
+        yBottom: yBottomVal ?? baselineY,
         row
       });
     }
@@ -2683,6 +2704,7 @@ function computeSingleArea(spec, scales, _chartArea) {
     const bottomPoints = validPoints.map((p) => ({ x: p.x, y: p.yBottom }));
     const ariaLabel = seriesKey === "__default__" ? `Area with ${validPoints.length} data points` : `${seriesKey}: area with ${validPoints.length} data points`;
     const aria = { label: ariaLabel };
+    const fillOpacity = y2Channel ? 0.25 : DEFAULT_FILL_OPACITY;
     marks.push({
       type: "area",
       topPoints,
@@ -2690,7 +2712,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       path: pathStr,
       topPath: topPathStr,
       fill: color2,
-      fillOpacity: DEFAULT_FILL_OPACITY,
+      fillOpacity,
       stroke: getRepresentativeColor4(color2),
       strokeWidth: 2,
       seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
@@ -6607,8 +6629,10 @@ function normalizeAnnotations(annotations) {
           fill: ann.fill ?? "#000000"
         };
       case "refline":
+      case "rule":
         return {
           ...ann,
+          type: "refline",
           style: ann.style ?? "dashed",
           strokeWidth: ann.strokeWidth ?? 1,
           stroke: ann.stroke ?? "#666666",
@@ -8342,7 +8366,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     left: padding + (isRadial ? padding : axisMargin)
   };
   const labelDensity = spec.labels.density;
-  if ((spec.markType === "line" || spec.markType === "area") && labelDensity !== "none") {
+  const labelsHiddenByStrategy = strategy?.labelMode === "none";
+  if ((spec.markType === "line" || spec.markType === "area") && labelDensity !== "none" && !labelsHiddenByStrategy) {
     const colorEnc = encoding.color;
     const colorField = colorEnc && "field" in colorEnc ? colorEnc.field : void 0;
     if (colorField) {
@@ -8979,6 +9004,7 @@ function extractColorEntries(spec, theme) {
     ...explicitDomain.filter((v) => dataValues.includes(v)),
     ...dataValues.filter((v) => !explicitDomain.includes(v))
   ] : dataValues;
+  const excludeSet = new Set(spec.legend?.exclude ?? []);
   return uniqueValues.map((value2, i) => {
     let colorIndex = i;
     if (explicitDomain && explicitRange) {
@@ -8991,7 +9017,7 @@ function extractColorEntries(spec, theme) {
       shape,
       active: true
     };
-  });
+  }).filter((entry) => !excludeSet.has(entry.label));
 }
 function truncateEntries(entries, maxCount) {
   if (maxCount >= entries.length || maxCount <= 0) return entries;
@@ -9029,7 +9055,10 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   const hasLabels = spec.labels.density !== "none";
   const labelsWillRender = strategy.labelMode !== "none";
   const hasColorEncoding = spec.encoding.color != null;
-  const legendNotForced = spec.legend?.show !== true;
+  const userConfiguredLegend = spec.legend != null && Object.keys(spec.legend).some(
+    (k) => k !== "show" || spec.legend[k] !== false
+  );
+  const legendNotForced = !userConfiguredLegend;
   if (isLineOrArea && hasLabels && labelsWillRender && hasColorEncoding && legendNotForced) {
     const isArea = spec.markType === "area";
     const quantChannel = spec.encoding.y?.type === "quantitative" ? spec.encoding.y : spec.encoding.x;