\n {title &&

{title}

}\n

No data yet

\n );\n }\n\n const cx = size / 2;\n const cy = size / 2;\n const r = size / 2 - 10;\n const innerR = r * 0.55;\n\n let startAngle = -90;\n const slices = data.map((d) => {\n const angle = (d.value / total) * 360;\n const start = startAngle;\n startAngle += angle;\n return { ...d, start, angle };\n });\n\n function polarToCartesian(centerX: number, centerY: number, radius: number, angleDeg: number) {\n const rad = (angleDeg * Math.PI) / 180;\n return { x: centerX + radius * Math.cos(rad), y: centerY + radius * Math.sin(rad) };\n }\n\n function arcPath(startDeg: number, angleDeg: number, outerR: number, innerRadius: number) {\n const s1 = polarToCartesian(cx, cy, outerR, startDeg);\n const e1 = polarToCartesian(cx, cy, outerR, startDeg + angleDeg);\n const s2 = polarToCartesian(cx, cy, innerRadius, startDeg + angleDeg);\n const e2 = polarToCartesian(cx, cy, innerRadius, startDeg);\n const large = angleDeg > 180 ? 1 : 0;\n return [\n `M ${s1.x} ${s1.y}`,\n `A ${outerR} ${outerR} 0 ${large} 1 ${e1.x} ${e1.y}`,\n `L ${s2.x} ${s2.y}`,\n `A ${innerRadius} ${innerRadius} 0 ${large} 0 ${e2.x} ${e2.y}`,\n \"Z\",\n ].join(\" \");\n }\n\n return (\n

\n {title &&

{title}

}\n

\n \n

\n {data.map((d, i) => (\n

\n {d.label}\n {d.value}\n

\n ))}\n

\n );\n}\n","deleted","label",[177,178,159],"frontend","components","permalink","https://www.val.town/x/arfan/family-hub/code/frontend/components/PieChart.tsx","extension","actionData","errors"]