51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1189,import { Box, Text } from "ink"; import { useTheme } from "@/hooks/use-theme"; import { useUnicode } from "@/hooks/use-unicode"; export interface PieChartItem { label: string; value: number; color?: string; } export interface PieChartProps { data: PieChartItem[]; radius?: number; showLegend?: boolean; showPercentages?: boolean; title?: string; accessibleSummary?: string; "aria-label"?: string; } const DEFAULT_COLORS = [ "#7c3aed", "#2563eb", "#16a34a", "#d97706", "#dc2626", "#0891b2", "#be185d", "#65a30d", ]; /** * Approximate a pie chart using a 2D character grid. * Each cell is tested to see which segment it belongs to, * then rendered with that segment's color using block chars. */ const buildPieGrid = ( data: PieChartItem[], radius: number, fillCharacter: string ): { char: string; color: string }[][] => { const total = data.reduce((s, d) => s + d.value, 0); if (total === 0) { return []; } const cols = radius * 4; const rows = radius * 2; const cx = cols / 2; const cy = rows / 2; const grid: { char: string; color: string }[][] = Array.from( { length: rows }, () => Array.from({ length: cols }, () => ({ char: " ", color: "" })) ); const angles: { color: string; end: number; start: number }[] = []; let cumulative = 0; for (const item of data) { const slice = (item.value / total) * Math.PI * 2; angles.push({ color: item.color ?? "", end: cumulative + slice, start: cumulative, }); cumulative += slice; } for (let row = 0; row < rows; row += 1) { for (let col = 0; col < cols; col += 1) { const dx = (col - cx) / 2; const dy = row - cy; const dist = Math.hypot(dx, dy); if (dist > radius) { continue; } let angle = Math.atan2(dy, dx) + Math.PI / 2; if (angle < 0) { angle += Math.PI * 2; } const seg = angles.find((a) => angle >= a.start && angle < a.end) ?? angles.at(-1); if (seg) { grid[row][col] = { char: fillCharacter, color: seg.color }; } } } return grid; }; export const PieChart = ({ data, radius = 5, showLegend = true, showPercentages = true, title, accessibleSummary, "aria-label": ariaLabel, }: PieChartProps) => { const theme = useTheme(); const unicode = useUnicode(); const fillCharacter = unicode ? "█" : "#"; const legendCharacter = unicode ? "■" : "#"; if (data.length === 0) { return No data; } const total = data.reduce((s, d) => s + d.value, 0); const itemsWithColors = data.map((item, idx) => ({ ...item, color: item.color ?? DEFAULT_COLORS[idx % DEFAULT_COLORS.length] ?? theme.colors.primary, })); const grid = buildPieGrid(itemsWithColors, radius, fillCharacter); return ( `${item.label}: ${item.value}${total > 0 ? ` (${((item.value / total) * 100).toFixed(1)}%)` : ""}` ) .join(", ")}${data.length > 12 ? `, ${data.length - 12} more` : ""}.` } > {grid.map((row, rowIdx) => ( {row.map((cell, colIdx) => cell.char === " " ? ( ) : ( {cell.char} ) )} ))} {showLegend && ( {itemsWithColors.map((item, idx) => { const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : "0.0"; return ( {legendCharacter} {item.label} {showPercentages && ( ({pct}%) )} ); })} )} ); }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","ink",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ink","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"ink"}]]}]}]]}],["$","$L51",null,{"namespace":"@termcn","registryDependencies":["https://termcn.dev/r/ink/use-theme.json","https://termcn.dev/r/ink/use-unicode.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/pie-chart.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]