/* Chart primitives — Donut, LineChart, MiniAreaChart, BarChart, AnimatedNumber, Reveal */
/* Animated number that counts up when mounted */
const AnimatedNumber = ({ value, decimals=0, duration=900, suffix='', prefix='', style }) => {
const [v, setV] = React.useState(0);
React.useEffect(() => {
let raf, t0;
const step = (t) => {
if (!t0) t0 = t;
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setV(value * eased);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [value, duration]);
return {prefix}{v.toFixed(decimals)}{suffix};
};
window.AnimatedNumber = AnimatedNumber;
/* On-scroll reveal wrapper */
const Reveal = ({ children, delay=0, as='div', className='', style }) => {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries)=>{
entries.forEach(e => { if (e.isIntersecting) { setTimeout(()=>el.classList.add('in'), delay); io.unobserve(el); } });
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, [delay]);
const Tag = as;
return {children};
};
window.Reveal = Reveal;
/* Donut — values sum to 100; emits animated arc segments.
Matches the reference: thick strokes, soft tints behind, centre text. */
const Donut = ({ segments, size=220, thickness=22, centerValue, centerLabel, centerSub, trackColor='#E5E2D8' }) => {
const r = (size - thickness) / 2;
const C = 2 * Math.PI * r;
const cx = size/2, cy = size/2;
const gap = segments.length > 1 ? 2 : 0; // px gap between segments
// Compute each segment's arc length and rotation offset (in circle units).
let acc = 0;
const items = segments.map((s) => {
const len = Math.max(0, (s.value/100) * C - gap);
const rot = acc; // where this segment starts on the ring
acc += (s.value/100) * C;
return { ...s, len, rot };
});
return (
);
};
window.Donut = Donut;
/* Small donut without center text */
const MiniDonut = ({ pct, color='var(--moss)', size=56, thickness=8, trackColor='#E5E2D8' }) => {
const r = (size-thickness)/2; const C = 2*Math.PI*r;
const len = (pct/100)*C;
return (
);
};
window.MiniDonut = MiniDonut;
/* Line chart with animated stroke + gridlines + area fill */
const LineChart = ({ series, labels, width=520, height=200, color='var(--moss)', yDomain, yTicks=[0,1,2,3,4,5], yFormat=(v)=>v.toFixed(1)+'%' }) => {
const padL = 44, padR = 16, padT = 16, padB = 28;
const W = width - padL - padR, H = height - padT - padB;
const yMin = yDomain ? yDomain[0] : Math.min(...series);
const yMax = yDomain ? yDomain[1] : Math.max(...series);
const span = yMax - yMin || 1;
const xAt = (i) => padL + (i/(series.length-1)) * W;
const yAt = (v) => padT + H - ((v - yMin)/span) * H;
const pts = series.map((v,i)=>[xAt(i), yAt(v)]);
const d = pts.map((p,i)=> (i?'L':'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
const areaD = d + ` L ${xAt(series.length-1)} ${padT+H} L ${padL} ${padT+H} Z`;
// approximate path length for stroke-dasharray
let len = 0;
for (let i = 1; i < pts.length; i++) {
const dx = pts[i][0]-pts[i-1][0], dy = pts[i][1]-pts[i-1][1];
len += Math.sqrt(dx*dx + dy*dy);
}
return (
);
};
window.LineChart = LineChart;
/* Vertical bar chart, animated */
const BarChart = ({ data, width=440, height=200, color='var(--moss)', valueFormat=(v)=>v }) => {
const padL = 40, padR = 12, padT = 14, padB = 36;
const W = width - padL - padR, H = height - padT - padB;
const max = Math.max(...data.map(d=>d.v));
const bw = W / data.length * 0.64;
const bgap = W / data.length * 0.36;
const ticks = [0, max/2, max];
return (
);
};
window.BarChart = BarChart;
/* Horizontal bar list (e.g. top themes) */
const HBarList = ({ data, valueFormat=(v)=>v, color='var(--moss)' }) => {
const max = Math.max(...data.map(d=>d.v));
return (
);
};
window.HBarList = HBarList;