@opendata-ai/openchart-engine 7.2.0 → 7.2.2

package/dist/index.js

@@ -766,16 +766,18 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
   let y2 = chartArea.y;
   let width = chartArea.width;
   let height = chartArea.height;
+  const extend2 = annotation.extendToEdges !== false;
+  const resolveEdge = (value2, scale, edge) => extend2 ? resolvePositionEdge(value2, scale, edge) : resolvePosition(value2, scale);
   if (annotation.x1 !== void 0 && annotation.x2 !== void 0) {
-    const x1px = resolvePositionEdge(annotation.x1, scales.x, "start");
-    const x2px = resolvePositionEdge(annotation.x2, scales.x, "end");
+    const x1px = resolveEdge(annotation.x1, scales.x, "start");
+    const x2px = resolveEdge(annotation.x2, scales.x, "end");
     if (x1px === null || x2px === null) return null;
     x2 = Math.min(x1px, x2px);
     width = Math.abs(x2px - x1px);
   }
   if (annotation.y1 !== void 0 && annotation.y2 !== void 0) {
-    const y1px = resolvePositionEdge(annotation.y1, scales.y, "end");
-    const y2px = resolvePositionEdge(annotation.y2, scales.y, "start");
+    const y1px = resolveEdge(annotation.y1, scales.y, "end");
+    const y2px = resolveEdge(annotation.y2, scales.y, "start");
     if (y1px === null || y2px === null) return null;
     y2 = Math.min(y1px, y2px);
     height = Math.abs(y2px - y1px);
@@ -788,7 +790,12 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
     const baseDx = centered ? 0 : anchor === "right" ? -4 : 4;
     const baseDy = 14;
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
-    const style = makeAnnotationLabelStyle(11, 500, void 0, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 500,
+      void 0,
+      isDark
+    );
     if (centered) {
       style.textAnchor = "middle";
     } else if (anchor === "right") {
@@ -3932,6 +3939,7 @@ function computeLineLabels(marks, strategy, density = "auto", labelOffsets, spec
 }
 
 // src/charts/line/index.ts
+var AREA_POINT_RADIUS = 3;
 var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeLineMarks(spec, scales, chartArea, strategy);
   const lineMarks = marks.filter((m) => m.type === "line");
@@ -3957,7 +3965,8 @@ var areaRenderer = (spec, scales, chartArea, strategy, theme) => {
   const encoding = spec.encoding;
   const hasColor = !!(encoding.color && "field" in encoding.color);
   const lines = hasColor ? linesFromAreas(areas) : computeLineMarks(spec, scales, chartArea, strategy);
-  return [...areas, ...lines];
+  const points = hasColor && spec.markDef.point ? pointsFromAreas(areas, spec.markDef.point) : [];
+  return [...areas, ...lines, ...points];
 };
 function linesFromAreas(areas) {
   return areas.map((a) => ({
@@ -3972,6 +3981,34 @@ function linesFromAreas(areas) {
     aria: { label: `${a.seriesKey ?? "Series"}: line with ${a.topPoints.length} data points` }
   }));
 }
+function pointsFromAreas(areas, pointMode) {
+  const isTransparent = pointMode === "transparent";
+  const isEndpoints = pointMode === "endpoints";
+  const points = [];
+  for (const a of areas) {
+    const stroke = getRepresentativeColor6(a.fill);
+    const lastIdx = a.topPoints.length - 1;
+    for (let i = 0; i < a.topPoints.length; i++) {
+      const pt = a.topPoints[i];
+      const isEndpoint = i === 0 || i === lastIdx;
+      const visible = !isTransparent && (!isEndpoints || isEndpoint);
+      const hollow = isEndpoints && visible;
+      points.push({
+        type: "point",
+        cx: pt.x,
+        cy: pt.y,
+        r: visible ? AREA_POINT_RADIUS : 0,
+        fill: hollow ? "transparent" : stroke,
+        stroke: hollow ? stroke : visible ? "#ffffff" : "transparent",
+        strokeWidth: visible ? 1.5 : 0,
+        fillOpacity: isTransparent ? 0 : 1,
+        data: a.data[i] ?? {},
+        aria: { decorative: true }
+      });
+    }
+  }
+  return points;
+}
 
 // src/charts/pie/compute.ts
 import { isConditionalDef, isGradientDef as isGradientDef4 } from "@opendata-ai/openchart-core";
@@ -8943,9 +8980,9 @@ function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
   const hasRightAxisTitle = !!yAxisConfig?.title;
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
   const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
-  const axisTitleOffset = getAxisTitleOffset(options.width);
+  const axisTitleOffset2 = getAxisTitleOffset(options.width);
   const halfGlyph = Math.ceil(bodyFontSize / 2);
-  const titleExtent = hasRightAxisTitle ? axisTitleOffset + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD) : 0;
+  const titleExtent = hasRightAxisTitle ? axisTitleOffset2 + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD) : 0;
   const rightReserve = Math.max(tickExtent, titleExtent);
   const optionsWithReserve = {
     ...options,
@@ -10157,12 +10194,11 @@ 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,
+  axisTitleOffset,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeChrome as computeChrome3,
   estimateTextWidth as estimateTextWidth15,
-  getAxisTitleOffset as getAxisTitleOffset2,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
   LABEL_GAP_COMPACT,
@@ -10172,7 +10208,6 @@ 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";
 
@@ -10623,10 +10658,10 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         theme.fonts.weights.normal
       );
     }
-    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);
+    const titleFontSize = theme.fonts.sizes.body;
+    const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
+    const halfGlyph = Math.ceil(titleFontSize / 2);
+    const rotatedLabelMargin = offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2);
     margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
   }
   if (options.rightAxisReserve && options.rightAxisReserve > 0) {
@@ -10978,7 +11013,7 @@ function buildBandScale(channel, data, rangeStart, rangeEnd) {
 }
 function buildPointScale(channel, data, rangeStart, rangeEnd) {
   const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
-  const padding = channel.scale?.padding ?? 0.5;
+  const padding = channel.scale?.padding ?? channel.scale?.paddingOuter ?? 0.5;
   const scale = point4().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.reverse) {
     const [r0, r1] = scale.range();
@@ -14235,17 +14270,18 @@ function compileChart(spec, options) {
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if ("entries" in legendLayout && legendLayout.entries.length > 0) {
+    const legendInnerWidth = options.width - theme.spacing.padding - chartArea.x;
     const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case "top":
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         legendArea.y -= legendLayout.bounds.height + gap;
         legendArea.height += legendLayout.bounds.height + gap;
         break;
       case "bottom":
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         legendArea.height += legendLayout.bounds.height + gap + dims.xAxisHeight;
         break;
       case "right":