// ===== Charts: animated SVG components =====
const useAnimatedNumber = (target, duration = 900) => {
const [n, setN] = React.useState(0);
React.useEffect(() => {
let raf, start;
const tick = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(target * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, duration]);
return n;
};
const useReveal = (duration = 1100) => {
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf, s;
const tick = (ts) => {
if (!s) s = ts;
const p = Math.min(1, (ts - s) / duration);
setT(1 - Math.pow(1 - p, 3));
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [duration]);
return t;
};
// ====== Animated counter (number with rolling animation) ======
const AnimatedCounter = ({ value, decimals = 0, suffix = "", duration = 1200 }) => {
const n = useAnimatedNumber(value, duration);
return {n.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}{suffix};
};
// ====== Donut chart ======
const DonutChart = ({ data, total, size = 240, thickness = 32, onSliceClick }) => {
const t = useReveal(1100);
const cx = size / 2, cy = size / 2;
const r = (size - thickness) / 2;
const sum = total || data.reduce((s, d) => s + d.value, 0);
let acc = 0;
const [hover, setHover] = React.useState(null);
return (
{hover != null ? (
<>
{data[hover].label}
{data[hover].value}
{((data[hover].value / sum) * 100).toFixed(1)}%
) : (
<>
ทั้งหมด
คน
)}
);
};
// ====== Bar chart (horizontal-ish: vertical bars) ======
const BarChart = ({ data, height = 220, onBarClick, valueFormat = (v) => v }) => {
const t = useReveal(1100);
const [hover, setHover] = React.useState(null);
const max = Math.max(...data.map(d => d.value), 1);
const ref = React.useRef(null);
const [w, setW] = React.useState(600);
React.useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const padL = 40, padR = 12, padT = 18, padB = 50;
const innerW = w - padL - padR;
const innerH = height - padT - padB;
const barW = data.length ? Math.min(56, innerW / data.length * 0.66) : 30;
const gap = data.length ? (innerW - barW * data.length) / (data.length) : 0;
return (
);
};
// ====== Line chart (in/out monthly) ======
const LineChart = ({ series, height = 240, labels, onPointClick }) => {
const t = useReveal(1300);
const [hover, setHover] = React.useState(null);
const ref = React.useRef(null);
const [w, setW] = React.useState(600);
React.useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const padL = 36, padR = 16, padT = 16, padB = 30;
const innerW = w - padL - padR;
const innerH = height - padT - padB;
const allVals = series.flatMap(s => s.data);
const max = Math.max(...allVals, 5);
const n = labels.length;
const xAt = (i) => padL + (innerW * i) / Math.max(1, n - 1);
const yAt = (v) => padT + innerH - innerH * (v / max);
return (
{hover && (
{labels[hover.i]}
{series.map((s, i) => (
{s.label}
{s.data[hover.i]}
))}
)}
);
};
// ====== Histogram (age) ======
const Histogram = ({ data, height = 220, color = "#4ec3ff", onBarClick }) => {
const t = useReveal(1000);
const [hover, setHover] = React.useState(null);
const ref = React.useRef(null);
const [w, setW] = React.useState(600);
React.useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const padL = 32, padR = 12, padT = 18, padB = 28;
const innerW = w - padL - padR;
const innerH = height - padT - padB;
const max = Math.max(...data.map(d => d.value), 1);
const barW = innerW / data.length * 0.88;
const gap = innerW / data.length * 0.12;
return (
);
};
Object.assign(window, { useAnimatedNumber, useReveal, AnimatedCounter, DonutChart, BarChart, LineChart, Histogram });