@keyfunc/keybricks-ds 1.0.0

package/components/charts/Pie3D.vue

@@ -0,0 +1,115 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, SERIES } from './chart-geometry.js'
+import { shade } from './chart-3d.js'
+/**
+ * 3D pie / donut — extruded slices. Drag horizontally to spin in place (tilt stays fixed:
+ * free orbit only distorts an extruded pie). stairs extrudes each slice to its own height
+ * by value — the stepped presentation pie. Hover lifts a slice and pins a tooltip.
+ */
+const props = defineProps({ segments:{type:Array,default:()=>[]}, size:{type:Number,default:300}, thickness:{type:Number,default:26}, innerRatio:{type:Number,default:0}, tilt:{type:Number,default:0.45}, explode:{type:Number,default:6}, stairs:Boolean, spin:{type:Number,default:0}, valueFormat:{type:Function,default:fmtNum}, legend:{type:Boolean,default:true}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const spinNow = ref(props.spin)
+const drag = ref(null)
+function down(e){ drag.value = { x:e.clientX, s:spinNow.value }; e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId) }
+function move(e){ if (drag.value) spinNow.value = drag.value.s + (e.clientX-drag.value.x)*0.5 }
+function up(){ drag.value = null }
+const g = computed(() => {
+  const total = props.segments.reduce((s2,x)=>s2+x.value,0) || 1
+  const vmax = Math.max(...props.segments.map(s2=>s2.value), 1)
+  const maxTh = props.stairs ? Math.round(props.thickness*2.1) : props.thickness
+  const cx = props.size/2, cy = props.size/2 - maxTh/2 + 6
+  const rO = props.size/2-10, rI = rO*props.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)*props.tilt + dz]
+  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'
+  let a = 0
+  const slices = props.segments.map((s2,i)=>{
+    const a0 = a + spinNow.value, a1 = a + (s2.value/total)*360 + spinNow.value; a += (s2.value/total)*360
+    const mid = ((((a0+a1)/2)%360)+360)%360
+    // Stairs: bottoms share one plane, each top rises by value.
+    const h = props.stairs ? maxTh*(0.35+0.65*(s2.value/vmax)) : props.thickness
+    return { s:s2, i, a0, a1, mid, h, color: s2.color || SERIES[i%SERIES.length] }
+  })
+  const off = sl => (hover.value===sl.i && props.interactive)
+    ? [Math.cos(((sl.mid-90)*Math.PI)/180)*props.explode, Math.sin(((sl.mid-90)*Math.PI)/180)*props.explode*props.tilt]
+    : [0,0]
+  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 a hole.
+  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 { key:'b'+sl.i, d, fill: shade(sl.color,-0.45), i:sl.i }
+  })
+  const innerWalls = rI ? sorted.map(sl=>{
+    const [dx,dy] = off(sl)
+    const top = arcPts(rI,sl.a0,sl.a1,maxTh-sl.h).map(([x,y])=>[x+dx,y+dy])
+    const bot = arcPts(rI,sl.a1,sl.a0,maxTh).map(([x,y])=>[x+dx,y+dy])
+    return { key:'iw'+sl.i, d: path([...top,...bot]), fill: shade(sl.color,-0.38), i:sl.i }
+  }) : []
+  /* Each slice is a closed solid: two radial faces plus its full outer wall, painted
+     far-to-near, so 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 => path([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]))
+    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 { key:'sd'+sl.i, i:sl.i, r0: radial(sl.a0), r1: radial(sl.a1),
+      wall: path([...top,...bot.reverse()]), side: shade(sl.color,-0.18), wallFill: shade(sl.color,-0.28) }
+  })
+  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 { key:'t'+sl.i, d, fill: sl.color, i:sl.i }
+  })
+  const h = hover.value!=null ? slices.find(sl=>sl.i===hover.value) : null
+  return { total, maxTh, slices, bottoms, innerWalls, solids, tops,
+    tip: h ? { p: pt(rO*0.8, (h.a0+h.a1)/2, (maxTh-h.h)/2), s:h.s, color:h.color } : null }
+})
+function dim(i){ return hover.value==null || hover.value===i ? 1 : 0.55 }
+function enter(i){ if (props.interactive && !drag.value) hover.value = i }
+</script>
+<template>
+  <div :style="{display:'inline-block',lineHeight:0,...style}">
+    <div style="display:flex;align-items:center;gap:16px">
+      <div style="position:relative">
+        <svg :width="size" :height="size*0.72+g.maxTh" @pointerdown="down" @pointermove="move" @pointerup="up" @pointerleave="up"
+          role="img" :style="{cursor:interactive?'grab':'default',touchAction:'none'}">
+          <path v-for="b in g.bottoms" :key="b.key" :d="b.d" :fill="b.fill" :opacity="dim(b.i)"
+            @mouseenter="enter(b.i)" @mouseleave="interactive && (hover=null)"/>
+          <path v-for="w in g.innerWalls" :key="w.key" :d="w.d" :fill="w.fill" :opacity="dim(w.i)"
+            @mouseenter="enter(w.i)" @mouseleave="interactive && (hover=null)"/>
+          <g v-for="sd in g.solids" :key="sd.key" :opacity="dim(sd.i)"
+            @mouseenter="enter(sd.i)" @mouseleave="interactive && (hover=null)"
+            style="transition:opacity var(--dur-fast) var(--ease-out)">
+            <path :d="sd.r0" :fill="sd.side"/>
+            <path :d="sd.r1" :fill="sd.side"/>
+            <path :d="sd.wall" :fill="sd.wallFill"/>
+          </g>
+          <path v-for="t in g.tops" :key="t.key" :d="t.d" :fill="t.fill" stroke="var(--bg-surface)" stroke-width="1" :opacity="dim(t.i)"
+            @mouseenter="enter(t.i)" @mouseleave="interactive && (hover=null)"/>
+        </svg>
+        <div v-if="g.tip && interactive" :style="{position:'absolute',left:g.tip.p[0]+'px',top:g.tip.p[1]+'px',transform:g.tip.p[0]>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">{{ g.tip.s.label }}</div>
+          <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(g.tip.s.value) }} · {{ ((g.tip.s.value/g.total)*100).toFixed(1) }}%</div>
+        </div>
+      </div>
+      <div v-if="legend" style="display:flex;flex-direction:column;gap:6px;line-height:normal">
+        <span v-for="sl in g.slices" :key="sl.s.label" @mouseenter="interactive && (hover=sl.i)" @mouseleave="interactive && (hover=null)"
+          :style="{display:'inline-flex',alignItems:'center',gap:'7px',opacity:dim(sl.i)}">
+          <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:sl.color,flexShrink:0}"/>
+          <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ sl.s.label }}</span>
+          <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:6px">
+            {{ hover===sl.i ? valueFormat(sl.s.value) : ((sl.s.value/g.total)*100).toFixed(0)+'%' }}</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/RadarChart.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface RadarAxis { label: string; /** Axis ceiling; auto-scaled when omitted */ max?: number; }
+export interface RadarSeries { name: string; values: number[]; color?: string; }
+/** Spider chart — a few entities across the same 3–10 measures. Hovering a spoke reports every series. */
+export interface RadarChartProps {
+  axes?: RadarAxis[];
+  series?: RadarSeries[];
+  size?: number;
+  /** Concentric grid rings */ levels?: number;
+  legend?: boolean; interactive?: boolean;
+  valueFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function RadarChart(props: RadarChartProps): JSX.Element;

package/components/charts/RadarChart.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { fmtNum, niceTicks, polar, seriesColor } from "./chart-geometry.js";
+import { ChartLegend, ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Radar (spider) chart — compare a few entities across the same 3–10 measures.
+ * axes: [{label, max?}]; series: [{name, values, color?}] aligned to axes.
+ * Hovering an axis spoke highlights it and reports every series at that measure.
+ */
+export function RadarChart({ axes = [], series = [], size = 260, levels = 4, legend = true, interactive = true, valueFormat = fmtNum, style }) {
+  const [hover, setHover] = React.useState(null);
+  const [hidden, setHidden] = React.useState([]);
+  const shown = series.filter((s) => !hidden.includes(s.name));
+  /* Axis labels sit outside the outer ring, so the plot radius has to leave room for the
+     longest one — otherwise "Accuracy" gets clipped at the SVG edge. */
+  const cx = size / 2, cy = size / 2, r = size / 2 - 42;
+  const n = axes.length || 1;
+  const step = 360 / n;
+  const max = axes.map((a, i) => a.max != null ? a.max : niceTicks(0, Math.max(...series.map((s) => s.values[i] || 0)), 3).hi);
+  const at = (si, i) => {
+    const v = (shown[si].values[i] || 0) / (max[i] || 1);
+    return polar(cx, cy, Math.max(0, Math.min(1, v)) * r, i * step);
+  };
+  const colorOf = (s) => s.color || seriesColor(series.indexOf(s));
+  const move = (e) => {
+    if (!interactive) return;
+    const rc = e.currentTarget.getBoundingClientRect();
+    const dx = e.clientX - rc.left - cx, dy = e.clientY - rc.top - cy;
+    if (Math.hypot(dx, dy) > r + 22) return setHover(null);
+    let deg = (Math.atan2(dy, dx) * 180) / Math.PI + 90;
+    if (deg < 0) deg += 360;
+    setHover(Math.round(deg / step) % n);
+  };
+  const tip = hover != null ? polar(cx, cy, r * 0.72, hover * step) : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={size} height={size} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img" style={{ overflow: "visible" }}>
+        {[...Array(levels)].map((_, li) => {
+          const rr = (r * (li + 1)) / levels;
+          const pts = [...Array(n)].map((__, i) => polar(cx, cy, rr, i * step).map((v) => v.toFixed(1)).join(" ")).join(" L");
+          return <path key={li} d={"M" + pts + " Z"} fill="none" stroke="var(--chart-grid)" strokeWidth="1" />;
+        })}
+        {axes.map((a, i) => {
+          const [x, y] = polar(cx, cy, r, i * step);
+          const [lx, ly] = polar(cx, cy, r + 14, i * step);
+          /* An anchor="start" label grows rightward, so near-vertical spokes must center
+             and the right column must not sit so close to the edge that it clips. */
+          const anchor = Math.abs(lx - cx) < 12 ? "middle" : lx > cx ? "start" : "end";
+          const on = hover === i;
+          return (
+            <g key={a.label}>
+              <line x1={cx} y1={cy} x2={x} y2={y} stroke={on ? "var(--chart-guide)" : "var(--chart-axis)"} strokeWidth="1" />
+              <text x={lx} y={ly + 3} textAnchor={anchor}
+                style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: on ? "var(--text-heading)" : "var(--chart-label)" }}>{a.label}</text>
+            </g>
+          );
+        })}
+        {shown.map((s, si) => {
+          const pts = axes.map((_, i) => at(si, i));
+          const d = "M" + pts.map((p) => p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" L") + " Z";
+          return (
+            <g key={s.name}>
+              <path d={d} fill={colorOf(s)} fillOpacity="0.14" stroke={colorOf(s)} strokeWidth="1.5" strokeLinejoin="round" />
+              {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r={hover === i ? 3.4 : 2.2} fill={colorOf(s)} stroke="var(--bg-surface)" strokeWidth={hover === i ? 1.5 : 0} />)}
+            </g>
+          );
+        })}
+      </svg>
+      {hover != null && interactive ? (
+        <ChartTooltip x={tip[0]} y={tip[1]} flip={tip[0] > size * 0.58} title={axes[hover].label}
+          rows={shown.map((s) => ({ label: s.name, value: valueFormat(s.values[hover]), color: colorOf(s) }))} />
+      ) : null}
+      {legend && series.length > 1 ? (
+        <ChartLegend style={{ paddingTop: 6 }} 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/RadarChart.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, niceTicks, polar, SERIES } from './chart-geometry.js'
+// Spider chart — a few entities across the same 3–10 measures. Hovering a spoke reports all series.
+const props = defineProps({ axes:{type:Array,default:()=>[]}, series:{type:Array,default:()=>[]}, size:{type:Number,default:260}, levels:{type:Number,default:4}, legend:{type:Boolean,default:true}, interactive:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, style:Object })
+const hover = ref(null); const hidden = ref([])
+const g = computed(() => {
+  const cx = props.size/2, cy = props.size/2, r = props.size/2-42
+  const n = props.axes.length||1, step = 360/n
+  const shown = props.series.filter(s=>!hidden.value.includes(s.name))
+  const max = props.axes.map((a,i)=> a.max!=null ? a.max : niceTicks(0, Math.max(...props.series.map(s=>s.values[i]||0)), 3).hi)
+  const rings = [...Array(props.levels)].map((_,li)=>{
+    const rr = (r*(li+1))/props.levels
+    return 'M' + [...Array(n)].map((__,i)=>polar(cx,cy,rr,i*step).map(v=>v.toFixed(1)).join(' ')).join(' L') + ' Z'
+  })
+  const spokes = props.axes.map((a,i)=>{
+    const p = polar(cx,cy,r,i*step), l = polar(cx,cy,r+14,i*step)
+    // An anchor="start" label grows rightward, so near-vertical spokes must center.
+    return { label:a.label, x:p[0], y:p[1], lx:l[0], ly:l[1],
+      anchor: Math.abs(l[0]-cx)<12 ? 'middle' : (l[0]>cx ? 'start' : 'end') }
+  })
+  const shapes = shown.map(s=>{
+    const pts = props.axes.map((_,i)=>polar(cx,cy,Math.max(0,Math.min(1,(s.values[i]||0)/(max[i]||1)))*r, i*step))
+    return { s, color: s.color||SERIES[props.series.indexOf(s)%SERIES.length], pts,
+      d:'M'+pts.map(p=>p[0].toFixed(1)+' '+p[1].toFixed(1)).join(' L')+' Z' }
+  })
+  return { cx, cy, r, n, step, rings, spokes, shapes, shown }
+})
+function move(e){
+  if(!props.interactive) return
+  const rc = e.currentTarget.getBoundingClientRect()
+  const dx = e.clientX-rc.left-g.value.cx, dy = e.clientY-rc.top-g.value.cy
+  if (Math.hypot(dx,dy) > g.value.r+22) { hover.value=null; return }
+  let deg = (Math.atan2(dy,dx)*180)/Math.PI + 90
+  if (deg<0) deg += 360
+  hover.value = Math.round(deg/g.value.step) % g.value.n
+}
+const tip = computed(()=> hover.value==null ? null : polar(g.value.cx, g.value.cy, g.value.r*0.72, hover.value*g.value.step))
+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="size" :height="size" @mousemove="move" @mouseleave="hover=null" role="img" style="overflow:visible">
+      <path v-for="(d,i) in g.rings" :key="'r'+i" :d="d" fill="none" stroke="var(--chart-grid)" stroke-width="1"/>
+      <g v-for="(sp,i) in g.spokes" :key="sp.label">
+        <line :x1="g.cx" :y1="g.cy" :x2="sp.x" :y2="sp.y" :stroke="hover===i?'var(--chart-guide)':'var(--chart-axis)'" stroke-width="1"/>
+        <text :x="sp.lx" :y="sp.ly+3" :text-anchor="sp.anchor" :style="{fontFamily:'var(--font-sans)',fontSize:'10px',fill:hover===i?'var(--text-heading)':'var(--chart-label)'}">{{ sp.label }}</text>
+      </g>
+      <g v-for="sh in g.shapes" :key="sh.s.name">
+        <path :d="sh.d" :fill="sh.color" fill-opacity="0.14" :stroke="sh.color" stroke-width="1.5" stroke-linejoin="round"/>
+        <circle v-for="(p,i) in sh.pts" :key="i" :cx="p[0]" :cy="p[1]" :r="hover===i?3.4:2.2" :fill="sh.color" stroke="var(--bg-surface)" :stroke-width="hover===i?1.5:0"/>
+      </g>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:tip[0]+'px',top:tip[1]+'px',transform:tip[0]>size*0.58?'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">{{ axes[hover].label }}</div>
+      <div v-for="sh in g.shapes" :key="sh.s.name" style="display:flex;align-items:center;gap:6px">
+        <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:sh.color}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ sh.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">{{ valueFormat(sh.s.values[hover]) }}</span>
+      </div>
+    </div>
+    <div v-if="legend && series.length>1" style="display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:6px;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]}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ s.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/Ribbon3D.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface Ribbon3DSeries { name: string; values: number[]; color?: string; }
+/** Each series as an extruded band at its own depth row (the classic 3D area); drag to orbit. */
+export interface Ribbon3DProps {
+  series?: Ribbon3DSeries[];
+  xLabels?: string[];
+  width?: number; height?: number;
+  yaw?: number; pitch?: number;
+  /** Band thickness as a fraction of its row, 0–1 */ ribbon?: number;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Ribbon3D(props: Ribbon3DProps): JSX.Element;

package/components/charts/Ribbon3D.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { fmtNum, seriesColor, niceTicks } from "./chart-geometry.js";
+import { makeProj, facePath, faceDepth, shade, dragRotate } from "./chart-3d.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * 3D ribbon series — each series is an extruded band at its own depth row (the classic
+ * "3D area" presentation). Drag to orbit.
+ */
+export function Ribbon3D({ series = [], xLabels = [], width = 460, height = 300, yaw: yaw0 = 34, pitch: pitch0 = 30, ribbon = 0.55, interactive = true, valueFormat = fmtNum, style }) {
+  const [rot, setRot] = React.useState({ yaw: yaw0, pitch: pitch0 });
+  const [hover, setHover] = React.useState(null);
+  const n = Math.max(...series.map((s) => s.values.length), 2);
+  const hi = Math.max(...series.flatMap((s) => s.values)) || 1;
+  const m = series.length;
+  const scale = Math.min(width, height) * 0.42;
+  const P = makeProj(width / 2, height / 2 + height * 0.05, scale, rot.yaw, rot.pitch);
+  const base = [P(-0.5, -0.45, -0.5), P(0.5, -0.45, -0.5), P(0.5, -0.45, 0.5), P(-0.5, -0.45, 0.5)];
+  /* Vertical value axis with real ticks at the front-left corner. */
+  const vt = niceTicks(0, hi, 3);
+  const vTicks = vt.ticks.filter((t) => t <= hi * 1.001).map((t) => ({ p: P(-0.5, (t / hi - 0.5) * 0.9, 0.5), v: fmtNum(t) }));
+  const vAxis = [P(-0.5, -0.45, 0.5), P(-0.5, 0.45, 0.5)];
+  const rows = series.map((s, si) => {
+    const z0 = si / m - 0.5 + (1 / m) * (0.5 - ribbon / 2), z1 = z0 + (ribbon / m);
+    const y = (i) => ((s.values[i] || 0) / hi - 0.5) * 0.9;
+    const quads = [];
+    for (let i = 0; i < n - 1; i++) {
+      const x0 = i / (n - 1) - 0.5, x1 = (i + 1) / (n - 1) - 0.5;
+      const top = [P(x0, y(i), z0), P(x1, y(i + 1), z0), P(x1, y(i + 1), z1), P(x0, y(i), z1)];
+      const front = [P(x0, -0.45, z1), P(x1, -0.45, z1), P(x1, y(i + 1), z1), P(x0, y(i), z1)];
+      const back = [P(x0, -0.45, z0), P(x1, -0.45, z0), P(x1, y(i + 1), z0), P(x0, y(i), z0)];
+      quads.push({ pts: back, kind: "back" }, { pts: top, kind: "top" }, { pts: front, kind: "front" });
+    }
+    const end = [P(0.5, -0.45, z0), P(0.5, -0.45, z1), P(0.5, y(n - 1), z1), P(0.5, y(n - 1), z0)];
+    const start = [P(-0.5, -0.45, z0), P(-0.5, -0.45, z1), P(-0.5, y(0), z1), P(-0.5, y(0), z0)];
+    quads.push({ pts: end, kind: "end" }, { pts: start, kind: "end" });
+    quads.forEach((q) => { q.depth = faceDepth(q.pts); });
+    const rowDepth = quads.reduce((t, q) => t + q.depth, 0) / quads.length;
+    return { s, si, quads, rowDepth, color: s.color || seriesColor(si) };
+  }).sort((a, b) => b.rowDepth - a.rowDepth);
+  const handlers = interactive ? dragRotate(() => rot, setRot) : {};
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} {...handlers} role="img" style={{ cursor: interactive ? "grab" : "default", touchAction: "none" }}>
+        <path d={facePath(base)} fill="var(--bg-inset)" stroke="var(--chart-axis)" strokeWidth="1" />
+        <line x1={vAxis[0].x} y1={vAxis[0].y} x2={vAxis[1].x} y2={vAxis[1].y} stroke="var(--chart-guide)" strokeWidth="1" />
+        {vTicks.map((t, i) => (
+          <g key={"vt" + i}>
+            <line x1={t.p.x - 4} y1={t.p.y} x2={t.p.x} y2={t.p.y} stroke="var(--chart-guide)" strokeWidth="1" />
+            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{t.v}</text>
+          </g>
+        ))}
+        {xLabels.map((lb, i) => {
+          if (lb == null || (xLabels.length > 8 && i % Math.ceil(xLabels.length / 8) && i !== xLabels.length - 1)) return null;
+          /* Follow whichever base edge faces the viewer; outside it, painted before the bands. */
+          const zE = P(0, -0.45, 0.5).y >= P(0, -0.45, -0.5).y ? 0.62 : -0.62;
+          const p0 = P(i / (n - 1) - 0.5, -0.45, zE);
+          const ctr = P(0, -0.45, 0);
+          const dx = p0.x - ctr.x, dy = p0.y - ctr.y, len = Math.hypot(dx, dy) || 1;
+          return <text key={"x" + i} x={p0.x + (dx / len) * 14} y={p0.y + (dy / len) * 14 + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{lb}</text>;
+        })}
+        {rows.map((r) => (
+          <g key={r.s.name} opacity={hover == null || hover === r.si ? 1 : 0.4}
+            onMouseEnter={interactive ? () => setHover(r.si) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+            style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }}>
+            {r.quads.sort((a, b) => b.depth - a.depth).map((q, qi) => (
+              <path key={qi} d={facePath(q.pts)} fill={shade(r.color, q.kind === "top" ? 0.14 : q.kind === "front" ? -0.12 : q.kind === "back" ? -0.2 : -0.28)} stroke="var(--bg-surface)" strokeWidth="0.4" />
+            ))}
+          </g>
+        ))}
+      </svg>
+      {hover != null && interactive ? (() => {
+        const r = rows.find((x) => x.si === hover);
+        const peak = Math.max(...r.s.values);
+        return <ChartTooltip x={width / 2} y={height * 0.28} flip={false} title={r.s.name}
+          rows={[{ label: "peak", value: valueFormat(peak), color: r.color }, { label: "latest", value: valueFormat(r.s.values[r.s.values.length - 1]) }]} />;
+      })() : null}
+      <div style={{ display: "flex", gap: 14, paddingTop: 6, lineHeight: "normal" }}>
+        {series.map((s, i) => (
+          <span key={s.name} onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+            style={{ display: "inline-flex", alignItems: "center", gap: 6, opacity: hover == null || hover === i ? 1 : 0.45, transition: "var(--t-hover)" }}>
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color || seriesColor(i) }} />
+            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{s.name}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/charts/Ribbon3D.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, SERIES, niceTicks } from './chart-geometry.js'
+import { makeProj, facePath, faceDepth, shade } from './chart-3d.js'
+// Each series as an extruded band at its own depth row (the classic 3D area); drag to orbit.
+const props = defineProps({ series:{type:Array,default:()=>[]}, xLabels:{type:Array,default:()=>[]}, width:{type:Number,default:460}, height:{type:Number,default:300}, yaw:{type:Number,default:34}, pitch:{type:Number,default:30}, ribbon:{type:Number,default:0.55}, interactive:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, style:Object })
+const rot = ref({ yaw: props.yaw, pitch: props.pitch })
+const hover = ref(null)
+function down(e){ e.currentTarget.__kbDrag = { x:e.clientX, y:e.clientY, ...rot.value }; e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId) }
+function move(e){ const s = e.currentTarget.__kbDrag; if(!s) return; rot.value = { yaw: s.yaw+(e.clientX-s.x)*0.45, pitch: Math.max(8, Math.min(80, s.pitch+(e.clientY-s.y)*0.35)) } }
+function up(e){ e.currentTarget.__kbDrag = null }
+const SHADE = { top:0.14, front:-0.12, back:-0.2, end:-0.28 }
+const g = computed(() => {
+  const n = Math.max(...props.series.map(s=>s.values.length), 2)
+  const hi = Math.max(...props.series.flatMap(s=>s.values)) || 1
+  const m = props.series.length
+  const scale = Math.min(props.width, props.height)*0.42
+  const P = makeProj(props.width/2, props.height/2 + props.height*0.05, scale, rot.value.yaw, rot.value.pitch)
+  const base = [P(-0.5,-0.45,-0.5), P(0.5,-0.45,-0.5), P(0.5,-0.45,0.5), P(-0.5,-0.45,0.5)]
+  const rows = props.series.map((s,si)=>{
+    const z0 = si/m-0.5+(1/m)*(0.5-props.ribbon/2), z1 = z0+(props.ribbon/m)
+    const y = i => ((s.values[i]||0)/hi-0.5)*0.9
+    const quads = []
+    for (let i=0;i<n-1;i++) {
+      const x0 = i/(n-1)-0.5, x1 = (i+1)/(n-1)-0.5
+      quads.push({ pts:[P(x0,-0.45,z0),P(x1,-0.45,z0),P(x1,y(i+1),z0),P(x0,y(i),z0)], kind:'back' })
+      quads.push({ pts:[P(x0,y(i),z0),P(x1,y(i+1),z0),P(x1,y(i+1),z1),P(x0,y(i),z1)], kind:'top' })
+      quads.push({ pts:[P(x0,-0.45,z1),P(x1,-0.45,z1),P(x1,y(i+1),z1),P(x0,y(i),z1)], kind:'front' })
+    }
+    quads.push({ pts:[P(0.5,-0.45,z0),P(0.5,-0.45,z1),P(0.5,y(n-1),z1),P(0.5,y(n-1),z0)], kind:'end' })
+    quads.push({ pts:[P(-0.5,-0.45,z0),P(-0.5,-0.45,z1),P(-0.5,y(0),z1),P(-0.5,y(0),z0)], kind:'end' })
+    quads.forEach(q=>{ q.depth = faceDepth(q.pts); q.d = facePath(q.pts) })
+    quads.sort((a,b)=>b.depth-a.depth)
+    return { s, si, quads, rowDepth: quads.reduce((t,q)=>t+q.depth,0)/quads.length, color: s.color || SERIES[si%SERIES.length] }
+  }).sort((a,b)=>b.rowDepth-a.rowDepth)
+  const vt = niceTicks(0, hi, 3)
+  const vTicks = vt.ticks.filter(t=>t<=hi*1.001).map(t=>({ p:P(-0.5,(t/hi-0.5)*0.9,0.5), v:fmtNum(t) }))
+  const zE = P(0,-0.45,0.5).y >= P(0,-0.45,-0.5).y ? 0.62 : -0.62
+  const ctr = P(0,-0.45,0)
+  const every = props.xLabels.length > 8 ? Math.ceil(props.xLabels.length/8) : 1
+  const labels = props.xLabels.map((lb,i)=>{
+    if (lb==null || (every>1 && i%every && i!==props.xLabels.length-1)) return null
+    const p0 = P(i/(n-1)-0.5, -0.45, zE)
+    const dx = p0.x-ctr.x, dy = p0.y-ctr.y, len = Math.hypot(dx,dy)||1
+    return { lb, x: p0.x+(dx/len)*14, y: p0.y+(dy/len)*14+3 }
+  }).filter(Boolean)
+  return { rows, basePath: facePath(base), vTicks, vAxis:[P(-0.5,-0.45,0.5), P(-0.5,0.45,0.5)], labels, SHADE }
+})
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" @pointerdown="down" @pointermove="move" @pointerup="up" @pointerleave="up"
+      role="img" :style="{cursor:interactive?'grab':'default',touchAction:'none'}">
+      <path :d="g.basePath" fill="var(--bg-inset)" stroke="var(--chart-axis)" stroke-width="1"/>
+      <line :x1="g.vAxis[0].x" :y1="g.vAxis[0].y" :x2="g.vAxis[1].x" :y2="g.vAxis[1].y" stroke="var(--chart-guide)" stroke-width="1"/>
+      <g v-for="(t,i) in g.vTicks" :key="'vt'+i">
+        <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+      </g>
+      <text v-for="(l,i) in g.labels" :key="'x'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ l.lb }}</text>
+      <g v-for="r in g.rows" :key="r.s.name" :opacity="hover==null||hover===r.si?1:0.4"
+        @mouseenter="interactive && (hover=r.si)" @mouseleave="interactive && (hover=null)"
+        style="transition:opacity var(--dur-fast) var(--ease-out)">
+        <path v-for="(q,qi) in r.quads" :key="qi" :d="q.d" :fill="shade(r.color, g.SHADE[q.kind])" stroke="var(--bg-surface)" stroke-width="0.4"/>
+      </g>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(width/2)+'px',top:(height*0.28)+'px',transform:'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">{{ series[hover].name }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">peak {{ valueFormat(Math.max(...series[hover].values)) }} · latest {{ valueFormat(series[hover].values[series[hover].values.length-1]) }}</div>
+    </div>
+    <div style="display:flex;gap:14px;padding-top:6px;line-height:normal">
+      <span v-for="(s,i) in series" :key="s.name" @mouseenter="interactive && (hover=i)" @mouseleave="interactive && (hover=null)"
+        :style="{display:'inline-flex',alignItems:'center',gap:'6px',opacity:hover==null||hover===i?1:0.45,transition:'var(--t-hover)'}">
+        <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:s.color||SERIES[i%SERIES.length]}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ s.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/SankeyChart.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface SankeyNode { id: string; label: string; color?: string; }
+export interface SankeyLink { source: string; target: string; value: number; }
+/** Flow diagram; node columns are derived from the longest path, never positioned by hand. */
+export interface SankeyChartProps {
+  nodes?: SankeyNode[];
+  links?: SankeyLink[];
+  width?: number; height?: number;
+  nodeWidth?: number; nodePadding?: number;
+  /** Right-hand room reserved for labels */ labelWidth?: number;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function SankeyChart(props: SankeyChartProps): JSX.Element;

package/components/charts/SankeyChart.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { fmtNum, sankey, seriesColor } from "./chart-geometry.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Sankey flow diagram — budget allocation, headcount movement, data lineage.
+ * nodes: [{id, label, color?}]; links: [{source, target, value}]. Depth (column) is
+ * derived from the longest path, so you never position nodes by hand. Hovering a
+ * ribbon or a node isolates that flow.
+ */
+export function SankeyChart({ nodes = [], links = [], width = 620, height = 320, nodeWidth = 13, nodePadding = 16, valueFormat = fmtNum, interactive = true, labelWidth = 96, style }) {
+  const [hover, setHover] = React.useState(null);
+  const pad = { l: 6, r: labelWidth, t: 8, b: 8 };
+  const inner = { w: width - pad.l - pad.r, h: height - pad.t - pad.b };
+  const { nodes: laid, ribbons } = React.useMemo(
+    () => sankey(nodes, links, inner.w, inner.h, nodeWidth, nodePadding),
+    [nodes, links, inner.w, inner.h, nodeWidth, nodePadding]
+  );
+  const byId = Object.fromEntries(laid.map((n) => [n.id, n]));
+  const colorOf = (n) => n.color || seriesColor(laid.indexOf(n));
+  const litRibbon = (r) => hover == null ? 0.42
+    : hover.kind === "ribbon" ? (hover.i === ribbons.indexOf(r) ? 0.78 : 0.12)
+    : (r.link.source === hover.id || r.link.target === hover.id ? 0.7 : 0.1);
+  const h = hover;
+  const tip = h ? (h.kind === "ribbon"
+    ? { x: (ribbons[h.i].source.x + ribbons[h.i].target.x) / 2 + pad.l, y: 0, title: byId[ribbons[h.i].link.source].label + " → " + byId[ribbons[h.i].link.target].label,
+        rows: [{ label: "flow", value: valueFormat(ribbons[h.i].link.value), color: colorOf(byId[ribbons[h.i].link.source]) }] }
+    : { x: byId[h.id].x + pad.l + nodeWidth, y: byId[h.id].y + pad.t + byId[h.id].h / 2, title: byId[h.id].label,
+        rows: [{ label: "total", value: valueFormat(byId[h.id].value), color: colorOf(byId[h.id]) },
+               { label: "links", value: String(byId[h.id].in.length + byId[h.id].out.length) }] }) : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} role="img">
+        <g transform={"translate(" + pad.l + "," + pad.t + ")"}>
+          {ribbons.map((r, i) => (
+            <path key={i} d={r.d} fill={colorOf(byId[r.link.source])} opacity={litRibbon(r)}
+              onMouseEnter={interactive ? () => setHover({ kind: "ribbon", i }) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+              style={{ transition: "opacity var(--dur-fast) var(--ease-out)", cursor: interactive ? "default" : undefined }} />
+          ))}
+          {laid.map((n) => {
+            const c = colorOf(n);
+            const rightSide = n.x > inner.w * 0.55;
+            return (
+              <g key={n.id} onMouseEnter={interactive ? () => setHover({ kind: "node", id: n.id }) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+                style={{ cursor: interactive ? "default" : undefined }}>
+                <rect x={n.x} y={n.y} width={n.w} height={n.h} rx="2" fill={c} opacity={hover == null || (hover.kind === "node" && hover.id === n.id) ? 1 : 0.55} />
+                <text x={rightSide ? n.x + n.w + 6 : n.x + n.w + 6} y={n.y + n.h / 2 + 3.5}
+                  style={{ fontFamily: "var(--font-sans)", fontSize: 11, fill: "var(--text-heading)" }}>{n.label}</text>
+                <text x={n.x + n.w + 6} y={n.y + n.h / 2 + 15}
+                  style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, fill: "var(--chart-label)" }}>{valueFormat(n.value)}</text>
+              </g>
+            );
+          })}
+        </g>
+      </svg>
+      {tip && interactive ? <ChartTooltip x={tip.x} y={tip.y || height / 2} flip={tip.x > width * 0.6} title={tip.title} rows={tip.rows} /> : null}
+    </div>
+  );
+}

package/components/charts/SankeyChart.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, sankey, SERIES } from './chart-geometry.js'
+// Flow diagram; node columns are derived from the longest path, never positioned by hand.
+const props = defineProps({ nodes:{type:Array,default:()=>[]}, links:{type:Array,default:()=>[]}, width:{type:Number,default:620}, height:{type:Number,default:320}, nodeWidth:{type:Number,default:13}, nodePadding:{type:Number,default:16}, labelWidth:{type:Number,default:96}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const g = computed(() => {
+  const pad = { l:6, r:props.labelWidth, t:8, b:8 }
+  const inner = { w: props.width-pad.l-pad.r, h: props.height-pad.t-pad.b }
+  const laid = sankey(props.nodes, props.links, inner.w, inner.h, props.nodeWidth, props.nodePadding)
+  const byId = {}; laid.nodes.forEach(n=>{ byId[n.id]=n })
+  const color = n => n.color || SERIES[laid.nodes.indexOf(n)%SERIES.length]
+  return { pad, inner, laid, byId, color,
+    ribbons: laid.ribbons.map((r,i)=>Object.assign({}, r, { i, fill: color(byId[r.link.source]) })) }
+})
+function ribbonOpacity(r){
+  const h = hover.value
+  if (!h) return 0.42
+  if (h.kind==='ribbon') return h.i===r.i ? 0.78 : 0.12
+  return (r.link.source===h.id || r.link.target===h.id) ? 0.7 : 0.1
+}
+const tip = computed(()=>{
+  const h = hover.value
+  if (!h) return null
+  if (h.kind==='ribbon') {
+    const r = g.value.ribbons[h.i]
+    return { x:(r.source.x+r.target.x)/2+g.value.pad.l, y:props.height/2,
+      title: g.value.byId[r.link.source].label+' → '+g.value.byId[r.link.target].label, value: props.valueFormat(r.link.value) }
+  }
+  const n = g.value.byId[h.id]
+  return { x:n.x+g.value.pad.l+props.nodeWidth, y:n.y+g.value.pad.t+n.h/2, title:n.label, value: props.valueFormat(n.value) }
+})
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" role="img">
+      <g :transform="'translate('+g.pad.l+','+g.pad.t+')'">
+        <path v-for="r in g.ribbons" :key="r.i" :d="r.d" :fill="r.fill" :opacity="ribbonOpacity(r)"
+          @mouseenter="interactive && (hover={kind:'ribbon',i:r.i})" @mouseleave="interactive && (hover=null)"
+          style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+        <g v-for="n in g.laid.nodes" :key="n.id" @mouseenter="interactive && (hover={kind:'node',id:n.id})" @mouseleave="interactive && (hover=null)">
+          <rect :x="n.x" :y="n.y" :width="n.w" :height="n.h" rx="2" :fill="g.color(n)" :opacity="hover==null||(hover.kind==='node'&&hover.id===n.id)?1:0.55"/>
+          <text :x="n.x+n.w+6" :y="n.y+n.h/2+3.5" style="font-family:var(--font-sans);font-size:11px;fill:var(--text-heading)">{{ n.label }}</text>
+          <text :x="n.x+n.w+6" :y="n.y+n.h/2+15" style="font-family:var(--font-mono);font-size:9.5px;fill:var(--chart-label)">{{ valueFormat(n.value) }}</text>
+        </g>
+      </g>
+    </svg>
+    <div v-if="tip && interactive" :style="{position:'absolute',left:tip.x+'px',top:tip.y+'px',transform:tip.x>width*0.6?'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>

package/components/charts/Scatter3D.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface Point3D { x: number; y: number; z: number; series?: string; label?: string; color?: string; }
+/** 3D scatter in an orientation cube; drag to orbit. Depth attenuates radius and opacity. */
+export interface Scatter3DProps {
+  points?: Point3D[];
+  width?: number; height?: number;
+  yaw?: number; pitch?: number;
+  /** Base dot radius */ r?: number;
+  legend?: boolean; interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function Scatter3D(props: Scatter3DProps): JSX.Element;