// ============================================================
// Spacio AM โ Owner Dashboard ยท Charts (SVG, responsive, soft)
// ============================================================
// measure container width
function useMeasure() {
const ref = useRef(null);
const [w, setW] = useState(640);
useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(es => { for (const e of es) setW(e.contentRect.width); });
ro.observe(ref.current); return () => ro.disconnect();
}, []);
return [ref, w];
}
// Catmull-Rom โ cubic bezier (soft tension)
function smoothPath(pts, t = 0.16) {
if (pts.length < 2) return pts.length ? `M${pts[0].x},${pts[0].y}` : "";
let d = `M${pts[0].x},${pts[0].y}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;
d += ` C${p1.x + (p2.x - p0.x) * t},${p1.y + (p2.y - p0.y) * t} ${p2.x - (p3.x - p1.x) * t},${p2.y - (p3.y - p1.y) * t} ${p2.x},${p2.y}`;
}
return d;
}
// ---- Smooth multi-line area chart with hover ----
const LineChart = ({ series, labels, height = 240, formatY, formatTip, yTicks = 4, area = true }) => {
const [ref, w] = useMeasure();
const [hi, setHi] = useState(null);
const padL = 8, padR = 8, padT = 16, padB = 28;
const innerW = Math.max(40, w - padL - padR);
const innerH = height - padT - padB;
const all = series.flatMap(s => s.values).filter(v => v != null);
let max = Math.max(...all), min = Math.min(...all, 0);
const range = max - min || 1; max += range * 0.12;
const nx = labels.length;
const X = i => padL + (nx === 1 ? innerW / 2 : (i / (nx - 1)) * innerW);
const Y = v => padT + innerH - ((v - min) / (max - min)) * innerH;
const ticks = [];
for (let i = 0; i <= yTicks; i++) ticks.push(min + ((max - min) / yTicks) * i);
const onMove = e => {
const r = e.currentTarget.getBoundingClientRect();
const mx = e.clientX - r.left;
const idx = Math.max(0, Math.min(nx - 1, Math.round(((mx - padL) / innerW) * (nx - 1))));
setHi(idx);
};
return (
{hi != null && (
{labels[hi]}
{series.map(s => (
{s.name}
{s.values[hi] == null ? "โ" : (formatTip ? formatTip(s.values[hi]) : s.values[hi])}
))}
)}
);
};
// ---- Legend ----
const Legend = ({ items }) => (
{items.map(it => (
{it.name}
))}
);
// ---- Occupancy bars (sold vs blocked, monthly) ----
const OccBars = ({ data, height = 220, formatTip }) => {
const [ref, w] = useMeasure();
const [hi, setHi] = useState(null);
const padT = 12, padB = 26;
const innerH = height - padT - padB;
const n = data.length;
const gap = 10;
const bw = Math.max(8, (w - gap * (n - 1)) / n);
const max = 1; // occupancy fraction up to 100%
return (
{hi != null && (
{data[hi].label}
{formatTip(data[hi])}
)}
);
};
// ---- Donut ----
const Donut = ({ segments, size = 200, thickness = 26, centerLabel, centerSub, onHover }) => {
const [hi, setHi] = useState(null);
const r = (size - thickness) / 2;
const cx = size / 2, cy = size / 2;
const total = segments.reduce((a, s) => a + s.value, 0) || 1;
const circ = 2 * Math.PI * r;
let acc = 0;
return (
{hi != null ? segments[hi].pretty : centerLabel}
{hi != null ? segments[hi].label : centerSub}
);
};
// ---- Sparkline ----
const Sparkline = ({ values, color = "var(--ink)", width = 120, height = 34 }) => {
const max = Math.max(...values), min = Math.min(...values);
const rng = max - min || 1;
const pts = values.map((v, i) => ({ x: (i / (values.length - 1)) * width, y: height - 4 - ((v - min) / rng) * (height - 8) }));
return (
);
};
// ---- Semicircle gauge (occupancy; can exceed 100%) ----
const Gauge = ({ value, size = 220, label, sub }) => {
const stroke = 18;
const r = (size - stroke) / 2;
const cx = size / 2, cy = size / 2;
const semi = Math.PI * r; // half-circle arc length
const frac = Math.max(0, Math.min(1, value)); // visual cap at 100% of the arc
const over = value > 1;
const dash = frac * semi;
const arc = (cxr) => `M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`;
return (
);
};
// ---- Occupancy column chart with % labels + 100% reference ----
const OccColumns = ({ data, height = 230, lang }) => {
const [ref, w] = useMeasure();
const [hi, setHi] = useState(null);
const padT = 26, padB = 26;
const innerH = height - padT - padB;
const n = data.length;
const gap = Math.max(8, w * 0.018);
const bw = Math.max(10, (w - gap * (n - 1)) / n);
const maxVal = Math.max(1.05, ...data.map(d => d.occ));
const Y = v => padT + innerH - (v / maxVal) * innerH;
return (
);
};
Object.assign(window, { LineChart, Legend, OccBars, OccColumns, Gauge, Donut, Sparkline, smoothPath });