@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-ZTL2FQEW.mjs

@@ -0,0 +1,714 @@
+import { hasCollisions } from './chunk-R6Y3R7EW.mjs';
+import { measureTextWidth, measureFontMetrics, svgAnchorToCanvasAlign } from './chunk-XTVE4P3L.mjs';
+import { DEFAULT_TITLE_LABEL_GAP, resolveFontSize, DEFAULT_TITLE_FONT_SIZE, resolveFontFamily, resolveAxisColor, DEFAULT_TICK_LENGTH, DEFAULT_LABEL_PADDING, DEFAULT_TICK_FONT_SIZE } from './chunk-NKUYIWAP.mjs';
+import { defaultLightTheme } from './chunk-O2X6FF45.mjs';
+import { createSvgGroup, appendChild, createSvgRect, createSvgLine, setAttr, createSvgText, withCanvasState } from './chunk-SSLTFJ3U.mjs';
+import { crisp, detectTickUnit, isPeriodBoundary, formatTimeTick, generateIntervalTicks } from './chunk-RQ3CKQOX.mjs';
+
+// src/renderers/axis/geometry.ticks.ts
+function resolveTickStyle(style, axisColor, globalFont) {
+  return {
+    fontSize: style?.fontSize ?? resolveFontSize(DEFAULT_TICK_FONT_SIZE, globalFont),
+    fontFamily: resolveFontFamily(style?.fontFamily, globalFont),
+    fontWeight: style?.fontWeight !== void 0 ? String(style.fontWeight) : "normal",
+    color: style?.color ?? axisColor,
+    padding: style?.padding ?? DEFAULT_LABEL_PADDING,
+    tickLength: style?.tickLength ?? DEFAULT_TICK_LENGTH
+  };
+}
+function calculateMinorGridLines(majorPositions, count, isHorizontal, chartArea) {
+  if (majorPositions.length < 2 || count < 1) return [];
+  const { x, y, width, height } = chartArea;
+  const lines = [];
+  for (let i = 0; i < majorPositions.length - 1; i++) {
+    const start = majorPositions[i];
+    const end = majorPositions[i + 1];
+    const step = (end - start) / (count + 1);
+    for (let j = 1; j <= count; j++) {
+      const pos = start + step * j;
+      if (isHorizontal) {
+        lines.push({ x1: pos, y1: y, x2: pos, y2: y + height });
+      } else {
+        lines.push({ x1: x, y1: pos, x2: x + width, y2: pos });
+      }
+    }
+  }
+  return lines;
+}
+function calculateMinorTicks(minorPositions, position, chartArea, tickLength, tickInside) {
+  const { x, y, width, height } = chartArea;
+  const dir = tickInside ? -1 : 1;
+  return minorPositions.map((pos) => {
+    switch (position) {
+      case "bottom":
+        return { x1: pos, y1: y + height, x2: pos, y2: y + height + tickLength * dir };
+      case "top":
+        return { x1: pos, y1: y, x2: pos, y2: y - tickLength * dir };
+      case "left":
+        return { x1: x, y1: pos, x2: x - tickLength * dir, y2: pos };
+      case "right":
+        return { x1: x + width, y1: pos, x2: x + width + tickLength * dir, y2: pos };
+    }
+  });
+}
+function adjustForRotation(anchor, baseline, rotation, position) {
+  if (rotation === 0) return { anchor, baseline };
+  const isHorizontal = position === "top" || position === "bottom";
+  if (isHorizontal) {
+    if (position === "bottom") {
+      return { anchor: rotation < 0 ? "end" : "start", baseline: "middle" };
+    }
+    return { anchor: rotation < 0 ? "start" : "end", baseline: "middle" };
+  }
+  return { anchor, baseline: "middle" };
+}
+function calculateTicks(scale, position, chartArea, props, style, locale) {
+  const { x, y, width, height } = chartArea;
+  const axisLength = position === "top" || position === "bottom" ? width : height;
+  const userTickCount = props.tickCount;
+  const tickCount = userTickCount ?? Math.max(5, Math.min(15, Math.floor(axisLength / 40)));
+  const exactTickCount = userTickCount !== void 0;
+  const formatter = props.tickFormat;
+  const manualRotation = props.tickRotation ?? 0;
+  const rawTickStyle = props.tickStyle;
+  const tickStyleFn = typeof rawTickStyle === "function" ? rawTickStyle : void 0;
+  const baseProps = props;
+  const tl = style.tickLength;
+  const lp = style.padding;
+  const tickInside = (baseProps.tickPosition ?? "outside") === "inside";
+  const tickDir = tickInside ? -1 : 1;
+  const labelOff = (tickInside ? 0 : tl) + lp;
+  const isBand = typeof scale.bandwidth === "function";
+  const values = [];
+  if (isBand) {
+    const bandScale = scale;
+    const categories = bandScale.domain();
+    const bw = bandScale.bandwidth();
+    for (let i = 0; i < categories.length; i++) {
+      const cat = categories[i];
+      const catBw = bandScale.bandwidthAt?.(i) ?? bw;
+      values.push({ value: cat, pos: bandScale(cat) + catBw / 2 });
+    }
+  } else {
+    const linearScale = scale;
+    const isTimeAxis = baseProps.type === "time";
+    if (isTimeAxis) {
+      const ticks = linearScale.ticks(tickCount);
+      const tickUnit = detectTickUnit(ticks);
+      const timezone = baseProps.timezone;
+      const formatOverrides = baseProps.dateTimeFormats;
+      for (const ts of ticks) {
+        const boundary = isPeriodBoundary(ts, tickUnit);
+        const label = boundary ? formatTimeTick(ts, boundary, timezone, formatOverrides, locale) : formatTimeTick(ts, tickUnit, timezone, formatOverrides, locale);
+        values.push({ value: label, pos: linearScale(ts), raw: ts });
+      }
+      const dataFirst = linearScale.dataFirstTs;
+      const dataLast = linearScale.dataLastTs;
+      if (dataFirst != null && dataLast != null) {
+        const inRange = values.filter((v) => v.raw != null && v.raw >= dataFirst && v.raw <= dataLast);
+        if (inRange.length > 0) {
+          values.length = 0;
+          values.push(...inRange);
+        } else {
+          const boundary = isPeriodBoundary(dataLast, tickUnit);
+          const label = boundary ? formatTimeTick(dataLast, boundary, timezone, formatOverrides, locale) : formatTimeTick(dataLast, tickUnit, timezone, formatOverrides, locale);
+          values.length = 0;
+          values.push({ value: label, pos: linearScale(dataLast), raw: dataLast });
+        }
+      }
+    } else {
+      const interval = baseProps.tickInterval;
+      const rawTicks = interval !== void 0 ? generateIntervalTicks(linearScale.domain()[0], linearScale.domain()[1], interval) : linearScale.ticks(tickCount, exactTickCount);
+      for (const v of rawTicks) {
+        values.push({ value: v, pos: linearScale(v), raw: v });
+      }
+    }
+  }
+  const isH = position === "top" || position === "bottom";
+  const minBound = isH ? x : y;
+  const maxBound = isH ? x + width : y + height;
+  const filtered = values.filter(({ pos }) => pos >= minBound - 0.5 && pos <= maxBound + 0.5);
+  const isHorizontal = isH;
+  const hasCustomRender = !!baseProps.render;
+  const autoSkip = baseProps.autoSkip ?? true;
+  const userMinGridDistance = baseProps.minGridDistance;
+  const labelMinSpacing = baseProps.labelMinSpacing ?? 14;
+  let effectiveRotation = manualRotation;
+  let step = 1;
+  if (autoSkip && !hasCustomRender && filtered.length > 1) {
+    if (userMinGridDistance !== void 0) {
+      const maxTicks = Math.max(1, Math.floor(axisLength / userMinGridDistance));
+      step = Math.max(1, Math.ceil(filtered.length / maxTicks));
+    } else if (isHorizontal) {
+      const sampleLabel = formatter ? typeof formatter === "function" ? formatter(filtered[0].value, 0) : String(filtered[0].value) : formatValue(filtered[0].value, locale);
+      const sampleWidth = measureTextWidth(sampleLabel, style.fontSize, style.fontWeight, style.fontFamily);
+      const textHeight = style.fontSize * 1.2;
+      const footprint0 = sampleWidth;
+      const mgd0 = footprint0 + labelMinSpacing;
+      const maxTicks0 = Math.max(1, Math.floor(axisLength / mgd0));
+      const step0 = Math.max(1, Math.ceil(filtered.length / maxTicks0));
+      if (step0 === 1) {
+        if (manualRotation === 0 && (baseProps.autoRotate ?? true)) {
+          const preLabels = filtered.map((v, idx) => formatter ? typeof formatter === "function" ? formatter(v.value, idx) : String(v.value) : formatValue(v.value, locale));
+          if (hasCollisions(
+            preLabels,
+            filtered.map((v) => v.pos),
+            style.fontSize,
+            style.fontWeight,
+            style.fontFamily,
+            0,
+            labelMinSpacing,
+            true
+          )) {
+            effectiveRotation = baseProps.autoRotateAngle ?? -45;
+          }
+        }
+        step = 1;
+      } else if (manualRotation === 0 && (baseProps.autoRotate ?? true)) {
+        const rotAngle = baseProps.autoRotateAngle ?? -45;
+        const radians = Math.abs(rotAngle * Math.PI / 180);
+        const footprintR = sampleWidth * Math.cos(radians) + textHeight * Math.sin(radians);
+        const mgdR = footprintR + labelMinSpacing;
+        const maxTicksR = Math.max(1, Math.floor(axisLength / mgdR));
+        const stepR = Math.max(1, Math.ceil(filtered.length / maxTicksR));
+        if (stepR < step0) {
+          effectiveRotation = rotAngle;
+          step = stepR;
+        } else {
+          step = step0;
+        }
+      } else {
+        if (manualRotation !== 0) {
+          const radians = Math.abs(manualRotation * Math.PI / 180);
+          const footprintM = sampleWidth * Math.cos(radians) + textHeight * Math.sin(radians);
+          const mgdM = footprintM + labelMinSpacing;
+          const maxTicksM = Math.max(1, Math.floor(axisLength / mgdM));
+          step = Math.max(1, Math.ceil(filtered.length / maxTicksM));
+        } else {
+          step = step0;
+        }
+      }
+    } else {
+      const textHeight = style.fontSize * 1.2;
+      const mgd = textHeight + labelMinSpacing;
+      const maxTicks = Math.max(1, Math.floor(axisLength / mgd));
+      step = Math.max(1, Math.ceil(filtered.length / maxTicks));
+    }
+  }
+  const showFirst = baseProps.showFirstLabel ?? true;
+  const showLast = baseProps.showLastLabel ?? true;
+  const result = [];
+  for (let i = 0; i < filtered.length; i += step) {
+    const { value, pos } = filtered[i];
+    const isFirst = i === 0;
+    const isLast = i >= filtered.length - step;
+    const isHidden = isFirst && !showFirst || isLast && !showLast;
+    const label = isHidden ? "" : formatter ? typeof formatter === "function" ? formatter(value, i) : String(value) : formatValue(value, locale);
+    const perTickStyle = tickStyleFn ? tickStyleFn(value, i) : void 0;
+    let baseAnchor;
+    let baseBaseline;
+    let labelX;
+    let labelY;
+    let x1, y1, x2, y2;
+    switch (position) {
+      case "bottom":
+        x1 = pos;
+        y1 = y + height;
+        x2 = pos;
+        y2 = y + height + tl * tickDir;
+        labelX = Math.round(pos);
+        labelY = Math.round(y + height + labelOff);
+        baseAnchor = "middle";
+        baseBaseline = "top";
+        break;
+      case "top":
+        x1 = pos;
+        y1 = y;
+        x2 = pos;
+        y2 = y - tl * tickDir;
+        labelX = Math.round(pos);
+        labelY = Math.round(y - labelOff);
+        baseAnchor = "middle";
+        baseBaseline = "alphabetic";
+        break;
+      case "left":
+        x1 = x;
+        y1 = pos;
+        x2 = x - tl * tickDir;
+        y2 = pos;
+        labelX = Math.round(x - labelOff);
+        labelY = Math.round(pos);
+        baseAnchor = "end";
+        baseBaseline = "middle";
+        break;
+      case "right":
+        x1 = x + width;
+        y1 = pos;
+        x2 = x + width + tl * tickDir;
+        y2 = pos;
+        labelX = Math.round(x + width + labelOff);
+        labelY = Math.round(pos);
+        baseAnchor = "start";
+        baseBaseline = "middle";
+        break;
+    }
+    const { anchor, baseline } = adjustForRotation(baseAnchor, baseBaseline, effectiveRotation, position);
+    result.push({
+      value,
+      position: pos,
+      label,
+      x1,
+      y1,
+      x2,
+      y2,
+      labelX,
+      labelY,
+      anchor,
+      baseline,
+      rotation: effectiveRotation !== 0 ? effectiveRotation : void 0,
+      fontSize: perTickStyle?.fontSize ?? style.fontSize,
+      fontFamily: perTickStyle?.fontFamily ?? style.fontFamily,
+      fontWeight: perTickStyle?.fontWeight !== void 0 ? String(perTickStyle.fontWeight) : style.fontWeight,
+      labelColor: perTickStyle?.color ?? style.color,
+      tickColor: perTickStyle?.tickColor,
+      tickStrokeWidth: perTickStyle?.tickStrokeWidth,
+      tickIndex: i,
+      rawValue: filtered[i].raw
+    });
+  }
+  return result;
+}
+function formatValue(value, locale) {
+  if (typeof value === "number") {
+    return value.toLocaleString(locale, { maximumFractionDigits: 2 });
+  }
+  return String(value);
+}
+
+// src/renderers/axis/geometry.space.ts
+function calculateRotatedLabelSpace(labels, fontSize, fontWeight, fontFamily, rotation, isVertical) {
+  const radians = Math.abs(rotation * Math.PI / 180);
+  const sinR = Math.sin(radians);
+  const cosR = Math.cos(radians);
+  const textHeight = fontSize * 1.2;
+  let maxSpace = 0;
+  for (const label of labels) {
+    const textWidth = measureTextWidth(label, fontSize, fontWeight, fontFamily);
+    const needed = isVertical ? textWidth * cosR + textHeight * sinR : textWidth * sinR + textHeight * cosR;
+    if (needed > maxSpace) maxSpace = needed;
+  }
+  return maxSpace;
+}
+function calculateAxisSpace(position, hasTitle, optionsOrLabels, extraTitleOffset, globalFont) {
+  const options = Array.isArray(optionsOrLabels) ? { tickLabels: optionsOrLabels } : optionsOrLabels ?? {};
+  const style = resolveTickStyle(options.tickStyle, void 0, globalFont);
+  const isVertical = position === "left" || position === "right";
+  const isHorizontal = !isVertical;
+  let effectiveRotation = options.tickRotation ?? 0;
+  if (options.autoRotate && isHorizontal && options.tickLabels && options.tickLabels.length > 1 && options.tickPositions && effectiveRotation === 0) {
+    const labelMinSpacing = options.labelMinSpacing ?? 14;
+    if (hasCollisions(options.tickLabels, options.tickPositions, style.fontSize, style.fontWeight, style.fontFamily, 0, labelMinSpacing, true)) {
+      effectiveRotation = options.autoRotateAngle ?? -45;
+    }
+  }
+  let labelSize;
+  if (effectiveRotation !== 0 && options.tickLabels && options.tickLabels.length > 0) {
+    labelSize = calculateRotatedLabelSpace(options.tickLabels, style.fontSize, style.fontWeight, style.fontFamily, effectiveRotation, isVertical);
+  } else if (isVertical && options.tickLabels && options.tickLabels.length > 0) {
+    labelSize = 0;
+    for (const label of options.tickLabels) {
+      const w = measureTextWidth(label, style.fontSize, style.fontWeight, style.fontFamily);
+      if (w > labelSize) labelSize = w;
+    }
+  } else {
+    labelSize = style.fontSize;
+  }
+  const effectiveTickLength = options.showTicks === false ? 0 : style.tickLength;
+  const space = effectiveTickLength + style.padding + labelSize;
+  if (hasTitle) {
+    return space + (extraTitleOffset ?? 0) + (options.titleGap ?? DEFAULT_TITLE_LABEL_GAP) + resolveFontSize(DEFAULT_TITLE_FONT_SIZE, globalFont);
+  }
+  return space;
+}
+
+// src/renderers/axis/geometry.ts
+function resolveGridDash(style) {
+  switch (style) {
+    case "dashed":
+      return [6, 4];
+    case "dotted":
+      return [2, 3];
+    default:
+      return [];
+  }
+}
+function calculateAxisLayout(scale, position, chartArea, props, extraTitleOffset, globalFont, locale) {
+  const { x, y, width, height } = chartArea;
+  const isHorizontal = position === "top" || position === "bottom";
+  const axisColor = props.color;
+  const gridColor = props.gridColor;
+  const rawTickStyle = props.tickStyle;
+  const uniformStyle = typeof rawTickStyle === "function" ? void 0 : rawTickStyle;
+  const tickStyle = resolveTickStyle(uniformStyle, axisColor, globalFont);
+  const axisLine = isHorizontal ? { x1: x, y1: position === "bottom" ? y + height : y, x2: x + width, y2: position === "bottom" ? y + height : y } : { x1: position === "left" ? x : x + width, y1: y, x2: position === "left" ? x : x + width, y2: y + height };
+  const ticks = calculateTicks(scale, position, chartArea, props, tickStyle, locale);
+  const baseProps = props;
+  const gridLines = props.gridLines ? ticks.map((t) => isHorizontal ? { x1: t.position, y1: y, x2: t.position, y2: y + height } : { x1: x, y1: t.position, x2: x + width, y2: t.position }) : [];
+  const gridStyle = baseProps.gridStyle ?? "solid";
+  const gridWidth = baseProps.gridStrokeWidth ?? 1;
+  const gridOpacity = baseProps.gridOpacity ?? 1;
+  const minorGridEnabled = baseProps.minorGridLines ?? false;
+  const minorGridCount = baseProps.minorGridCount ?? 4;
+  let minorGridLinePositions = [];
+  if (minorGridEnabled && gridLines.length >= 2) {
+    const majorPositions = ticks.map((t) => t.position);
+    minorGridLinePositions = calculateMinorGridLines(majorPositions, minorGridCount, isHorizontal, chartArea);
+  }
+  const minorTicksEnabled = baseProps.minorTicks ?? false;
+  const tickInsideForMinor = (baseProps.tickPosition ?? "outside") === "inside";
+  let minorTickMarks = [];
+  if (minorTicksEnabled && minorGridLinePositions.length > 0) {
+    const minorPositions = minorGridLinePositions.map((line) => isHorizontal ? line.x1 : line.y1);
+    minorTickMarks = calculateMinorTicks(minorPositions, position, chartArea, baseProps.minorTickLength ?? 3, tickInsideForMinor);
+  }
+  const alternateColor = baseProps.alternateGridColor;
+  const alternateOpacity = baseProps.alternateGridOpacity ?? 0.05;
+  const alternateFillBands = [];
+  if (alternateColor && ticks.length >= 2) {
+    const positions = ticks.map((t) => t.position);
+    for (let i = 0; i < positions.length - 1; i++) {
+      if (i % 2 !== 0) continue;
+      const start = positions[i];
+      const end = positions[i + 1];
+      if (isHorizontal) {
+        alternateFillBands.push({ x: Math.min(start, end), y, width: Math.abs(end - start), height, color: alternateColor, opacity: alternateOpacity });
+      } else {
+        alternateFillBands.push({ x, y: Math.min(start, end), width, height: Math.abs(end - start), color: alternateColor, opacity: alternateOpacity });
+      }
+    }
+  }
+  const title = props.label ? calculateTitle(props.label, position, chartArea, ticks, tickStyle, extraTitleOffset, props.titleGap) : void 0;
+  return {
+    position,
+    axisLine,
+    ticks,
+    gridLines,
+    title,
+    tickStyle,
+    color: axisColor,
+    gridColor,
+    gridStyle,
+    gridStrokeWidth: gridWidth,
+    gridOpacity,
+    minorGridLines: minorGridLinePositions,
+    minorGridColor: baseProps.minorGridColor ?? gridColor,
+    minorGridStrokeWidth: baseProps.minorGridStrokeWidth ?? 0.5,
+    minorGridOpacity: baseProps.minorGridOpacity ?? 0.15,
+    minorGridStyle: baseProps.minorGridStyle ?? "solid",
+    minorTicks: minorTickMarks,
+    minorTickColor: baseProps.minorTickColor ?? axisColor,
+    minorTickStrokeWidth: baseProps.minorTickStrokeWidth ?? 1,
+    alternateFillBands,
+    titleFontSize: resolveFontSize(DEFAULT_TITLE_FONT_SIZE, globalFont),
+    fontFamily: resolveFontFamily(void 0, globalFont),
+    showLabels: baseProps.showLabels
+  };
+}
+function calculateTitle(text, position, chartArea, ticks, tickStyle, extraOffset = 0, titleGap = DEFAULT_TITLE_LABEL_GAP) {
+  const { x, y, width, height } = chartArea;
+  const isVertical = position === "left" || position === "right";
+  let labelExtent = 0;
+  if (ticks.length > 0) {
+    if (isVertical) {
+      for (const tick of ticks) {
+        const w = measureTextWidth(tick.label, tick.fontSize, tick.fontWeight, tick.fontFamily);
+        if (w > labelExtent) labelExtent = w;
+      }
+    } else {
+      if (ticks[0]?.rotation) {
+        for (const tick of ticks) {
+          const w = measureTextWidth(tick.label, tick.fontSize, tick.fontWeight, tick.fontFamily);
+          const h = Math.abs(w * Math.sin((tick.rotation ?? 0) * Math.PI / 180)) + tick.fontSize * Math.abs(Math.cos((tick.rotation ?? 0) * Math.PI / 180));
+          if (h > labelExtent) labelExtent = h;
+        }
+      } else {
+        labelExtent = tickStyle.fontSize;
+      }
+    }
+  }
+  const dynamicOffset = tickStyle.tickLength + tickStyle.padding + labelExtent + extraOffset + titleGap;
+  switch (position) {
+    case "bottom":
+      return { text, x: x + width / 2, y: y + height + dynamicOffset, rotation: 0 };
+    case "top":
+      return { text, x: x + width / 2, y: y - dynamicOffset, rotation: 0 };
+    case "left":
+      return { text, x: x - dynamicOffset, y: y + height / 2, rotation: -90 };
+    case "right":
+      return { text, x: x + width + dynamicOffset, y: y + height / 2, rotation: 90 };
+  }
+}
+
+// src/renderers/axis/svg.ts
+function renderAxisSvg(layout, theme = defaultLightTheme, options, axisIndex) {
+  const group = createSvgGroup();
+  const effectiveOpacity = layout.opacity ?? 1;
+  if (!options?.skipGrid) {
+    for (const band of layout.alternateFillBands) {
+      appendChild(group, createSvgRect(band.x, band.y, band.width, band.height, { class: "p-chart-band-fill", fill: band.color, opacity: band.opacity }));
+    }
+    if (layout.minorGridLines.length > 0) {
+      const minorAttrs = {
+        class: "p-chart-grid-line-minor",
+        "stroke-width": layout.minorGridStrokeWidth,
+        opacity: layout.minorGridOpacity,
+        stroke: layout.minorGridColor ?? theme.gridMinor
+      };
+      const minorDash = resolveGridDash(layout.minorGridStyle);
+      if (minorDash.length > 0) {
+        minorAttrs["stroke-dasharray"] = minorDash.join(" ");
+      }
+      for (const line of layout.minorGridLines) {
+        const w = layout.minorGridStrokeWidth;
+        appendChild(group, createSvgLine(crisp(line.x1, w), crisp(line.y1, w), crisp(line.x2, w), crisp(line.y2, w), minorAttrs));
+      }
+    }
+    if (layout.gridLines.length > 0) {
+      const gridAttrs = {
+        class: "p-chart-grid-line",
+        "stroke-width": layout.gridStrokeWidth,
+        opacity: layout.gridOpacity,
+        stroke: layout.gridColor ?? theme.grid
+      };
+      const dashArray = resolveGridDash(layout.gridStyle);
+      if (dashArray.length > 0) {
+        gridAttrs["stroke-dasharray"] = dashArray.join(" ");
+      }
+      for (const line of layout.gridLines) {
+        const w = layout.gridStrokeWidth;
+        const lineAttrs = line.opacity === void 0 ? gridAttrs : { ...gridAttrs, opacity: layout.gridOpacity * line.opacity };
+        appendChild(group, createSvgLine(crisp(line.x1, w), crisp(line.y1, w), crisp(line.x2, w), crisp(line.y2, w), lineAttrs));
+      }
+    }
+  }
+  if (options?.gridOnly) {
+    if (effectiveOpacity < 1) {
+      setAttr(group, "opacity", effectiveOpacity);
+    }
+    return group;
+  }
+  if (effectiveOpacity < 0.01) return group;
+  if (!options?.skipAxisLine) {
+    const al = layout.axisLine;
+    appendChild(
+      group,
+      createSvgLine(crisp(al.x1), crisp(al.y1), crisp(al.x2), crisp(al.y2), {
+        class: "p-chart-axis-line",
+        stroke: layout.color ?? resolveAxisColor(theme, axisIndex)
+      })
+    );
+  }
+  for (const tick of layout.ticks) {
+    if (!options?.skipTicks) {
+      const tickMarkAttrs = {
+        class: "p-chart-tick",
+        stroke: tick.tickColor ?? layout.color ?? resolveAxisColor(theme, axisIndex)
+      };
+      if (tick.tickStrokeWidth) {
+        tickMarkAttrs["stroke-width"] = tick.tickStrokeWidth;
+      }
+      const tw = tick.tickStrokeWidth ?? 1;
+      appendChild(group, createSvgLine(crisp(tick.x1, tw), crisp(tick.y1, tw), crisp(tick.x2, tw), crisp(tick.y2, tw), tickMarkAttrs));
+    }
+    if (!options?.skipLabels && layout.showLabels !== false) {
+      const { topToAlpha, midToAlpha } = measureFontMetrics(tick.fontSize, tick.fontFamily, tick.fontWeight);
+      const rawDy = tick.baseline === "top" ? topToAlpha : tick.baseline === "middle" ? midToAlpha : 0;
+      const finalY = Math.round(tick.labelY + rawDy);
+      const textAttrs = {
+        class: "p-chart-tick-label",
+        "text-anchor": tick.anchor,
+        "dominant-baseline": "auto",
+        fill: tick.labelColor ?? theme.tickLabel,
+        "font-size": tick.fontSize,
+        "font-family": tick.fontFamily,
+        "font-weight": tick.fontWeight
+      };
+      if (tick.opacity !== void 0 && tick.opacity < 1) {
+        textAttrs.opacity = tick.opacity;
+      }
+      if (tick.rotation) {
+        textAttrs.transform = `rotate(${tick.rotation}, ${tick.labelX}, ${finalY})`;
+      }
+      appendChild(group, createSvgText(tick.labelX, finalY, tick.label, textAttrs));
+    }
+  }
+  if (layout.minorTicks.length > 0) {
+    const minorTickAttrs = {
+      class: "p-chart-tick-minor",
+      "stroke-width": layout.minorTickStrokeWidth,
+      stroke: layout.minorTickColor ?? resolveAxisColor(theme, axisIndex)
+    };
+    for (const mt of layout.minorTicks) {
+      const mw = layout.minorTickStrokeWidth ?? 1;
+      appendChild(group, createSvgLine(crisp(mt.x1, mw), crisp(mt.y1, mw), crisp(mt.x2, mw), crisp(mt.y2, mw), minorTickAttrs));
+    }
+  }
+  if (layout.title) {
+    const { midToAlpha: titleMidToAlpha } = measureFontMetrics(layout.titleFontSize, layout.fontFamily, "bold");
+    const titleFinalY = Math.round(layout.title.y + titleMidToAlpha);
+    const attrs = {
+      class: "p-chart-axis-title",
+      "text-anchor": "middle",
+      "dominant-baseline": "auto",
+      fill: layout.color ?? resolveAxisColor(theme, axisIndex),
+      "font-weight": "bold",
+      "font-size": layout.titleFontSize,
+      "font-family": layout.fontFamily
+    };
+    if (options?.rtl) {
+      attrs.direction = "rtl";
+      attrs["unicode-bidi"] = "embed";
+    }
+    if (layout.title.rotation !== 0) {
+      attrs.transform = `rotate(${layout.title.rotation}, ${layout.title.x}, ${titleFinalY})`;
+    }
+    appendChild(group, createSvgText(layout.title.x, titleFinalY, layout.title.text, attrs));
+  }
+  if (effectiveOpacity < 1) {
+    setAttr(group, "opacity", effectiveOpacity);
+  }
+  return group;
+}
+
+// src/renderers/axis/canvas.ts
+function renderAxisCanvas(ctx, layout, options, theme = defaultLightTheme, axisIndex) {
+  withCanvasState(ctx, () => {
+    const effectiveOpacity = layout.opacity ?? 1;
+    if (effectiveOpacity < 0.01 && !options?.gridOnly) return;
+    ctx.globalAlpha *= effectiveOpacity;
+    if (!options?.skipGrid) {
+      for (const band of layout.alternateFillBands) {
+        withCanvasState(ctx, () => {
+          ctx.globalAlpha *= band.opacity;
+          ctx.fillStyle = band.color;
+          ctx.fillRect(band.x, band.y, band.width, band.height);
+        });
+      }
+      if (layout.minorGridLines.length > 0) {
+        withCanvasState(ctx, () => {
+          ctx.strokeStyle = layout.minorGridColor ?? theme.gridMinor;
+          ctx.lineWidth = layout.minorGridStrokeWidth;
+          ctx.globalAlpha *= layout.minorGridOpacity;
+          ctx.setLineDash(resolveGridDash(layout.minorGridStyle));
+          ctx.beginPath();
+          for (const line of layout.minorGridLines) {
+            ctx.moveTo(crisp(line.x1, layout.minorGridStrokeWidth), crisp(line.y1, layout.minorGridStrokeWidth));
+            ctx.lineTo(crisp(line.x2, layout.minorGridStrokeWidth), crisp(line.y2, layout.minorGridStrokeWidth));
+          }
+          ctx.stroke();
+        });
+      }
+      if (layout.gridLines.length > 0) {
+        withCanvasState(ctx, () => {
+          ctx.strokeStyle = layout.gridColor ?? theme.grid;
+          ctx.lineWidth = layout.gridStrokeWidth;
+          ctx.globalAlpha *= layout.gridOpacity;
+          ctx.setLineDash(resolveGridDash(layout.gridStyle));
+          const hasPerLineOpacity = layout.gridLines.some((l) => l.opacity !== void 0);
+          if (!hasPerLineOpacity) {
+            ctx.beginPath();
+            for (const line of layout.gridLines) {
+              ctx.moveTo(crisp(line.x1, layout.gridStrokeWidth), crisp(line.y1, layout.gridStrokeWidth));
+              ctx.lineTo(crisp(line.x2, layout.gridStrokeWidth), crisp(line.y2, layout.gridStrokeWidth));
+            }
+            ctx.stroke();
+          } else {
+            const baseAlpha = ctx.globalAlpha;
+            for (const line of layout.gridLines) {
+              ctx.globalAlpha = line.opacity === void 0 ? baseAlpha : baseAlpha * line.opacity;
+              ctx.beginPath();
+              ctx.moveTo(crisp(line.x1, layout.gridStrokeWidth), crisp(line.y1, layout.gridStrokeWidth));
+              ctx.lineTo(crisp(line.x2, layout.gridStrokeWidth), crisp(line.y2, layout.gridStrokeWidth));
+              ctx.stroke();
+            }
+          }
+        });
+      }
+    }
+    if (options?.gridOnly) return;
+    if (!options?.skipAxisLine) {
+      ctx.strokeStyle = layout.color ?? resolveAxisColor(theme, axisIndex);
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(crisp(layout.axisLine.x1), crisp(layout.axisLine.y1));
+      ctx.lineTo(crisp(layout.axisLine.x2), crisp(layout.axisLine.y2));
+      ctx.stroke();
+    }
+    if (!options?.skipTicks) {
+      for (const tick of layout.ticks) {
+        const markColor = tick.tickColor ?? layout.color ?? resolveAxisColor(theme, axisIndex);
+        const markWidth = tick.tickStrokeWidth ?? 1;
+        ctx.strokeStyle = markColor;
+        ctx.lineWidth = markWidth;
+        ctx.beginPath();
+        ctx.moveTo(crisp(tick.x1, markWidth), crisp(tick.y1, markWidth));
+        ctx.lineTo(crisp(tick.x2, markWidth), crisp(tick.y2, markWidth));
+        ctx.stroke();
+      }
+    }
+    if (layout.minorTicks.length > 0) {
+      ctx.strokeStyle = layout.minorTickColor ?? resolveAxisColor(theme, axisIndex);
+      ctx.lineWidth = layout.minorTickStrokeWidth;
+      ctx.beginPath();
+      for (const mt of layout.minorTicks) {
+        ctx.moveTo(crisp(mt.x1, layout.minorTickStrokeWidth), crisp(mt.y1, layout.minorTickStrokeWidth));
+        ctx.lineTo(crisp(mt.x2, layout.minorTickStrokeWidth), crisp(mt.y2, layout.minorTickStrokeWidth));
+      }
+      ctx.stroke();
+    }
+    if (!options?.skipLabels && layout.showLabels !== false) {
+      const labelBaseAlpha = ctx.globalAlpha;
+      for (const tick of layout.ticks) {
+        const { topToAlpha, midToAlpha } = measureFontMetrics(tick.fontSize, tick.fontFamily, tick.fontWeight);
+        const rawDy = tick.baseline === "top" ? topToAlpha : tick.baseline === "middle" ? midToAlpha : 0;
+        const finalY = Math.round(tick.labelY + rawDy);
+        ctx.fillStyle = tick.labelColor ?? theme.tickLabel;
+        ctx.font = `${tick.fontWeight} ${tick.fontSize}px ${tick.fontFamily}`;
+        ctx.textAlign = svgAnchorToCanvasAlign(tick.anchor);
+        ctx.textBaseline = "alphabetic";
+        ctx.globalAlpha = tick.opacity === void 0 ? labelBaseAlpha : labelBaseAlpha * tick.opacity;
+        if (tick.rotation) {
+          ctx.save();
+          ctx.translate(tick.labelX, finalY);
+          ctx.rotate(tick.rotation * Math.PI / 180);
+          ctx.fillText(tick.label, 0, 0);
+          ctx.restore();
+        } else {
+          ctx.fillText(tick.label, tick.labelX, finalY);
+        }
+      }
+      ctx.globalAlpha = labelBaseAlpha;
+    }
+    if (layout.title) {
+      const { midToAlpha: titleMidToAlpha } = measureFontMetrics(layout.titleFontSize, layout.fontFamily, "bold");
+      const titleFinalY = Math.round(layout.title.y + titleMidToAlpha);
+      if (options?.rtl) ctx.direction = "rtl";
+      ctx.fillStyle = layout.color ?? resolveAxisColor(theme, axisIndex);
+      ctx.font = `bold ${layout.titleFontSize}px ${layout.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "alphabetic";
+      if (layout.title.rotation !== 0) {
+        ctx.save();
+        ctx.translate(layout.title.x, titleFinalY);
+        ctx.rotate(layout.title.rotation * Math.PI / 180);
+        ctx.fillText(layout.title.text, 0, 0);
+        ctx.restore();
+      } else {
+        ctx.fillText(layout.title.text, layout.title.x, titleFinalY);
+      }
+      if (options?.rtl) ctx.direction = "ltr";
+    }
+  });
+}
+
+export { calculateAxisLayout, calculateAxisSpace, renderAxisCanvas, renderAxisSvg };