@adoptai/genui-components 0.1.54 → 0.1.55

package/dist/index.js

@@ -6650,6 +6650,14 @@ init_ThemeContext();
 var TERRACOTTA = ACCENT;
 var POS = "#15803d";
 var NEG = "#dc2626";
+var _CURRENCY = /* @__PURE__ */ new Set(["$", "\u20AC", "\xA3", "\xA5", "\u20B9"]);
+function _abbrev(n) {
+  const a = Math.abs(n);
+  if (a >= 1e9) return `${(a / 1e9).toFixed(1).replace(/\.0$/, "")}B`;
+  if (a >= 1e6) return `${(a / 1e6).toFixed(1).replace(/\.0$/, "")}M`;
+  if (a >= 1e3) return `${(a / 1e3).toFixed(1).replace(/\.0$/, "")}K`;
+  return `${a}`;
+}
 var tooltipStyle3 = {
   fontSize: "12px",
   borderRadius: "8px",
@@ -6664,6 +6672,15 @@ function WaterfallChartResolver(p) {
   const { isVisible, toggle } = useSeriesToggle(["Positive", "Negative", "Total"]);
   const unit = (_a2 = p.unit) != null ? _a2 : "";
   const bars = (_b = p.bars) != null ? _b : [];
+  const fmtVal = (v, withSign = false) => {
+    const sign = v < 0 ? "-" : withSign && v > 0 ? "+" : "";
+    const body = _CURRENCY.has(unit) ? `${unit}${_abbrev(v)}` : `${_abbrev(v)}${unit}`;
+    return `${sign}${body}`;
+  };
+  const yAxisWidth = Math.min(
+    72,
+    Math.max(40, ...bars.map((b) => fmtVal(b.value).length * 7 + 8))
+  );
   let running = 0;
   const chartData = bars.map((bar) => {
     const base = bar.isTotal ? 0 : running;
@@ -6673,7 +6690,7 @@ function WaterfallChartResolver(p) {
   }).filter((d) => isVisible(d.category));
   return /* @__PURE__ */ jsx(ComponentActions, { filename: (_c = p.title) != null ? _c : "waterfall-chart", children: /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "12px" }, children: [
     p.title && /* @__PURE__ */ jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "15px", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.005em" }, children: p.title }),
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 200, children: /* @__PURE__ */ jsxs(BarChart, { data: chartData, margin: { top: 4, right: 8, left: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 200, children: /* @__PURE__ */ jsxs(BarChart, { data: chartData, margin: { top: 4, right: 8, left: 4, bottom: 0 }, children: [
       /* @__PURE__ */ jsx(
         XAxis,
         {
@@ -6689,17 +6706,14 @@ function WaterfallChartResolver(p) {
           tick: { fontSize: 11, fill: MUTED2 },
           axisLine: false,
           tickLine: false,
-          width: 42,
-          tickFormatter: (v) => `${v}${unit}`
+          width: yAxisWidth,
+          tickFormatter: (v) => fmtVal(Number(v))
         }
       ),
       /* @__PURE__ */ jsx(
         Tooltip,
         {
-          formatter: (value) => {
-            const v = Number(value);
-            return [`${v > 0 ? "+" : ""}${v}${unit}`, ""];
-          },
+          formatter: (value) => [fmtVal(Number(value), true), ""],
           contentStyle: tooltipStyle3,
           cursor: { fill: "#f2f2f2" }
         }