@wipco/sdui 1.5.0 → 1.6.1

package/dist/rich/ExcelUploadCard.d.ts

@@ -1,4 +1,4 @@
-import { S as SduiBoxProps } from '../layout-C3nRXMwb.js';
+import { S as SduiBoxProps } from '../layout-DmRikwZb.js';
 import React__default from 'react';
 
 interface ExcelTemplateColumn {

package/dist/rich/ExcelUploadCard.js

@@ -1,7 +1,8 @@
-import { loadOptionalModule } from '../chunk-YVTV4ZV6.js';
-import { useSduiAdapter, useSduiSandbox, hostFetchOf, defaultAdapter, hostRawFetchOf } from '../chunk-KO6OEY3G.js';
-import { Select, Input, Card, Button, Spinner, Icon, Alert, StatCard, Badge, Table, EmptyState } from '../chunk-RNOUXUBO.js';
-import { boxed } from '../chunk-5WW4MBRO.js';
+import { loadOptionalModule } from '../chunk-4YPPL7JK.js';
+import { useSduiAdapter, useSduiSandbox, hostFetchOf, defaultAdapter, hostRawFetchOf } from '../chunk-JHFA5RDN.js';
+import '../chunk-GSM664TX.js';
+import { Select, Input, Card, Button, Spinner, Icon, Alert, StatCard, Badge, Table, EmptyState } from '../chunk-YYAGE733.js';
+import { boxed } from '../chunk-3JTBOABA.js';
 import { useRef, useState, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/rich.d.ts

@@ -1,6 +1,6 @@
 import React__default from 'react';
-export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue, e as TimePicker, T as TimePickerProps } from './DatePicker-C_TT_SOw.js';
-import './layout-C3nRXMwb.js';
+export { b as DatePicker, D as DatePickerProps, c as DateRangePicker, a as DateRangePickerProps, d as DateRangeValue, e as TimePicker, T as TimePickerProps } from './DatePicker-DX9juElE.js';
+import './layout-DmRikwZb.js';
 
 /**
  * Chart — 선언형 recharts 래퍼 (ERP `app/components/widgets/Chart.tsx` 이식).
@@ -26,6 +26,11 @@ interface ChartSeries {
     kind?: 'bar' | 'line' | 'dashed-line';
     /** 같은 문자열끼리 막대를 쌓는다 (stackId). */
     stack?: string;
+    /**
+     * 카르테시안 전용: 어느 y축에 그릴지. 기본 'left'. 단위가 다른 시리즈(원 막대 + km 선)를
+     * 한 축에 그리면 작은 쪽이 0에 붙는다 — 'right'를 주면 오른쪽 보조축이 생긴다.
+     */
+    axis?: 'left' | 'right';
 }
 interface ChartProps {
     type: ChartType;
@@ -59,8 +64,22 @@ interface ChartProps {
     };
     /** 데이터가 없을 때 보여줄 문구. */
     emptyText?: string;
+    /** 오른쪽 보조축(시리즈 axis:'right')의 값 포맷. 기본 'number'. 툴팁도 그 시리즈에는 이 포맷을 쓴다. */
+    rightValueFormat?: ChartValueFormat;
+    /**
+     * y축 눈금을 정수만 쓸지. 생략하면 축마다 자동 — 그 축에 그리는 값이 전부 정수(건수·인원)면
+     * 정수 눈금만 쓴다(0.3명·0.5건 같은 눈금이 나오지 않게). true/false는 두 축 모두에 강제한다.
+     */
+    integer?: boolean;
+    /**
+     * x축 범주 라벨을 **모두** 보인다. 긴 라벨은 칸 폭에 맞춰 줄을 바꾸고(최대 3줄),
+     * 그래도 모자라면 45° 기울인다(첫 라벨들이 왼쪽 밖으로 잘리지 않게 왼쪽 여백을 늘린다).
+     * 칸이 그보다도 좁으면 겹치는 라벨만 건너뛴다(기본 동작).
+     * 끄면(기본) recharts가 겹치는 라벨을 건너뛴다 — 본부명처럼 긴 범주에서 라벨이 사라진다.
+     */
+    xTickWrap?: boolean;
 }
-declare function Chart({ type, data, xKey, series, height, valueFormat, legend, legendPlacement, legendTotal, donutCenter, emptyText, }: ChartProps): React__default.JSX.Element;
+declare function Chart({ type, data, xKey, series, height, valueFormat, legend, legendPlacement, legendTotal, donutCenter, emptyText, rightValueFormat, integer, xTickWrap, }: ChartProps): React__default.JSX.Element;
 
 /**
  * MapPreview — OpenLayers 기반 위치 미리보기 지도 (ERP `app/components/widgets/MapPreview.tsx` 이식).

package/dist/rich.js

@@ -1,10 +1,11 @@
-import { useOptionalModule, DependencyPlaceholder } from './chunk-YVTV4ZV6.js';
-export { DatePicker, DateRangePicker, TimePicker } from './chunk-RWSH2MBU.js';
+import { useOptionalModule, DependencyPlaceholder } from './chunk-4YPPL7JK.js';
+export { DatePicker, DateRangePicker, TimePicker } from './chunk-FP32LNFK.js';
+import './chunk-BITS7UJY.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import './chunk-XQPTSEJC.js';
-import { useSduiAssetResolver } from './chunk-KO6OEY3G.js';
-import { Spinner, EmptyState } from './chunk-RNOUXUBO.js';
-import './chunk-5WW4MBRO.js';
+import { useSduiAssetResolver } from './chunk-JHFA5RDN.js';
+import './chunk-GSM664TX.js';
+import { Spinner, EmptyState } from './chunk-YYAGE733.js';
+import './chunk-3JTBOABA.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -47,24 +48,165 @@ function useSeriesPalette(ref) {
   return palette;
 }
 var formatNumber = (v) => v.toLocaleString("ko-KR", { maximumFractionDigits: 1 });
+var eokText = (abs) => {
+  const eok = abs / 1e8;
+  return `${eok.toLocaleString("ko-KR", { maximumFractionDigits: eok >= 100 ? 0 : 1 })}\uC5B5`;
+};
+var manText = (abs) => {
+  const man = abs / 1e4;
+  return `${man.toLocaleString("ko-KR", { maximumFractionDigits: man >= 100 ? 0 : 1 })}\uB9CC`;
+};
 var formatCurrency = (v) => {
   const sign = v < 0 ? "-" : "";
   const abs = Math.abs(v);
-  if (abs >= 1e8) {
-    const eok = abs / 1e8;
-    return `${sign}${eok.toLocaleString("ko-KR", { maximumFractionDigits: eok >= 100 ? 0 : 1 })}\uC5B5`;
-  }
-  if (abs >= 1e4) {
-    return `${sign}${Math.round(abs / 1e4).toLocaleString("ko-KR")}\uB9CC`;
-  }
+  if (abs >= 1e8) return `${sign}${eokText(abs)}`;
+  if (abs >= 1e4) return `${sign}${manText(abs)}`;
   return `${sign}${abs.toLocaleString("ko-KR")}`;
 };
+var currencyAxisFormatter = (maxAbs) => {
+  if (!(maxAbs >= 1e5)) return (v) => v.toLocaleString("ko-KR", { maximumFractionDigits: 1 });
+  return (v) => {
+    const abs = Math.abs(v);
+    if (abs === 0) return "0";
+    const sign = v < 0 ? "-" : "";
+    return `${sign}${abs >= 1e8 ? eokText(abs) : manText(abs)}`;
+  };
+};
 var formatPercent = (v) => `${v.toLocaleString("ko-KR", { maximumFractionDigits: 1 })}%`;
 var getFormatter = (format) => {
   if (format === "currency") return formatCurrency;
   if (format === "percent") return formatPercent;
   return formatNumber;
 };
+var axisFormatter = (format, extent) => format === "currency" ? currencyAxisFormatter(extent.maxAbs) : getFormatter(format);
+function axisExtent(rows, series) {
+  let maxAbs = 0;
+  let allInteger = true;
+  for (const row of rows) {
+    if (row === null || typeof row !== "object") continue;
+    const positive = /* @__PURE__ */ new Map();
+    const negative = /* @__PURE__ */ new Map();
+    for (const s of series) {
+      const raw = row[s.key];
+      if (raw === null || raw === void 0 || raw === "" || typeof raw === "boolean") continue;
+      const n = Number(raw);
+      if (!Number.isFinite(n)) continue;
+      if (!Number.isInteger(n)) allInteger = false;
+      if (s.stack) {
+        const bucket = n >= 0 ? positive : negative;
+        bucket.set(s.stack, (bucket.get(s.stack) ?? 0) + n);
+      } else {
+        maxAbs = Math.max(maxAbs, Math.abs(n));
+      }
+    }
+    for (const total of [...positive.values(), ...negative.values()]) {
+      maxAbs = Math.max(maxAbs, Math.abs(total));
+    }
+  }
+  return { maxAbs, allInteger };
+}
+function estimateTextWidth(text, fontSize = 12) {
+  let w = 0;
+  for (const ch of text) {
+    if (/\s/.test(ch)) w += fontSize * 0.3;
+    else if (/[\u1100-\u11ff\u3000-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/.test(ch)) w += fontSize;
+    else w += fontSize * 0.6;
+  }
+  return w;
+}
+function wrapLabel(label, maxWidth, measure) {
+  const text = label.trim();
+  if (!text) return [""];
+  if (!(maxWidth > 0) || measure(text) <= maxWidth) return [text];
+  const lines = [];
+  let line = "";
+  const push = () => {
+    if (line.trim()) lines.push(line.trim());
+    line = "";
+  };
+  for (const word of text.split(/(\s+)/)) {
+    if (!word) continue;
+    const candidate = line + word;
+    if (measure(candidate.trim()) <= maxWidth) {
+      line = candidate;
+      continue;
+    }
+    if (/^\s+$/.test(word)) {
+      push();
+      continue;
+    }
+    push();
+    if (measure(word) <= maxWidth) {
+      line = word;
+      continue;
+    }
+    const chars = [...word];
+    const total = measure(word);
+    const parts = Math.ceil(total / maxWidth);
+    let acc = 0;
+    let boundary = total / parts;
+    for (const ch of chars) {
+      const w = measure(ch);
+      if (line && acc + w / 2 > boundary + 0.01) {
+        push();
+        boundary += total / parts;
+      }
+      line += ch;
+      acc += w;
+    }
+  }
+  push();
+  return lines.length > 0 ? lines : [text];
+}
+var TICK_FONT = 12;
+var TICK_LINE_H = 14;
+var MAX_TICK_LINES = 3;
+function planXTicks(labels, bandWidth, measure) {
+  if (!(bandWidth > 0) || labels.length === 0) return { mode: "skip" };
+  const room = Math.max(0, bandWidth - 6);
+  const lines = /* @__PURE__ */ new Map();
+  let maxLines = 1;
+  let fits = room >= TICK_FONT;
+  for (const label of labels) {
+    const wrapped = wrapLabel(label, room, measure);
+    lines.set(label.trim(), wrapped);
+    maxLines = Math.max(maxLines, wrapped.length);
+    if (wrapped.some((line) => measure(line) > room + TICK_FONT / 2)) fits = false;
+  }
+  if (fits && maxLines <= MAX_TICK_LINES) {
+    return { mode: "wrap", lines, height: Math.ceil(8 + maxLines * TICK_LINE_H + 4) };
+  }
+  if (bandWidth * Math.SQRT1_2 >= TICK_FONT * 1.25) {
+    const longest = Math.max(...labels.map((label) => measure(label)));
+    return { mode: "rotate", height: Math.ceil(8 + (longest + TICK_FONT) * Math.SQRT1_2 + 4) };
+  }
+  return { mode: "skip" };
+}
+var ROTATE_EDGE_PAD = 2;
+function rotatedTickInset(widths, axisWidth, span, point = false) {
+  const n = widths.length;
+  if (n === 0 || !(span > 0)) return 0;
+  let inset = 0;
+  widths.forEach((width, i) => {
+    const f = point ? n > 1 ? i / (n - 1) : 0.5 : (i + 0.5) / n;
+    if (f >= 1) return;
+    const reach = (width + TICK_FONT / 2) * Math.SQRT1_2 + ROTATE_EDGE_PAD;
+    const need = (reach - axisWidth - span * f) / (1 - f);
+    if (need > inset) inset = need;
+  });
+  return Math.ceil(inset);
+}
+var ROTATE_MIN_BAND = TICK_FONT * 1.25 / Math.SQRT1_2;
+function planXTicksWithInset(labels, span, axisWidth, measure, point = false) {
+  const count = Math.max(1, labels.length);
+  const plan = planXTicks(labels, span / count, measure);
+  if (plan.mode !== "rotate") return { plan, inset: 0 };
+  const want = rotatedTickInset(labels.map((label) => measure(label)), axisWidth, span, point);
+  const inset = Math.max(0, Math.min(want, Math.floor(span - count * ROTATE_MIN_BAND)));
+  if (inset === 0) return { plan, inset: 0 };
+  const narrowed = planXTicks(labels, (span - inset) / count, measure);
+  return narrowed.mode === "rotate" ? { plan: narrowed, inset } : { plan, inset: 0 };
+}
 var tooltipBoxStyle = {
   background: "var(--wp-surface-card)",
   border: "1px solid var(--wp-border-subtle)",
@@ -80,7 +222,7 @@ var dotStyle = (color) => ({
   background: color,
   flexShrink: 0
 });
-function renderTooltipContent(props, format) {
+function renderTooltipContent(props, formatOf) {
   const { active, payload, label } = props;
   if (!active || !payload || payload.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { style: tooltipBoxStyle, children: [
@@ -88,7 +230,7 @@ function renderTooltipContent(props, format) {
     /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 2 }, children: payload.filter((entry) => entry.type !== "none").map((entry, i) => {
       const fillFromDatum = entry.payload !== null && typeof entry.payload === "object" ? entry.payload.fill : void 0;
       const color = entry.color ?? fillFromDatum ?? "var(--wp-text-muted)";
-      const value = typeof entry.value === "number" ? format(entry.value) : String(entry.value ?? "");
+      const value = typeof entry.value === "number" ? formatOf(entry)(entry.value) : String(entry.value ?? "");
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -169,6 +311,9 @@ function SliceLegendTable({
       style: {
         flex: "none",
         minWidth: 148,
+        // 차트 옆 한 줄에서는 차트가 남는 폭을 다 먹어 여백이 0이다. 좁아서 아래 줄로
+        // 내려가면(wp-chart__split 이 wrap) 혼자 남은 줄에서 가운데에 선다.
+        marginInline: "auto",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
@@ -208,7 +353,60 @@ function SliceLegendTable({
     }
   );
 }
+var measureCanvas;
+function makeMeasure(fontFamily) {
+  if (measureCanvas === void 0) {
+    try {
+      measureCanvas = typeof document !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+    } catch {
+      measureCanvas = null;
+    }
+  }
+  const ctx = measureCanvas;
+  if (!ctx || !fontFamily) return (text) => estimateTextWidth(text, TICK_FONT);
+  const font = `${TICK_FONT}px ${fontFamily}`;
+  return (text) => {
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  };
+}
+function useHostBox(ref, enabled) {
+  const [box, setBox] = useState({
+    width: 0,
+    fontFamily: null
+  });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || el === null) return;
+    const read = () => {
+      const width = Math.round(el.getBoundingClientRect().width);
+      const fontFamily = getComputedStyle(el).fontFamily || null;
+      setBox((prev) => prev.width === width && prev.fontFamily === fontFamily ? prev : { width, fontFamily });
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
+  return box;
+}
 var axisTick = { fill: "var(--wp-text-muted)", fontSize: 12 };
+var SIDE_LEGEND_CHART_MIN = 96;
+function renderCategoryTick(plan) {
+  const CategoryTick = (props) => {
+    const x = Number(props.x) || 0;
+    const y = Number(props.y) || 0;
+    const label = String(props.payload?.value ?? "");
+    const textStyle = { fill: axisTick.fill, fontSize: axisTick.fontSize };
+    if (plan.mode === "rotate") {
+      return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx("text", { x: 0, y: 0, dy: "0.71em", textAnchor: "end", transform: "rotate(-45)", style: textStyle, children: label }) });
+    }
+    const lines = plan.lines.get(label.trim()) ?? [label];
+    return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx("text", { x: 0, y: 0, textAnchor: "middle", style: textStyle, children: lines.map((line, i) => /* @__PURE__ */ jsx("tspan", { x: 0, dy: i === 0 ? "0.71em" : TICK_LINE_H, children: line }, i)) }) });
+  };
+  return CategoryTick;
+}
 function Chart({
   type,
   data,
@@ -220,11 +418,16 @@ function Chart({
   legendPlacement = "bottom",
   legendTotal,
   donutCenter,
-  emptyText
+  emptyText,
+  rightValueFormat = "number",
+  integer,
+  xTickWrap = false
 }) {
   const hostRef = useRef(null);
   const palette = useSeriesPalette(hostRef);
   const recharts = useOptionalModule(loadRecharts);
+  const cartesianType = type === "bar" || type === "line" || type === "composed";
+  const hostBox = useHostBox(hostRef, xTickWrap === true && cartesianType);
   const resolveColor = useCallback(
     (color, index) => {
       if (!color) return palette[index % palette.length];
@@ -270,7 +473,7 @@ function Chart({
     XAxis,
     YAxis
   } = recharts.module;
-  const tooltipContent = (props) => renderTooltipContent(props, format);
+  const tooltipContent = (props) => renderTooltipContent(props, () => format);
   if (type === "donut" || type === "pie") {
     const nameKey = xKey ?? "name";
     const valueKey = seriesList[0].key;
@@ -283,7 +486,7 @@ function Chart({
     const chartArea = /* @__PURE__ */ jsxs(
       "div",
       {
-        style: sideLegend ? { position: "relative", flex: "1 1 0%", minWidth: 0, height } : { position: "relative", width: "100%", height },
+        style: sideLegend ? { position: "relative", flex: `1 1 ${SIDE_LEGEND_CHART_MIN}px`, minWidth: 0, height } : { position: "relative", width: "100%", height },
         children: [
           /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
             /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent }),
@@ -333,17 +536,24 @@ function Chart({
       };
       const denomOverride = Number(legendTotal);
       return shell(
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "var(--wp-space-6)" }, children: [
-          chartArea,
-          /* @__PURE__ */ jsx(
-            SliceLegendTable,
-            {
-              rows: rows.map((row, i) => ({ ...legendItems2[i], value: sliceValue(row) })),
-              format,
-              total: legendTotal !== void 0 && Number.isFinite(denomOverride) ? denomOverride : void 0
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "wp-chart__split",
+            style: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--wp-space-6)" },
+            children: [
+              chartArea,
+              /* @__PURE__ */ jsx(
+                SliceLegendTable,
+                {
+                  rows: rows.map((row, i) => ({ ...legendItems2[i], value: sliceValue(row) })),
+                  format,
+                  total: legendTotal !== void 0 && Number.isFinite(denomOverride) ? denomOverride : void 0
+                }
+              )
+            ]
+          }
+        )
       );
     }
     return shell(
@@ -369,6 +579,25 @@ function Chart({
     color: resolveColor(s.color, i),
     dashed: kindOf(s) === "dashed-line"
   }));
+  const onRight = (s) => s.axis === "right";
+  const dual = seriesList.some(onRight) && seriesList.some((s) => !onRight(s));
+  const axisIdOf = (s) => dual ? onRight(s) ? "right" : "left" : void 0;
+  const extentOf = (list) => axisExtent(
+    rows,
+    list.map((s) => ({ key: s.key, stack: kindOf(s) === "bar" ? s.stack : void 0 }))
+  );
+  const leftExtent = extentOf(dual ? seriesList.filter((s) => !onRight(s)) : seriesList);
+  const rightExtent = dual ? extentOf(seriesList.filter(onRight)) : null;
+  const allowDecimals = (extent) => typeof integer === "boolean" ? !integer : !extent.allInteger;
+  const tickCountFor = (extent) => !allowDecimals(extent) && extent.maxAbs < 4 ? Math.max(2, Math.ceil(extent.maxAbs) + 1) : void 0;
+  const leftTickFormat = axisFormatter(valueFormat, leftExtent);
+  const rightFormat = getFormatter(rightValueFormat);
+  const rightTickFormat = rightExtent ? axisFormatter(rightValueFormat, rightExtent) : rightFormat;
+  const rightKeys = new Set(dual ? seriesList.filter(onRight).map((s) => s.key) : []);
+  const cartesianTooltip = (props) => renderTooltipContent(
+    props,
+    (entry) => typeof entry.dataKey === "string" && rightKeys.has(entry.dataKey) ? rightFormat : format
+  );
   const marks = seriesList.map((s, i) => {
     const color = resolveColor(s.color, i);
     const name = s.label ?? s.key;
@@ -380,6 +609,7 @@ function Chart({
           name,
           fill: color,
           stackId: s.stack,
+          yAxisId: axisIdOf(s),
           maxBarSize: 48,
           radius: barRadius(s, i),
           isAnimationActive: false
@@ -396,6 +626,7 @@ function Chart({
         stroke: color,
         strokeWidth: 2,
         strokeDasharray: kindOf(s) === "dashed-line" ? "6 4" : void 0,
+        yAxisId: axisIdOf(s),
         dot: false,
         activeDot: { r: 4, strokeWidth: 2, stroke: "var(--wp-surface-card)" },
         isAnimationActive: false
@@ -403,8 +634,29 @@ function Chart({
       s.key
     );
   });
+  const margin = { top: 8, right: 8, bottom: 0, left: 0 };
+  const Y_AXIS_WIDTH = 52;
+  let xTick = {};
+  if (xTickWrap && hostBox.width > 0) {
+    const labels = rows.map((row) => String((xKey ? row[xKey] : void 0) ?? ""));
+    const measure = makeMeasure(hostBox.fontFamily);
+    const span = hostBox.width - margin.right - Y_AXIS_WIDTH * (dual ? 2 : 1);
+    const { plan, inset } = planXTicksWithInset(labels, span - margin.left, Y_AXIS_WIDTH, measure, !hasBar);
+    margin.left += inset;
+    if (plan.mode !== "skip") {
+      xTick = { interval: 0, height: plan.height, tick: renderCategoryTick(plan) };
+    }
+  }
   const axes = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--wp-divider)", vertical: false }),
+    /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: "var(--wp-divider)",
+        vertical: false,
+        yAxisId: dual ? "left" : void 0
+      }
+    ),
     /* @__PURE__ */ jsx(
       XAxis,
       {
@@ -412,28 +664,45 @@ function Chart({
         tickLine: false,
         axisLine: { stroke: "var(--wp-border-subtle)" },
         tick: axisTick,
-        tickMargin: 6
+        tickMargin: 6,
+        ...xTick
       }
     ),
     /* @__PURE__ */ jsx(
       YAxis,
       {
+        yAxisId: dual ? "left" : void 0,
         tickLine: false,
         axisLine: false,
         tick: axisTick,
-        tickFormatter: (v) => format(v),
-        width: 52
+        tickFormatter: (v) => leftTickFormat(v),
+        allowDecimals: allowDecimals(leftExtent),
+        tickCount: tickCountFor(leftExtent),
+        width: Y_AXIS_WIDTH
       }
     ),
+    dual && rightExtent ? /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        yAxisId: "right",
+        orientation: "right",
+        tickLine: false,
+        axisLine: false,
+        tick: axisTick,
+        tickFormatter: (v) => rightTickFormat(v),
+        allowDecimals: allowDecimals(rightExtent),
+        tickCount: tickCountFor(rightExtent),
+        width: Y_AXIS_WIDTH
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       Tooltip,
       {
         cursor: hasBar ? { fill: "var(--wp-surface-sunken)", fillOpacity: 0.5 } : { stroke: "var(--wp-border-subtle)", strokeDasharray: "3 3" },
-        content: tooltipContent
+        content: cartesianTooltip
       }
     )
   ] });
-  const margin = { top: 8, right: 8, bottom: 0, left: 0 };
   const cartesian = type === "bar" ? /* @__PURE__ */ jsxs(BarChart, { data: rows, margin, children: [
     axes,
     marks