{"id":4033,"date":"2026-03-09T06:28:33","date_gmt":"2026-03-09T06:28:33","guid":{"rendered":"https:\/\/swusportsci.com\/?p=4033"},"modified":"2026-03-09T06:28:33","modified_gmt":"2026-03-09T06:28:33","slug":"4033","status":"publish","type":"post","link":"https:\/\/swusportsci.com\/index.php\/2026\/03\/09\/4033\/","title":{"rendered":""},"content":{"rendered":"

import { useState } from “react”;
\nimport {
\nBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
\nPieChart, Pie, Cell, ResponsiveContainer, RadarChart, Radar,
\nPolarGrid, PolarAngleAxis, PolarRadiusAxis, Treemap
\n} from “recharts”;<\/p>\n

const COLORS = [“#C0392B”,”#E74C3C”,”#E67E22″,”#F39C12″,”#27AE60″,”#1ABC9C”,”#2980B9″,”#3498DB”,”#8E44AD”,”#9B59B6″,”#2C3E50″,”#7F8C8D”];<\/p>\n

const rawData = [
\n{ name: “\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e23\u0e31\u0e10\u0e1a\u0e32\u0e25”, short: “\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e23\u0e31\u0e10”, original: 527280400, extra: 1116405304.07, total: 1643685704.07 },
\n{ name: “\u0e40\u0e08\u0e49\u0e32\u0e20\u0e32\u0e1e\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e19\u0e32\u0e19\u0e32\u0e0a\u0e32\u0e15\u0e34”, short: “\u0e40\u0e08\u0e49\u0e32\u0e20\u0e32\u0e1e”, original: 314056160, extra: 2000000, total: 316056160 },
\n{ name: “\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e32\u0e0a\u0e35\u0e1e”, short: “\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e32\u0e0a\u0e35\u0e1e”, original: 200000000, extra: 23989196, total: 223989196 },
\n{ name: “\u0e01\u0e33\u0e01\u0e31\u0e1a\u0e14\u0e39\u0e41\u0e25\u0e01\u0e35\u0e2c\u0e32\u0e21\u0e27\u0e22\u0e44\u0e17\u0e22”, short: “\u0e21\u0e27\u0e22\u0e44\u0e17\u0e22”, original: 130000000, extra: 54920600, total: 184920600 },
\n{ name: “\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e30\u0e41\u0e2a\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e01\u0e35\u0e2c\u0e32”, short: “\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e30\u0e41\u0e2a”, original: 40000000, extra: 210000000, total: 250000000 },
\n{ name: “\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e19\u0e31\u0e01\u0e01\u0e35\u0e2c\u0e32\u0e2a\u0e39\u0e48\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e25\u0e34\u0e28”, short: “\u0e19\u0e31\u0e01\u0e01\u0e35\u0e2c\u0e32\u0e40\u0e25\u0e34\u0e28”, original: 1028606008, extra: 7623937.32, total: 1036229945.32 },
\n{ name: “\u0e19\u0e33\u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e01\u0e32\u0e23\u0e01\u0e35\u0e2c\u0e32”, short: “\u0e27\u0e34\u0e17\u0e22\u0e4c\u0e01\u0e35\u0e2c\u0e32”, original: 161914919.85, extra: 1880250, total: 163795169.85 },
\n{ name: “\u0e17\u0e38\u0e19\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32”, short: “\u0e17\u0e38\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32”, original: 80000000, extra: 25497913.25, total: 105497913.25 },
\n{ name: “\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23”, short: “\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e34\u0e01\u0e32\u0e23”, original: 30000000, extra: 0, total: 30000000 },
\n{ name: “\u0e2a\u0e19\u0e31\u0e1a\u0e2a\u0e19\u0e38\u0e19\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25”, short: “\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25”, original: 612802500, extra: 0, total: 612802500 },
\n{ name: “\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23\u0e01\u0e35\u0e2c\u0e32”, short: “\u0e1a\u0e38\u0e04\u0e25\u0e32\u0e01\u0e23”, original: 57000000, extra: 958918.91, total: 57958918.91 },
\n{ name: “\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23”, short: “\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23”, original: 164500000, extra: 30427414.68, total: 194927414.68 },
\n];<\/p>\n

const grandTotal = 4819863522.08;
\nconst originalTotal = 3346159987.85;
\nconst extraTotal = 1473703534.23;<\/p>\n

const fmt = (v) => {
\nif (v >= 1e9) return `${(v \/ 1e9).toFixed(2)}B`;
\nif (v >= 1e6) return `${(v \/ 1e6).toFixed(1)}M`;
\nreturn `${(v \/ 1e3).toFixed(0)}K`;
\n};<\/p>\n

const fmtFull = (v) =>
\nv.toLocaleString(“th-TH”, { minimumFractionDigits: 2, maximumFractionDigits: 2 });<\/p>\n

const overrunPct = (d) =>
\nd.original > 0 ? ((d.extra \/ d.original) * 100).toFixed(1) : “\u221e”;<\/p>\n

const riskData = rawData.map((d) => ({
\n…d,
\npct: ((d.total \/ grandTotal) * 100).toFixed(2),
\noverrun: parseFloat(overrunPct(d)),
\nriskLevel:
\nd.extra \/ d.original > 2 ? “\u0e2a\u0e39\u0e07\u0e21\u0e32\u0e01” :
\nd.extra \/ d.original > 0.5 ? “\u0e2a\u0e39\u0e07” :
\nd.extra \/ d.original > 0.1 ? “\u0e1b\u0e32\u0e19\u0e01\u0e25\u0e32\u0e07” : “\u0e15\u0e48\u0e33”,
\nriskColor:
\nd.extra \/ d.original > 2 ? “#C0392B” :
\nd.extra \/ d.original > 0.5 ? “#E67E22” :
\nd.extra \/ d.original > 0.1 ? “#F39C12” : “#27AE60”,
\n}));<\/p>\n

const radarData = [
\n{ subject: “\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e23\u0e31\u0e10”, value: 34 },
\n{ subject: “\u0e19\u0e31\u0e01\u0e01\u0e35\u0e2c\u0e32\u0e40\u0e25\u0e34\u0e28”, value: 21 },
\n{ subject: “\u0e40\u0e07\u0e34\u0e19\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25”, value: 13 },
\n{ subject: “\u0e40\u0e08\u0e49\u0e32\u0e20\u0e32\u0e1e”, value: 7 },
\n{ subject: “\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e23\u0e30\u0e41\u0e2a”, value: 5 },
\n{ subject: “\u0e01\u0e35\u0e2c\u0e32\u0e2d\u0e32\u0e0a\u0e35\u0e1e”, value: 5 },
\n];<\/p>\n

const CustomTooltip = ({ active, payload, label }) => {
\nif (!active || !payload?.length) return null;
\nreturn (<\/p>\n

\n

{label}<\/p>\n

{payload.map((p, i) => (<\/p>\n

{p.name}: \u0e3f{fmt(p.value)}<\/p>\n

))}<\/p>\n<\/div>\n

);
\n};<\/p>\n

const PieTooltip = ({ active, payload }) => {
\nif (!active || !payload?.length) return null;
\nconst d = payload[0];
\nreturn (<\/p>\n

\n

{d.name}<\/p>\n

\u0e3f{fmt(d.value)}<\/p>\n

{((d.value \/ grandTotal) * 100).toFixed(1)}%<\/p>\n<\/div>\n

);
\n};<\/p>\n

const MetricCard = ({ label, value, sub, accent, icon }) => (<\/p>\n

\n
{icon}
\n{label}<\/div>\n
{value}<\/div>\n

{sub &&<\/p>\n

{sub}<\/div>\n

}<\/p>\n<\/div>\n

);<\/p>\n

const RiskBadge = ({ level, color }) => (
\n{level}
\n);<\/p>\n

const TABS = [“\u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21”, “\u0e01\u0e32\u0e23\u0e01\u0e23\u0e30\u0e08\u0e32\u0e22\u0e07\u0e1a”, “\u0e04\u0e27\u0e32\u0e21\u0e40\u0e2a\u0e35\u0e48\u0e22\u0e07”, “\u0e1a\u0e17\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c”];<\/p>\n

export default function App() {
\nconst [tab, setTab] = useState(0);<\/p>\n

const pieData = rawData.map((d, i) => ({ name: d.short, value: d.total, fill: COLORS[i] }));<\/p>\n

return (<\/p>\n

{\/* HEADER *\/}<\/p>\n