@keyfunc/keybricks-ds 1.0.0

package/components/charts/BoxPlot.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { fmtNum, niceTicks, scaleLin, seriesColor } from "./chart-geometry.js";
+import { ChartTooltip, PlotGrid, wrapStyle } from "./ChartKit.jsx";
+
+/** Five-number summary from raw values (Tukey fences for outliers). */
+export function summarize(values) {
+  const v = values.slice().sort((a, b) => a - b);
+  const q = (p) => { const i = (v.length - 1) * p, lo = Math.floor(i), hi = Math.ceil(i); return v[lo] + (v[hi] - v[lo]) * (i - lo); };
+  const q1 = q(0.25), med = q(0.5), q3 = q(0.75), iqr = q3 - q1;
+  const lo = Math.max(v[0], q1 - 1.5 * iqr), hi = Math.min(v[v.length - 1], q3 + 1.5 * iqr);
+  return { q1, med, q3, lo, hi, outliers: v.filter((x) => x < lo || x > hi) };
+}
+
+/**
+ * Box & whisker — spread and outliers per group. groups: [{label, values}] (summarized
+ * for you) or [{label, q1, med, q3, lo, hi, outliers}] when you have the stats already.
+ */
+export function BoxPlot({ groups = [], width = 560, height = 260, axes = true, valueFormat = fmtNum, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const boxes = groups.map((g) => (g.values ? { label: g.label, color: g.color, ...summarize(g.values) } : g));
+  const pad = { l: axes ? 44 : 4, r: 8, t: 12, b: axes ? 26 : 4 };
+  const all = boxes.flatMap((b) => [b.lo, b.hi, ...(b.outliers || [])]);
+  const { ticks, lo, hi } = niceTicks(Math.min(...all), Math.max(...all), 4);
+  const sy = scaleLin(lo, hi, height - pad.b, pad.t);
+  const slot = (width - pad.l - pad.r) / boxes.length;
+  const bw = Math.min(slot * 0.5, 38);
+  const move = (e) => {
+    if (!interactive) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const i = Math.floor((e.clientX - r.left - pad.l) / slot);
+    setHover(i >= 0 && i < boxes.length ? i : null);
+  };
+  const h = hover != null ? boxes[hover] : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
+        {axes ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sy} xLabels={[]} sxLabel={() => 0} yFormat={valueFormat} /> : null}
+        {boxes.map((b, i) => {
+          const x = pad.l + slot * i + slot / 2;
+          const c = b.color || seriesColor(i);
+          return (
+            <g key={b.label} opacity={hover == null || hover === i ? 1 : 0.45} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }}>
+              <line x1={x} x2={x} y1={sy(b.hi)} y2={sy(b.q3)} stroke="var(--chart-axis)" strokeWidth="1" />
+              <line x1={x} x2={x} y1={sy(b.q1)} y2={sy(b.lo)} stroke="var(--chart-axis)" strokeWidth="1" />
+              <line x1={x - bw / 3} x2={x + bw / 3} y1={sy(b.hi)} y2={sy(b.hi)} stroke="var(--chart-axis)" strokeWidth="1" />
+              <line x1={x - bw / 3} x2={x + bw / 3} y1={sy(b.lo)} y2={sy(b.lo)} stroke="var(--chart-axis)" strokeWidth="1" />
+              <rect x={x - bw / 2} y={sy(b.q3)} width={bw} height={Math.max(1, sy(b.q1) - sy(b.q3))} rx="2" fill={c} fillOpacity="0.28" stroke={c} strokeWidth="1.2" />
+              <line x1={x - bw / 2} x2={x + bw / 2} y1={sy(b.med)} y2={sy(b.med)} stroke={c} strokeWidth="2" />
+              {(b.outliers || []).map((o, oi) => <circle key={oi} cx={x} cy={sy(o)} r="2.2" fill="none" stroke={c} strokeWidth="1" />)}
+              <text x={x} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{b.label}</text>
+            </g>
+          );
+        })}
+      </svg>
+      {h && interactive ? (
+        <ChartTooltip x={pad.l + slot * hover + slot / 2} y={height / 2 - 10} flip={pad.l + slot * hover > width * 0.62} title={h.label}
+          rows={[{ label: "max", value: valueFormat(h.hi) }, { label: "Q3", value: valueFormat(h.q3) }, { label: "median", value: valueFormat(h.med), color: h.color || seriesColor(hover) }, { label: "Q1", value: valueFormat(h.q1) }, { label: "min", value: valueFormat(h.lo) }]
+            .concat((h.outliers || []).length ? [{ label: "outliers", value: String(h.outliers.length) }] : [])} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/BoxPlot.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, niceTicks, scaleLin, SERIES } from './chart-geometry.js'
+// Box & whisker with Tukey-fence outliers. Pass raw values or the five-number stats.
+const props = defineProps({ groups:{type:Array,default:()=>[]}, width:{type:Number,default:560}, height:{type:Number,default:260}, axes:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+function summarize(values){
+  const v = values.slice().sort((a,b)=>a-b)
+  const q = p => { const i=(v.length-1)*p, lo=Math.floor(i), hi=Math.ceil(i); return v[lo]+(v[hi]-v[lo])*(i-lo) }
+  const q1=q(0.25), med=q(0.5), q3=q(0.75), iqr=q3-q1
+  const lo=Math.max(v[0], q1-1.5*iqr), hi=Math.min(v[v.length-1], q3+1.5*iqr)
+  return { q1, med, q3, lo, hi, outliers: v.filter(x=>x<lo||x>hi) }
+}
+const g = computed(() => {
+  const boxes = props.groups.map((x,i)=> Object.assign({ label:x.label, color:x.color||SERIES[i%SERIES.length] }, x.values ? summarize(x.values) : x))
+  const pad = { l: props.axes?44:4, r:8, t:12, b: props.axes?26:4 }
+  const all = boxes.flatMap(b=>[b.lo, b.hi, ...(b.outliers||[])])
+  const { ticks, lo, hi } = niceTicks(Math.min(...all), Math.max(...all), 4)
+  const sy = scaleLin(lo, hi, props.height-pad.b, pad.t)
+  const slot = (props.width-pad.l-pad.r)/boxes.length
+  const bw = Math.min(slot*0.5, 38)
+  return { boxes: boxes.map((b,i)=>Object.assign({}, b, { x: pad.l+slot*i+slot/2, bw })), pad, ticks, sy, slot }
+})
+function move(e){
+  if(!props.interactive) return
+  const r = e.currentTarget.getBoundingClientRect()
+  const i = Math.floor((e.clientX-r.left-g.value.pad.l)/g.value.slot)
+  hover.value = i>=0 && i<g.value.boxes.length ? i : null
+}
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" @mousemove="move" @mouseleave="hover=null" role="img">
+      <template v-if="axes">
+        <g v-for="t in g.ticks" :key="t">
+          <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ valueFormat(t) }}</text>
+        </g>
+      </template>
+      <g v-for="(b,i) in g.boxes" :key="b.label" :opacity="hover==null||hover===i?1:0.45" style="transition:opacity var(--dur-fast) var(--ease-out)">
+        <line :x1="b.x" :x2="b.x" :y1="g.sy(b.hi)" :y2="g.sy(b.q3)" stroke="var(--chart-axis)" stroke-width="1"/>
+        <line :x1="b.x" :x2="b.x" :y1="g.sy(b.q1)" :y2="g.sy(b.lo)" stroke="var(--chart-axis)" stroke-width="1"/>
+        <line :x1="b.x-b.bw/3" :x2="b.x+b.bw/3" :y1="g.sy(b.hi)" :y2="g.sy(b.hi)" stroke="var(--chart-axis)" stroke-width="1"/>
+        <line :x1="b.x-b.bw/3" :x2="b.x+b.bw/3" :y1="g.sy(b.lo)" :y2="g.sy(b.lo)" stroke="var(--chart-axis)" stroke-width="1"/>
+        <rect :x="b.x-b.bw/2" :y="g.sy(b.q3)" :width="b.bw" :height="Math.max(1,g.sy(b.q1)-g.sy(b.q3))" rx="2" :fill="b.color" fill-opacity="0.28" :stroke="b.color" stroke-width="1.2"/>
+        <line :x1="b.x-b.bw/2" :x2="b.x+b.bw/2" :y1="g.sy(b.med)" :y2="g.sy(b.med)" :stroke="b.color" stroke-width="2"/>
+        <circle v-for="(o,oi) in (b.outliers||[])" :key="oi" :cx="b.x" :cy="g.sy(o)" r="2.2" fill="none" :stroke="b.color" stroke-width="1"/>
+        <text :x="b.x" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ b.label }}</text>
+      </g>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.boxes[hover].x+'px',top:(height/2-10)+'px',transform:g.boxes[hover].x>width*0.62?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ g.boxes[hover].label }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">
+        {{ valueFormat(g.boxes[hover].lo) }} · Q1 {{ valueFormat(g.boxes[hover].q1) }} · med {{ valueFormat(g.boxes[hover].med) }} · Q3 {{ valueFormat(g.boxes[hover].q3) }} · {{ valueFormat(g.boxes[hover].hi) }}
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/BulletChart.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface BulletRow { label: string; value: number; target: number; max?: number; /** [poor, ok] track tints */ ranges?: [number, number]; }
+/** Actual vs. target rows with a target tick. tone "auto" colors misses red. */
+export interface BulletChartProps {
+  rows?: BulletRow[];
+  width?: number;
+  tone?: "default" | "auto";
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function BulletChart(props: BulletChartProps): JSX.Element;

package/components/charts/BulletChart.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { fmtNum } from "./chart-geometry.js";
+
+/**
+ * Bullet rows — actual vs. target on a qualitative track. rows:
+ * [{label, value, target, max?, ranges?: [poor, ok] }] — ranges tint the track;
+ * the bar is --series-1 (or --chart-neg when value misses target with tone="auto").
+ */
+export function BulletChart({ rows = [], width = 360, valueFormat = fmtNum, tone = "default", interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 14, width, ...style }}>
+      {rows.map((r) => {
+        const max = r.max != null ? r.max : Math.max(r.value, r.target) * 1.15;
+        const pc = (v) => Math.min(100, (v / max) * 100) + "%";
+        const missed = r.value < r.target;
+        const bar = tone === "auto" ? (missed ? "var(--chart-neg)" : "var(--chart-pos)") : "var(--series-1)";
+        const on = hover === r.label;
+        return (
+          <div key={r.label} onMouseEnter={interactive ? () => setHover(r.label) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+            style={{ opacity: hover == null || on ? 1 : 0.55, transition: "var(--t-hover)" }}>
+            <div style={{ display: "flex", alignItems: "baseline", paddingBottom: 4 }}>
+              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-body)" }}>{r.label}</span>
+              <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{valueFormat(r.value)}</span>
+              <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingLeft: 6 }}>/ {valueFormat(r.target)}</span>
+              {on ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: missed ? "var(--chart-neg)" : "var(--chart-pos)", paddingLeft: 8 }}>{(missed ? "" : "+") + (((r.value - r.target) / (r.target || 1)) * 100).toFixed(1)}%</span> : null}
+            </div>
+            <div style={{ position: "relative", height: 12, borderRadius: 3, background: "var(--chart-track)", overflow: "hidden" }}>
+              {r.ranges ? <>
+                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: pc(r.ranges[0]), background: "var(--alpha-heavy, rgba(0,0,0,.12))", opacity: 0.5 }} />
+                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: pc(r.ranges[1]), background: "var(--alpha-heavy, rgba(0,0,0,.12))", opacity: 0.25 }} />
+              </> : null}
+              <div style={{ position: "absolute", left: 0, top: 3, bottom: 3, width: pc(r.value), borderRadius: 2, background: bar, transition: "width var(--dur) var(--ease-out)" }} />
+              <div style={{ position: "absolute", left: pc(r.target), top: 0, bottom: 0, width: 2, background: "var(--chart-total)" }} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/charts/BulletChart.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue'
+import { fmtNum } from './chart-geometry.js'
+// Actual vs. target rows with a target tick. tone "auto" colors misses red.
+const props = defineProps({ rows:{type:Array,default:()=>[]}, width:{type:Number,default:360}, tone:{type:String,default:'default'}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+function geom(r){
+  const max = r.max!=null ? r.max : Math.max(r.value,r.target)*1.15
+  const pc = v => Math.min(100,(v/max)*100)+'%'
+  return { pc, bar: props.tone==='auto' ? (r.value<r.target?'var(--chart-neg)':'var(--chart-pos)') : 'var(--series-1)' }
+}
+</script>
+<template>
+  <div :style="{display:'flex',flexDirection:'column',gap:'14px',width:width+'px',...style}">
+    <div v-for="r in rows" :key="r.label" @mouseenter="interactive && (hover=r.label)" @mouseleave="interactive && (hover=null)"
+      :style="{opacity:hover==null||hover===r.label?1:0.55,transition:'var(--t-hover)'}">
+      <div style="display:flex;align-items:baseline;padding-bottom:4px">
+        <span style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-body)">{{ r.label }}</span>
+        <span style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>
+        <span style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);padding-left:6px">/ {{ valueFormat(r.target) }}</span>
+        <span v-if="hover===r.label" :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',paddingLeft:'8px',color:r.value<r.target?'var(--chart-neg)':'var(--chart-pos)'}">{{ (r.value<r.target?'':'+')+(((r.value-r.target)/(r.target||1))*100).toFixed(1) }}%</span>
+      </div>
+      <div style="position:relative;height:12px;border-radius:3px;background:var(--chart-track);overflow:hidden">
+        <template v-if="r.ranges">
+          <div :style="{position:'absolute',left:0,top:0,bottom:0,width:geom(r).pc(r.ranges[0]),background:'rgba(0,0,0,.12)',opacity:.5}"/>
+          <div :style="{position:'absolute',left:0,top:0,bottom:0,width:geom(r).pc(r.ranges[1]),background:'rgba(0,0,0,.12)',opacity:.25}"/>
+        </template>
+        <div :style="{position:'absolute',left:0,top:'3px',bottom:'3px',width:geom(r).pc(r.value),borderRadius:'2px',background:geom(r).bar,transition:'width var(--dur) var(--ease-out)'}"/>
+        <div :style="{position:'absolute',left:geom(r).pc(r.target),top:0,bottom:0,width:'2px',background:'var(--chart-total)'}"/>
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/CandlestickChart.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface Candle { /** Axis label (date) */ t: string; o: number; h: number; l: number; c: number; /** Volume */ v?: number; }
+/** OHLC K-line with optional volume band and moving average. */
+export interface CandlestickChartProps {
+  candles?: Candle[];
+  width?: number; height?: number;
+  axes?: boolean;
+  /** Volume histogram under the price plot */ volume?: boolean;
+  /** Moving-average window in periods; 0 = off */ ma?: number;
+  /** Hollow bodies for up candles (East-Asian convention) */ hollowUp?: boolean;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function CandlestickChart(props: CandlestickChartProps): JSX.Element;

package/components/charts/CandlestickChart.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { fmtNum, niceTicks, scaleLin } from "./chart-geometry.js";
+import { ChartTooltip, PlotGrid, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Candlestick (K-line) — OHLC price action with an optional volume band and moving average.
+ * candles: [{t, o, h, l, c, v?}]. Up candles are --chart-pos, down --chart-neg; a hovered
+ * candle pins the full OHLC readout. Set hollowUp for the East-Asian hollow-body convention.
+ */
+export function CandlestickChart({ candles = [], width = 620, height = 300, axes = true, volume = true, ma = 0, hollowUp = false, valueFormat = fmtNum, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const volH = volume ? Math.round(height * 0.22) : 0;
+  const pad = { l: axes ? 46 : 4, r: 8, t: 10, b: (axes ? 22 : 4) + volH };
+  const { ticks, lo, hi } = niceTicks(Math.min(...candles.map((c) => c.l)), Math.max(...candles.map((c) => c.h)), 4);
+  const sy = scaleLin(lo, hi, height - pad.b, pad.t);
+  const slot = (width - pad.l - pad.r) / (candles.length || 1);
+  const bw = Math.max(2, Math.min(slot * 0.62, 14));
+  const cx = (i) => pad.l + slot * i + slot / 2;
+  const maxV = Math.max(1, ...candles.map((c) => c.v || 0));
+  const vy = (v) => height - (axes ? 22 : 4) - (v / maxV) * (volH - 6);
+  const avg = ma > 1 ? candles.map((_, i) => (i < ma - 1 ? null : candles.slice(i - ma + 1, i + 1).reduce((s, c) => s + c.c, 0) / ma)) : null;
+  const move = (e) => {
+    if (!interactive) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const i = Math.floor((e.clientX - r.left - pad.l) / slot);
+    setHover(i >= 0 && i < candles.length ? i : null);
+  };
+  const h = hover != null ? candles[hover] : null;
+  const up = (c) => c.c >= c.o;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
+        {axes ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sy} xLabels={[]} sxLabel={() => 0} yFormat={valueFormat} /> : null}
+        {hover != null ? <rect x={pad.l + slot * hover} y={pad.t} width={slot} height={height - pad.t - (axes ? 22 : 4)} fill="var(--bg-hover)" /> : null}
+        {avg ? <path d={"M" + avg.map((v, i) => (v == null ? null : cx(i).toFixed(1) + " " + sy(v).toFixed(1))).filter(Boolean).join(" L")} fill="none" stroke="var(--series-8)" strokeWidth="1.3" /> : null}
+        {candles.map((c, i) => {
+          const col = up(c) ? "var(--chart-pos)" : "var(--chart-neg)";
+          const yO = sy(c.o), yC = sy(c.c);
+          const top = Math.min(yO, yC), body = Math.max(1.5, Math.abs(yC - yO));
+          const solid = !hollowUp || !up(c);
+          return (
+            <g key={i} opacity={hover == null || hover === i ? 1 : 0.5} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }}>
+              <line x1={cx(i)} x2={cx(i)} y1={sy(c.h)} y2={sy(c.l)} stroke={col} strokeWidth="1" />
+              <rect x={cx(i) - bw / 2} y={top} width={bw} height={body} fill={solid ? col : "var(--bg-surface)"} stroke={col} strokeWidth="1" />
+              {volume && c.v != null ? <rect x={cx(i) - bw / 2} y={vy(c.v)} width={bw} height={Math.max(1, height - (axes ? 22 : 4) - vy(c.v))} fill={col} opacity="0.35" /> : null}
+            </g>
+          );
+        })}
+        {volume ? <line x1={pad.l} x2={width - pad.r} y1={height - (axes ? 22 : 4)} y2={height - (axes ? 22 : 4)} stroke="var(--chart-axis)" strokeWidth="1" /> : null}
+        {axes ? candles.map((c, i) => (i % Math.ceil(candles.length / 6) ? null : (
+          <text key={"t" + i} x={cx(i)} y={height - 6} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{c.t}</text>
+        ))) : null}
+      </svg>
+      {h && interactive ? (
+        <ChartTooltip x={cx(hover)} y={height / 2 - 20} flip={cx(hover) > width * 0.62} title={h.t}
+          rows={[{ label: "open", value: valueFormat(h.o) }, { label: "high", value: valueFormat(h.h) }, { label: "low", value: valueFormat(h.l) },
+                 { label: "close", value: valueFormat(h.c), color: up(h) ? "var(--chart-pos)" : "var(--chart-neg)" },
+                 { label: "change", value: ((h.c - h.o) >= 0 ? "+" : "") + (((h.c - h.o) / (h.o || 1)) * 100).toFixed(2) + "%" }]
+            .concat(h.v != null ? [{ label: "volume", value: fmtNum(h.v) }] : [])} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/CandlestickChart.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, niceTicks, scaleLin } from './chart-geometry.js'
+// OHLC K-line with optional volume band and moving average.
+const props = defineProps({ candles:{type:Array,default:()=>[]}, width:{type:Number,default:620}, height:{type:Number,default:300}, axes:{type:Boolean,default:true}, volume:{type:Boolean,default:true}, ma:{type:Number,default:0}, hollowUp:Boolean, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const g = computed(() => {
+  const volH = props.volume ? Math.round(props.height*0.22) : 0
+  const axisB = props.axes ? 22 : 4
+  const pad = { l: props.axes?46:4, r:8, t:10, b: axisB+volH }
+  const { ticks, lo, hi } = niceTicks(Math.min(...props.candles.map(c=>c.l)), Math.max(...props.candles.map(c=>c.h)), 4)
+  const sy = scaleLin(lo, hi, props.height-pad.b, pad.t)
+  const slot = (props.width-pad.l-pad.r)/(props.candles.length||1)
+  const bw = Math.max(2, Math.min(slot*0.62, 14))
+  const cx = i => pad.l+slot*i+slot/2
+  const maxV = Math.max(1, ...props.candles.map(c=>c.v||0))
+  const vy = v => props.height-axisB-(v/maxV)*(volH-6)
+  const avg = props.ma>1 ? props.candles.map((_,i)=> i<props.ma-1 ? null : props.candles.slice(i-props.ma+1,i+1).reduce((s,c)=>s+c.c,0)/props.ma) : null
+  const bars = props.candles.map((c,i)=>{
+    const up = c.c>=c.o, col = up?'var(--chart-pos)':'var(--chart-neg)'
+    const yO=sy(c.o), yC=sy(c.c)
+    return { c, i, up, col, x:cx(i), bw, top:Math.min(yO,yC), body:Math.max(1.5,Math.abs(yC-yO)), yH:sy(c.h), yL:sy(c.l),
+      solid: !props.hollowUp || !up, vY: c.v!=null?vy(c.v):null, vH: c.v!=null?Math.max(1, props.height-axisB-vy(c.v)):0 }
+  })
+  const maPath = avg ? 'M'+avg.map((v,i)=> v==null?null:cx(i).toFixed(1)+' '+sy(v).toFixed(1)).filter(Boolean).join(' L') : null
+  return { pad, ticks, sy, slot, cx, bars, maPath, axisB, every: Math.ceil(props.candles.length/6) }
+})
+function move(e){
+  if(!props.interactive) return
+  const r = e.currentTarget.getBoundingClientRect()
+  const i = Math.floor((e.clientX-r.left-g.value.pad.l)/g.value.slot)
+  hover.value = i>=0 && i<props.candles.length ? i : null
+}
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" @mousemove="move" @mouseleave="hover=null" role="img">
+      <template v-if="axes">
+        <g v-for="t in g.ticks" :key="t">
+          <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ valueFormat(t) }}</text>
+        </g>
+      </template>
+      <rect v-if="hover!=null" :x="g.pad.l+g.slot*hover" :y="g.pad.t" :width="g.slot" :height="height-g.pad.t-g.axisB" fill="var(--bg-hover)"/>
+      <path v-if="g.maPath" :d="g.maPath" fill="none" stroke="var(--series-8)" stroke-width="1.3"/>
+      <g v-for="b in g.bars" :key="b.i" :opacity="hover==null||hover===b.i?1:0.5" style="transition:opacity var(--dur-fast) var(--ease-out)">
+        <line :x1="b.x" :x2="b.x" :y1="b.yH" :y2="b.yL" :stroke="b.col" stroke-width="1"/>
+        <rect :x="b.x-b.bw/2" :y="b.top" :width="b.bw" :height="b.body" :fill="b.solid?b.col:'var(--bg-surface)'" :stroke="b.col" stroke-width="1"/>
+        <rect v-if="volume && b.vY!=null" :x="b.x-b.bw/2" :y="b.vY" :width="b.bw" :height="b.vH" :fill="b.col" opacity="0.35"/>
+      </g>
+      <line v-if="volume" :x1="g.pad.l" :x2="width-g.pad.r" :y1="height-g.axisB" :y2="height-g.axisB" stroke="var(--chart-axis)" stroke-width="1"/>
+      <text v-if="axes" v-for="b in g.bars.filter(b=>b.i%g.every===0)" :key="'t'+b.i" :x="b.x" :y="height-6" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ b.c.t }}</text>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.cx(hover)+'px',top:(height/2-20)+'px',transform:g.cx(hover)>width*0.62?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ candles[hover].t }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">O {{ valueFormat(candles[hover].o) }} · H {{ valueFormat(candles[hover].h) }} · L {{ valueFormat(candles[hover].l) }} · C {{ valueFormat(candles[hover].c) }}</div>
+      <div :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',color:candles[hover].c>=candles[hover].o?'var(--chart-pos)':'var(--chart-neg)'}">
+        {{ (candles[hover].c-candles[hover].o>=0?'+':'')+(((candles[hover].c-candles[hover].o)/(candles[hover].o||1))*100).toFixed(2) }}%<span v-if="candles[hover].v!=null" style="color:var(--text-muted)"> · vol {{ fmtNum(candles[hover].v) }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/ChartKit.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/** Shared chart furniture: legend, tooltip, grid. Used by every chart; rarely imported directly. */
+export interface LegendItem { label: string; color?: string; }
+export interface ChartLegendProps { items?: LegendItem[]; hidden?: string[]; onToggle?: (label: string) => void; align?: "left" | "right"; style?: React.CSSProperties; }
+export declare function ChartLegend(props: ChartLegendProps): JSX.Element;
+export interface TooltipRow { label: string; value: string; color?: string; }
+export interface ChartTooltipProps { x: number; y: number; title?: React.ReactNode; rows?: TooltipRow[]; /** Render to the left of the anchor */ flip?: boolean; }
+export declare function ChartTooltip(props: ChartTooltipProps): JSX.Element;

package/components/charts/ChartKit.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { fmtNum, seriesColor } from "./chart-geometry.js";
+
+const sans = "var(--font-sans)", mono = "var(--font-mono)";
+
+/** Legend row. items: [{label,color}] — with onToggle, clicking mutes a series. */
+export function ChartLegend({ items = [], hidden = [], onToggle, align = "left", style }) {
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 14px", justifyContent: align === "right" ? "flex-end" : "flex-start", lineHeight: "normal", ...style }}>
+      {items.map((it, i) => {
+        const off = hidden.includes(it.label);
+        return (
+          <span key={it.label} role={onToggle ? "button" : undefined} tabIndex={onToggle ? 0 : undefined}
+            onClick={onToggle ? () => onToggle(it.label) : undefined}
+            style={{ display: "inline-flex", alignItems: "center", gap: 6, cursor: onToggle ? "pointer" : "default", opacity: off ? 0.4 : 1, transition: "var(--t-hover)" }}>
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: it.color || seriesColor(i), flexShrink: 0 }} />
+            <span style={{ fontFamily: sans, fontSize: "var(--text-xs)", color: "var(--text-secondary)", textDecoration: off ? "line-through" : "none" }}>{it.label}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Floating tooltip. rows: [{label,value,color}]; pins near (x,y) inside the chart wrapper. */
+export function ChartTooltip({ x, y, title, rows = [], flip }) {
+  return (
+    <div style={{ position: "absolute", left: x, top: y, transform: `translate(${flip ? "calc(-100% - 10px)" : "10px"}, -50%)`, pointerEvents: "none", zIndex: 5, background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-menu)", padding: "7px 10px", minWidth: 90, lineHeight: "normal", whiteSpace: "nowrap" }}>
+      {title != null ? <div style={{ fontFamily: sans, fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingBottom: rows.length ? 4 : 0, whiteSpace: "nowrap" }}>{title}</div> : null}
+      {rows.map((r, i) => (
+        <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "1px 0" }}>
+          {r.color ? <span style={{ width: 7, height: 7, borderRadius: 2, background: r.color, flexShrink: 0 }} /> : null}
+          <span style={{ fontFamily: sans, fontSize: "var(--text-xs)", color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{r.label}</span>
+          <span style={{ fontFamily: mono, fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: "auto", paddingLeft: 10 }}>{r.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** y-axis tick labels + horizontal gridlines, x category labels. Shared plot furniture. */
+export function PlotGrid({ w, h, pad, ticks, sy, xLabels = [], sxLabel, showAxisLine = false, yFormat = fmtNum }) {
+  return (
+    <g>
+      {ticks.map((t) => (
+        <g key={t}>
+          <line x1={pad.l} x2={w - pad.r} y1={sy(t)} y2={sy(t)} stroke={t === 0 ? "var(--chart-axis)" : "var(--chart-grid)"} strokeWidth="1" />
+          <text x={pad.l - 8} y={sy(t) + 3} textAnchor="end" style={{ fontFamily: mono, fontSize: 10, fill: "var(--chart-label)" }}>{yFormat(t)}</text>
+        </g>
+      ))}
+      {showAxisLine ? <line x1={pad.l} x2={pad.l} y1={pad.t} y2={h - pad.b} stroke="var(--chart-axis)" strokeWidth="1" /> : null}
+      {xLabels.map((lb, i) => (lb == null ? null : (
+        <text key={i} x={sxLabel(i)} y={h - pad.b + 16} textAnchor="middle" style={{ fontFamily: sans, fontSize: 10, fill: "var(--chart-label)" }}>{lb}</text>
+      )))}
+    </g>
+  );
+}
+
+/** Thin x labels only (sm tier / no y axis). */
+export function XLabels({ h, pad, xLabels = [], sxLabel }) {
+  return <g>{xLabels.map((lb, i) => (lb == null ? null : <text key={i} x={sxLabel(i)} y={h - pad.b + 16} textAnchor="middle" style={{ fontFamily: sans, fontSize: 10, fill: "var(--chart-label)" }}>{lb}</text>))}</g>;
+}
+
+/** Skip x labels so they never collide: keeps ~every nth. */
+export function thinLabels(labels, maxShown = 8) {
+  const n = labels.length;
+  if (n <= maxShown) return labels;
+  const step = Math.ceil(n / maxShown);
+  return labels.map((l, i) => (i % step === 0 || i === n - 1 ? l : null));
+}
+
+/** Wrapper div a chart mounts into: relative for tooltips, block-level svg. */
+export const wrapStyle = { position: "relative", display: "inline-block", verticalAlign: "top", lineHeight: 0 };
+
+/** Namespace handle so the kit can be imported as one symbol. */
+export const ChartKit = { ChartLegend, ChartTooltip, PlotGrid, XLabels, thinLabels, wrapStyle };

package/components/charts/ChartKit.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { computed } from 'vue'
+import { SERIES } from './chart-geometry.js'
+/**
+ * Shared chart furniture for the Vue charts — one component, two shapes via `kind`
+ * ("legend" | "tooltip"), so a single import covers both. The React side exposes these
+ * as ChartLegend / ChartTooltip.
+ */
+const props = defineProps({
+  kind: { type: String, default: 'legend' },
+  items: { type: Array, default: () => [] },
+  hidden: { type: Array, default: () => [] },
+  align: { type: String, default: 'left' },
+  x: Number,
+  y: Number,
+  title: String,
+  rows: { type: Array, default: () => [] },
+  flip: Boolean,
+  style: Object,
+})
+const emit = defineEmits(['toggle'])
+const tipStyle = computed(() => ({
+  position: 'absolute', left: props.x + 'px', top: props.y + 'px',
+  transform: props.flip ? 'translate(calc(-100% - 10px),-50%)' : 'translate(10px,-50%)',
+  pointerEvents: 'none', zIndex: 5, background: 'var(--bg-surface)',
+  border: '1px solid var(--border-card)', borderRadius: 'var(--radius-md)',
+  boxShadow: 'var(--shadow-menu)', padding: '7px 10px', minWidth: '90px',
+  lineHeight: 'normal', whiteSpace: 'nowrap',
+}))
+</script>
+<template>
+  <div v-if="kind === 'tooltip'" :style="tipStyle">
+    <div v-if="title != null" style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:4px">{{ title }}</div>
+    <div v-for="(r,i) in rows" :key="i" style="display:flex;align-items:center;gap:6px;padding:1px 0">
+      <span v-if="r.color" :style="{width:'7px',height:'7px',borderRadius:'2px',background:r.color,flexShrink:0}"/>
+      <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ r.label }}</span>
+      <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ r.value }}</span>
+    </div>
+  </div>
+  <div v-else :style="{display:'flex',flexWrap:'wrap',gap:'4px 14px',justifyContent:align==='right'?'flex-end':'flex-start',lineHeight:'normal',...style}">
+    <span v-for="(it,i) in items" :key="it.label" role="button" tabindex="0" @click="emit('toggle', it.label)"
+      :style="{display:'inline-flex',alignItems:'center',gap:'6px',cursor:'pointer',opacity:hidden.includes(it.label)?0.4:1,transition:'var(--t-hover)'}">
+      <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:it.color||SERIES[i%SERIES.length],flexShrink:0}"/>
+      <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-xs)',color:'var(--text-secondary)',textDecoration:hidden.includes(it.label)?'line-through':'none'}">{{ it.label }}</span>
+    </span>
+  </div>
+</template>

package/components/charts/ChordChart.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** Circular Sankey — many-to-many, cyclical flows. matrix[i][j] = flow from i to j. */
+export interface ChordChartProps {
+  labels?: string[];
+  matrix?: number[][];
+  size?: number;
+  /** Arc ring thickness */ thickness?: number;
+  /** Degrees between arcs */ gap?: number;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function ChordChart(props: ChordChartProps): JSX.Element;

package/components/charts/ChordChart.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { fmtNum, chord, chordRibbon, arcPath, polar, seriesColor } from "./chart-geometry.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Chord diagram — the circular Sankey. A square `matrix` of flows between `labels`
+ * (matrix[i][j] = i → j). Use it when flows are many-to-many and cyclical, where a
+ * left-to-right Sankey would cross itself. Hovering an arc isolates that node's flows.
+ */
+export function ChordChart({ labels = [], matrix = [], size = 380, thickness = 14, gap = 2, valueFormat = fmtNum, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const cx = size / 2, cy = size / 2;
+  const rO = size / 2 - 58, rI = rO - thickness;
+  const { arcs, ribbons, totals, grand } = React.useMemo(() => chord(matrix, gap), [matrix, gap]);
+  const colorOf = (i) => seriesColor(i);
+  const lit = (r) => hover == null ? 0.42 : hover.kind === "ribbon" ? (hover.k === r.k ? 0.8 : 0.08) : (r.i === hover.i || r.j === hover.i ? 0.72 : 0.07);
+  const keyed = ribbons.map((r, k) => ({ ...r, k }));
+  const h = hover;
+  const tipRows = () => {
+    if (h.kind === "ribbon") {
+      const r = keyed[h.k];
+      return { title: labels[r.i] + " → " + labels[r.j], rows: [{ label: "flow", value: valueFormat(r.value), color: colorOf(r.i) }, { label: "share", value: ((r.value / grand) * 100).toFixed(1) + "%" }] };
+    }
+    const out = matrix[h.i].reduce((s, v, j) => s + (j === h.i ? 0 : v), 0);
+    const inc = matrix.reduce((s, row, j) => s + (j === h.i ? 0 : row[h.i]), 0);
+    return { title: labels[h.i], rows: [{ label: "outgoing", value: valueFormat(out), color: colorOf(h.i) }, { label: "incoming", value: valueFormat(inc) }, { label: "total", value: valueFormat(totals[h.i]) }] };
+  };
+  const tipAt = h ? polar(cx, cy, rI * 0.55, h.kind === "ribbon" ? (keyed[h.k].a0 + keyed[h.k].b1) / 2 : (arcs[h.i].a0 + arcs[h.i].a1) / 2) : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={size} height={size} role="img">
+        {keyed.map((r) => (
+          <path key={r.k} d={chordRibbon(cx, cy, rI - 1, r.a0, r.a1, r.b0, r.b1)} fill={colorOf(r.i)} opacity={lit(r)}
+            onMouseEnter={interactive ? () => setHover({ kind: "ribbon", k: r.k }) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+            style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
+        ))}
+        {arcs.map((a) => {
+          const mid = (a.a0 + a.a1) / 2;
+          const [lx, ly] = polar(cx, cy, rO + 12, mid);
+          const on = hover && hover.kind === "node" && hover.i === a.i;
+          const anchor = Math.abs(lx - cx) < 10 ? "middle" : lx > cx ? "start" : "end";
+          return (
+            <g key={a.i} onMouseEnter={interactive ? () => setHover({ kind: "node", i: a.i }) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+              style={{ cursor: interactive ? "default" : undefined }}>
+              <path d={arcPath(cx, cy, rO, rI, a.a0, a.a1)} fill={colorOf(a.i)} opacity={hover == null || on ? 1 : 0.4} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
+              <text x={lx} y={ly + 3} textAnchor={anchor} style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fill: on ? "var(--text-heading)" : "var(--text-secondary)" }}>{labels[a.i]}</text>
+              <text x={lx} y={ly + 14} textAnchor={anchor} style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{valueFormat(a.value)}</text>
+            </g>
+          );
+        })}
+      </svg>
+      {h && interactive ? <ChartTooltip x={tipAt[0]} y={tipAt[1]} flip={tipAt[0] > size * 0.55} {...tipRows()} /> : null}
+    </div>
+  );
+}

package/components/charts/ChordChart.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, chord, chordRibbon, arcPath, polar, SERIES } from './chart-geometry.js'
+// Circular Sankey — many-to-many, cyclical flows. matrix[i][j] = flow from i to j.
+const props = defineProps({ labels:{type:Array,default:()=>[]}, matrix:{type:Array,default:()=>[]}, size:{type:Number,default:380}, thickness:{type:Number,default:14}, gap:{type:Number,default:2}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const g = computed(() => {
+  const cx = props.size/2, cy = props.size/2
+  const rO = props.size/2-58, rI = rO-props.thickness
+  const { arcs, ribbons, totals, grand } = chord(props.matrix, props.gap)
+  return { cx, cy, rO, rI, grand, totals,
+    arcs: arcs.map(a=>{
+      const mid=(a.a0+a.a1)/2, l=polar(cx,cy,rO+12,mid)
+      return Object.assign({}, a, { mid, d: arcPath(cx,cy,rO,rI,a.a0,a.a1), color: SERIES[a.i%SERIES.length],
+        lx:l[0], ly:l[1], anchor: Math.abs(l[0]-cx)<10 ? 'middle' : (l[0]>cx?'start':'end') })
+    }),
+    ribbons: ribbons.map((r,k)=>Object.assign({}, r, { k, d: chordRibbon(cx,cy,rI-1,r.a0,r.a1,r.b0,r.b1), color: SERIES[r.i%SERIES.length] })) }
+})
+function op(r){
+  const h = hover.value
+  if (!h) return 0.42
+  return h.kind==='ribbon' ? (h.k===r.k?0.8:0.08) : ((r.i===h.i||r.j===h.i)?0.72:0.07)
+}
+const tip = computed(()=>{
+  const h = hover.value
+  if (!h) return null
+  if (h.kind==='ribbon') {
+    const r = g.value.ribbons[h.k], p = polar(g.value.cx,g.value.cy,g.value.rI*0.55,(r.a0+r.b1)/2)
+    return { x:p[0], y:p[1], title: props.labels[r.i]+' → '+props.labels[r.j], value: props.valueFormat(r.value)+' · '+((r.value/g.value.grand)*100).toFixed(1)+'%' }
+  }
+  const a = g.value.arcs[h.i], p = polar(g.value.cx,g.value.cy,g.value.rI*0.55,a.mid)
+  const out = props.matrix[h.i].reduce((s,v,j)=>s+(j===h.i?0:v),0)
+  const inc = props.matrix.reduce((s,row,j)=>s+(j===h.i?0:row[h.i]),0)
+  return { x:p[0], y:p[1], title: props.labels[h.i], value: 'out '+props.valueFormat(out)+' · in '+props.valueFormat(inc) }
+})
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="size" :height="size" role="img">
+      <path v-for="r in g.ribbons" :key="r.k" :d="r.d" :fill="r.color" :opacity="op(r)"
+        @mouseenter="interactive && (hover={kind:'ribbon',k:r.k})" @mouseleave="interactive && (hover=null)"
+        style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+      <g v-for="a in g.arcs" :key="a.i" @mouseenter="interactive && (hover={kind:'node',i:a.i})" @mouseleave="interactive && (hover=null)">
+        <path :d="a.d" :fill="a.color" :opacity="hover==null||(hover.kind==='node'&&hover.i===a.i)?1:0.4" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+        <text :x="a.lx" :y="a.ly+3" :text-anchor="a.anchor" style="font-family:var(--font-sans);font-size:10.5px;fill:var(--text-secondary)">{{ labels[a.i] }}</text>
+        <text :x="a.lx" :y="a.ly+14" :text-anchor="a.anchor" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ valueFormat(a.value) }}</text>
+      </g>
+    </svg>
+    <div v-if="tip && interactive" :style="{position:'absolute',left:tip.x+'px',top:tip.y+'px',transform:tip.x>size*0.55?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ tip.title }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ tip.value }}</div>
+    </div>
+  </div>
+</template>