{"spec_id":"gauge-activity-rings","library":"echarts","language":"javascript","code":"// anyplot.ai\n// gauge-activity-rings: Activity Rings Progress Chart\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 89/100 | Created: 2026-06-14\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (daily fitness goals with spread completion levels) ---\nconst metrics = [\n  { name: \"Steps\",      value: 4521, goal: 10000, display: \"4,521 / 10,000 steps\" },\n  { name: \"Active Min\", value: 57,   goal: 60,    display: \"57 / 60 min\"           },\n  { name: \"Stand\",      value: 12,   goal: 12,    display: \"12 / 12 hr\"            },\n];\nconst colors = [t.palette[0], t.palette[1], t.palette[2]];\n\n// Track colors: ring hue at ~15% opacity\nconst trackColors = [\n  \"rgba(0,158,115,0.15)\",\n  \"rgba(196,117,253,0.15)\",\n  \"rgba(68,103,163,0.15)\",\n];\n\n// Percentage completion (clamped to 100)\nconst pcts = metrics.map(m =>\n  parseFloat(Math.min(m.value / m.goal * 100, 100).toFixed(1))\n);\n\n// Ring geometry: outer → inner, larger radii to fill canvas vertically\n// Outer ring bottom: 600 + 74%×600 = 1044px; gap to text row ~24px\nconst radii = [\"74%\", \"56%\", \"38%\"];\nconst ringW  = 34;  // CSS px (→ 68 physical px at DPR 2)\n\n// --- Init ---\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n\n  title: {\n    text: \"gauge-activity-rings · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: \"normal\" },\n  },\n\n  // Center labels + bottom values row (1200×1200 CSS mount, center at 600,600)\n  // Inner ring inner radius: 38%×600 − 34 = 194px → center space spans y 406–794\n  graphic: {\n    elements: [\n      // \"Daily Goals\" header\n      {\n        type: \"text\",\n        style: {\n          x: 600, y: 542,\n          text: \"Daily Goals\",\n          fill: t.inkSoft,\n          fontSize: 16,\n          textAlign: \"center\",\n          fontStyle: \"italic\",\n        },\n      },\n      // Per-ring: \"Metric: XX.X%\" in the ring's color\n      ...metrics.map((m, i) => ({\n        type: \"text\",\n        style: {\n          x: 600, y: 576 + i * 38,\n          text: `${m.name}: ${pcts[i]}%`,\n          fill: colors[i],\n          fontSize: 22,\n          fontWeight: \"bold\",\n          textAlign: \"center\",\n        },\n      })),\n      // Bottom row: raw values for each metric, just below outer ring\n      {\n        type: \"text\",\n        style: {\n          x: 600, y: 1068,\n          text: metrics.map(m => m.display).join(\"   ·   \"),\n          fill: t.inkSoft,\n          fontSize: 16,\n          textAlign: \"center\",\n        },\n      },\n    ],\n  },\n\n  series: metrics.map((m, i) => ({\n    type: \"gauge\",\n    startAngle: 90,\n    endAngle: -270,   // full circle clockwise from top\n    min: 0,\n    max: 100,\n    radius: radii[i],\n    center: [\"50%\", \"50%\"],\n    progress: {\n      show: true,\n      roundCap: true,\n      width: ringW,\n      itemStyle: { color: colors[i] },\n    },\n    axisLine: {\n      roundCap: true,\n      lineStyle: { width: ringW, color: [[1, trackColors[i]]] },\n    },\n    pointer:   { show: false },\n    axisTick:  { show: false },\n    splitLine: { show: false },\n    axisLabel: { show: false },\n    detail:    { show: false },\n    title:     { show: false },\n    data: [{ value: pcts[i] }],\n  })),\n});\n"}