react-scale-break-chart 0.1.0

package/dist/index.js

@@ -0,0 +1,686 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/ScaleBreakBarChart.tsx
+
+// src/utils.ts
+function computeAxisBreak(data, series, chartHeight, breakThreshold) {
+  if (data.length === 0 || series.length === 0) {
+    return { hasBreak: false, yMin: 0, lowerMax: 0, upperMin: 0, upperMax: 0, lowerPx: chartHeight, breakBandPx: 0, upperPx: 0, transitionPx: 0 };
+  }
+  const seriesMaxes = series.map(
+    (s) => Math.max(0, ...data.map((d) => Number(d[s.dataKey]) || 0))
+  );
+  const globalMax = Math.max(...seriesMaxes, 1);
+  const sortedDesc = [...seriesMaxes].sort((a, b) => b - a);
+  const largestSeriesMax = sortedDesc[0];
+  const secondLargestSeriesMax = sortedDesc[1] || 0;
+  const topDominant = series.length > 1 && secondLargestSeriesMax > 0 && largestSeriesMax / secondLargestSeriesMax > breakThreshold;
+  const sortedAsc = [...seriesMaxes].filter((v) => v > 0).sort((a, b) => a - b);
+  const bottomDwarfed = sortedAsc.length >= 2 && sortedAsc[0] > 0 && sortedAsc[1] / sortedAsc[0] > breakThreshold;
+  if (!topDominant && !bottomDwarfed) {
+    const allValues = data.flatMap(
+      (d) => series.map((s) => Number(d[s.dataKey]) || 0)
+    ).filter((v) => v > 0);
+    const globalMin = allValues.length > 0 ? Math.min(...allValues) : 0;
+    let yMin = 0;
+    let yMax = globalMax;
+    if (globalMin > 0 && globalMax > 0 && globalMin / globalMax > 0.8) {
+      const dataRange = globalMax - globalMin;
+      if (dataRange > 0) {
+        yMin = globalMin - dataRange * 1.5;
+        yMax = globalMax + dataRange * 0.8;
+      } else {
+        yMin = globalMin * 0.95;
+        yMax = globalMax * 1.05;
+      }
+      yMin = Math.max(0, yMin);
+      const snapMag = Math.pow(10, Math.floor(Math.log10(Math.max(dataRange, yMax * 0.01))));
+      yMin = Math.floor(yMin / snapMag) * snapMag;
+    } else {
+      yMax = globalMax * 1.05;
+    }
+    return { hasBreak: false, yMin, lowerMax: yMax, upperMin: yMax, upperMax: yMax, lowerPx: chartHeight, breakBandPx: 0, upperPx: 0, transitionPx: 0 };
+  }
+  let lowerMax;
+  if (bottomDwarfed && topDominant) {
+    lowerMax = Math.min(sortedAsc[0] * 1.5, secondLargestSeriesMax * 1.3);
+  } else if (bottomDwarfed) {
+    lowerMax = sortedAsc[0] * 1.5;
+  } else {
+    lowerMax = secondLargestSeriesMax * 1.3;
+  }
+  const dominantIdx = seriesMaxes.indexOf(Math.max(...seriesMaxes));
+  const dominantValues = data.map((d) => Number(d[series[dominantIdx].dataKey]) || 0).filter((v) => v > lowerMax);
+  let upperMin = lowerMax;
+  if (dominantValues.length > 1) {
+    const minDom = Math.min(...dominantValues);
+    const maxDom = Math.max(...dominantValues);
+    const domRange = maxDom - minDom;
+    if (domRange > 0 && minDom > 0 && domRange / minDom < 0.1) {
+      upperMin = minDom - domRange * 1.5;
+      const snapMag = Math.pow(10, Math.floor(Math.log10(Math.max(domRange, 1))));
+      upperMin = Math.floor(upperMin / snapMag) * snapMag;
+      upperMin = Math.max(upperMin, lowerMax);
+    }
+  }
+  let computedUpperMax;
+  if (upperMin > lowerMax) {
+    const zoomedRange = globalMax - upperMin;
+    computedUpperMax = globalMax + zoomedRange * 0.15;
+  } else {
+    computedUpperMax = globalMax * 1.15;
+  }
+  const breakBandPx = 14;
+  const lowerPx = chartHeight * 0.4;
+  const upperPx = chartHeight - lowerPx - breakBandPx;
+  const transitionPx = upperMin > lowerMax ? upperPx * 0.15 : 0;
+  return {
+    hasBreak: true,
+    yMin: 0,
+    lowerMax,
+    upperMin,
+    upperMax: computedUpperMax,
+    lowerPx,
+    breakBandPx,
+    upperPx,
+    transitionPx
+  };
+}
+function computeGroupedLayouts(data, series, axisBreak) {
+  return data.map((point) => {
+    const bars = series.map((s, i) => {
+      const value = Number(point[s.dataKey]) || 0;
+      if (!axisBreak.hasBreak || value <= axisBreak.lowerMax) {
+        const range = axisBreak.lowerMax - axisBreak.yMin;
+        const height = range > 0 ? (value - axisBreak.yMin) / range * axisBreak.lowerPx : 0;
+        return {
+          seriesIndex: i,
+          value,
+          color: s.color,
+          totalHeight: Math.max(0, height),
+          lowerHeight: Math.max(0, height),
+          upperHeight: 0,
+          hasBreak: false
+        };
+      }
+      const lowerHeight = axisBreak.lowerPx;
+      const upperRange = axisBreak.upperMax - axisBreak.upperMin;
+      let upperHeight;
+      if (axisBreak.transitionPx > 0) {
+        const remainingPx = axisBreak.upperPx - axisBreak.transitionPx;
+        if (value <= axisBreak.upperMin) {
+          const gapRange = axisBreak.upperMin - axisBreak.lowerMax;
+          const gapFrac = gapRange > 0 ? (value - axisBreak.lowerMax) / gapRange : 1;
+          upperHeight = Math.sqrt(gapFrac) * axisBreak.transitionPx;
+        } else {
+          const zoomedFrac = upperRange > 0 ? (value - axisBreak.upperMin) / upperRange : 0;
+          upperHeight = axisBreak.transitionPx + zoomedFrac * remainingPx;
+        }
+      } else {
+        const upperFraction = upperRange > 0 ? Math.max(0, (value - axisBreak.upperMin) / upperRange) : 0;
+        upperHeight = upperFraction * axisBreak.upperPx;
+      }
+      const totalHeight = lowerHeight + axisBreak.breakBandPx + upperHeight;
+      return {
+        seriesIndex: i,
+        value,
+        color: s.color,
+        totalHeight,
+        lowerHeight,
+        upperHeight,
+        hasBreak: true
+      };
+    });
+    return { name: point.name, bars };
+  });
+}
+var PADDING_TOP = 12;
+var PADDING_BOTTOM = 10;
+var LEGEND_AREA_BASE = 36;
+var LEGEND_AREA_ROTATED_EXTRA = 40;
+var PADDING_RIGHT = 12;
+var BAR_GAP_RATIO = 0.15;
+var INNER_BAR_GAP = 3;
+var AXIS_LABEL_FONT_SIZE = 12;
+var VALUE_FONT_SIZE = 9;
+var Y_AXIS_WIDTH = 76;
+var ZIGZAG_OVERFLOW = 5;
+function computeYTicks(maxVal, tickCount, minVal = 0) {
+  if (maxVal <= minVal) return [minVal];
+  const range = maxVal - minVal;
+  const rough = range / (tickCount - 1);
+  const mag = Math.pow(10, Math.floor(Math.log10(rough)));
+  const nice = [1, 2, 2.5, 5, 10].find((n) => n * mag >= rough) || 10;
+  const step = nice * mag;
+  const ticks = [];
+  const start = Math.floor(minVal / step) * step;
+  for (let v = start; v <= maxVal + step * 0.01; v += step) {
+    ticks.push(v);
+  }
+  if (ticks.length > tickCount + 2) ticks.splice(tickCount + 2);
+  return ticks;
+}
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  return [
+    parseInt(h.substring(0, 2), 16),
+    parseInt(h.substring(2, 4), 16),
+    parseInt(h.substring(4, 6), 16)
+  ];
+}
+function darkenHex(hex, amount) {
+  const [r, g, b] = hexToRgb(hex);
+  const dr = Math.max(0, Math.round(r * (1 - amount)));
+  const dg = Math.max(0, Math.round(g * (1 - amount)));
+  const db = Math.max(0, Math.round(b * (1 - amount)));
+  return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
+}
+function luminance(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(
+    (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  );
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function contrastText(barColor) {
+  return luminance(barColor) > 0.4 ? "#1a1a1a" : "#f5f5f5";
+}
+function buildBreakPaths(x, yCenter, width, barColor, overflow = ZIGZAG_OVERFLOW, gap = 10, amplitude = 5, toothWidth = 12, slope = 6) {
+  const extX = x - overflow;
+  const extWidth = width + overflow * 2;
+  const teeth = Math.max(2, Math.ceil(extWidth / toothWidth));
+  const step = extWidth / teeth;
+  const slopePerPx = slope / extWidth;
+  const upperPts = [];
+  const yUpperLeft = yCenter - gap / 2;
+  upperPts.push({ x: extX, y: yUpperLeft });
+  for (let i = 0; i < teeth; i++) {
+    const midX = extX + step * i + step / 2;
+    const endX = extX + step * (i + 1);
+    const midSlope = (midX - extX) * slopePerPx;
+    const endSlope = (endX - extX) * slopePerPx;
+    upperPts.push({ x: midX, y: yUpperLeft - midSlope - amplitude });
+    upperPts.push({ x: endX, y: yUpperLeft - endSlope });
+  }
+  const lowerPts = [];
+  const yLowerLeft = yCenter + gap / 2;
+  lowerPts.push({ x: extX, y: yLowerLeft });
+  for (let i = 0; i < teeth; i++) {
+    const midX = extX + step * i + step / 2;
+    const endX = extX + step * (i + 1);
+    const midSlope = (midX - extX) * slopePerPx;
+    const endSlope = (endX - extX) * slopePerPx;
+    lowerPts.push({ x: midX, y: yLowerLeft - midSlope + amplitude });
+    lowerPts.push({ x: endX, y: yLowerLeft - endSlope });
+  }
+  const toPath = (pts) => `M ${pts[0].x} ${pts[0].y}` + pts.slice(1).map((p) => ` L ${p.x} ${p.y}`).join("");
+  const fillD = toPath(upperPts) + ` L ${lowerPts[lowerPts.length - 1].x} ${lowerPts[lowerPts.length - 1].y}` + [...lowerPts].reverse().slice(1).map((p) => ` L ${p.x} ${p.y}`).join("") + " Z";
+  return {
+    upper: toPath(upperPts),
+    lower: toPath(lowerPts),
+    fill: fillD,
+    fillColor: darkenHex(barColor, 0.25),
+    strokeColor: darkenHex(barColor, 0.4)
+  };
+}
+function ScaleBreakBarChart({
+  data,
+  series,
+  height = 350,
+  breakThreshold = 5,
+  formatValue = String,
+  className
+}) {
+  const isAutoHeight = height === "auto";
+  const containerRef = react.useRef(null);
+  const [containerWidth, setContainerWidth] = react.useState(0);
+  const [containerHeight, setContainerHeight] = react.useState(0);
+  const [hoveredBar, setHoveredBar] = react.useState(null);
+  const [tooltipPos, setTooltipPos] = react.useState(null);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+        if (isAutoHeight) setContainerHeight(entry.contentRect.height);
+      }
+    });
+    ro.observe(el);
+    const rect = el.getBoundingClientRect();
+    setContainerWidth(rect.width);
+    if (isAutoHeight) setContainerHeight(rect.height);
+    return () => ro.disconnect();
+  }, [isAutoHeight]);
+  const resolvedHeight = isAutoHeight ? containerHeight : height;
+  const svgHeight = resolvedHeight;
+  const chartLeft = Y_AXIS_WIDTH;
+  const chartWidth = containerWidth - chartLeft - PADDING_RIGHT;
+  const needsRotatedLabels = react.useMemo(() => {
+    const avgLabelLen = data.reduce((s, d) => s + d.name.length, 0) / (data.length || 1);
+    const periodCnt = data.length || 1;
+    const slotW = chartWidth / periodCnt;
+    const charPx = (periodCnt > 6 ? 9 : AXIS_LABEL_FONT_SIZE) * 0.55;
+    return avgLabelLen * charPx > slotW * 0.85;
+  }, [data, chartWidth]);
+  const legendArea = LEGEND_AREA_BASE + (needsRotatedLabels ? LEGEND_AREA_ROTATED_EXTRA : 0);
+  const chartAreaTop = PADDING_TOP;
+  const chartAreaBottom = svgHeight - PADDING_BOTTOM - legendArea;
+  const chartHeight = chartAreaBottom - chartAreaTop;
+  const axisBreak = react.useMemo(
+    () => computeAxisBreak(data, series, chartHeight, breakThreshold),
+    [data, series, chartHeight, breakThreshold]
+  );
+  const layouts = react.useMemo(
+    () => computeGroupedLayouts(data, series, axisBreak),
+    [data, series, axisBreak]
+  );
+  const lowerRegionBottom = chartAreaBottom;
+  const lowerRegionTop = chartAreaBottom - axisBreak.lowerPx;
+  const breakBandTop = lowerRegionTop - axisBreak.breakBandPx;
+  const lowerTicks = react.useMemo(
+    () => computeYTicks(axisBreak.lowerMax, axisBreak.hasBreak ? 6 : 8, axisBreak.yMin),
+    [axisBreak.lowerMax, axisBreak.hasBreak, axisBreak.yMin]
+  );
+  const upperTicks = react.useMemo(() => {
+    if (!axisBreak.hasBreak) return [];
+    const lo = axisBreak.upperMin;
+    const hi = axisBreak.upperMax;
+    const range = hi - lo;
+    if (range <= 0) return [];
+    const rough = range / 3;
+    const mag = Math.pow(10, Math.floor(Math.log10(rough)));
+    const nice = [1, 2, 2.5, 5, 10].find((n) => n * mag >= rough) || 10;
+    const step = nice * mag;
+    const ticks = [];
+    const start = Math.ceil(lo / step) * step;
+    for (let v = start; v <= hi + step * 0.01; v += step) {
+      if (v > lo) ticks.push(v);
+    }
+    return ticks;
+  }, [axisBreak]);
+  const valueToY = react.useCallback((value) => {
+    if (!axisBreak.hasBreak || value <= axisBreak.lowerMax) {
+      const range = axisBreak.lowerMax - axisBreak.yMin;
+      if (range === 0) return lowerRegionBottom;
+      return lowerRegionBottom - (value - axisBreak.yMin) / range * axisBreak.lowerPx;
+    }
+    const upperRange = axisBreak.upperMax - axisBreak.upperMin;
+    if (upperRange === 0) return breakBandTop;
+    if (axisBreak.transitionPx > 0) {
+      const remainingPx = axisBreak.upperPx - axisBreak.transitionPx;
+      const zoomedFrac = Math.max(0, (value - axisBreak.upperMin) / upperRange);
+      return breakBandTop - axisBreak.transitionPx - zoomedFrac * remainingPx;
+    }
+    const upperFraction = Math.max(0, (value - axisBreak.upperMin) / upperRange);
+    return breakBandTop - upperFraction * axisBreak.upperPx;
+  }, [axisBreak, lowerRegionBottom, breakBandTop]);
+  const periodCount = data.length || 1;
+  const groupSlotWidth = chartWidth / periodCount;
+  const groupBarArea = groupSlotWidth * (1 - BAR_GAP_RATIO);
+  const singleBarWidth = (groupBarArea - INNER_BAR_GAP * (series.length - 1)) / series.length;
+  const groupPadding = (groupSlotWidth - groupBarArea) / 2;
+  const handleMouseEnter = react.useCallback(
+    (period, bar, e) => {
+      setHoveredBar({ period, bar });
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (rect) setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    },
+    []
+  );
+  const handleMouseMove = react.useCallback((e) => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (rect) setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    setHoveredBar(null);
+    setTooltipPos(null);
+  }, []);
+  const fontFamily = "system-ui, -apple-system, sans-serif";
+  if (containerWidth === 0 || isAutoHeight && containerHeight === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: clsx__default.default("w-full", className), style: isAutoHeight ? { height: "100%", minHeight: 200 } : { height } });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: clsx__default.default("w-full", className), style: { position: "relative", ...isAutoHeight ? { height: "100%", minHeight: 200 } : { height } }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        width: containerWidth,
+        height: svgHeight,
+        viewBox: `0 0 ${containerWidth} ${svgHeight}`,
+        style: { userSelect: "none" },
+        children: [
+          lowerTicks.map((tick) => {
+            const yPx = valueToY(tick);
+            if (isNaN(yPx)) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: chartLeft - 6,
+                y: yPx,
+                textAnchor: "end",
+                dominantBaseline: "central",
+                fontSize: AXIS_LABEL_FONT_SIZE,
+                fill: "#999",
+                style: { pointerEvents: "none", fontFamily },
+                children: formatValue(tick)
+              },
+              `ylow-${tick}`
+            );
+          }),
+          upperTicks.map((tick) => {
+            const yPx = valueToY(tick);
+            if (yPx < chartAreaTop || yPx > chartAreaBottom) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: chartLeft - 6,
+                y: yPx,
+                textAnchor: "end",
+                dominantBaseline: "central",
+                fontSize: AXIS_LABEL_FONT_SIZE,
+                fill: "#999",
+                style: { pointerEvents: "none", fontFamily },
+                children: formatValue(tick)
+              },
+              `yupp-${tick}`
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: chartLeft,
+              y1: chartAreaTop,
+              x2: chartLeft,
+              y2: chartAreaBottom,
+              stroke: "#999",
+              strokeWidth: 1,
+              opacity: 0.3
+            }
+          ),
+          layouts.map((_group, gIdx) => {
+            const groupX = chartLeft + gIdx * groupSlotWidth;
+            return _group.bars.map((_bar, bIdx) => {
+              const barX = groupX + groupPadding + bIdx * (singleBarWidth + INNER_BAR_GAP);
+              const centerX = barX + singleBarWidth / 2;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: centerX,
+                  y1: chartAreaTop,
+                  x2: centerX,
+                  y2: chartAreaBottom,
+                  stroke: "#999",
+                  strokeWidth: 0.8,
+                  strokeDasharray: "4 4",
+                  opacity: 0.2
+                },
+                `vgrid-${gIdx}-${bIdx}`
+              );
+            });
+          }),
+          lowerTicks.map((tick, idx) => {
+            const yPx = valueToY(tick);
+            if (isNaN(yPx)) return null;
+            const isBaseline = idx === 0 || tick === 0;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: chartLeft,
+                y1: yPx,
+                x2: containerWidth - PADDING_RIGHT,
+                y2: yPx,
+                stroke: "#999",
+                strokeWidth: isBaseline ? 1 : 0.8,
+                strokeDasharray: isBaseline ? void 0 : "6 4",
+                opacity: isBaseline ? 0.4 : 0.2
+              },
+              `hgrid-low-${tick}`
+            );
+          }),
+          upperTicks.map((tick) => {
+            const yPx = valueToY(tick);
+            if (isNaN(yPx) || yPx < chartAreaTop || yPx > chartAreaBottom) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: chartLeft,
+                y1: yPx,
+                x2: containerWidth - PADDING_RIGHT,
+                y2: yPx,
+                stroke: "#999",
+                strokeWidth: 0.8,
+                strokeDasharray: "6 4",
+                opacity: 0.2
+              },
+              `hgrid-upp-${tick}`
+            );
+          }),
+          layouts.map((group, gIdx) => {
+            const groupX = chartLeft + gIdx * groupSlotWidth;
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+              group.bars.map((bar, bIdx) => {
+                const barX = groupX + groupPadding + bIdx * (singleBarWidth + INNER_BAR_GAP);
+                const isHovered = hoveredBar?.period === gIdx && hoveredBar?.bar === bIdx;
+                const anyHovered = hoveredBar !== null;
+                if (!bar.hasBreak) {
+                  const barTop2 = lowerRegionBottom - bar.lowerHeight;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "g",
+                    {
+                      onMouseEnter: (e) => handleMouseEnter(gIdx, bIdx, e),
+                      onMouseMove: handleMouseMove,
+                      onMouseLeave: handleMouseLeave,
+                      style: { cursor: "pointer", opacity: anyHovered && !isHovered ? 0.4 : 1, transition: "opacity 150ms ease" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "rect",
+                          {
+                            x: barX,
+                            y: barTop2,
+                            width: singleBarWidth,
+                            height: Math.max(bar.lowerHeight, 0),
+                            fill: bar.color,
+                            rx: 2
+                          }
+                        ),
+                        bar.lowerHeight >= 18 && singleBarWidth >= 30 && /* @__PURE__ */ jsxRuntime.jsx(
+                          "text",
+                          {
+                            x: barX + singleBarWidth / 2,
+                            y: barTop2 + bar.lowerHeight / 2,
+                            textAnchor: "middle",
+                            dominantBaseline: "central",
+                            fontSize: VALUE_FONT_SIZE,
+                            fill: contrastText(bar.color),
+                            opacity: 0.85,
+                            style: { pointerEvents: "none", fontFamily },
+                            fontWeight: 500,
+                            children: formatValue(bar.value)
+                          }
+                        )
+                      ]
+                    },
+                    bIdx
+                  );
+                }
+                const barTop = breakBandTop - bar.upperHeight;
+                const breakCenterY = lowerRegionTop - axisBreak.breakBandPx / 2;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "g",
+                  {
+                    onMouseEnter: (e) => handleMouseEnter(gIdx, bIdx, e),
+                    onMouseMove: handleMouseMove,
+                    onMouseLeave: handleMouseLeave,
+                    style: { cursor: "pointer", opacity: anyHovered && !isHovered ? 0.4 : 1, transition: "opacity 150ms ease" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "rect",
+                        {
+                          x: barX,
+                          y: barTop,
+                          width: singleBarWidth,
+                          height: Math.max(lowerRegionBottom - barTop, 0),
+                          fill: bar.color,
+                          rx: 2
+                        }
+                      ),
+                      (() => {
+                        const bp = buildBreakPaths(barX, breakCenterY, singleBarWidth, bar.color, ZIGZAG_OVERFLOW, axisBreak.breakBandPx * 0.45, 4, 10, 16);
+                        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: bp.fill, fill: bp.fillColor, opacity: 0.92 }),
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: bp.upper, fill: "none", stroke: bp.strokeColor, strokeWidth: 1.2, strokeLinejoin: "bevel", opacity: 0.7 }),
+                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: bp.lower, fill: "none", stroke: bp.strokeColor, strokeWidth: 1.2, strokeLinejoin: "bevel", opacity: 0.7 })
+                        ] });
+                      })(),
+                      singleBarWidth >= 30 && /* @__PURE__ */ jsxRuntime.jsx(
+                        "text",
+                        {
+                          x: barX + singleBarWidth / 2,
+                          y: barTop + bar.upperHeight * 0.5,
+                          textAnchor: "middle",
+                          dominantBaseline: "central",
+                          fontSize: VALUE_FONT_SIZE,
+                          fill: contrastText(bar.color),
+                          opacity: 0.85,
+                          style: { pointerEvents: "none", fontFamily },
+                          fontWeight: 500,
+                          children: formatValue(bar.value)
+                        }
+                      )
+                    ]
+                  },
+                  bIdx
+                );
+              }),
+              (() => {
+                const labelFontSize = periodCount > 8 ? 9 : periodCount > 6 ? 10 : AXIS_LABEL_FONT_SIZE;
+                if (needsRotatedLabels) {
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "text",
+                    {
+                      x: groupX + groupSlotWidth / 2,
+                      y: chartAreaBottom + 6,
+                      textAnchor: "end",
+                      fontSize: labelFontSize,
+                      fill: "#999",
+                      style: { pointerEvents: "none", fontFamily },
+                      transform: `rotate(-55, ${groupX + groupSlotWidth / 2}, ${chartAreaBottom + 6})`,
+                      children: group.name
+                    }
+                  );
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: groupX + groupSlotWidth / 2,
+                    y: chartAreaBottom + 14,
+                    textAnchor: "middle",
+                    fontSize: labelFontSize,
+                    fill: "#999",
+                    style: { pointerEvents: "none", fontFamily },
+                    children: group.name
+                  }
+                );
+              })()
+            ] }, group.name);
+          }),
+          axisBreak.hasBreak && (() => {
+            const breakY = lowerRegionTop - axisBreak.breakBandPx / 2;
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "line",
+                {
+                  x1: chartLeft,
+                  y1: breakY - 3,
+                  x2: chartLeft,
+                  y2: breakY + 3,
+                  stroke: "#fff",
+                  strokeWidth: 4
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: chartLeft - 4, y1: breakY - 3, x2: chartLeft + 4, y2: breakY - 1, stroke: "#888", strokeWidth: 1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: chartLeft - 4, y1: breakY + 1, x2: chartLeft + 4, y2: breakY + 3, stroke: "#888", strokeWidth: 1 })
+            ] });
+          })(),
+          (() => {
+            const LEGEND_ICON = 10;
+            const LEGEND_GAP = 6;
+            const LEGEND_PAD = 16;
+            const LEGEND_FONT = 10;
+            const charW = LEGEND_FONT * 0.58;
+            const itemWidths = series.map((s) => LEGEND_ICON + LEGEND_GAP + s.label.length * charW + LEGEND_PAD);
+            const totalW = itemWidths.reduce((a, b) => a + b, 0);
+            const startX = chartLeft + chartWidth / 2 - totalW / 2;
+            const legendY = svgHeight - legendArea / 2 + (needsRotatedLabels ? LEGEND_AREA_ROTATED_EXTRA / 2 : 0);
+            let curX = startX;
+            return series.map((s, i) => {
+              const x = curX;
+              curX += itemWidths[i];
+              return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: legendY - 5, width: LEGEND_ICON, height: LEGEND_ICON, rx: 2, fill: s.color }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "text",
+                  {
+                    x: x + LEGEND_ICON + LEGEND_GAP,
+                    y: legendY,
+                    dominantBaseline: "central",
+                    fontSize: LEGEND_FONT,
+                    fill: "#999",
+                    style: { pointerEvents: "none", fontFamily },
+                    children: s.label
+                  }
+                )
+              ] }, s.dataKey);
+            });
+          })()
+        ]
+      }
+    ),
+    hoveredBar !== null && tooltipPos && layouts[hoveredBar.period] && (() => {
+      const bar = layouts[hoveredBar.period].bars[hoveredBar.bar];
+      if (!bar) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            zIndex: 50,
+            pointerEvents: "none",
+            backgroundColor: "#fff",
+            border: "1px solid #e0e0e0",
+            borderRadius: 8,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+            padding: "12px",
+            fontSize: 14,
+            left: Math.min(tooltipPos.x + 12, containerWidth - 200),
+            top: Math.max(tooltipPos.y - 20, 0),
+            fontFamily
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontWeight: 600, marginBottom: 4 }, children: layouts[hoveredBar.period].name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: 10, height: 10, borderRadius: 2, backgroundColor: bar.color } }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#888" }, children: [
+                series[bar.seriesIndex].label,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, marginLeft: "auto", paddingLeft: 12 }, children: formatValue(bar.value) })
+            ] })
+          ]
+        }
+      );
+    })()
+  ] });
+}
+
+exports.ScaleBreakBarChart = ScaleBreakBarChart;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map