Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
1.2 kB · 48 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import type { Language } from "../../validation";
interface LanguageCirclesProps { languages?: Language[]; width: number;}
export function LanguageCircles({ languages, width }: LanguageCirclesProps) { if (!languages || languages.length === 0) { return null; }
const MAX_RADIUS = width || 100;
const sortedLanguages = [...languages] .sort((a, b) => b.percentage - a.percentage) .slice(0, 5);
let cumulativePercentage = 0; const circles: { color: string; radius: number }[] = [];
for (const lang of sortedLanguages) { const remaining = Math.max(0, 1 - cumulativePercentage / 100); const radius = Math.max( 1, Math.round(MAX_RADIUS * Math.sqrt(remaining) * 100) / 100, ); circles.push({ color: lang.color, radius }); cumulativePercentage += lang.percentage; }
return ( <svg width={MAX_RADIUS} height={MAX_RADIUS} viewBox={`0 0 ${MAX_RADIUS * 2} ${MAX_RADIUS * 2}`}> {circles.map((circle, i) => ( <circle key={i} cx="50%" cy="50%" r={circle.radius} fill={circle.color} /> ))} </svg> );}