@keyfunc/keybricks-ds 1.0.0

package/components/charts/Histogram.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { fmtNum, niceTicks, scaleLin } from "./chart-geometry.js";
+import { ChartTooltip, PlotGrid, wrapStyle } from "./ChartKit.jsx";
+
+const bucketize = (values, bins) => {
+  const lo = Math.min(...values), hi = Math.max(...values);
+  const w = (hi - lo) / bins || 1;
+  const out = [...Array(bins)].map((_, i) => ({ from: lo + i * w, to: lo + (i + 1) * w, n: 0 }));
+  values.forEach((v) => { out[Math.max(0, Math.min(bins - 1, Math.floor((v - lo) / w)))].n++; });
+  return out;
+};
+
+/**
+ * Histogram — the distribution of one measure. Pass raw `values` (auto-bucketed into
+ * `bins`) or pre-computed `buckets: [{from, to, n}]`. mean/median guides are optional.
+ */
+export function Histogram({ values = [], buckets, bins = 12, width = 560, height = 240, axes = true, showMean = false, valueFormat = fmtNum, countFormat = fmtNum, interactive = true, color = "var(--series-1)", style }) {
+  const [hover, setHover] = React.useState(null);
+  const bkt = buckets || bucketize(values, bins);
+  const pad = { l: axes ? 40 : 4, r: 8, t: showMean ? 22 : 10, b: axes ? 26 : 4 };
+  const { ticks, lo, hi } = niceTicks(0, Math.max(1, ...bkt.map((b) => b.n)), 4);
+  const sy = scaleLin(lo, hi, height - pad.b, pad.t);
+  const slot = (width - pad.l - pad.r) / bkt.length;
+  const mean = showMean && values.length ? values.reduce((s, v) => s + v, 0) / values.length : null;
+  const sxVal = scaleLin(bkt[0].from, bkt[bkt.length - 1].to, pad.l, width - pad.r);
+  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 < bkt.length ? i : null);
+  };
+  const total = bkt.reduce((s, b) => s + b.n, 0) || 1;
+  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={countFormat} /> : null}
+        {bkt.map((b, i) => (
+          <rect key={i} x={pad.l + slot * i + 0.5} y={sy(b.n)} width={Math.max(1, slot - 1.5)} height={Math.max(1, sy(0) - sy(b.n))} rx="2"
+            fill={color} opacity={hover == null ? 0.9 : hover === i ? 1 : 0.4} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
+        ))}
+        {mean != null ? <g>
+          <line x1={sxVal(mean)} x2={sxVal(mean)} y1={pad.t} y2={height - pad.b} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="3 3" />
+          <text x={Math.min(sxVal(mean) + 4, width - 60)} y={pad.t - 8} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>mean {valueFormat(mean)}</text>
+        </g> : null}
+        {axes ? [0, Math.floor(bkt.length / 2), bkt.length - 1].map((i) => (
+          <text key={i} x={pad.l + slot * i + slot / 2} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{valueFormat(bkt[i].from)}</text>
+        )) : null}
+      </svg>
+      {hover != null && interactive ? (
+        <ChartTooltip x={pad.l + slot * hover + slot / 2} y={height / 2 - 10} flip={pad.l + slot * hover > width * 0.62}
+          title={valueFormat(bkt[hover].from) + " – " + valueFormat(bkt[hover].to)}
+          rows={[{ label: "count", value: countFormat(bkt[hover].n), color }, { label: "share", value: ((bkt[hover].n / total) * 100).toFixed(1) + "%" }]} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/Histogram.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, niceTicks, scaleLin } from './chart-geometry.js'
+// Distribution of one measure — raw values are bucketed for you.
+const props = defineProps({ values:{type:Array,default:()=>[]}, buckets:Array, bins:{type:Number,default:12}, width:{type:Number,default:560}, height:{type:Number,default:240}, axes:{type:Boolean,default:true}, showMean:Boolean, valueFormat:{type:Function,default:fmtNum}, countFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, color:{type:String,default:'var(--series-1)'}, style:Object })
+const hover = ref(null)
+const g = computed(() => {
+  let bkt = props.buckets
+  if (!bkt) {
+    const lo = Math.min(...props.values), hi = Math.max(...props.values)
+    const w = (hi-lo)/props.bins || 1
+    bkt = [...Array(props.bins)].map((_,i)=>({ from: lo+i*w, to: lo+(i+1)*w, n: 0 }))
+    props.values.forEach(v=>{ bkt[Math.max(0,Math.min(props.bins-1,Math.floor((v-lo)/w)))].n++ })
+  }
+  const pad = { l: props.axes?40:4, r:8, t: props.showMean?22:10, b: props.axes?26:4 }
+  const { ticks, lo, hi } = niceTicks(0, Math.max(1,...bkt.map(b=>b.n)), 4)
+  const sy = scaleLin(lo, hi, props.height-pad.b, pad.t)
+  const slot = (props.width-pad.l-pad.r)/bkt.length
+  const mean = props.showMean && props.values.length ? props.values.reduce((s,v)=>s+v,0)/props.values.length : null
+  const sxVal = scaleLin(bkt[0].from, bkt[bkt.length-1].to, pad.l, props.width-pad.r)
+  return { bkt, pad, ticks, sy, slot, mean, meanX: mean!=null ? Math.min(sxVal(mean)+4, props.width-60) : 0, meanLine: mean!=null ? sxVal(mean) : 0,
+    total: bkt.reduce((s,b)=>s+b.n,0)||1, labels:[0, Math.floor(bkt.length/2), bkt.length-1] }
+})
+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.bkt.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)">{{ countFormat(t) }}</text>
+        </g>
+      </template>
+      <rect v-for="(b,i) in g.bkt" :key="i" :x="g.pad.l+g.slot*i+0.5" :y="g.sy(b.n)" :width="Math.max(1,g.slot-1.5)" :height="Math.max(1,g.sy(0)-g.sy(b.n))" rx="2"
+        :fill="color" :opacity="hover==null?0.9:(hover===i?1:0.4)" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+      <template v-if="g.mean!=null">
+        <line :x1="g.meanLine" :x2="g.meanLine" :y1="g.pad.t" :y2="height-g.pad.b" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="3 3"/>
+        <text :x="g.meanX" :y="g.pad.t-8" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">mean {{ valueFormat(g.mean) }}</text>
+      </template>
+      <text v-if="axes" v-for="i in g.labels" :key="'l'+i" :x="g.pad.l+g.slot*i+g.slot/2" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ valueFormat(g.bkt[i].from) }}</text>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(g.pad.l+g.slot*hover+g.slot/2)+'px',top:(height/2-10)+'px',transform:(g.pad.l+g.slot*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">{{ valueFormat(g.bkt[hover].from) }} – {{ valueFormat(g.bkt[hover].to) }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ countFormat(g.bkt[hover].n) }} · {{ ((g.bkt[hover].n/g.total)*100).toFixed(1) }}%</div>
+    </div>
+  </div>
+</template>

package/components/charts/LineChart.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface LineSeries { name: string; values: number[]; color?: string; }
+/** Line / area / stacked-area over shared x labels. Hover guideline + tooltip; legend click mutes a series. */
+export interface LineChartProps {
+  series?: LineSeries[];
+  xLabels?: string[];
+  width?: number; height?: number;
+  /** Fill under each line */ area?: boolean;
+  /** Stack series (implies area). Bands fill to the baseline so the gradients overlap. */ stacked?: boolean;
+  /** Line shape: straight, monotone-cubic smooth, or stepped */ curve?: "linear" | "smooth" | "step";
+  /** false = sm tile tier: no grid, no tick labels */ axes?: boolean;
+  legend?: boolean; interactive?: boolean;
+  yFormat?: (v: number) => string;
+  /** Dashed reference line */ target?: number; targetLabel?: string;
+  style?: React.CSSProperties;
+}
+export declare function LineChart(props: LineChartProps): JSX.Element;

package/components/charts/LineChart.jsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { fmtNum, extent, scaleLin, shapePath, closeToBaseline, stack, niceTicks, seriesColor } from "./chart-geometry.js";
+import { ChartLegend, ChartTooltip, PlotGrid, thinLabels, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Line / area / stacked-area chart. series: [{name, values, color?}] over shared xLabels.
+ * curve: "linear" (default) | "smooth" (monotone cubic, never overshoots a real value) | "step".
+ * Interactive by default at every size: hover guideline + tooltip, click legend to mute a series.
+ * sm tier: axes={false} legend={false} for a tile-sized trend — the tooltip stays.
+ */
+export function LineChart({ series = [], xLabels = [], width = 560, height = 240, area = false, stacked = false, curve = "linear", axes = true, legend = true, interactive = true, yFormat = fmtNum, target, targetLabel, style }) {
+  const [hidden, setHidden] = React.useState([]);
+  const [hover, setHover] = React.useState(null);
+  const shown = series.filter((s) => !hidden.includes(s.name));
+  const pad = { l: axes ? 44 : 4, r: 8, t: 10, b: axes ? 24 : 4 };
+  const vals = shown.map((s) => s.values);
+  const bands = stacked && shown.length ? stack(vals) : null;
+  const [lo0, hi0] = stacked ? [0, Math.max(1, ...(bands[bands.length - 1] || []).map((b) => b[1]))] : extent(vals.concat(target != null ? [[target]] : []));
+  const { ticks, lo, hi } = niceTicks(lo0, hi0, 4);
+  const n = Math.max(...series.map((s) => s.values.length), 2);
+  const sx = scaleLin(0, n - 1, pad.l + 4, width - pad.r - 4);
+  const sy = scaleLin(lo, hi, height - pad.b, pad.t);
+  const colorOf = (s) => s.color || seriesColor(series.indexOf(s));
+  const base = sy(Math.max(lo, 0));
+  const move = (e) => {
+    if (!interactive) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - r.left;
+    setHover(Math.max(0, Math.min(n - 1, Math.round(((x - pad.l - 4) / (width - pad.l - pad.r - 8)) * (n - 1)))));
+  };
+  const gid = React.useId ? React.useId().replace(/:/g, "") : "kbline";
+  /* Stacked bands are closed against the band below, not the baseline: overlapping
+     translucent fills stack up into mud. Each band gets its own gradient, scaled to that
+     band's own box (objectBoundingBox), so the fade reads the same at any thickness. */
+  const layers = shown.map((s, si) => {
+    const pts = s.values.map((v, i) => [sx(i), sy(stacked ? bands[si][i][1] : v)]);
+    const d = shapePath(pts, curve);
+    const under = stacked
+      ? [...s.values.keys()].reverse().map((i) => sx(i).toFixed(1) + " " + sy(bands[si][i][0]).toFixed(1)).join(" L")
+      : null;
+    return { s, si, pts, d, color: colorOf(s), fill: stacked ? d + " L" + under + " Z" : closeToBaseline(d, pts, base) };
+  });
+  const painted = layers;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
+        <defs>
+          {series.map((s, i) => {
+            const c = s.color || seriesColor(i);
+            return (
+              <linearGradient key={i} id={gid + "-" + i} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={c} stopOpacity={stacked ? "0.30" : "0.34"} />
+                <stop offset="100%" stopColor={c} stopOpacity={stacked ? "0.10" : "0.02"} />
+              </linearGradient>
+            );
+          })}
+        </defs>
+        {axes ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sy} xLabels={thinLabels(xLabels)} sxLabel={sx} yFormat={yFormat} /> : null}
+        {target != null ? <g>
+          <line x1={pad.l} x2={width - pad.r} y1={sy(target)} y2={sy(target)} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="3 3" />
+          <text x={width - pad.r} y={sy(target) - 4} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{targetLabel || "Target " + yFormat(target)}</text>
+        </g> : null}
+        {painted.map((L) => (
+          <g key={L.s.name}>
+            {(area || stacked) ? <path d={L.fill} fill={"url(#" + gid + "-" + series.indexOf(L.s) + ")"} /> : null}
+            <path d={L.d} fill="none" stroke={L.color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
+          </g>
+        ))}
+        {hover != null && interactive ? <line x1={sx(hover)} x2={sx(hover)} y1={pad.t} y2={height - pad.b} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="2 3" /> : null}
+        {hover != null ? layers.map((L) => (L.s.values[hover] == null ? null : (
+          <circle key={L.s.name} cx={sx(hover)} cy={sy(stacked ? bands[L.si][hover][1] : L.s.values[hover])} r="3" fill={L.color} stroke="var(--bg-surface)" strokeWidth="1.5" />
+        ))) : null}
+      </svg>
+      {hover != null && interactive ? (
+        <ChartTooltip x={sx(hover)} y={height / 2 - 10} flip={sx(hover) > width * 0.62} title={xLabels[hover]}
+          rows={shown.map((s) => ({ label: s.name, value: yFormat(s.values[hover]), color: colorOf(s) }))} />
+      ) : null}
+      {legend && series.length > 1 ? (
+        <ChartLegend style={{ paddingTop: 8 }} items={series.map((s) => ({ label: s.name, color: colorOf(s) }))} hidden={hidden}
+          onToggle={(l) => setHidden(hidden.includes(l) ? hidden.filter((x) => x !== l) : hidden.length + 1 < series.length ? [...hidden, l] : hidden)} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/LineChart.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, extent, scaleLin, shapePath, closeToBaseline, stack, niceTicks, SERIES } from './chart-geometry.js'
+// Line / area / stacked-area over shared x labels. Hover guideline + tooltip; legend click mutes.
+const props = defineProps({ series:{type:Array,default:()=>[]}, xLabels:{type:Array,default:()=>[]}, width:{type:Number,default:560}, height:{type:Number,default:240}, area:Boolean, stacked:Boolean, axes:{type:Boolean,default:true}, legend:{type:Boolean,default:true}, interactive:{type:Boolean,default:true}, yFormat:{type:Function,default:fmtNum}, target:Number, targetLabel:String, style:Object })
+const hidden = ref([]); const hover = ref(null)
+const uid = 'kbline-' + Math.random().toString(36).slice(2, 8)
+const g = computed(() => {
+  const shown = props.series.filter(s=>!hidden.value.includes(s.name))
+  const pad = { l: props.axes?44:4, r:8, t:10, b: props.axes?24:4 }
+  const vals = shown.map(s=>s.values)
+  const bands = props.stacked && shown.length ? stack(vals) : null
+  const [lo0,hi0] = props.stacked ? [0, Math.max(1,...(bands[bands.length-1]||[]).map(b=>b[1]))] : extent(vals.concat(props.target!=null?[[props.target]]:[]))
+  const { ticks, lo, hi } = niceTicks(lo0, hi0, 4)
+  const n = Math.max(...props.series.map(s=>s.values.length), 2)
+  const sx = scaleLin(0, n-1, pad.l+4, props.width-pad.r-4)
+  const sy = scaleLin(lo, hi, props.height-pad.b, pad.t)
+  const colorOf = s => s.color || SERIES[props.series.indexOf(s)%SERIES.length]
+  /* Stacked bands close against the band below, not the baseline — overlapping
+     translucent fills stack up into mud. */
+  const base = sy(Math.max(lo, 0))
+  const lines = shown.map((s,si)=>{
+    const pts = s.values.map((v,i)=>[sx(i), sy(props.stacked?bands[si][i][1]:v)])
+    const d = shapePath(pts, props.curve)
+    const fill = props.stacked
+      ? d + ' L' + [...s.values.keys()].reverse().map(i=>sx(i).toFixed(1)+' '+sy(bands[si][i][0]).toFixed(1)).join(' L') + ' Z'
+      : closeToBaseline(d, pts, base)
+    return { s, color: colorOf(s), path: d, fill, pts, at:(i)=>[sx(i), sy(props.stacked?bands[si][i][1]:s.values[i])] }
+  })
+  return { pad, ticks, sx, sy, n, lines, shown, colorOf }
+})
+function move(e){
+  if (!props.interactive) return
+  const r = e.currentTarget.getBoundingClientRect()
+  const gg = g.value
+  hover.value = Math.max(0, Math.min(gg.n-1, Math.round(((e.clientX-r.left-gg.pad.l-4)/(props.width-gg.pad.l-gg.pad.r-8))*(gg.n-1))))
+}
+function toggle(name){
+  if (hidden.value.includes(name)) hidden.value = hidden.value.filter(x=>x!==name)
+  else if (hidden.value.length+1 < props.series.length) hidden.value = [...hidden.value, name]
+}
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" @mousemove="move" @mouseleave="hover=null" role="img">
+      <defs>
+        <linearGradient v-for="(s,i) in series" :key="'grad'+i" :id="uid+'-'+i" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" :stop-color="s.color||SERIES[i%SERIES.length]" :stop-opacity="stacked ? 0.30 : 0.34"/>
+          <stop offset="100%" :stop-color="s.color||SERIES[i%SERIES.length]" :stop-opacity="stacked ? 0.10 : 0.02"/>
+        </linearGradient>
+      </defs>
+      <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)">{{ yFormat(t) }}</text>
+        </g>
+        <text v-for="(lb,i) in xLabels" :key="'x'+i" :x="g.sx(i)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ lb }}</text>
+      </template>
+      <template v-if="target!=null">
+        <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(target)" :y2="g.sy(target)" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="3 3"/>
+        <text :x="width-g.pad.r" :y="g.sy(target)-4" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ targetLabel || 'Target '+yFormat(target) }}</text>
+      </template>
+      <g v-for="ln in g.lines" :key="ln.s.name">
+        <path v-if="area||stacked" :d="ln.fill" :fill="'url(#'+uid+'-'+series.indexOf(ln.s)+')'"/>
+        <path :d="ln.path" fill="none" :stroke="ln.color" stroke-width="1.5" stroke-linejoin="round"/>
+        <circle v-if="hover!=null && ln.s.values[hover]!=null" :cx="ln.at(hover)[0]" :cy="ln.at(hover)[1]" r="3" :fill="ln.color" stroke="var(--bg-surface)" stroke-width="1.5"/>
+      </g>
+      <line v-if="hover!=null && interactive" :x1="g.sx(hover)" :x2="g.sx(hover)" :y1="g.pad.t" :y2="height-g.pad.b" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="2 3"/>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.sx(hover)+'px',top:(height/2-10)+'px',transform:g.sx(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',minWidth:'90px',lineHeight:'normal'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:4px;white-space:nowrap">{{ xLabels[hover] }}</div>
+      <div v-for="ln in g.lines" :key="ln.s.name" style="display:flex;align-items:center;gap:6px;padding:1px 0">
+        <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:ln.color,flexShrink:0}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap">{{ ln.s.name }}</span>
+        <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ yFormat(ln.s.values[hover]) }}</span>
+      </div>
+    </div>
+    <div v-if="legend && series.length>1" style="display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:8px;line-height:normal">
+      <span v-for="(s,i) in series" :key="s.name" role="button" tabindex="0" @click="toggle(s.name)"
+        :style="{display:'inline-flex',alignItems:'center',gap:'6px',cursor:'pointer',opacity:hidden.includes(s.name)?0.4:1}">
+        <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:s.color||SERIES[i%SERIES.length],flexShrink:0}"/>
+        <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-xs)',color:'var(--text-secondary)',textDecoration:hidden.includes(s.name)?'line-through':'none'}">{{ s.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/ParetoChart.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface ParetoItem { label: string; value: number; }
+/** Sorted bars + cumulative % line and the 80% guide — the "vital few" chart. */
+export interface ParetoChartProps {
+  items?: ParetoItem[];
+  width?: number; height?: number;
+  axes?: boolean;
+  /** Cumulative cutoff that separates vital few from trivial many. Default 80 */ threshold?: number;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function ParetoChart(props: ParetoChartProps): JSX.Element;

package/components/charts/ParetoChart.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { fmtNum, niceTicks, scaleLin, linePath } from "./chart-geometry.js";
+import { ChartTooltip, PlotGrid, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Pareto — bars sorted descending with a cumulative % line on the right axis, plus the
+ * 80% guide. items: [{label, value}]; the component sorts and accumulates for you.
+ */
+export function ParetoChart({ items = [], width = 560, height = 260, axes = true, threshold = 80, valueFormat = fmtNum, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const sorted = items.slice().sort((a, b) => b.value - a.value);
+  const total = sorted.reduce((s, i) => s + i.value, 0) || 1;
+  let run = 0;
+  const rows = sorted.map((it) => { run += it.value; return { ...it, cum: (run / total) * 100 }; });
+  const pad = { l: axes ? 44 : 4, r: axes ? 38 : 4, t: 12, b: 30 };
+  const { ticks, lo, hi } = niceTicks(0, Math.max(...rows.map((r) => r.value)), 4);
+  const sy = scaleLin(lo, hi, height - pad.b, pad.t);
+  const sc = scaleLin(0, 100, height - pad.b, pad.t);
+  const slot = (width - pad.l - pad.r) / rows.length;
+  const bw = Math.min(slot * 0.62, 40);
+  const cx = (i) => pad.l + slot * i + slot / 2;
+  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 < rows.length ? i : null);
+  };
+  const vital = rows.findIndex((r) => r.cum >= threshold);
+  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 - pad.b} fill="var(--bg-hover)" /> : null}
+        <line x1={pad.l} x2={width - pad.r} y1={sc(threshold)} y2={sc(threshold)} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="3 3" />
+        <text x={width - pad.r - 2} y={sc(threshold) - 4} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{threshold}%</text>
+        {rows.map((r, i) => (
+          <rect key={r.label} x={cx(i) - bw / 2} y={sy(r.value)} width={bw} height={Math.max(1, sy(0) - sy(r.value))} rx="2"
+            fill={i <= vital ? "var(--series-1)" : "var(--chart-track)"} stroke={i > vital ? "var(--border-control)" : "none"}
+            opacity={hover == null || hover === i ? 1 : 0.5} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
+        ))}
+        <path d={linePath(rows.map((r, i) => [cx(i), sc(r.cum)]))} fill="none" stroke="var(--chart-total)" strokeWidth="1.5" />
+        {rows.map((r, i) => <circle key={i} cx={cx(i)} cy={sc(r.cum)} r={hover === i ? 3.4 : 2.4} fill="var(--chart-total)" />)}
+        {axes ? [0, 25, 50, 75, 100].map((t) => <text key={t} x={width - pad.r + 6} y={sc(t) + 3} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{t}%</text>) : null}
+        {rows.map((r, i) => <text key={"l" + i} x={cx(i)} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{r.label}</text>)}
+      </svg>
+      {hover != null && interactive ? (
+        <ChartTooltip x={cx(hover)} y={height / 2 - 10} flip={cx(hover) > width * 0.62} title={rows[hover].label}
+          rows={[{ label: "value", value: valueFormat(rows[hover].value), color: "var(--series-1)" },
+                 { label: "share", value: ((rows[hover].value / total) * 100).toFixed(1) + "%" },
+                 { label: "cumulative", value: rows[hover].cum.toFixed(1) + "%", color: "var(--chart-total)" }]} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/ParetoChart.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, niceTicks, scaleLin, linePath } from './chart-geometry.js'
+// Sorted bars + cumulative % line and the 80% guide — the "vital few" chart.
+const props = defineProps({ items:{type:Array,default:()=>[]}, width:{type:Number,default:560}, height:{type:Number,default:260}, axes:{type:Boolean,default:true}, threshold:{type:Number,default:80}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const g = computed(() => {
+  const sorted = props.items.slice().sort((a,b)=>b.value-a.value)
+  const total = sorted.reduce((s,i)=>s+i.value,0)||1
+  let run = 0
+  const rows = sorted.map(it=>{ run+=it.value; return Object.assign({}, it, { cum:(run/total)*100 }) })
+  const pad = { l: props.axes?44:4, r: props.axes?38:4, t:12, b:30 }
+  const { ticks, lo, hi } = niceTicks(0, Math.max(...rows.map(r=>r.value)), 4)
+  const sy = scaleLin(lo, hi, props.height-pad.b, pad.t)
+  const sc = scaleLin(0, 100, props.height-pad.b, pad.t)
+  const slot = (props.width-pad.l-pad.r)/rows.length
+  const bw = Math.min(slot*0.62, 40)
+  const cx = i => pad.l+slot*i+slot/2
+  const vital = rows.findIndex(r=>r.cum>=props.threshold)
+  return { rows, total, pad, ticks, sy, sc, slot, bw, cx, vital,
+    line: linePath(rows.map((r,i)=>[cx(i), sc(r.cum)])), pct:[0,25,50,75,100] }
+})
+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.rows.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.pad.b" fill="var(--bg-hover)"/>
+      <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sc(threshold)" :y2="g.sc(threshold)" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="3 3"/>
+      <text :x="width-g.pad.r-2" :y="g.sc(threshold)-4" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ threshold }}%</text>
+      <rect v-for="(r,i) in g.rows" :key="r.label" :x="g.cx(i)-g.bw/2" :y="g.sy(r.value)" :width="g.bw" :height="Math.max(1,g.sy(0)-g.sy(r.value))" rx="2"
+        :fill="i<=g.vital?'var(--series-1)':'var(--chart-track)'" :stroke="i>g.vital?'var(--border-control)':'none'"
+        :opacity="hover==null||hover===i?1:0.5" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+      <path :d="g.line" fill="none" stroke="var(--chart-total)" stroke-width="1.5"/>
+      <circle v-for="(r,i) in g.rows" :key="'c'+i" :cx="g.cx(i)" :cy="g.sc(r.cum)" :r="hover===i?3.4:2.4" fill="var(--chart-total)"/>
+      <text v-if="axes" v-for="t in g.pct" :key="'p'+t" :x="width-g.pad.r+6" :y="g.sc(t)+3" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ t }}%</text>
+      <text v-for="(r,i) in g.rows" :key="'l'+i" :x="g.cx(i)" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ r.label }}</text>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.cx(hover)+'px',top:(height/2-10)+'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">{{ g.rows[hover].label }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(g.rows[hover].value) }} · {{ ((g.rows[hover].value/g.total)*100).toFixed(1) }}% · cum {{ g.rows[hover].cum.toFixed(1) }}%</div>
+    </div>
+  </div>
+</template>

package/components/charts/Pie3D.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface Pie3DSegment { label: string; value: number; color?: string; }
+/** Extruded pie/donut. Drag spins it in place (tilt fixed); hover lifts a slice + tooltip. */
+export interface Pie3DProps {
+  segments?: Pie3DSegment[];
+  size?: number;
+  /** Extrusion depth in px */ thickness?: number;
+  /** 0 = pie, 0.5+ = donut */ innerRatio?: number;
+  /** Vertical squash of the ellipse, 0–1 */ tilt?: number;
+  /** Hover lift distance in px */ explode?: number;
+  /** Each slice extrudes to its own height by value — the stepped "stairs" pie */ stairs?: boolean;
+  /** Initial rotation in degrees */ spin?: number;
+  valueFormat?: (v: number) => string;
+  legend?: boolean; interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Pie3D(props: Pie3DProps): JSX.Element;

package/components/charts/Pie3D.jsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { fmtNum, seriesColor } from "./chart-geometry.js";
+import { shade } from "./chart-3d.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/* Intersect the arc [a0,a1] (degrees, a1 > a0) with the window [w0,w1]; returns visible
+   sub-arcs. Handles arcs that spin past 360 by testing the window at ±360. */
+function clipArc(a0, a1, w0, w1) {
+  const A0 = ((a0 % 360) + 360) % 360, len = a1 - a0, A1 = A0 + len;
+  const out = [];
+  for (const off of [-360, 0, 360]) {
+    const s = Math.max(A0, w0 + off), e = Math.min(A1, w1 + off);
+    if (e - s > 0.4) out.push([s, e]);
+  }
+  return out;
+}
+
+/**
+ * 3D pie / donut — extruded slices. Drag horizontally to spin in place (tilt stays fixed:
+ * free orbit only distorts an extruded pie). stairs={true} extrudes each slice to its own
+ * height by value — the stepped presentation pie. Hover lifts a slice and pins a tooltip.
+ */
+export function Pie3D({ segments = [], size = 300, thickness = 26, innerRatio = 0, tilt = 0.45, explode = 6, stairs = false, spin: spin0 = 0, valueFormat = fmtNum, legend = true, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const [spin, setSpin] = React.useState(spin0);
+  const drag = React.useRef(null);
+  const total = segments.reduce((s, x) => s + x.value, 0) || 1;
+  const vmax = Math.max(...segments.map((s) => s.value), 1);
+  const maxTh = stairs ? Math.round(thickness * 2.1) : thickness;
+  const cx = size / 2, cy = size / 2 - maxTh / 2 + 6;
+  const rO = size / 2 - 10, rI = rO * innerRatio;
+  const pt = (r, deg, dz = 0) => [cx + r * Math.cos(((deg - 90) * Math.PI) / 180), cy + r * Math.sin(((deg - 90) * Math.PI) / 180) * tilt + dz];
+  let a = 0;
+  const slices = segments.map((s, i) => {
+    const a0 = a + spin, a1 = a + (s.value / total) * 360 + spin; a += (s.value / total) * 360;
+    const mid = ((((a0 + a1) / 2) % 360) + 360) % 360;
+    /* Stairs: bottoms share one plane, each top rises by value — the stepped pie. */
+    const h = stairs ? maxTh * (0.35 + 0.65 * (s.value / vmax)) : thickness;
+    return { s, i, a0, a1, mid, h, color: s.color || seriesColor(i) };
+  });
+  const arcPts = (r, a0, a1, dz) => {
+    const steps = Math.max(2, Math.ceil(Math.abs(a1 - a0) / 6));
+    return [...Array(steps + 1)].map((_, k) => pt(r, a0 + ((a1 - a0) * k) / steps, dz));
+  };
+  const path = (pts) => "M" + pts.map((p) => p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" L") + " Z";
+  const off = (sl) => {
+    if (hover !== sl.i || !interactive) return [0, 0];
+    return [Math.cos(((sl.mid - 90) * Math.PI) / 180) * explode, Math.sin(((sl.mid - 90) * Math.PI) / 180) * explode * tilt];
+  };
+  const hoverProps = (sl) => interactive ? {
+    onMouseEnter: () => !drag.current && setHover(sl.i),
+    onMouseLeave: () => setHover(null),
+  } : {};
+  const dim = (sl) => ({ opacity: hover == null || hover === sl.i ? 1 : 0.55, style: { transition: "opacity var(--dur-fast) var(--ease-out)" } });
+  /* deg 180 is the ellipse edge nearest the viewer. An outer wall is visible only where
+     its arc crosses the near window (90–270); an inner wall only where it crosses the far
+     window, seen through the hole. Clipping each wall to its visible window means the
+     visible pieces never overlap in angle — paint order between them stops mattering,
+     and no slice can ever show a gap between its top and its wall. */
+  const nearness = (sl) => -Math.cos((sl.mid * Math.PI) / 180);
+  const sorted = [...slices].sort((p, q) => nearness(p) - nearness(q));
+  /* Bottoms first: any sliver the walls miss reads as dark interior, never as a hole in
+     the render. */
+  const bottoms = slices.map((sl) => {
+    const [dx, dy] = off(sl);
+    const d = rI > 0
+      ? path([...arcPts(rO, sl.a0, sl.a1, maxTh), ...arcPts(rI, sl.a1, sl.a0, maxTh)].map(([x, y]) => [x + dx, y + dy]))
+      : path([[cx + dx, cy + dy + maxTh], ...arcPts(rO, sl.a0, sl.a1, maxTh).map(([x, y]) => [x + dx, y + dy])]);
+    return <path key={"b" + sl.i} d={d} fill={shade(sl.color, -0.45)} {...hoverProps(sl)} {...dim(sl)} />;
+  });
+  /* Each slice is a closed solid: two radial faces, then its full outer wall. Solids paint
+     far-to-near, so a taller near slice covers the interior faces behind it and the side
+     of the pie is never open at any spin angle. */
+  const solids = sorted.map((sl) => {
+    const [dx, dy] = off(sl);
+    const zTop = maxTh - sl.h;
+    const radial = (deg, k) => {
+      const pts = [pt(rI || 0.01, deg, zTop), pt(rO, deg, zTop), pt(rO, deg, maxTh), pt(rI || 0.01, deg, maxTh)].map(([x, y]) => [x + dx, y + dy]);
+      return <path key={"r" + k + sl.i} d={path(pts)} fill={shade(sl.color, -0.18)} />;
+    };
+    const top = arcPts(rO, sl.a0, sl.a1, zTop).map(([x, y]) => [x + dx, y + dy]);
+    const bot = arcPts(rO, sl.a0, sl.a1, maxTh).map(([x, y]) => [x + dx, y + dy]);
+    return (
+      <g key={"solid" + sl.i} {...hoverProps(sl)} {...dim(sl)}>
+        {radial(sl.a0, "s")}
+        {radial(sl.a1, "e")}
+        <path d={path([...top, ...bot.reverse()])} fill={shade(sl.color, -0.28)} />
+      </g>
+    );
+  });
+  const innerWalls = rI ? slices.flatMap((sl) => clipArc(sl.a0, sl.a1, -90, 90).map(([s, e], k) => {
+    const [dx, dy] = off(sl);
+    const top = arcPts(rI, s, e, maxTh - sl.h).map(([x, y]) => [x + dx, y + dy]);
+    const bot = arcPts(rI, e, s, maxTh).map(([x, y]) => [x + dx, y + dy]);
+    return <path key={"iw" + sl.i + "-" + k} d={path([...top, ...bot])} fill={shade(sl.color, -0.38)} {...hoverProps(sl)} {...dim(sl)} />;
+  })) : [];
+  const tops = sorted.map((sl) => {
+    const [dx, dy] = off(sl);
+    const zTop = maxTh - sl.h;
+    const d = rI > 0
+      ? path([...arcPts(rO, sl.a0, sl.a1, zTop), ...arcPts(rI, sl.a1, sl.a0, zTop)].map(([x, y]) => [x + dx, y + dy]))
+      : path([[cx + dx, cy + dy + zTop], ...arcPts(rO, sl.a0, sl.a1, zTop).map(([x, y]) => [x + dx, y + dy])]);
+    return <path key={"t" + sl.i} d={d} fill={sl.color} stroke="var(--bg-surface)" strokeWidth="1" {...hoverProps(sl)} {...dim(sl)} />;
+  });
+  const spinHandlers = interactive ? {
+    onPointerDown: (e) => { drag.current = { x: e.clientX, s: spin }; e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); },
+    onPointerMove: (e) => { if (drag.current) setSpin(drag.current.s + (e.clientX - drag.current.x) * 0.5); },
+    onPointerUp: () => { drag.current = null; },
+    onPointerLeave: () => { drag.current = null; },
+  } : {};
+  const h = hover != null ? slices.find((sl) => sl.i === hover) : null;
+  const tipAt = h ? pt(rO * 0.8, (h.a0 + h.a1) / 2, (maxTh - h.h) / 2) : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <div style={{ position: "relative" }}>
+          <svg width={size} height={size * 0.72 + maxTh} {...spinHandlers} role="img" style={{ cursor: interactive ? "grab" : "default", touchAction: "none" }}>
+            {bottoms}
+            {innerWalls}
+            {solids}
+            {tops}
+          </svg>
+          {h && interactive ? (
+            <ChartTooltip x={tipAt[0]} y={tipAt[1]} flip={tipAt[0] > size * 0.55} title={h.s.label}
+              rows={[{ label: "value", value: valueFormat(h.s.value), color: h.color }, { label: "share", value: ((h.s.value / total) * 100).toFixed(1) + "%" }]} />
+          ) : null}
+        </div>
+        {legend ? (
+          <div style={{ display: "flex", flexDirection: "column", gap: 6, lineHeight: "normal" }}>
+            {slices.map(({ s, i, color }) => (
+              <span key={s.label} onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+                style={{ display: "inline-flex", alignItems: "center", gap: 7, opacity: hover == null || hover === i ? 1 : 0.45 }}>
+                <span style={{ width: 8, height: 8, borderRadius: 2, background: color, flexShrink: 0 }} />
+                <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{s.label}</span>
+                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)", marginLeft: 6 }}>
+                  {hover === i ? valueFormat(s.value) : ((s.value / total) * 100).toFixed(0) + "%"}
+                </span>
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}