@funnest/charts-react 0.2.1 → 0.4.0

package/dist/index.d.ts

@@ -7,7 +7,8 @@
  * </FnChart>
  * ```
  *
- * Plus SVG chart components (LineChart, AreaChart, BarChart, PercentageBarChart, CartesianChart
+ * Plus SVG chart components (LineChart, AreaChart, BarChart, CandlestickChart, DonutChart, TreemapChart,
+ * PercentageBarChart, CartesianChart
  * and its parts) built on the platform-neutral math in @funnest/charts-viz.
  */
 export { FnChart, FnChartSlot, useChartEvent, useFnChart } from './fn-chart';

package/dist/index.js

@@ -780,6 +780,7 @@ function HorizontalBarChart({
   const wrapRef = useRef3(null);
   const [measured, setMeasured] = useState3(fixedWidth ?? 0);
   const [hover, setHover] = useState3(null);
+  const [focused, setFocused] = useState3(false);
   useEffect3(() => {
     if (fixedWidth !== void 0) return setMeasured(fixedWidth);
     const el = wrapRef.current;
@@ -820,6 +821,19 @@ function HorizontalBarChart({
     const r = e.currentTarget.getBoundingClientRect();
     setHover(band.invert(e.clientY - r.top));
   };
+  const onKeyDown = (e) => {
+    const last = rows - 1;
+    if (last < 0) return;
+    let next;
+    if (e.key === "ArrowDown" || e.key === "ArrowRight") next = hover === null ? 0 : Math.min(last, hover + 1);
+    else if (e.key === "ArrowUp" || e.key === "ArrowLeft") next = hover === null ? last : Math.max(0, hover - 1);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    else if (e.key === "Escape") next = null;
+    if (next === void 0) return;
+    e.preventDefault();
+    setHover(next);
+  };
   const tipRows = hover === null ? [] : resolved.flatMap((s) => {
     const v = s.high[hover];
     if (v === null || v === void 0) return [];
@@ -845,9 +859,16 @@ function HorizontalBarChart({
         height: h,
         role: "img",
         "aria-label": ariaLabel,
-        style: { display: "block", overflow: "visible", userSelect: "none" },
+        tabIndex: enableScrubbing ? 0 : void 0,
+        style: { display: "block", overflow: "visible", userSelect: "none", outline: "none", borderRadius: 6, boxShadow: focused ? `0 0 0 2px ${VAR.accentRing}` : void 0 },
         onPointerMove: enableScrubbing ? onMove : void 0,
-        onPointerLeave: enableScrubbing ? () => setHover(null) : void 0,
+        onPointerLeave: enableScrubbing ? () => !focused && setHover(null) : void 0,
+        onKeyDown: enableScrubbing ? onKeyDown : void 0,
+        onFocus: enableScrubbing ? () => setFocused(true) : void 0,
+        onBlur: enableScrubbing ? () => {
+          setFocused(false);
+          setHover(null);
+        } : void 0,
         children: w > 0 && /* @__PURE__ */ jsxs5(Fragment3, { children: [
           tickValues.map((t) => /* @__PURE__ */ jsx7("line", { x1: xs(t), x2: xs(t), y1: top, y2: bottom, shapeRendering: "crispEdges", style: { stroke: VAR.grid } }, `g${t}`)),
           min < 0 && /* @__PURE__ */ jsx7("line", { x1: zero, x2: zero, y1: top, y2: bottom, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
@@ -892,17 +913,540 @@ function HorizontalBarChart({
           ] })
         ] })
       }
-    )
+    ),
+    enableScrubbing && /* @__PURE__ */ jsx7("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hover !== null ? [categories?.[hover] ?? String(hover), ...tipRows.map((r) => `${r.s.label ?? r.s.id} ${r.text}`)].join(", ") : "" })
   ] });
 }
 
-// src/viz/scrubber.tsx
-import { useEffect as useEffect4 } from "react";
+// src/viz/donut.tsx
+import { arcPath, arcs, seriesColor as seriesColor3 } from "@funnest/charts-viz";
+import { useId as useId2, useState as useState4 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var pctText = (f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`;
+var isCenter = (v) => !!v && typeof v === "object" && "value" in v && typeof v.value === "string";
+function DonutChart({
+  data,
+  size = 180,
+  innerRadius = 0.68,
+  padAngle = 1.5,
+  cornerRadius = 3,
+  center,
+  totalLabel,
+  valueFormatter = formatNumber,
+  showLegend = true,
+  legendPosition = "right",
+  legendShape,
+  formatLabel = (_i, f) => pctText(f),
+  activeId,
+  onActiveChange,
+  palette,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  const uid = useId2();
+  const [own, setOwn] = useState4(null);
+  const [focused, setFocused] = useState4(false);
+  const active = activeId !== void 0 ? activeId : own;
+  const setActive = (id) => {
+    if (activeId === void 0) setOwn(id);
+    onActiveChange?.(id);
+  };
+  const segs = arcs(data, padAngle * Math.PI / 180);
+  const items = data.map((d, i) => ({ ...d, color: d.color ?? seriesColor3(i, palette), seg: segs[i] }));
+  const visible = items.filter((i) => i.seg.fraction > 0);
+  const total = data.reduce((t, d) => t + Math.max(0, d.value), 0);
+  const hit = items.find((i) => i.id === active) ?? null;
+  const pop = 4;
+  const r = size / 2 - pop;
+  const ir = Math.max(0, Math.min(0.95, innerRadius)) * r;
+  const c = size / 2;
+  const centerContent = (() => {
+    const a = hit ? { item: hit, fraction: hit.seg.fraction } : null;
+    if (center) return center(a, total);
+    return a ? { value: pctText(a.fraction), label: a.item.label } : { value: valueFormatter(total), ...totalLabel ? { label: totalLabel } : {} };
+  })();
+  const onKeyDown = (e) => {
+    if (!visible.length) return;
+    const k = visible.findIndex((i) => i.id === active);
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = visible[(k + 1) % visible.length].id;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = visible[(k <= 0 ? visible.length : k) - 1].id;
+    else if (e.key === "Home") next = visible[0].id;
+    else if (e.key === "End") next = visible[visible.length - 1].id;
+    else if (e.key === "Escape") next = null;
+    if (next === void 0) return;
+    e.preventDefault();
+    setActive(next);
+  };
+  const describe = (i) => `${i.label} ${formatLabel(i, i.seg.fraction)} (${valueFormatter(i.value)})`;
+  const side = legendPosition === "right";
+  const svg = /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      role: "img",
+      "aria-label": ariaLabel ?? items.map(describe).join(", "),
+      tabIndex: 0,
+      style: { display: "block", flex: "none", overflow: "visible", outline: "none", borderRadius: "50%", boxShadow: focused ? `0 0 0 2px ${VAR.accentRing}` : void 0 },
+      onKeyDown,
+      onFocus: () => setFocused(true),
+      onBlur: () => {
+        setFocused(false);
+        setActive(null);
+      },
+      onPointerLeave: () => setActive(null),
+      children: [
+        total <= 0 && /* @__PURE__ */ jsx8("circle", { cx: c, cy: c, r: (r + ir) / 2, fill: "none", strokeWidth: Math.max(1, r - ir), style: { stroke: VAR.grid } }),
+        visible.map((i) => {
+          const on = i.id === active;
+          const mid = (i.seg.startAngle + i.seg.endAngle) / 2;
+          const dx = on ? Math.sin(mid) * pop : 0;
+          const dy = on ? -Math.cos(mid) * pop : 0;
+          return /* @__PURE__ */ jsx8(
+            "path",
+            {
+              d: arcPath(c, c, ir, r, i.seg.startAngle, i.seg.endAngle, cornerRadius),
+              transform: `translate(${dx.toFixed(2)},${dy.toFixed(2)})`,
+              opacity: active && !on ? 0.35 : 1,
+              onPointerEnter: () => setActive(i.id),
+              style: { fill: i.color, transition: "transform 0.15s ease, opacity 0.15s", cursor: "default" },
+              children: /* @__PURE__ */ jsx8("title", { children: describe(i) })
+            },
+            i.id
+          );
+        }),
+        ir > 24 && centerContent !== null && (isCenter(centerContent) ? /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", style: { fontFamily: VAR.font }, children: [
+          /* @__PURE__ */ jsx8(
+            "text",
+            {
+              x: c,
+              y: centerContent.label ? c - 8 : c,
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              fontSize: Math.max(12, Math.min(22, ir * 0.36)),
+              fontWeight: 700,
+              style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" },
+              children: centerContent.value
+            }
+          ),
+          centerContent.label && /* @__PURE__ */ jsx8("text", { x: c, y: c + 13, textAnchor: "middle", dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: centerContent.label })
+        ] }) : /* @__PURE__ */ jsx8("foreignObject", { x: c - ir * 0.72, y: c - ir * 0.72, width: ir * 1.44, height: ir * 1.44, pointerEvents: "none", children: /* @__PURE__ */ jsx8("div", { style: { width: "100%", height: "100%", display: "grid", placeItems: "center", textAlign: "center" }, children: centerContent }) }))
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className,
+      style: {
+        fontFamily: VAR.font,
+        position: "relative",
+        display: "flex",
+        flexDirection: side ? "row" : "column",
+        alignItems: "center",
+        gap: side ? 24 : 14,
+        ...style
+      },
+      children: [
+        svg,
+        showLegend && /* @__PURE__ */ jsx8(
+          Legend,
+          {
+            direction: side ? "column" : "row",
+            justify: side ? "flex-start" : "center",
+            ...legendShape ? { shape: legendShape } : {},
+            items: items.map((i) => ({ id: i.id, label: i.label, color: i.color, value: formatLabel(i, i.seg.fraction), inactive: !!active && active !== i.id })),
+            onItemHover: setActive
+          }
+        ),
+        /* @__PURE__ */ jsx8("span", { id: `${uid}-live`, "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hit ? describe(hit) : "" })
+      ]
+    }
+  );
+}
+
+// src/viz/treemap.tsx
+import { seriesColor as seriesColor4, treemap } from "@funnest/charts-viz";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var hex = (c) => {
+  const m = /^#([0-9a-f]{6})$/i.exec(c);
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+var mix = (a, b, t) => {
+  const x = hex(a);
+  const y = hex(b);
+  if (!x || !y) return t >= 0.5 ? b : a;
+  const c = x.map((v, i) => Math.round(v + (y[i] - v) * t));
+  return `#${c.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+};
+var defaultChange = (c) => `${c > 0 ? "+" : ""}${c.toFixed(2)}%`;
+var textWidth2 = (t, size) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? size : size * 0.6), 0);
+function TreemapChart({
+  data,
+  width: fixedWidth,
+  height = 280,
+  gap = 2,
+  radius = 4,
+  upColor = "#F04452",
+  downColor = "#3182F6",
+  flatColor = "#8B95A1",
+  maxChange = 5,
+  getColor,
+  changeFormatter = defaultChange,
+  valueFormatter = formatNumber,
+  enableTooltip = true,
+  onItemClick,
+  palette,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  const wrapRef = useRef4(null);
+  const [measured, setMeasured] = useState5(fixedWidth ?? 0);
+  const [active, setActive] = useState5(null);
+  const [focused, setFocused] = useState5(false);
+  useEffect4(() => {
+    if (fixedWidth !== void 0) return setMeasured(fixedWidth);
+    const el = wrapRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([e]) => e && setMeasured(Math.round(e.contentRect.width)));
+    ro.observe(el);
+    setMeasured(Math.round(el.getBoundingClientRect().width));
+    return () => ro.disconnect();
+  }, [fixedWidth]);
+  const w = measured;
+  const byId = useMemo3(() => new Map(data.map((d, i) => [d.id, { d, i }])), [data]);
+  const rects = useMemo3(() => treemap(data, w, height, gap), [data, w, height, gap]);
+  const colorOf = (d, i) => {
+    const custom = getColor?.(d, i) ?? d.color;
+    if (custom) return custom;
+    if (d.change === void 0) return seriesColor4(i, palette);
+    if (Math.abs(d.change) < 1e-9) return flatColor;
+    const t = 0.45 + 0.55 * Math.min(1, Math.abs(d.change) / maxChange);
+    return mix(flatColor, d.change > 0 ? upColor : downColor, t);
+  };
+  const onKeyDown = (e) => {
+    if (!rects.length) return;
+    const k = rects.findIndex((r) => r.id === active);
+    let next;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = rects[(k + 1) % rects.length].id;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = rects[(k <= 0 ? rects.length : k) - 1].id;
+    else if (e.key === "Home") next = rects[0].id;
+    else if (e.key === "End") next = rects[rects.length - 1].id;
+    else if (e.key === "Escape") next = null;
+    else if ((e.key === "Enter" || e.key === " ") && active && onItemClick) {
+      e.preventDefault();
+      onItemClick(byId.get(active).d);
+      return;
+    }
+    if (next === void 0) return;
+    e.preventDefault();
+    setActive(next);
+  };
+  const describe = (d) => [d.label, d.sublabel, d.change !== void 0 ? changeFormatter(d.change) : void 0, valueFormatter(d.value)].filter(Boolean).join(" ");
+  const hit = active ? rects.find((r) => r.id === active) : void 0;
+  const hitItem = hit ? byId.get(hit.id).d : void 0;
+  let tip = null;
+  if (enableTooltip && hit && hitItem) {
+    const rows = [[hitItem.label, valueFormatter(hitItem.value)]];
+    if (hitItem.change !== void 0) rows.push(["", changeFormatter(hitItem.change)]);
+    const tw = Math.max(...rows.map(([a, b]) => textWidth2(a, 12) + textWidth2(b, 12) + 28)) + 8;
+    const th = rows.length * 18 + 14;
+    const cx = hit.x + hit.width / 2;
+    let tx = cx - tw / 2;
+    tx = Math.max(0, Math.min(w - tw, tx));
+    const ty = hit.y - th - 6 >= 0 ? hit.y - th - 6 : Math.min(height - th, hit.y + hit.height + 6 <= height - th ? hit.y + hit.height + 6 : hit.y + 6);
+    tip = { x: tx, y: ty, w: tw, h: th, rows };
+  }
+  return /* @__PURE__ */ jsxs7("div", { ref: wrapRef, className, style: { position: "relative", width: fixedWidth ?? "100%", fontFamily: VAR.font, ...style }, children: [
+    /* @__PURE__ */ jsxs7(
+      "svg",
+      {
+        width: w || "100%",
+        height,
+        role: "img",
+        "aria-label": ariaLabel ?? data.map(describe).join(", "),
+        tabIndex: 0,
+        style: { display: "block", overflow: "visible", userSelect: "none", outline: "none", borderRadius: radius + 2, boxShadow: focused ? `0 0 0 2px ${VAR.accentRing}` : void 0 },
+        onKeyDown,
+        onFocus: () => setFocused(true),
+        onBlur: () => {
+          setFocused(false);
+          setActive(null);
+        },
+        onPointerLeave: () => setActive(null),
+        children: [
+          rects.map((r) => {
+            const { d, i } = byId.get(r.id);
+            const on = active === r.id;
+            const fs = Math.max(9, Math.min(22, Math.sqrt(r.width * r.height) / 6, (r.width - 10) / Math.max(1, textWidth2(d.label, 1))));
+            const sub = d.change !== void 0 ? changeFormatter(d.change) : d.sublabel;
+            const fitsLabel = r.width >= textWidth2(d.label, fs) + 10 && r.height >= fs + 8;
+            const fitsSub = !!sub && fitsLabel && r.height >= fs * 2 + 14 && r.width >= textWidth2(sub, fs * 0.8) + 10;
+            const cy = r.y + r.height / 2;
+            return /* @__PURE__ */ jsxs7("g", { onPointerEnter: () => setActive(r.id), onClick: onItemClick ? () => onItemClick(d) : void 0, style: { cursor: onItemClick ? "pointer" : "default" }, children: [
+              /* @__PURE__ */ jsx9(
+                "rect",
+                {
+                  x: r.x,
+                  y: r.y,
+                  width: Math.max(0, r.width),
+                  height: Math.max(0, r.height),
+                  rx: Math.min(radius, r.width / 2, r.height / 2),
+                  style: { fill: colorOf(d, i), transition: "opacity 0.15s" },
+                  opacity: active && !on ? 0.55 : 1
+                }
+              ),
+              on && /* @__PURE__ */ jsx9(
+                "rect",
+                {
+                  x: r.x + 1,
+                  y: r.y + 1,
+                  width: Math.max(0, r.width - 2),
+                  height: Math.max(0, r.height - 2),
+                  rx: Math.min(radius, r.width / 2, r.height / 2),
+                  fill: "none",
+                  strokeWidth: 2,
+                  style: { stroke: "#fff" }
+                }
+              ),
+              fitsLabel && /* @__PURE__ */ jsx9(
+                "text",
+                {
+                  x: r.x + r.width / 2,
+                  y: fitsSub ? cy - fs * 0.45 : cy,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  fontSize: fs,
+                  fontWeight: 700,
+                  pointerEvents: "none",
+                  style: { fill: "#fff" },
+                  children: d.label
+                }
+              ),
+              fitsSub && /* @__PURE__ */ jsx9(
+                "text",
+                {
+                  x: r.x + r.width / 2,
+                  y: cy + fs * 0.65,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  fontSize: fs * 0.78,
+                  fontWeight: 600,
+                  pointerEvents: "none",
+                  style: { fill: "rgba(255,255,255,0.88)", fontVariantNumeric: "tabular-nums" },
+                  children: sub
+                }
+              )
+            ] }, r.id);
+          }),
+          tip && /* @__PURE__ */ jsxs7("g", { transform: `translate(${tip.x},${tip.y})`, pointerEvents: "none", children: [
+            /* @__PURE__ */ jsx9("rect", { width: tip.w, height: tip.h, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
+            tip.rows.map(([a, b], k) => /* @__PURE__ */ jsxs7("g", { transform: `translate(10,${7 + 9 + k * 18})`, children: [
+              /* @__PURE__ */ jsx9("text", { dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: a }),
+              /* @__PURE__ */ jsx9(
+                "text",
+                {
+                  x: tip.w - 20,
+                  textAnchor: "end",
+                  dominantBaseline: "central",
+                  fontSize: 12,
+                  fontWeight: 700,
+                  style: { fill: k === 1 && hitItem?.change ? hitItem.change > 0 ? upColor : downColor : VAR.textStrong, fontVariantNumeric: "tabular-nums" },
+                  children: b
+                }
+              )
+            ] }, k))
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9("span", { "aria-live": "polite", style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: focused && hitItem ? describe(hitItem) : "" })
+  ] });
+}
+
+// src/viz/candles.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var KO = { open: "\uC2DC\uAC00", high: "\uACE0\uAC00", low: "\uC800\uAC00", close: "\uC885\uAC00", volume: "\uAC70\uB798\uB7C9" };
+var fade = (color, a) => {
+  const m = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!m) return `color-mix(in srgb, ${color} ${Math.round(a * 100)}%, transparent)`;
+  const n = parseInt(m[1], 16);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
+};
+function CandlePlot({
+  data,
+  yAxisId,
+  upColor = "#F04452",
+  downColor = "#3182F6",
+  bodyWidth = 0.7,
+  hollowUp = false,
+  tooltip = true,
+  labels = KO,
+  valueFormatter = formatNumber
+}) {
+  const ctx = useCartesianChart();
+  const band = ctx.band;
+  if (!band) return null;
+  const y = scaleFor(ctx, yAxisId);
+  const bw = Math.max(1, Math.min(band.step * bodyWidth, band.step - 1));
+  const i = ctx.scrubIndex;
+  const scrubbed = i !== null ? data[i] : null;
+  let tip = null;
+  if (tooltip && i !== null && scrubbed) {
+    const prev = i > 0 ? data[i - 1] : null;
+    const base = prev?.close ?? scrubbed.open;
+    const chg = base ? (scrubbed.close - base) / base * 100 : 0;
+    const rows = [
+      [labels.open, valueFormatter(scrubbed.open)],
+      [labels.high, valueFormatter(scrubbed.high), upColor],
+      [labels.low, valueFormatter(scrubbed.low), downColor],
+      [labels.close, `${valueFormatter(scrubbed.close)} (${chg > 0 ? "+" : ""}${chg.toFixed(2)}%)`, chg > 0 ? upColor : chg < 0 ? downColor : void 0]
+    ];
+    if (scrubbed.volume !== void 0) rows.push([labels.volume ?? KO.volume, formatNumber(scrubbed.volume)]);
+    const width = (s) => [...s].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? 12 : 7.2), 0);
+    const tw = Math.max(...rows.map(([a, b]) => width(a) + width(b) + 24)) + 8;
+    const th = rows.length * 18 + 14;
+    const x = band.center(i);
+    const right = x + 12 + tw <= ctx.plot.right;
+    tip = /* @__PURE__ */ jsxs8("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx10("line", { x1: x, x2: x, y1: ctx.plot.top, y2: ctx.plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+      /* @__PURE__ */ jsxs8("g", { transform: `translate(${right ? x + 12 : x - 12 - tw},${ctx.plot.top + 4})`, children: [
+        /* @__PURE__ */ jsx10("rect", { width: tw, height: th, rx: 8, strokeWidth: 1, style: { fill: VAR.bg, stroke: VAR.grid } }),
+        rows.map(([a, b, color], k) => /* @__PURE__ */ jsxs8("g", { transform: `translate(10,${16 + k * 18})`, children: [
+          /* @__PURE__ */ jsx10("text", { dominantBaseline: "central", fontSize: 12, style: { fill: VAR.text }, children: a }),
+          /* @__PURE__ */ jsx10("text", { x: tw - 20, textAnchor: "end", dominantBaseline: "central", fontSize: 12, fontWeight: 700, style: { fill: color ?? VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: b })
+        ] }, a))
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8("g", { children: [
+    data.map((d, k) => {
+      if (!d) return null;
+      const up = d.close >= d.open;
+      const color = up ? upColor : downColor;
+      const cx = Math.round(band.center(k)) + 0.5;
+      const top = y(Math.max(d.open, d.close));
+      const bottom = y(Math.min(d.open, d.close));
+      const h = Math.max(1, bottom - top);
+      const hollow = hollowUp && up && bw >= 4;
+      return /* @__PURE__ */ jsxs8("g", { opacity: i !== null && i !== k ? 0.55 : 1, children: [
+        /* @__PURE__ */ jsx10("line", { x1: cx, x2: cx, y1: y(d.high), y2: y(d.low), strokeWidth: 1, style: { stroke: color } }),
+        /* @__PURE__ */ jsx10(
+          "rect",
+          {
+            x: cx - bw / 2,
+            y: top,
+            width: bw,
+            height: h,
+            rx: Math.min(1.5, bw / 4),
+            strokeWidth: hollow ? 1 : 0,
+            style: hollow ? { fill: VAR.bg, stroke: color } : { fill: color }
+          }
+        )
+      ] }, k);
+    }),
+    tip
+  ] });
+}
+var axisProps = (v) => v ? v === true ? {} : v : null;
+function CandlestickChart({
+  data,
+  showVolume,
+  volumeHeight = 0.22,
+  showYAxis = true,
+  showXAxis,
+  tooltip = true,
+  upColor = "#F04452",
+  downColor = "#3182F6",
+  bodyWidth,
+  hollowUp,
+  labels,
+  valueFormatter = formatNumber,
+  xAxis,
+  children,
+  getScrubberAccessibilityLabel,
+  ...chart
+}) {
+  const hasVolume = showVolume ?? data.some((d) => d?.volume !== void 0);
+  const maxVol = Math.max(0, ...data.map((d) => d?.volume ?? 0));
+  const lows = data.flatMap((d) => d ? [d.low] : []);
+  const highs = data.flatMap((d) => d ? [d.high] : []);
+  const lo = lows.length ? Math.min(...lows) : 0;
+  const hi = highs.length ? Math.max(...highs) : 1;
+  const pad = (hi - lo || Math.abs(hi) || 1) * 0.04;
+  const share = hasVolume ? Math.min(0.6, Math.max(0.05, volumeHeight)) : 0;
+  const priceMin = lo - pad - (hi - lo + 2 * pad) * share / (1 - share);
+  const yAx = axisProps(showYAxis);
+  const xAx = axisProps(showXAxis);
+  const l = labels ?? KO;
+  return /* @__PURE__ */ jsxs8(
+    CartesianChart,
+    {
+      enableScrubbing: tooltip,
+      ...chart,
+      xAxis: { bandPadding: 0.2, ...xAxis, scaleType: "band" },
+      series: [
+        { id: "price", data: data.map((d) => d ? [d.low, d.high] : null), yAxisId: "price", color: upColor },
+        ...hasVolume ? [{ id: "volume", data: data.map((d) => d?.volume ?? null), yAxisId: "volume", color: "color-mix(in srgb, CanvasText 18%, transparent)" }] : []
+      ],
+      yAxis: [
+        { id: "price", includeZero: false, domain: { min: priceMin, max: hi + pad } },
+        // Volume keeps to the bottom band: its axis is stretched so the tallest bar reaches volumeHeight.
+        { id: "volume", domain: { min: 0, max: maxVol > 0 ? maxVol / Math.max(0.05, volumeHeight) : 1 } }
+      ],
+      getScrubberAccessibilityLabel: getScrubberAccessibilityLabel ?? ((i) => {
+        const d = data[i];
+        return d ? `${l.open} ${valueFormatter(d.open)}, ${l.high} ${valueFormatter(d.high)}, ${l.low} ${valueFormatter(d.low)}, ${l.close} ${valueFormatter(d.close)}` : "";
+      }),
+      children: [
+        yAx && /* @__PURE__ */ jsx10(YAxis, { tickLabelFormatter: valueFormatter, ...yAx, axisId: "price" }, "y"),
+        xAx && /* @__PURE__ */ jsx10(XAxis, { ...xAx }, "x"),
+        hasVolume && /* @__PURE__ */ jsx10(
+          BarPlot,
+          {
+            seriesIds: ["volume"],
+            radius: 1,
+            highlightScrubbed: false,
+            getBarColor: (_v, i) => {
+              const d = data[i];
+              return d ? fade(d.close >= d.open ? upColor : downColor, 0.3) : void 0;
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          CandlePlot,
+          {
+            data,
+            yAxisId: "price",
+            upColor,
+            downColor,
+            tooltip,
+            labels: l,
+            valueFormatter,
+            ...bodyWidth !== void 0 ? { bodyWidth } : {},
+            ...hollowUp !== void 0 ? { hollowUp } : {}
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/viz/scrubber.tsx
+import { useEffect as useEffect5 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var TIP_FONT = 12;
 var ROW = 18;
 var TIP_PAD = 7;
-var textWidth2 = (t) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? TIP_FONT : TIP_FONT * 0.6), 0);
+var textWidth3 = (t) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? TIP_FONT : TIP_FONT * 0.6), 0);
 function Scrubber({
   label,
   seriesIds,
@@ -917,16 +1461,16 @@ function Scrubber({
   const ctx = useCartesianChart();
   const i = ctx.scrubIndex;
   const { setDimFuture } = ctx;
-  const fade = dimFuture && !hideOverlay;
-  useEffect4(() => {
-    setDimFuture(fade);
+  const fade2 = dimFuture && !hideOverlay;
+  useEffect5(() => {
+    setDimFuture(fade2);
     return () => setDimFuture(false);
-  }, [fade, setDimFuture]);
+  }, [fade2, setDimFuture]);
   const pick = seriesIds ? ctx.series.filter((s) => seriesIds.includes(s.id)) : ctx.series;
   const colorOf = (s, v) => beaconColor?.(v, s.id) ?? s.color;
   if (i === null || i >= ctx.length) {
     if (!idlePulse || ctx.band) return null;
-    return /* @__PURE__ */ jsx8("g", { pointerEvents: "none", children: pick.map((s) => {
+    return /* @__PURE__ */ jsx11("g", { pointerEvents: "none", children: pick.map((s) => {
       let last = s.data.length - 1;
       while (last >= 0 && (s.data[last] === null || s.data[last] === void 0)) last--;
       if (last < 0) return null;
@@ -934,12 +1478,12 @@ function Scrubber({
       if (y === null) return null;
       const x2 = ctx.x(last);
       const color = colorOf(s, s.data[last]);
-      return /* @__PURE__ */ jsxs6("g", { children: [
-        /* @__PURE__ */ jsxs6("circle", { cx: x2, cy: y, r: 4, fillOpacity: 0.35, style: { fill: color }, children: [
-          /* @__PURE__ */ jsx8("animate", { attributeName: "r", values: "4;13", dur: "1.6s", repeatCount: "indefinite" }),
-          /* @__PURE__ */ jsx8("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
+      return /* @__PURE__ */ jsxs9("g", { children: [
+        /* @__PURE__ */ jsxs9("circle", { cx: x2, cy: y, r: 4, fillOpacity: 0.35, style: { fill: color }, children: [
+          /* @__PURE__ */ jsx11("animate", { attributeName: "r", values: "4;13", dur: "1.6s", repeatCount: "indefinite" }),
+          /* @__PURE__ */ jsx11("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
         ] }),
-        /* @__PURE__ */ jsx8("circle", { cx: x2, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } })
+        /* @__PURE__ */ jsx11("circle", { cx: x2, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } })
       ] }, s.id);
     }) });
   }
@@ -955,25 +1499,25 @@ function Scrubber({
     const text2 = lo !== null && lo !== void 0 && lo !== v ? `${valueFormatter(lo, s.id)} \u2013 ${valueFormatter(v, s.id)}` : valueFormatter(v, s.id);
     return [{ s, text: text2 }];
   }) : [];
-  const tipW = Math.max(0, ...rows.map((r) => textWidth2(r.text) + (rows.length > 1 || r.s.label ? textWidth2(r.s.label ?? "") + 26 : 18))) + 16;
+  const tipW = Math.max(0, ...rows.map((r) => textWidth3(r.text) + (rows.length > 1 || r.s.label ? textWidth3(r.s.label ?? "") + 26 : 18))) + 16;
   const tipH = rows.length * ROW + TIP_PAD * 2;
   const tipRight = x + 12 + tipW <= plot.right;
   const tipX = tipRight ? x + 12 : x - 12 - tipW;
   const tipY = plot.top + 4;
-  return /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
-    /* @__PURE__ */ jsx8("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
-    text && /* @__PURE__ */ jsx8("text", { x: textX, y: Math.max(11, plot.top - 2), textAnchor: "middle", fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: VAR.textStrong }, children: text }),
+  return /* @__PURE__ */ jsxs9("g", { pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx11("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
+    text && /* @__PURE__ */ jsx11("text", { x: textX, y: Math.max(11, plot.top - 2), textAnchor: "middle", fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: VAR.textStrong }, children: text }),
     !ctx.band && list.map((s) => {
       const y = seriesY(ctx, s, i);
       if (y === null) return null;
       const v = s.data[i];
       const color = colorOf(s, v);
       const text2 = beaconLabels ? typeof beaconLabels === "function" ? beaconLabels(v, s.id) : valueFormatter(v, s.id) : "";
-      const right = x + 12 + textWidth2(text2) <= plot.right;
-      return /* @__PURE__ */ jsxs6("g", { children: [
-        /* @__PURE__ */ jsx8("circle", { cx: x, cy: y, r: 7, fillOpacity: 0.18, style: { fill: color } }),
-        /* @__PURE__ */ jsx8("circle", { cx: x, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
-        text2 && /* @__PURE__ */ jsx8(
+      const right = x + 12 + textWidth3(text2) <= plot.right;
+      return /* @__PURE__ */ jsxs9("g", { children: [
+        /* @__PURE__ */ jsx11("circle", { cx: x, cy: y, r: 7, fillOpacity: 0.18, style: { fill: color } }),
+        /* @__PURE__ */ jsx11("circle", { cx: x, cy: y, r: 4, strokeWidth: 2, style: { fill: color, stroke: VAR.bg } }),
+        text2 && /* @__PURE__ */ jsx11(
           "text",
           {
             x: right ? x + 10 : x - 10,
@@ -991,32 +1535,32 @@ function Scrubber({
         )
       ] }, s.id);
     }),
-    rows.length > 0 && /* @__PURE__ */ jsxs6("g", { transform: `translate(${tipX},${tipY})`, children: [
-      /* @__PURE__ */ jsx8("rect", { width: tipW, height: tipH, rx: 8, style: { fill: VAR.bg, stroke: VAR.grid }, strokeWidth: 1 }),
-      rows.map((r, k) => /* @__PURE__ */ jsxs6("g", { transform: `translate(10,${TIP_PAD + ROW / 2 + k * ROW})`, children: [
-        /* @__PURE__ */ jsx8("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.s.color } }),
-        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx8("text", { x: 12, dominantBaseline: "central", fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
-        /* @__PURE__ */ jsx8("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: TIP_FONT, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
+    rows.length > 0 && /* @__PURE__ */ jsxs9("g", { transform: `translate(${tipX},${tipY})`, children: [
+      /* @__PURE__ */ jsx11("rect", { width: tipW, height: tipH, rx: 8, style: { fill: VAR.bg, stroke: VAR.grid }, strokeWidth: 1 }),
+      rows.map((r, k) => /* @__PURE__ */ jsxs9("g", { transform: `translate(10,${TIP_PAD + ROW / 2 + k * ROW})`, children: [
+        /* @__PURE__ */ jsx11("circle", { cx: 3, cy: 0, r: 3, style: { fill: r.s.color } }),
+        (rows.length > 1 || r.s.label) && /* @__PURE__ */ jsx11("text", { x: 12, dominantBaseline: "central", fontSize: TIP_FONT, style: { fill: VAR.text }, children: r.s.label ?? r.s.id }),
+        /* @__PURE__ */ jsx11("text", { x: tipW - 20, textAnchor: "end", dominantBaseline: "central", fontSize: TIP_FONT, fontWeight: 700, style: { fill: VAR.textStrong, fontVariantNumeric: "tabular-nums" }, children: r.text })
       ] }, r.s.id))
     ] })
   ] });
 }
 
 // src/viz/annotations.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var LABEL_FONT = 11;
 var labelWidth = (t) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? LABEL_FONT : LABEL_FONT * 0.62), 0);
 function LineLabel(props) {
   const { x, y, text, anchor, color, pill } = props;
   const textColor = color === VAR.line ? VAR.text : color;
   if (!pill) {
-    return /* @__PURE__ */ jsx9("text", { x, y, textAnchor: anchor, dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: textColor }, children: text });
+    return /* @__PURE__ */ jsx12("text", { x, y, textAnchor: anchor, dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: textColor }, children: text });
   }
   const w = labelWidth(text) + 14;
   const left = anchor === "start" ? x : anchor === "end" ? x - w : x - w / 2;
-  return /* @__PURE__ */ jsxs7("g", { children: [
-    /* @__PURE__ */ jsx9("rect", { x: left, y: y - 10, width: w, height: 20, rx: 10, style: { fill: color === VAR.line ? VAR.textStrong : color } }),
-    /* @__PURE__ */ jsx9("text", { x: left + w / 2, y, textAnchor: "middle", dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 700, style: { fill: VAR.bg }, children: text })
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsx12("rect", { x: left, y: y - 10, width: w, height: 20, rx: 10, style: { fill: color === VAR.line ? VAR.textStrong : color } }),
+    /* @__PURE__ */ jsx12("text", { x: left + w / 2, y, textAnchor: "middle", dominantBaseline: "central", fontSize: LABEL_FONT, fontWeight: 700, style: { fill: VAR.bg }, children: text })
   ] });
 }
 function ReferenceLine({
@@ -1044,17 +1588,17 @@ function ReferenceLine({
     const anchor = pos === "left" ? "start" : pos === "center" ? "middle" : "end";
     const off = pill ? 13 : 9;
     const ly = labelAlign === "center" ? y : labelAlign === "below" ? y + off : y - off;
-    return /* @__PURE__ */ jsxs7("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx9("line", { x1: plot.left, x2: plot.right, y1: y, y2: y, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
-      label !== void 0 && /* @__PURE__ */ jsx9(LineLabel, { x: tx + labelDx, y: ly + labelDy, text: label, anchor, color, pill })
+    return /* @__PURE__ */ jsxs10("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx12("line", { x1: plot.left, x2: plot.right, y1: y, y2: y, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
+      label !== void 0 && /* @__PURE__ */ jsx12(LineLabel, { x: tx + labelDx, y: ly + labelDy, text: label, anchor, color, pill })
     ] });
   }
   if (dataX !== void 0) {
     const x = ctx.x(dataX);
     const pos = labelPosition ?? "top";
-    return /* @__PURE__ */ jsxs7("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx9("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
-      label !== void 0 && /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsxs10("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx12("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth, strokeDasharray: dash || void 0, shapeRendering: "crispEdges", style: { stroke: color } }),
+      label !== void 0 && /* @__PURE__ */ jsx12(
         LineLabel,
         {
           x: x + (pill ? 0 : 4) + labelDx,
@@ -1080,26 +1624,26 @@ function Point({ dataX, dataY, seriesId, yAxisId, color, radius = 4, label, labe
   const fill = color ?? s?.color ?? ctx.series[0]?.color ?? "currentColor";
   const gap = radius + 6;
   const [lx, ly, anchor] = labelPosition === "bottom" ? [x, y + gap + 8, "middle"] : labelPosition === "left" ? [x - gap, y + 4, "end"] : labelPosition === "right" ? [x + gap, y + 4, "start"] : [x, y - gap, "middle"];
-  return /* @__PURE__ */ jsxs7("g", { style: onClick ? { cursor: "pointer" } : void 0, onClick, pointerEvents: onClick ? "auto" : "none", children: [
-    pulse && /* @__PURE__ */ jsxs7("circle", { cx: x, cy: y, r: radius, fillOpacity: 0.35, style: { fill }, children: [
-      /* @__PURE__ */ jsx9("animate", { attributeName: "r", values: `${radius};${radius * 3.2}`, dur: "1.6s", repeatCount: "indefinite" }),
-      /* @__PURE__ */ jsx9("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
+  return /* @__PURE__ */ jsxs10("g", { style: onClick ? { cursor: "pointer" } : void 0, onClick, pointerEvents: onClick ? "auto" : "none", children: [
+    pulse && /* @__PURE__ */ jsxs10("circle", { cx: x, cy: y, r: radius, fillOpacity: 0.35, style: { fill }, children: [
+      /* @__PURE__ */ jsx12("animate", { attributeName: "r", values: `${radius};${radius * 3.2}`, dur: "1.6s", repeatCount: "indefinite" }),
+      /* @__PURE__ */ jsx12("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
     ] }),
-    /* @__PURE__ */ jsx9("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
-    label !== void 0 && /* @__PURE__ */ jsx9("text", { opacity: nearScrub(ctx, x) ? 0 : 1, x: lx, y: ly, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill }, children: label })
+    /* @__PURE__ */ jsx12("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
+    label !== void 0 && /* @__PURE__ */ jsx12("text", { opacity: nearScrub(ctx, x) ? 0 : 1, x: lx, y: ly, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill }, children: label })
   ] });
 }
 
 // src/viz/period-selector.tsx
-import { useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useLayoutEffect, useRef as useRef5, useState as useState6 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function LiveTabLabel({ label, color = "var(--fnv-live, #F04452)" }) {
-  return /* @__PURE__ */ jsxs8("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-    /* @__PURE__ */ jsxs8("span", { "aria-hidden": "true", style: { position: "relative", width: 7, height: 7 }, children: [
-      /* @__PURE__ */ jsx10("span", { style: { position: "absolute", inset: 0, borderRadius: "50%", background: color } }),
-      /* @__PURE__ */ jsx10("svg", { width: "7", height: "7", viewBox: "0 0 7 7", style: { position: "absolute", inset: 0, overflow: "visible" }, children: /* @__PURE__ */ jsxs8("circle", { cx: "3.5", cy: "3.5", r: "3.5", style: { fill: color }, fillOpacity: 0.45, children: [
-        /* @__PURE__ */ jsx10("animate", { attributeName: "r", values: "3.5;8", dur: "1.6s", repeatCount: "indefinite" }),
-        /* @__PURE__ */ jsx10("animate", { attributeName: "fill-opacity", values: "0.45;0", dur: "1.6s", repeatCount: "indefinite" })
+  return /* @__PURE__ */ jsxs11("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsxs11("span", { "aria-hidden": "true", style: { position: "relative", width: 7, height: 7 }, children: [
+      /* @__PURE__ */ jsx13("span", { style: { position: "absolute", inset: 0, borderRadius: "50%", background: color } }),
+      /* @__PURE__ */ jsx13("svg", { width: "7", height: "7", viewBox: "0 0 7 7", style: { position: "absolute", inset: 0, overflow: "visible" }, children: /* @__PURE__ */ jsxs11("circle", { cx: "3.5", cy: "3.5", r: "3.5", style: { fill: color }, fillOpacity: 0.45, children: [
+        /* @__PURE__ */ jsx13("animate", { attributeName: "r", values: "3.5;8", dur: "1.6s", repeatCount: "indefinite" }),
+        /* @__PURE__ */ jsx13("animate", { attributeName: "fill-opacity", values: "0.45;0", dur: "1.6s", repeatCount: "indefinite" })
       ] }) })
     ] }),
     label
@@ -1126,8 +1670,8 @@ function PeriodSelector({
 }) {
   const activeIsLive = periods.find((p) => p.id === value)?.live ?? false;
   const pillColor = activeIsLive ? liveColor : activeColor;
-  const listRef = useRef4(null);
-  const [pill, setPill] = useState4(null);
+  const listRef = useRef5(null);
+  const [pill, setPill] = useState6(null);
   useLayoutEffect(() => {
     const list = listRef.current;
     const active = list?.querySelector('[aria-selected="true"]');
@@ -1149,7 +1693,7 @@ function PeriodSelector({
     onChange(p.id);
     listRef.current?.querySelector(`[data-period="${CSS.escape(p.id)}"]`)?.focus();
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: listRef,
@@ -1159,7 +1703,7 @@ function PeriodSelector({
       onKeyDown,
       style: { position: "relative", display: fullWidth ? "flex" : "inline-flex", gap: 2, fontFamily: VAR.font, ...style },
       children: [
-        pill && /* @__PURE__ */ jsx10(
+        pill && /* @__PURE__ */ jsx13(
           "span",
           {
             "aria-hidden": "true",
@@ -1178,7 +1722,7 @@ function PeriodSelector({
         ),
         periods.map((p) => {
           const active = p.id === value;
-          return /* @__PURE__ */ jsx10(
+          return /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
@@ -1202,7 +1746,7 @@ function PeriodSelector({
                 fontWeight: active ? 700 : 500,
                 cursor: "pointer"
               },
-              children: p.live ? /* @__PURE__ */ jsx10(LiveTabLabel, { label: p.label, color: liveColor }) : p.label
+              children: p.live ? /* @__PURE__ */ jsx13(LiveTabLabel, { label: p.label, color: liveColor }) : p.label
             },
             p.id
           );
@@ -1213,13 +1757,13 @@ function PeriodSelector({
 }
 
 // src/viz/charts.tsx
-import { percentages, seriesColor as seriesColor3 } from "@funnest/charts-viz";
-import { useState as useState5 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var axisProps = (v) => v ? v === true ? {} : v : null;
+import { percentages, seriesColor as seriesColor5 } from "@funnest/charts-viz";
+import { useState as useState7 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var axisProps2 = (v) => v ? v === true ? {} : v : null;
 var axisElements = (x, y) => [
-  y && /* @__PURE__ */ jsx11(YAxis, { ...y }, "y"),
-  x && /* @__PURE__ */ jsx11(XAxis, { ...x }, "x")
+  y && /* @__PURE__ */ jsx14(YAxis, { ...y }, "y"),
+  x && /* @__PURE__ */ jsx14(XAxis, { ...x }, "x")
 ];
 var defined = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
 var KR_SPLIT = { above: "#F04452", below: "#3182F6" };
@@ -1238,11 +1782,11 @@ function LineChart({
   children,
   ...chart
 }) {
-  const sc = axisProps(scrubber);
+  const sc = axisProps2(scrubber);
   const split = baseline !== void 0 ? splitColors ?? KR_SPLIT : void 0;
-  return /* @__PURE__ */ jsxs9(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
-    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
-    chart.series.map((s) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs12(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
+    axisElements(axisProps2(showXAxis), axisProps2(showYAxis)),
+    chart.series.map((s) => /* @__PURE__ */ jsx14(
       Line,
       {
         seriesId: s.id,
@@ -1252,7 +1796,7 @@ function LineChart({
       s.id
     )),
     children,
-    sc && /* @__PURE__ */ jsx11(
+    sc && /* @__PURE__ */ jsx14(
       Scrubber,
       {
         ...split && baseline !== void 0 ? { beaconColor: (v) => v >= baseline ? split.above : split.below } : {},
@@ -1277,12 +1821,12 @@ function AreaChart({
   children,
   ...chart
 }) {
-  const sc = axisProps(scrubber);
-  return /* @__PURE__ */ jsxs9(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
-    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
+  const sc = axisProps2(scrubber);
+  return /* @__PURE__ */ jsxs12(CartesianChart, { enableScrubbing: !!sc, ...chart, children: [
+    axisElements(axisProps2(showXAxis), axisProps2(showYAxis)),
     chart.series.map((s) => {
       const own = s.areaStyle === "none" ? null : s.areaStyle ?? (chart.stacked && fill === "gradient" ? "solid" : fill);
-      return own ? /* @__PURE__ */ jsx11(
+      return own ? /* @__PURE__ */ jsx14(
         Area,
         {
           seriesId: s.id,
@@ -1293,16 +1837,16 @@ function AreaChart({
         `a${s.id}`
       ) : null;
     }),
-    showLines && chart.series.map((s) => /* @__PURE__ */ jsx11(Line, { seriesId: s.id, curve, strokeWidth, ...defined({ lineStyle, baseline, splitColors }) }, `l${s.id}`)),
+    showLines && chart.series.map((s) => /* @__PURE__ */ jsx14(Line, { seriesId: s.id, curve, strokeWidth, ...defined({ lineStyle, baseline, splitColors }) }, `l${s.id}`)),
     children,
-    sc && /* @__PURE__ */ jsx11(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx14(Scrubber, { ...sc })
   ] });
 }
 function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGap, stackGap, roundBaseline, barMinSize, layout = "vertical", xAxis, children, ...chart }) {
-  const sc = axisProps(scrubber);
+  const sc = axisProps2(scrubber);
   if (layout === "horizontal") {
-    const yAx = axisProps(showYAxis);
-    return /* @__PURE__ */ jsx11(
+    const yAx = axisProps2(showYAxis);
+    return /* @__PURE__ */ jsx14(
       HorizontalBarChart,
       {
         series: chart.series,
@@ -1329,11 +1873,11 @@ function BarChart({ showXAxis, showYAxis, scrubber, radius, getBarColor, groupGa
       }
     );
   }
-  return /* @__PURE__ */ jsxs9(CartesianChart, { enableScrubbing: !!sc, xAxis: { ...xAxis, scaleType: "band" }, ...chart, children: [
-    axisElements(axisProps(showXAxis), axisProps(showYAxis)),
-    /* @__PURE__ */ jsx11(BarPlot, { ...defined({ radius, getBarColor, groupGap, stackGap, roundBaseline, minSize: barMinSize }), highlightScrubbed: !!sc }),
+  return /* @__PURE__ */ jsxs12(CartesianChart, { enableScrubbing: !!sc, xAxis: { ...xAxis, scaleType: "band" }, ...chart, children: [
+    axisElements(axisProps2(showXAxis), axisProps2(showYAxis)),
+    /* @__PURE__ */ jsx14(BarPlot, { ...defined({ radius, getBarColor, groupGap, stackGap, roundBaseline, minSize: barMinSize }), highlightScrubbed: !!sc }),
     children,
-    sc && /* @__PURE__ */ jsx11(Scrubber, { ...sc })
+    sc && /* @__PURE__ */ jsx14(Scrubber, { ...sc })
   ] });
 }
 var pct = (_item, f) => `${formatNumber(Math.round(f * 1e3) / 10)}%`;
@@ -1366,11 +1910,11 @@ function PercentageBarChart({
   for (const r of allRows)
     for (const d of r.data)
       if (!colorOf.has(d.id)) {
-        colorOf.set(d.id, d.color ?? seriesColor3(colorOf.size, palette));
+        colorOf.set(d.id, d.color ?? seriesColor5(colorOf.size, palette));
         legendItems.push(d);
       }
-  const [hovered, setHovered] = useState5(null);
-  const [hoverRow, setHoverRow] = useState5(null);
+  const [hovered, setHovered] = useState7(null);
+  const [hoverRow, setHoverRow] = useState7(null);
   const rowSegs = allRows.map((r) => {
     const segs = percentages(r.data);
     return { row: r, items: r.data.map((d, i) => ({ ...d, color: colorOf.get(d.id), fraction: segs[i].fraction })) };
@@ -1378,7 +1922,7 @@ function PercentageBarChart({
   const renderBar = (items, rowId) => {
     const visible = items.filter((i) => i.fraction > 0);
     const ordered = vertical ? [...visible].reverse() : visible;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         style: {
@@ -1390,7 +1934,7 @@ function PercentageBarChart({
         children: ordered.map((i, k) => {
           const a = k === 0 ? end : inner;
           const b = k === ordered.length - 1 ? end : inner;
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx14(
             "span",
             {
               title: `${i.label} ${formatLabel(i, i.fraction)}`,
@@ -1419,7 +1963,7 @@ function PercentageBarChart({
     );
   };
   const legendRow = multi ? rowSegs.find((r) => r.row.id === hoverRow) : rowSegs[0];
-  const legend = showLabels && /* @__PURE__ */ jsx11(
+  const legend = showLabels && /* @__PURE__ */ jsx14(
     Legend,
     {
       style: legendAt === "top" ? { marginBottom: 10 } : legendAt === "bottom" ? { marginTop: 10 } : {},
@@ -1438,15 +1982,15 @@ function PercentageBarChart({
       onItemHover: setHovered
     }
   );
-  const label = (r) => multi && r.label ? /* @__PURE__ */ jsx11("span", { style: { fontSize: 12, color: hoverRow === r.id ? VAR.textStrong : VAR.text, fontWeight: hoverRow === r.id ? 700 : 500, whiteSpace: "nowrap" }, children: r.label }) : null;
-  const bars = vertical ? /* @__PURE__ */ jsx11("div", { style: { display: "flex", gap: 14, alignItems: "flex-end" }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }, children: [
+  const label = (r) => multi && r.label ? /* @__PURE__ */ jsx14("span", { style: { fontSize: 12, color: hoverRow === r.id ? VAR.textStrong : VAR.text, fontWeight: hoverRow === r.id ? 700 : 500, whiteSpace: "nowrap" }, children: r.label }) : null;
+  const bars = vertical ? /* @__PURE__ */ jsx14("div", { style: { display: "flex", gap: 14, alignItems: "flex-end" }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs12("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }, children: [
     renderBar(items, row.id),
     label(row)
-  ] }, row.id)) }) : multi ? /* @__PURE__ */ jsx11("div", { style: { display: "grid", gridTemplateColumns: "max-content 1fr", columnGap: 12, rowGap: 10, alignItems: "center", flex: legendAt === "right" ? 1 : void 0 }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs9("div", { style: { display: "contents" }, children: [
-    label(row) ?? /* @__PURE__ */ jsx11("span", {}),
+  ] }, row.id)) }) : multi ? /* @__PURE__ */ jsx14("div", { style: { display: "grid", gridTemplateColumns: "max-content 1fr", columnGap: 12, rowGap: 10, alignItems: "center", flex: legendAt === "right" ? 1 : void 0 }, children: rowSegs.map(({ row, items }) => /* @__PURE__ */ jsxs12("div", { style: { display: "contents" }, children: [
+    label(row) ?? /* @__PURE__ */ jsx14("span", {}),
     renderBar(items, row.id)
-  ] }, row.id)) }) : /* @__PURE__ */ jsx11("div", { style: { display: "flex", flex: legendAt === "right" ? 1 : void 0 }, children: renderBar(rowSegs[0].items, rowSegs[0].row.id) });
-  return /* @__PURE__ */ jsxs9(
+  ] }, row.id)) }) : /* @__PURE__ */ jsx14("div", { style: { display: "flex", flex: legendAt === "right" ? 1 : void 0 }, children: renderBar(rowSegs[0].items, rowSegs[0].row.id) });
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className,
@@ -1466,8 +2010,11 @@ export {
   AreaChart,
   BarChart,
   BarPlot,
+  CandlePlot,
+  CandlestickChart,
   CartesianChart,
   DEFAULT_PERIODS,
+  DonutChart,
   FnChart,
   FnChartSlot,
   HorizontalBarChart,
@@ -1480,6 +2027,7 @@ export {
   Point,
   ReferenceLine,
   Scrubber,
+  TreemapChart,
   XAxis,
   YAxis,
   formatNumber,

package/dist/viz/candles.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import { type XAxisProps, type YAxisProps } from './axes';
+import { type CartesianChartProps } from './cartesian-chart';
+export interface Candle {
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume?: number;
+}
+export interface CandlePlotProps {
+    data: readonly (Candle | null)[];
+    /** Axis the prices are on (when the chart has several). */
+    yAxisId?: string;
+    /** Default '#F04452' (Korean red-up). */
+    upColor?: string;
+    /** Default '#3182F6'. */
+    downColor?: string;
+    /** Body width as a share of the slot. Default 0.7. */
+    bodyWidth?: number;
+    /** Hollow bodies for up candles. Default false. */
+    hollowUp?: boolean;
+    /** Pointer line + OHLC tooltip while scrubbing. Default true. */
+    tooltip?: boolean;
+    /** Tooltip row names. Default 시가/고가/저가/종가 (Korean) — pass English if needed. */
+    labels?: {
+        open: string;
+        high: string;
+        low: string;
+        close: string;
+        volume?: string;
+    };
+    valueFormatter?: (value: number) => string;
+}
+/** Candles (wick + body) for each x slot. Needs a band x axis and a y axis that covers low–high. */
+export declare function CandlePlot({ data, yAxisId, upColor, downColor, bodyWidth, hollowUp, tooltip, labels, valueFormatter, }: CandlePlotProps): import("react").JSX.Element | null;
+type AxisToggle<P> = boolean | P;
+export interface CandlestickChartProps extends Omit<CartesianChartProps, 'series' | 'yAxis' | 'stacked' | 'children' | 'legend'>, Pick<CandlePlotProps, 'upColor' | 'downColor' | 'bodyWidth' | 'hollowUp' | 'labels' | 'valueFormatter'> {
+    data: readonly (Candle | null)[];
+    /** Volume bars along the bottom (from `data[i].volume`). Default true when volumes exist. */
+    showVolume?: boolean;
+    /** Share of the height the volume bars may use. Default 0.22. */
+    volumeHeight?: number;
+    /** Default true (right side). */
+    showYAxis?: AxisToggle<YAxisProps>;
+    showXAxis?: AxisToggle<XAxisProps>;
+    /** Pointer line + OHLC tooltip. Default true. */
+    tooltip?: boolean;
+    /** ReferenceLine (use `yAxisId="price"`), Point, … */
+    children?: ReactNode;
+}
+/**
+ * A small candlestick chart in SVG for cards and dashboards (the full trading chart is `FnChart`).
+ * Prices sit on axis "price", volume on axis "volume".
+ */
+export declare function CandlestickChart({ data, showVolume, volumeHeight, showYAxis, showXAxis, tooltip, upColor, downColor, bodyWidth, hollowUp, labels, valueFormatter, xAxis, children, getScrubberAccessibilityLabel, ...chart }: CandlestickChartProps): import("react").JSX.Element;
+export {};

package/dist/viz/donut.d.ts

@@ -0,0 +1,55 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type LegendShape } from './legend';
+export interface DonutItem {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface DonutCenter {
+    /** Big text in the middle. */
+    value: string;
+    /** Small text under it. */
+    label?: string;
+}
+export interface DonutChartProps {
+    data: readonly DonutItem[];
+    /** Diameter, px. Default 180. */
+    size?: number;
+    /** Hole size as a share of the radius, 0–0.95. 0 draws a pie. Default 0.68. */
+    innerRadius?: number;
+    /** Gap between segments, degrees. Default 1.5. */
+    padAngle?: number;
+    /** Rounded segment corners, px. Default 3. */
+    cornerRadius?: number;
+    /**
+     * Text in the hole. Default: the hovered item's share and label, otherwise the total.
+     * Return null to leave the hole empty.
+     */
+    center?: (active: {
+        item: DonutItem;
+        fraction: number;
+    } | null, total: number) => DonutCenter | ReactNode | null;
+    /** Label under the total when nothing is hovered (e.g. "총 자산"). */
+    totalLabel?: string;
+    valueFormatter?: (value: number) => string;
+    /** Default true. */
+    showLegend?: boolean;
+    /** Default 'right'. */
+    legendPosition?: 'right' | 'bottom';
+    legendShape?: LegendShape;
+    /** Legend values. Default: the share ("42.0%"). */
+    formatLabel?: (item: DonutItem, fraction: number) => string;
+    /** Controlled highlight (id) — e.g. synced with a table row. */
+    activeId?: string | null;
+    onActiveChange?: (id: string | null) => void;
+    palette?: readonly string[];
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Ring (or pie) of shares: portfolio by asset, sector weights, account mix.
+ * Hover or arrow keys highlight a segment; the hole shows its share.
+ */
+export declare function DonutChart({ data, size, innerRadius, padAngle, cornerRadius, center, totalLabel, valueFormatter, showLegend, legendPosition, legendShape, formatLabel, activeId, onActiveChange, palette, className, style, 'aria-label': ariaLabel, }: DonutChartProps): import("react").JSX.Element;

package/dist/viz/index.d.ts

@@ -3,6 +3,9 @@ export { XAxis, YAxis, type XAxisProps, type YAxisProps } from './axes';
 export { Line, Area, type LineProps, type AreaProps, type AreaFill, type LinePoint, type SplitColors, type GradientStop } from './line';
 export { BarPlot, type BarPlotProps } from './bar';
 export { HorizontalBarChart, type HorizontalBarChartProps } from './horizontal-bar';
+export { DonutChart, type DonutChartProps, type DonutItem, type DonutCenter } from './donut';
+export { TreemapChart, type TreemapChartProps, type TreemapItem } from './treemap';
+export { CandlestickChart, CandlePlot, type CandlestickChartProps, type CandlePlotProps, type Candle } from './candles';
 export { Scrubber, type ScrubberProps } from './scrubber';
 export { ReferenceLine, Point, type ReferenceLineProps, type PointProps } from './annotations';
 export { Legend, type LegendProps, type LegendItem, type LegendPosition, type LegendShape } from './legend';

package/dist/viz/treemap.d.ts

@@ -0,0 +1,48 @@
+import { type CSSProperties } from 'react';
+export interface TreemapItem {
+    id: string;
+    label: string;
+    /** Tile size (market cap, holding value). */
+    value: number;
+    /** Colors the tile: up / down intensity (e.g. today's change, %). */
+    change?: number;
+    /** Fixed tile color (wins over `change`). */
+    color?: string;
+    /** Second line under the label (e.g. price). */
+    sublabel?: string;
+}
+export interface TreemapChartProps {
+    data: readonly TreemapItem[];
+    width?: number;
+    /** Default 280. */
+    height?: number;
+    /** Gap between tiles, px. Default 2. */
+    gap?: number;
+    /** Tile corner radius. Default 4. */
+    radius?: number;
+    /** Color for rising tiles. Default '#F04452' (Korean red-up). */
+    upColor?: string;
+    /** Color for falling tiles. Default '#3182F6'. */
+    downColor?: string;
+    /** Color for flat (or near-zero) tiles. Default '#8B95A1'. */
+    flatColor?: string;
+    /** |change| at or above this gets the full up/down color. Default 5 (%). */
+    maxChange?: number;
+    /** Custom tile color; return undefined to fall back. */
+    getColor?: (item: TreemapItem, index: number) => string | undefined;
+    /** Change text on tiles and in the tooltip. Default "+2.31%". */
+    changeFormatter?: (change: number) => string;
+    valueFormatter?: (value: number) => string;
+    /** Hover / arrow keys show a tooltip with the value. Default true. */
+    enableTooltip?: boolean;
+    onItemClick?: (item: TreemapItem) => void;
+    palette?: readonly string[];
+    className?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Tiles sized by value and colored by change: market maps, sector heatmaps, holdings by weight.
+ * Labels shrink with the tile and hide when they don't fit.
+ */
+export declare function TreemapChart({ data, width: fixedWidth, height, gap, radius, upColor, downColor, flatColor, maxChange, getColor, changeFormatter, valueFormatter, enableTooltip, onItemClick, palette, className, style, 'aria-label': ariaLabel, }: TreemapChartProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-react",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "React bindings for Funnest Charts: the trading widget plus SVG line, area and bar charts",
   "keywords": [
     "react",
@@ -46,9 +46,9 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.2.1",
-    "@funnest/charts-viz": "0.2.1",
-    "@funnest/charts-ui": "0.2.1"
+    "@funnest/charts-ui": "0.4.0",
+    "@funnest/charts": "0.4.0",
+    "@funnest/charts-viz": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=18",