{"spec_id":"donut-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// donut-basic: Basic Donut Chart\n// Library: muix 7.29.1 | JavaScript 22.23.0\n// Quality: 89/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n// anyplot.ai\n// donut-basic: Basic Donut Chart\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-06-25\n\nimport { PieChart } from \"@mui/x-charts/PieChart\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Portfolio allocation by asset class (values are percentages, sum = 100)\nconst portfolioData = [\n  { id: 0, value: 42, label: \"Equities\" },\n  { id: 1, value: 28, label: \"Fixed Income\" },\n  { id: 2, value: 14, label: \"Real Estate\" },\n  { id: 3, value: 9, label: \"Commodities\" },\n  { id: 4, value: 7, label: \"Cash & Equiv\" },\n];\n\nconst TITLE = \"donut-basic · javascript · muix · anyplot.ai\";\nconst MARGIN = { top: 72, bottom: 120, left: 60, right: 60 };\nconst INNER_RADIUS = 180;\nconst OUTER_RADIUS = 360;\n\n// Per-segment label fill chosen for maximum WCAG contrast against each Imprint color.\n// Luminance (WCAG rel. lum.): green 0.26, lavender 0.31, ochre 0.27 → dark text wins;\n// blue 0.13, red 0.11 → white text wins. Fixed hex works in both light and dark themes\n// because segment colors are theme-invariant.\nconst LABEL_FILLS = [\"#1A1A17\", \"#1A1A17\", \"#FFFFFF\", \"#1A1A17\", \"#FFFFFF\"];\n\nexport default function Chart() {\n  const { width, height } = window.ANYPLOT_SIZE;\n\n  // MUI X centers the pie in the drawing area; compute that center for the overlay\n  const pieCy = (MARGIN.top + height - MARGIN.bottom) / 2;\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width,\n        height,\n        fontFamily: \"'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 20,\n          left: 0,\n          right: 0,\n          textAlign: \"center\",\n          fontSize: 22,\n          fontWeight: 600,\n          color: t.ink,\n          letterSpacing: \"0.01em\",\n          lineHeight: 1.3,\n        }}\n      >\n        {TITLE}\n      </div>\n\n      {/* Donut chart — Imprint palette, animation off */}\n      <PieChart\n        width={width}\n        height={height}\n        colors={t.palette}\n        skipAnimation\n        margin={MARGIN}\n        series={[\n          {\n            data: portfolioData,\n            innerRadius: INNER_RADIUS,\n            outerRadius: OUTER_RADIUS,\n            paddingAngle: 2,\n            cornerRadius: 4,\n            arcLabel: (item) => `${item.value}%`,\n            arcLabelMinAngle: 18,\n          },\n        ]}\n        slotProps={{\n          legend: {\n            direction: \"row\",\n            position: { vertical: \"bottom\", horizontal: \"middle\" },\n            padding: 0,\n            itemMarkWidth: 14,\n            itemMarkHeight: 14,\n            markGap: 6,\n            itemGap: 20,\n          },\n        }}\n        sx={{\n          \"& .MuiPieArcLabel-root\": { fontSize: 15, fontWeight: \"bold\" },\n          // Per-segment contrast-optimal fills — nth-child matches data render order\n          \"& .MuiPieArcLabel-root:nth-child(1)\": { fill: LABEL_FILLS[0] },\n          \"& .MuiPieArcLabel-root:nth-child(2)\": { fill: LABEL_FILLS[1] },\n          \"& .MuiPieArcLabel-root:nth-child(3)\": { fill: LABEL_FILLS[2] },\n          \"& .MuiPieArcLabel-root:nth-child(4)\": { fill: LABEL_FILLS[3] },\n          \"& .MuiPieArcLabel-root:nth-child(5)\": { fill: LABEL_FILLS[4] },\n        }}\n      />\n\n      {/* Center overlay — total portfolio value */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: pieCy,\n          left: width / 2,\n          transform: \"translate(-50%, -50%)\",\n          textAlign: \"center\",\n          pointerEvents: \"none\",\n          lineHeight: 1.2,\n        }}\n      >\n        <div\n          style={{\n            fontSize: 44,\n            fontWeight: 700,\n            color: t.ink,\n            textShadow: `0 1px 4px ${t.grid}`,\n          }}\n        >\n          $500M\n        </div>\n        <div\n          style={{\n            fontSize: 13,\n            color: t.inkSoft,\n            marginTop: 8,\n            letterSpacing: \"0.08em\",\n            textTransform: \"uppercase\",\n          }}\n        >\n          Total Assets\n        </div>\n      </div>\n    </div>\n  );\n}\n"}