@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-QQBXUDM4.mjs

@@ -0,0 +1,885 @@
+import { renderAxisSvg, renderAxisCanvas } from './chunk-ZTL2FQEW.mjs';
+import { renderReferenceBandsSvg, computeReferenceBands, renderReferenceLinesSvg, computeReferenceLines, renderReferenceBandsCanvas, renderReferenceLinesCanvas, renderCustomMarkersCanvas } from './chunk-ZT2Z7ERM.mjs';
+import { createDrawImage } from './chunk-7CMVDIOU.mjs';
+import { adjustLabelForRotation } from './chunk-R6Y3R7EW.mjs';
+import { DEFAULT_BRACKET_GAP, DEFAULT_BRACKET_LABEL_OFFSET, resolveFontFamily, resolveFontSize, DEFAULT_GROUP_LABEL_FONT_SIZE, resolveAxisColor, DEFAULT_GROUP_LABEL_FONT_WEIGHT, DEFAULT_BRACKET_DEPTH_LAYER_SIZE, DEFAULT_BRACKET_AXIS_TITLE_SPACE, DEFAULT_BG_FILL_EVEN, DEFAULT_BG_FILL_ODD, DEFAULT_BRACKET_TICK_SIZE } from './chunk-NKUYIWAP.mjs';
+import { createSvgGroup, appendChild, createSvgRect, withCanvasState, createSvgText, svgNode, materializeSvgGroup, createSvgLine } from './chunk-SSLTFJ3U.mjs';
+import { createLinearScale } from './chunk-RQ3CKQOX.mjs';
+
+// src/cartesian/backgroundFill.utils.ts
+function resolveDefaultFillColor(index, color) {
+  return color ?? (index % 2 === 0 ? DEFAULT_BG_FILL_EVEN : DEFAULT_BG_FILL_ODD);
+}
+function computeCategoryFills(boundaries, categoryScale, cartesianArea, orientation) {
+  const fills = [];
+  const categories = categoryScale.domain();
+  const bw = categoryScale.bandwidth();
+  for (let i = 0; i < boundaries.length; i++) {
+    const gb = boundaries[i];
+    if (!gb.fill) continue;
+    const color = resolveDefaultFillColor(i, gb.fill.color);
+    const opacity = gb.fill.opacity ?? 1;
+    if (orientation === "horizontal") {
+      const startY = categoryScale(categories[gb.startIdx]) - 1;
+      const endY = categoryScale(categories[gb.endIdx]) + bw + 1;
+      fills.push({ x: cartesianArea.x, y: startY, width: cartesianArea.width, height: endY - startY, color, opacity });
+    } else {
+      const startX = categoryScale(categories[gb.startIdx]) - 1;
+      const endX = categoryScale(categories[gb.endIdx]) + bw + 1;
+      fills.push({ x: startX, y: cartesianArea.y, width: endX - startX, height: cartesianArea.height, color, opacity });
+    }
+  }
+  return fills;
+}
+function computeRangeFills(boundaries, valueDomain, valueScaleRange, cartesianArea, orientation) {
+  const fills = [];
+  const valueScale = createLinearScale(valueDomain, valueScaleRange);
+  for (let i = 0; i < boundaries.length; i++) {
+    const rb = boundaries[i];
+    if (!rb.fill) continue;
+    const color = resolveDefaultFillColor(i, rb.fill.color);
+    const opacity = rb.fill.opacity ?? 1;
+    if (orientation === "vertical") {
+      const topY = valueScale(rb.to);
+      const botY = valueScale(rb.from);
+      fills.push({ x: cartesianArea.x, y: topY, width: cartesianArea.width, height: botY - topY, color, opacity });
+    } else {
+      const leftX = valueScale(rb.from);
+      const rightX = valueScale(rb.to);
+      fills.push({ x: leftX, y: cartesianArea.y, width: rightX - leftX, height: cartesianArea.height, color, opacity });
+    }
+  }
+  return fills;
+}
+function renderFillsSvg(fills) {
+  if (fills.length === 0) return null;
+  const fillGroup = createSvgGroup();
+  for (const f of fills) {
+    appendChild(fillGroup, createSvgRect(f.x, f.y, f.width, f.height, { fill: f.color, opacity: f.opacity }));
+  }
+  return fillGroup;
+}
+function renderFillsCanvas(ctx, fills) {
+  for (const f of fills) {
+    withCanvasState(ctx, () => {
+      ctx.globalAlpha = f.opacity;
+      ctx.fillStyle = f.color;
+      ctx.fillRect(f.x, f.y, f.width, f.height);
+    });
+  }
+}
+
+// src/cartesian/bracket.ts
+function resolveStyle(val, defaultColor) {
+  return {
+    color: typeof val === "object" ? val.color ?? defaultColor : defaultColor,
+    width: typeof val === "object" ? val.width ?? 1 : 1,
+    dash: typeof val === "object" ? val.dash : void 0
+  };
+}
+function appendBracketShape(result, placement, axisCoord, start, end, color, width, dash) {
+  if (placement === "left") {
+    result.bracketLines.push({ x1: axisCoord, y1: start, x2: axisCoord, y2: end, color, width, dash });
+    result.bracketLines.push({ x1: axisCoord, y1: start, x2: axisCoord + DEFAULT_BRACKET_TICK_SIZE, y2: start, color, width });
+    result.bracketLines.push({ x1: axisCoord, y1: end, x2: axisCoord + DEFAULT_BRACKET_TICK_SIZE, y2: end, color, width });
+  } else {
+    result.bracketLines.push({ x1: start, y1: axisCoord, x2: end, y2: axisCoord, color, width, dash });
+    result.bracketLines.push({ x1: start, y1: axisCoord, x2: start, y2: axisCoord - DEFAULT_BRACKET_TICK_SIZE, color, width });
+    result.bracketLines.push({ x1: end, y1: axisCoord, x2: end, y2: axisCoord - DEFAULT_BRACKET_TICK_SIZE, color, width });
+  }
+}
+function appendLineSvg(group, line) {
+  const attrs = { stroke: line.color, "stroke-width": line.width };
+  if (line.dash) attrs["stroke-dasharray"] = line.dash.join(",");
+  appendChild(group, createSvgLine(line.x1, line.y1, line.x2, line.y2, attrs));
+}
+function strokeLine(ctx, line) {
+  ctx.beginPath();
+  ctx.strokeStyle = line.color;
+  ctx.lineWidth = line.width;
+  if (line.dash) ctx.setLineDash(line.dash);
+  ctx.moveTo(line.x1, line.y1);
+  ctx.lineTo(line.x2, line.y2);
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+function computeCategoryBracketGeometry(boundaries, categoryScale, cartesianArea, categoryAxisSpace, orientation, theme) {
+  const result = { separators: [], tickSeparators: [], bracketLines: [], labels: [] };
+  if (boundaries.length === 0) return result;
+  const categories = categoryScale.domain();
+  const bw = categoryScale.bandwidth();
+  const boundariesByDepth = /* @__PURE__ */ new Map();
+  for (const gb of boundaries) {
+    const d = gb.depth;
+    if (!boundariesByDepth.has(d)) boundariesByDepth.set(d, []);
+    boundariesByDepth.get(d).push(gb);
+  }
+  const maxDepth = Math.max(0, ...boundariesByDepth.keys());
+  for (const [depth, depthBoundaries] of boundariesByDepth) {
+    const depthOffset = (maxDepth - depth) * DEFAULT_BRACKET_DEPTH_LAYER_SIZE;
+    for (let i = 0; i < depthBoundaries.length; i++) {
+      const gb = depthBoundaries[i];
+      const displayLabel = gb.labelFormat ? gb.labelFormat(gb.label) : gb.label;
+      const labelColor = gb.labelStyle?.color ?? theme.groupLabelColor;
+      const labelFontSize = gb.labelStyle?.fontSize ?? theme.defaultFontSize;
+      const labelFontWeight = gb.labelStyle?.fontWeight ?? theme.defaultFontWeight;
+      const labelFontFamily = gb.labelStyle?.fontFamily ?? theme.defaultFontFamily;
+      if (orientation === "horizontal") {
+        const startY = categoryScale(categories[gb.startIdx]) - 1;
+        const endY = categoryScale(categories[gb.endIdx]) + bw + 1;
+        const midY = (startY + endY) / 2;
+        const bracketX = cartesianArea.x - categoryAxisSpace - DEFAULT_BRACKET_GAP - depthOffset;
+        if (gb.separator && i < depthBoundaries.length - 1) {
+          const nextGb = depthBoundaries[i + 1];
+          const nextStartY = categoryScale(categories[nextGb.startIdx]) - 1;
+          const sepY = (endY + nextStartY) / 2;
+          result.separators.push({
+            x1: cartesianArea.x,
+            y1: sepY,
+            x2: cartesianArea.x + cartesianArea.width,
+            y2: sepY,
+            color: gb.separator.color ?? theme.bracketColor,
+            width: gb.separator.width ?? 1,
+            dash: gb.separator.dash
+          });
+        }
+        if (gb.tickSeparator) {
+          const tsColor = gb.tickSeparator.color ?? theme.bracketColor;
+          const tsWidth = gb.tickSeparator.width ?? 1;
+          const tsDash = gb.tickSeparator.dash;
+          const axisLineX = cartesianArea.x;
+          const tickEndX = axisLineX - categoryAxisSpace;
+          if (i === 0 || !depthBoundaries[i - 1].tickSeparator) {
+            const edgeY = i === 0 ? cartesianArea.y : (categoryScale(categories[depthBoundaries[i - 1].endIdx]) + bw + 1 + startY) / 2;
+            result.tickSeparators.push({ x1: tickEndX, y1: edgeY, x2: axisLineX, y2: edgeY, color: tsColor, width: tsWidth, dash: tsDash });
+          }
+          if (i < depthBoundaries.length - 1) {
+            const nextGb = depthBoundaries[i + 1];
+            const nextStartY = categoryScale(categories[nextGb.startIdx]) - 1;
+            const boundaryY = (endY + nextStartY) / 2;
+            result.tickSeparators.push({ x1: tickEndX, y1: boundaryY, x2: axisLineX, y2: boundaryY, color: tsColor, width: tsWidth, dash: tsDash });
+          } else {
+            result.tickSeparators.push({
+              x1: tickEndX,
+              y1: cartesianArea.y + cartesianArea.height,
+              x2: axisLineX,
+              y2: cartesianArea.y + cartesianArea.height,
+              color: tsColor,
+              width: tsWidth,
+              dash: tsDash
+            });
+          }
+        }
+        if (gb.bracket !== false) {
+          const bStyle = resolveStyle(gb.bracket ?? true, theme.bracketColor);
+          appendBracketShape(result, "left", bracketX, startY, endY, bStyle.color, bStyle.width, bStyle.dash);
+        }
+        result.labels.push({
+          x: bracketX - DEFAULT_BRACKET_LABEL_OFFSET,
+          y: midY,
+          text: displayLabel,
+          color: labelColor,
+          fontSize: labelFontSize,
+          fontWeight: labelFontWeight,
+          fontFamily: labelFontFamily,
+          textAnchor: "end",
+          dominantBaseline: "central",
+          canvasTextAlign: "right",
+          canvasTextBaseline: "middle",
+          render: gb.render,
+          categories: categories.slice(gb.startIdx, gb.endIdx + 1),
+          depth: gb.depth
+        });
+      } else {
+        const startX = categoryScale(categories[gb.startIdx]) - 1;
+        const endX = categoryScale(categories[gb.endIdx]) + bw + 1;
+        const midX = (startX + endX) / 2;
+        const bracketY = cartesianArea.y + cartesianArea.height + categoryAxisSpace + DEFAULT_BRACKET_GAP + depthOffset;
+        if (gb.separator && i < depthBoundaries.length - 1) {
+          const nextGb = depthBoundaries[i + 1];
+          const nextStartX = categoryScale(categories[nextGb.startIdx]) - 1;
+          const sepX = (endX + nextStartX) / 2;
+          result.separators.push({
+            x1: sepX,
+            y1: cartesianArea.y,
+            x2: sepX,
+            y2: cartesianArea.y + cartesianArea.height,
+            color: gb.separator.color ?? theme.bracketColor,
+            width: gb.separator.width ?? 1,
+            dash: gb.separator.dash
+          });
+        }
+        if (gb.tickSeparator) {
+          const tsColor = gb.tickSeparator.color ?? theme.bracketColor;
+          const tsWidth = gb.tickSeparator.width ?? 1;
+          const tsDash = gb.tickSeparator.dash;
+          const axisLineY = cartesianArea.y + cartesianArea.height;
+          const tickEndY = axisLineY + categoryAxisSpace;
+          if (i === 0 || !depthBoundaries[i - 1].tickSeparator) {
+            const edgeX = i === 0 ? cartesianArea.x : (categoryScale(categories[depthBoundaries[i - 1].endIdx]) + bw + 1 + startX) / 2;
+            result.tickSeparators.push({ x1: edgeX, y1: axisLineY, x2: edgeX, y2: tickEndY, color: tsColor, width: tsWidth, dash: tsDash });
+          }
+          if (i < depthBoundaries.length - 1) {
+            const nextGb = depthBoundaries[i + 1];
+            const nextStartX = categoryScale(categories[nextGb.startIdx]) - 1;
+            const boundaryX = (endX + nextStartX) / 2;
+            result.tickSeparators.push({ x1: boundaryX, y1: axisLineY, x2: boundaryX, y2: tickEndY, color: tsColor, width: tsWidth, dash: tsDash });
+          } else {
+            result.tickSeparators.push({
+              x1: cartesianArea.x + cartesianArea.width,
+              y1: axisLineY,
+              x2: cartesianArea.x + cartesianArea.width,
+              y2: tickEndY,
+              color: tsColor,
+              width: tsWidth,
+              dash: tsDash
+            });
+          }
+        }
+        if (gb.bracket !== false) {
+          const bStyle = resolveStyle(gb.bracket ?? true, theme.bracketColor);
+          appendBracketShape(result, "bottom", bracketY, startX, endX, bStyle.color, bStyle.width, bStyle.dash);
+        }
+        result.labels.push({
+          x: midX,
+          y: bracketY + DEFAULT_BRACKET_LABEL_OFFSET,
+          text: displayLabel,
+          color: labelColor,
+          fontSize: labelFontSize,
+          fontWeight: labelFontWeight,
+          fontFamily: labelFontFamily,
+          textAnchor: "middle",
+          dominantBaseline: "hanging",
+          canvasTextAlign: "center",
+          canvasTextBaseline: "top",
+          render: gb.render,
+          categories: categories.slice(gb.startIdx, gb.endIdx + 1),
+          depth: gb.depth
+        });
+      }
+    }
+  }
+  return result;
+}
+function computeRangeBracketGeometry(boundaries, valueDomain, valueScaleRange, cartesianArea, valueAxisSpace, hasAxisTitle, orientation, theme) {
+  const result = { separators: [], tickSeparators: [], bracketLines: [], labels: [] };
+  if (boundaries.length === 0) return result;
+  const valueScale = createLinearScale(valueDomain, valueScaleRange);
+  const valueTickSpace = hasAxisTitle ? valueAxisSpace - DEFAULT_BRACKET_AXIS_TITLE_SPACE : valueAxisSpace;
+  for (let i = 0; i < boundaries.length; i++) {
+    const rb = boundaries[i];
+    const displayLabel = rb.label;
+    const labelColor = rb.labelStyle?.color ?? theme.groupLabelColor;
+    const labelFontSize = rb.labelStyle?.fontSize ?? theme.defaultFontSize;
+    const labelFontWeight = rb.labelStyle?.fontWeight ?? theme.defaultFontWeight;
+    const labelFontFamily = rb.labelStyle?.fontFamily ?? theme.defaultFontFamily;
+    if (orientation === "vertical") {
+      const topY = valueScale(rb.to);
+      const botY = valueScale(rb.from);
+      const midY = (topY + botY) / 2;
+      const bracketX = cartesianArea.x - valueTickSpace - DEFAULT_BRACKET_GAP;
+      if (rb.separator && i < boundaries.length - 1) {
+        const nextRb = boundaries[i + 1];
+        const sepY = (valueScale(rb.to) + valueScale(nextRb.from)) / 2;
+        const s = resolveStyle(rb.separator, theme.bracketColor);
+        result.separators.push({ x1: cartesianArea.x, y1: sepY, x2: cartesianArea.x + cartesianArea.width, y2: sepY, color: s.color, width: s.width, dash: s.dash });
+      }
+      if (rb.tickSeparator) {
+        const ts = resolveStyle(rb.tickSeparator, theme.bracketColor);
+        const axisLineX = cartesianArea.x;
+        const tickEndX = axisLineX - valueAxisSpace;
+        if (i === 0 || !boundaries[i - 1].tickSeparator) {
+          result.tickSeparators.push({ x1: tickEndX, y1: topY, x2: axisLineX, y2: topY, color: ts.color, width: ts.width, dash: ts.dash });
+        }
+        if (i < boundaries.length - 1) {
+          const nextRb = boundaries[i + 1];
+          const boundaryY = (valueScale(rb.to) + valueScale(nextRb.from)) / 2;
+          result.tickSeparators.push({ x1: tickEndX, y1: boundaryY, x2: axisLineX, y2: boundaryY, color: ts.color, width: ts.width, dash: ts.dash });
+        } else {
+          result.tickSeparators.push({ x1: tickEndX, y1: botY, x2: axisLineX, y2: botY, color: ts.color, width: ts.width, dash: ts.dash });
+        }
+      }
+      if (rb.bracket !== false) {
+        const bStyle = resolveStyle(rb.bracket ?? true, theme.bracketColor);
+        appendBracketShape(result, "left", bracketX, topY, botY, bStyle.color, bStyle.width, bStyle.dash);
+      }
+      result.labels.push({
+        x: bracketX - DEFAULT_BRACKET_LABEL_OFFSET,
+        y: midY,
+        text: displayLabel,
+        color: labelColor,
+        fontSize: labelFontSize,
+        fontWeight: labelFontWeight,
+        fontFamily: labelFontFamily,
+        textAnchor: "end",
+        dominantBaseline: "central",
+        canvasTextAlign: "right",
+        canvasTextBaseline: "middle"
+      });
+    } else {
+      const leftX = valueScale(rb.from);
+      const rightX = valueScale(rb.to);
+      const midX = (leftX + rightX) / 2;
+      const bracketY = cartesianArea.y + cartesianArea.height + valueTickSpace + DEFAULT_BRACKET_GAP;
+      if (rb.separator && i < boundaries.length - 1) {
+        const nextRb = boundaries[i + 1];
+        const sepX = (valueScale(rb.to) + valueScale(nextRb.from)) / 2;
+        const s = resolveStyle(rb.separator, theme.bracketColor);
+        result.separators.push({ x1: sepX, y1: cartesianArea.y, x2: sepX, y2: cartesianArea.y + cartesianArea.height, color: s.color, width: s.width, dash: s.dash });
+      }
+      if (rb.tickSeparator) {
+        const ts = resolveStyle(rb.tickSeparator, theme.bracketColor);
+        const axisLineY = cartesianArea.y + cartesianArea.height;
+        const tickEndY = axisLineY + valueAxisSpace;
+        if (i === 0 || !boundaries[i - 1].tickSeparator) {
+          result.tickSeparators.push({ x1: leftX, y1: axisLineY, x2: leftX, y2: tickEndY, color: ts.color, width: ts.width, dash: ts.dash });
+        }
+        if (i < boundaries.length - 1) {
+          const nextRb = boundaries[i + 1];
+          const boundaryX = (valueScale(rb.to) + valueScale(nextRb.from)) / 2;
+          result.tickSeparators.push({ x1: boundaryX, y1: axisLineY, x2: boundaryX, y2: tickEndY, color: ts.color, width: ts.width, dash: ts.dash });
+        } else {
+          result.tickSeparators.push({ x1: rightX, y1: axisLineY, x2: rightX, y2: tickEndY, color: ts.color, width: ts.width, dash: ts.dash });
+        }
+      }
+      if (rb.bracket !== false) {
+        const bStyle = resolveStyle(rb.bracket ?? true, theme.bracketColor);
+        appendBracketShape(result, "bottom", bracketY, leftX, rightX, bStyle.color, bStyle.width, bStyle.dash);
+      }
+      result.labels.push({
+        x: midX,
+        y: bracketY + DEFAULT_BRACKET_LABEL_OFFSET,
+        text: displayLabel,
+        color: labelColor,
+        fontSize: labelFontSize,
+        fontWeight: labelFontWeight,
+        fontFamily: labelFontFamily,
+        textAnchor: "middle",
+        dominantBaseline: "hanging",
+        canvasTextAlign: "center",
+        canvasTextBaseline: "top"
+      });
+    }
+  }
+  return result;
+}
+function renderBracketsSvg(geometry) {
+  const total = geometry.separators.length + geometry.tickSeparators.length + geometry.bracketLines.length + geometry.labels.length;
+  if (total === 0) return null;
+  const group = createSvgGroup();
+  for (const line of geometry.separators) appendLineSvg(group, line);
+  for (const line of geometry.tickSeparators) appendLineSvg(group, line);
+  for (const line of geometry.bracketLines) appendLineSvg(group, line);
+  for (const lbl of geometry.labels) {
+    if (lbl.render) continue;
+    appendChild(
+      group,
+      createSvgText(lbl.x, lbl.y, lbl.text, {
+        "text-anchor": lbl.textAnchor,
+        "dominant-baseline": lbl.dominantBaseline,
+        fill: lbl.color,
+        "font-size": lbl.fontSize,
+        "font-weight": lbl.fontWeight,
+        "font-family": lbl.fontFamily
+      })
+    );
+  }
+  return group;
+}
+function renderBracketsCanvas(ctx, geometry) {
+  const total = geometry.separators.length + geometry.tickSeparators.length + geometry.bracketLines.length + geometry.labels.length;
+  if (total === 0) return;
+  withCanvasState(ctx, () => {
+    for (const line of geometry.separators) strokeLine(ctx, line);
+    for (const line of geometry.tickSeparators) strokeLine(ctx, line);
+    for (const line of geometry.bracketLines) strokeLine(ctx, line);
+    for (const lbl of geometry.labels) {
+      if (lbl.render) {
+        withCanvasState(ctx, () => {
+          ctx.translate(lbl.x, lbl.y);
+          lbl.render({
+            label: lbl.text,
+            x: lbl.x,
+            y: lbl.y,
+            categories: lbl.categories ?? [],
+            depth: lbl.depth ?? 0,
+            ctx
+          });
+        });
+      } else {
+        ctx.font = `${lbl.fontWeight} ${lbl.fontSize}px ${lbl.fontFamily}`;
+        ctx.fillStyle = lbl.color;
+        ctx.textAlign = lbl.canvasTextAlign;
+        ctx.textBaseline = lbl.canvasTextBaseline;
+        ctx.fillText(lbl.text, lbl.x, lbl.y);
+      }
+    }
+  });
+}
+
+// src/renderers/overlay.ts
+function renderCanvasOverlay(params) {
+  const { canvas, registry, clipArea, draw } = params;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (clipArea) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(clipArea.x, clipArea.y, clipArea.width, clipArea.height);
+    ctx.clip();
+  }
+  const createAnimate = (seriesId, itemIndex) => (config) => {
+    const id = `${seriesId}-${itemIndex}-${config.key}`;
+    if (!registry.has(id)) registry.register({ ...config, id });
+    return registry.getValue(id) ?? config.from;
+  };
+  draw(ctx, createAnimate);
+  if (clipArea) {
+    ctx.restore();
+  }
+}
+
+// src/renderers/cartesian.renderer.ts
+var _globalClipId = 0;
+var DEFAULT_BAND_PLACEMENT = "beforeData";
+var DEFAULT_LINE_PLACEMENT = "afterData";
+var bandPlacement = (b) => b.placement ?? DEFAULT_BAND_PLACEMENT;
+var linePlacement = (l) => l.placement ?? DEFAULT_LINE_PLACEMENT;
+function renderResolvedLabels(labels, config, options) {
+  const { renderer: rendererType, svgGroup, ctx, onImageLoad, theme } = options;
+  for (const lbl of labels) {
+    const itemFontSize = lbl.fontSize ?? config.fontSize;
+    const itemFill = lbl.textColor ?? config.color ?? theme.dataLabel;
+    if (config.render) {
+      const renderContext = {
+        index: lbl.dataIndex,
+        value: lbl.value,
+        percentage: lbl.percentage,
+        formattedText: lbl.text,
+        label: lbl.seriesName ?? lbl.category,
+        // Per-label color override wins; the series-level color is the fallback.
+        color: lbl.textColor ?? lbl.color,
+        x: lbl.x,
+        y: lbl.y
+      };
+      if (rendererType === "canvas" && ctx) {
+        withCanvasState(ctx, () => {
+          ctx.translate(lbl.x, lbl.y);
+          renderContext.ctx = ctx;
+          renderContext.drawImage = createDrawImage(ctx, onImageLoad ?? (() => {
+          }));
+          config.render(renderContext);
+        });
+      }
+      continue;
+    }
+    const { textAnchor, baseline } = config.rotation ? adjustLabelForRotation(config.rotation, lbl.textAnchor, lbl.baseline) : { textAnchor: lbl.textAnchor, baseline: lbl.baseline };
+    if (rendererType === "svg" && svgGroup) {
+      const svgBaseline = baseline === "hanging" ? "text-before-edge" : baseline === "auto" ? "alphabetic" : baseline;
+      const attrs = {
+        class: "p-chart-data-label",
+        "text-anchor": textAnchor,
+        "dominant-baseline": svgBaseline,
+        fill: itemFill,
+        "font-size": itemFontSize,
+        "font-weight": config.fontWeight,
+        "font-family": config.fontFamily
+      };
+      if (config.rotation) {
+        attrs.transform = `rotate(${config.rotation}, ${lbl.x}, ${lbl.y})`;
+      }
+      appendChild(svgGroup, createSvgText(lbl.x, lbl.y, lbl.text, attrs));
+    }
+    if (rendererType === "canvas" && ctx) {
+      const canvasAlign = textAnchor === "middle" ? "center" : textAnchor;
+      const canvasBaseline = baseline === "central" ? "middle" : baseline === "hanging" ? "top" : "alphabetic";
+      ctx.save();
+      ctx.font = `${config.fontWeight} ${itemFontSize}px ${config.fontFamily}`;
+      ctx.fillStyle = itemFill;
+      ctx.textAlign = canvasAlign;
+      ctx.textBaseline = canvasBaseline;
+      if (config.rotation) {
+        const rad = config.rotation * Math.PI / 180;
+        ctx.translate(lbl.x, lbl.y);
+        ctx.rotate(rad);
+        ctx.fillText(lbl.text, 0, 0);
+      } else {
+        ctx.fillText(lbl.text, lbl.x, lbl.y);
+      }
+      ctx.restore();
+    }
+  }
+}
+function addNode(parent, node) {
+  if (node) appendChild(parent, node);
+}
+function replaceGroupContent(live, virtual) {
+  while (live.firstChild) live.removeChild(live.firstChild);
+  const materialized = materializeSvgGroup(virtual);
+  while (materialized.firstChild) live.appendChild(materialized.firstChild);
+}
+function renderCartesianFrame(params) {
+  const {
+    renderer,
+    theme,
+    group,
+    canvas,
+    orientation,
+    styledBoundaries,
+    categoryScale,
+    cartesianArea,
+    categoryAxisSpace = 0,
+    styledRangeBoundaries,
+    valueAxisSpace = 0,
+    valueDomain,
+    valueScaleRange,
+    axisLayouts,
+    phase = "all",
+    rtl,
+    globalFont
+  } = params;
+  const clipBase = _globalClipId += 100;
+  let _clipId = clipBase;
+  const yAxisIndexMap = /* @__PURE__ */ new Map();
+  let _yAxisIdx = 0;
+  for (const [axisKey, info] of axisLayouts) {
+    if (info.axis === "y") yAxisIndexMap.set(axisKey, _yAxisIdx++);
+  }
+  const gridAxisKeys = /* @__PURE__ */ new Set();
+  for (const dir of ["x", "y"]) {
+    const axesForDir = [...axisLayouts.entries()].filter(([, info]) => info.axis === dir);
+    const primary = axesForDir.find(([, info]) => info.isPrimary && !info.isHidden);
+    const fallback = primary ? null : axesForDir.find(([, info]) => !info.isHidden);
+    const winner = primary ?? fallback;
+    if (winner) gridAxisKeys.add(winner[0]);
+  }
+  if (renderer === "svg") {
+    const svgGridGroup = params.gridGroup ?? null;
+    const bracketTheme2 = {
+      bracketColor: resolveAxisColor(theme, 0),
+      groupLabelColor: theme.tickLabel,
+      defaultFontSize: resolveFontSize(DEFAULT_GROUP_LABEL_FONT_SIZE, globalFont),
+      defaultFontWeight: DEFAULT_GROUP_LABEL_FONT_WEIGHT,
+      defaultFontFamily: resolveFontFamily(void 0, globalFont)
+    };
+    const gridRoot = svgNode("g");
+    const mainRoot = svgNode("g");
+    if (cartesianArea) {
+      const gridClipId = `grid-clip-${++_clipId}`;
+      const clippedGrid = svgNode("g", { "clip-path": `url(#${gridClipId})` });
+      for (const [axisKey, axisInfo] of axisLayouts) {
+        if (gridAxisKeys.has(axisKey) && axisInfo.layout.gridLines.length > 0) {
+          appendChild(clippedGrid, renderAxisSvg(axisInfo.layout, theme, { gridOnly: true, rtl }, yAxisIndexMap.get(axisKey) ?? 0));
+        }
+      }
+      appendChild(gridRoot, svgNode("clipPath", { id: gridClipId }, [createSvgRect(cartesianArea.x - 1, cartesianArea.y - 1, cartesianArea.width + 2, cartesianArea.height + 2)]));
+      appendChild(gridRoot, clippedGrid);
+    } else {
+      for (const [axisKey, axisInfo] of axisLayouts) {
+        if (gridAxisKeys.has(axisKey) && axisInfo.layout.gridLines.length > 0) {
+          appendChild(gridRoot, renderAxisSvg(axisInfo.layout, theme, { gridOnly: true, rtl }, yAxisIndexMap.get(axisKey) ?? 0));
+        }
+      }
+    }
+    if (styledBoundaries && styledBoundaries.length > 0 && categoryScale && cartesianArea) {
+      addNode(gridRoot, renderFillsSvg(computeCategoryFills(styledBoundaries, categoryScale, cartesianArea, orientation)));
+    }
+    if (styledRangeBoundaries && styledRangeBoundaries.length > 0 && cartesianArea && valueDomain && valueScaleRange) {
+      addNode(gridRoot, renderFillsSvg(computeRangeFills(styledRangeBoundaries, valueDomain, valueScaleRange, cartesianArea, orientation)));
+    }
+    if (cartesianArea) {
+      const beforeRefClipId = `before-ref-clip-${++_clipId}`;
+      const beforeRefGroup = svgNode("g");
+      if (params.referenceBands && params.referenceBands.length > 0) {
+        const beforeBands = params.referenceBands.filter((b) => bandPlacement(b) === "beforeData" && !b.render);
+        if (beforeBands.length > 0) {
+          addNode(beforeRefGroup, renderReferenceBandsSvg(computeReferenceBands(beforeBands, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont));
+        }
+      }
+      if (params.referenceLines && params.referenceLines.length > 0) {
+        const beforeLines = params.referenceLines.filter((l) => linePlacement(l) === "beforeData" && !l.render);
+        if (beforeLines.length > 0) {
+          addNode(beforeRefGroup, renderReferenceLinesSvg(computeReferenceLines(beforeLines, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont));
+        }
+      }
+      appendChild(gridRoot, svgNode("clipPath", { id: beforeRefClipId }, [createSvgRect(cartesianArea.x, cartesianArea.y, cartesianArea.width, cartesianArea.height)]));
+      appendChild(gridRoot, svgNode("g", { "clip-path": `url(#${beforeRefClipId})` }, beforeRefGroup.children));
+    }
+    let refClipId = "";
+    const afterDataRoot = cartesianArea ? svgNode("g") : mainRoot;
+    if (cartesianArea) {
+      refClipId = `ref-clip-${++_clipId}`;
+      appendChild(mainRoot, svgNode("clipPath", { id: refClipId }, [createSvgRect(cartesianArea.x, cartesianArea.y, cartesianArea.width, cartesianArea.height)]));
+    }
+    if (cartesianArea) {
+      if (params.referenceBands && params.referenceBands.length > 0) {
+        const afterBands = params.referenceBands.filter((b) => bandPlacement(b) === "afterData" && !b.render);
+        if (afterBands.length > 0) {
+          addNode(afterDataRoot, renderReferenceBandsSvg(computeReferenceBands(afterBands, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont));
+        }
+      }
+      if (params.referenceLines && params.referenceLines.length > 0) {
+        const afterLines = params.referenceLines.filter((l) => linePlacement(l) === "afterData" && !l.render);
+        if (afterLines.length > 0) {
+          addNode(afterDataRoot, renderReferenceLinesSvg(computeReferenceLines(afterLines, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont));
+        }
+      }
+    }
+    if (refClipId && afterDataRoot !== mainRoot) {
+      appendChild(mainRoot, svgNode("g", { "clip-path": `url(#${refClipId})` }, afterDataRoot.children));
+    }
+    for (const [axisKey, axisInfo] of axisLayouts) {
+      const ap = axisInfo.props;
+      if (ap.visible === false) continue;
+      appendChild(mainRoot, renderAxisSvg(axisInfo.layout, theme, { skipGrid: true, skipLabels: !!ap.render, skipAxisLine: ap.showLine === false, skipTicks: ap.showTicks === false, rtl }, yAxisIndexMap.get(axisKey) ?? 0));
+    }
+    if (styledBoundaries && styledBoundaries.length > 0 && categoryScale && cartesianArea) {
+      addNode(mainRoot, renderBracketsSvg(computeCategoryBracketGeometry(styledBoundaries, categoryScale, cartesianArea, categoryAxisSpace, orientation, bracketTheme2)));
+    }
+    if (styledRangeBoundaries && styledRangeBoundaries.length > 0 && cartesianArea && valueDomain && valueScaleRange) {
+      const primaryValAxisId = orientation === "vertical" ? "y" : "x";
+      const primaryValAxis = [...axisLayouts.values()].find((a) => a.axis === primaryValAxisId && a.isPrimary);
+      const hasAxisTitle = !!primaryValAxis?.props?.label;
+      addNode(mainRoot, renderBracketsSvg(computeRangeBracketGeometry(styledRangeBoundaries, valueDomain, valueScaleRange, cartesianArea, valueAxisSpace, hasAxisTitle, orientation, bracketTheme2)));
+    }
+    if (svgGridGroup && svgGridGroup !== group) {
+      replaceGroupContent(svgGridGroup, gridRoot);
+      if (group) replaceGroupContent(group, mainRoot);
+    } else if (group) {
+      while (group.firstChild) group.removeChild(group.firstChild);
+      const gridMat = materializeSvgGroup(gridRoot);
+      const mainMat = materializeSvgGroup(mainRoot);
+      while (gridMat.firstChild) group.appendChild(gridMat.firstChild);
+      while (mainMat.firstChild) group.appendChild(mainMat.firstChild);
+    }
+    if (params.customTickOverlayRefs) {
+      for (const [axisKey, axisInfo] of axisLayouts) {
+        const ap = axisInfo.props;
+        const opacity = String(axisInfo.layout.opacity ?? 1);
+        if (ap.render) {
+          params.customTickOverlayRefs.get(axisKey)?.setAttribute("opacity", opacity);
+        }
+        if (ap.renderTick) {
+          params.customTickOverlayRefs.get(`${axisKey}-tick`)?.setAttribute("opacity", opacity);
+        }
+      }
+    }
+    return;
+  }
+  const ctx = canvas?.getContext("2d") ?? null;
+  const paintBg = phase === "all" || phase === "background";
+  const paintFg = phase === "all" || phase === "foreground";
+  const bracketTheme = {
+    bracketColor: resolveAxisColor(theme, 0),
+    groupLabelColor: theme.tickLabel,
+    defaultFontSize: resolveFontSize(DEFAULT_GROUP_LABEL_FONT_SIZE, globalFont),
+    defaultFontWeight: DEFAULT_GROUP_LABEL_FONT_WEIGHT,
+    defaultFontFamily: resolveFontFamily(void 0, globalFont)
+  };
+  if (paintBg) {
+    if (ctx && canvas && phase === "all") {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    if (ctx) {
+      for (const [axisKey, axisInfo] of axisLayouts) {
+        if (gridAxisKeys.has(axisKey) && axisInfo.layout.gridLines.length > 0) {
+          renderAxisCanvas(ctx, axisInfo.layout, { gridOnly: true, rtl }, theme, yAxisIndexMap.get(axisKey) ?? 0);
+        }
+      }
+    }
+    if (styledBoundaries && styledBoundaries.length > 0 && categoryScale && cartesianArea && ctx) {
+      renderFillsCanvas(ctx, computeCategoryFills(styledBoundaries, categoryScale, cartesianArea, orientation));
+    }
+    if (styledRangeBoundaries && styledRangeBoundaries.length > 0 && cartesianArea && valueDomain && valueScaleRange && ctx) {
+      renderFillsCanvas(ctx, computeRangeFills(styledRangeBoundaries, valueDomain, valueScaleRange, cartesianArea, orientation));
+    }
+    if (cartesianArea && ctx) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(cartesianArea.x, cartesianArea.y, cartesianArea.width, cartesianArea.height);
+      ctx.clip();
+      if (params.referenceBands && params.referenceBands.length > 0) {
+        const beforeBands = params.referenceBands.filter((b) => bandPlacement(b) === "beforeData");
+        const defaultBeforeBands = beforeBands.filter((b) => !b.render);
+        if (defaultBeforeBands.length > 0) {
+          renderReferenceBandsCanvas(ctx, computeReferenceBands(defaultBeforeBands, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont, theme);
+        }
+        for (let i = 0; i < beforeBands.length; i++) {
+          if (beforeBands[i].render) {
+            const geometries = computeReferenceBands([beforeBands[i]], axisLayouts, cartesianArea, categoryScale ?? null, orientation);
+            ctx.save();
+            beforeBands[i].render({ ...geometries[0], ctx });
+            ctx.restore();
+          }
+        }
+      }
+      if (params.referenceLines && params.referenceLines.length > 0) {
+        const beforeLines = params.referenceLines.filter((l) => linePlacement(l) === "beforeData");
+        const defaultBeforeLines = beforeLines.filter((l) => !l.render);
+        if (defaultBeforeLines.length > 0) {
+          renderReferenceLinesCanvas(ctx, computeReferenceLines(defaultBeforeLines, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont, theme);
+        }
+        for (let i = 0; i < beforeLines.length; i++) {
+          if (beforeLines[i].render) {
+            const geometries = computeReferenceLines([beforeLines[i]], axisLayouts, cartesianArea, categoryScale ?? null, orientation);
+            ctx.save();
+            beforeLines[i].render({ ...geometries[0], ctx });
+            ctx.restore();
+          }
+        }
+      }
+      ctx.restore();
+    }
+    if (cartesianArea && ctx) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(cartesianArea.x, cartesianArea.y, cartesianArea.width, cartesianArea.height);
+      ctx.clip();
+    }
+  }
+  if (paintFg) {
+    if (cartesianArea && ctx) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(cartesianArea.x, cartesianArea.y, cartesianArea.width, cartesianArea.height);
+      ctx.clip();
+      if (params.referenceBands && params.referenceBands.length > 0) {
+        const afterBands = params.referenceBands.filter((b) => bandPlacement(b) === "afterData");
+        const defaultAfterBands = afterBands.filter((b) => !b.render);
+        if (defaultAfterBands.length > 0) {
+          renderReferenceBandsCanvas(ctx, computeReferenceBands(defaultAfterBands, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont, theme);
+        }
+        for (let i = 0; i < afterBands.length; i++) {
+          if (afterBands[i].render) {
+            const geometries = computeReferenceBands([afterBands[i]], axisLayouts, cartesianArea, categoryScale ?? null, orientation);
+            ctx.save();
+            afterBands[i].render({ ...geometries[0], ctx });
+            ctx.restore();
+          }
+        }
+      }
+      if (params.referenceLines && params.referenceLines.length > 0) {
+        const afterLines = params.referenceLines.filter((l) => linePlacement(l) === "afterData");
+        const defaultAfterLines = afterLines.filter((l) => !l.render);
+        if (defaultAfterLines.length > 0) {
+          renderReferenceLinesCanvas(ctx, computeReferenceLines(defaultAfterLines, axisLayouts, cartesianArea, categoryScale ?? null, orientation), globalFont, theme);
+        }
+        for (let i = 0; i < afterLines.length; i++) {
+          if (afterLines[i].render) {
+            const geometries = computeReferenceLines([afterLines[i]], axisLayouts, cartesianArea, categoryScale ?? null, orientation);
+            ctx.save();
+            afterLines[i].render({ ...geometries[0], ctx });
+            ctx.restore();
+          }
+        }
+      }
+      ctx.restore();
+    }
+    if (cartesianArea && ctx) ctx.restore();
+    if (ctx) {
+      for (const [axisKey, axisInfo] of axisLayouts) {
+        const ap = axisInfo.props;
+        if (ap.visible === false) continue;
+        renderAxisCanvas(ctx, axisInfo.layout, { skipGrid: true, skipLabels: !!ap.render, skipAxisLine: ap.showLine === false, skipTicks: ap.showTicks === false, rtl }, theme, yAxisIndexMap.get(axisKey) ?? 0);
+      }
+    }
+    if (styledBoundaries && styledBoundaries.length > 0 && categoryScale && cartesianArea && ctx) {
+      renderBracketsCanvas(ctx, computeCategoryBracketGeometry(styledBoundaries, categoryScale, cartesianArea, categoryAxisSpace, orientation, bracketTheme));
+    }
+    if (styledRangeBoundaries && styledRangeBoundaries.length > 0 && cartesianArea && valueDomain && valueScaleRange && ctx) {
+      const primaryValAxisId = orientation === "vertical" ? "y" : "x";
+      const primaryValAxis = [...axisLayouts.values()].find((a) => a.axis === primaryValAxisId && a.isPrimary);
+      const hasAxisTitle = !!primaryValAxis?.props?.label;
+      renderBracketsCanvas(ctx, computeRangeBracketGeometry(styledRangeBoundaries, valueDomain, valueScaleRange, cartesianArea, valueAxisSpace, hasAxisTitle, orientation, bracketTheme));
+    }
+  }
+}
+function renderCartesianOverlay(params) {
+  const { canvas, axisLayouts, hover, registry, cartesianArea, onImageLoad, markerOverlays } = params;
+  renderCanvasOverlay({
+    canvas,
+    registry,
+    clipArea: cartesianArea,
+    draw: (ctx, createAnimate) => {
+      if (markerOverlays) {
+        renderCustomMarkersCanvas(ctx, markerOverlays, hover, {
+          createAnimate,
+          onImageLoad
+        });
+      }
+      if (cartesianArea) ctx.restore();
+      drawAxisOverlay(ctx, createAnimate, axisLayouts, onImageLoad);
+      if (cartesianArea) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(cartesianArea.x, cartesianArea.y, cartesianArea.width, cartesianArea.height);
+        ctx.clip();
+      }
+    }
+  });
+}
+function drawAxisOverlay(ctx, createAnimate, axisLayouts, onImageLoad) {
+  if (!axisLayouts) return;
+  for (const [axisKey, axisInfo] of axisLayouts) {
+    const renderFn = axisInfo.props.render;
+    if (renderFn) {
+      const effectiveOpacity = axisInfo.layout.opacity ?? 1;
+      if (effectiveOpacity > 0.01) {
+        ctx.save();
+        ctx.globalAlpha *= effectiveOpacity;
+        for (const tick of axisInfo.layout.ticks) {
+          const animate = createAnimate(`${axisKey}-label`, tick.tickIndex);
+          withCanvasState(ctx, () => {
+            ctx.translate(tick.labelX, tick.labelY);
+            if (tick.rotation) {
+              ctx.rotate(tick.rotation * Math.PI / 180);
+            }
+            renderFn({
+              value: tick.value,
+              label: tick.label,
+              index: tick.tickIndex,
+              position: axisInfo.layout.position,
+              x: tick.labelX,
+              y: tick.labelY,
+              ctx,
+              drawImage: createDrawImage(ctx, onImageLoad ?? (() => {
+              })),
+              animate
+            });
+          });
+        }
+        ctx.restore();
+      }
+    }
+    const renderTickFn = axisInfo.props.renderTick;
+    if (renderTickFn) {
+      const effectiveOpacity = axisInfo.layout.opacity ?? 1;
+      if (effectiveOpacity > 0.01) {
+        ctx.save();
+        ctx.globalAlpha *= effectiveOpacity;
+        for (const tick of axisInfo.layout.ticks) {
+          const animate = createAnimate(`${axisKey}-tick`, tick.tickIndex);
+          withCanvasState(ctx, () => {
+            ctx.translate(tick.x1, tick.y1);
+            renderTickFn({
+              value: tick.value,
+              label: tick.label,
+              index: tick.tickIndex,
+              position: axisInfo.layout.position,
+              x: tick.x1,
+              y: tick.y1,
+              ctx,
+              drawImage: createDrawImage(ctx, onImageLoad ?? (() => {
+              })),
+              animate
+            });
+          });
+        }
+        ctx.restore();
+      }
+    }
+  }
+}
+
+export { computeCategoryBracketGeometry, computeCategoryFills, computeRangeBracketGeometry, computeRangeFills, renderBracketsCanvas, renderBracketsSvg, renderCanvasOverlay, renderCartesianFrame, renderCartesianOverlay, renderFillsCanvas, renderFillsSvg, renderResolvedLabels };