{"spec_id":"bar-heart-rate-zones","library":"chartjs","language":"javascript","code":"// anyplot.ai\n// bar-heart-rate-zones: Time in Heart Rate Zones Bar Chart\n// Library: chartjs 4.4.7 | JavaScript 22.22.3\n// Quality: 92/100 | Created: 2026-06-14\n//# anyplot-orientation: landscape\n\nconst t = window.ANYPLOT_TOKENS;\nconst isDark = window.ANYPLOT_THEME === 'dark';\n\n// Zone semantic colors: conventional HR zone palette mapped to Imprint anchors\n// Z1=grey(muted anchor), Z2=blue(#4467A3), Z3=green(brand #009E73),\n// Z4=ochre(#BD8233), Z5=red(#AE3030)\nconst ZONE_COLORS = [\n  isDark ? '#A8A79F' : '#6B6A63',\n  '#4467A3',\n  '#009E73',\n  '#BD8233',\n  '#AE3030',\n];\n\n// Data: 60-minute threshold run (tempo session)\nconst labels = [\n  ['Z1 Recovery', '< 115 bpm'],\n  ['Z2 Endurance', '115–135 bpm'],\n  ['Z3 Aerobic', '135–155 bpm'],\n  ['Z4 Threshold', '155–170 bpm'],\n  ['Z5 Maximum', '> 170 bpm'],\n];\nconst minutes = [5, 18, 20, 14, 3];\nconst yMax = Math.ceil(Math.max(...minutes) * 1.3 / 5) * 5;\n\n// Mount canvas\nconst canvas = document.createElement('canvas');\ndocument.getElementById('container').appendChild(canvas);\n\n// Plugin: fill canvas background with theme surface color\nconst bgPlugin = {\n  id: 'canvasBg',\n  beforeDraw(chart) {\n    const ctx = chart.ctx;\n    ctx.save();\n    ctx.fillStyle = t.pageBg;\n    ctx.fillRect(0, 0, chart.width, chart.height);\n    ctx.restore();\n  },\n};\n\n// Plugin: duration labels above each bar\nconst valueLabelPlugin = {\n  id: 'valueLabels',\n  afterDatasetsDraw(chart) {\n    const ctx = chart.ctx;\n    const meta = chart.getDatasetMeta(0);\n    meta.data.forEach((bar, idx) => {\n      const val = minutes[idx];\n      ctx.save();\n      ctx.fillStyle = t.ink;\n      ctx.font = 'bold 16px system-ui, sans-serif';\n      ctx.textAlign = 'center';\n      ctx.textBaseline = 'bottom';\n      ctx.fillText(`${val} min`, bar.x, bar.y - 8);\n      ctx.restore();\n    });\n  },\n};\n\nnew Chart(canvas, {\n  type: 'bar',\n  data: {\n    labels,\n    datasets: [{\n      label: 'Time in Zone',\n      data: minutes,\n      backgroundColor: ZONE_COLORS,\n      borderWidth: 0,\n      borderRadius: 6,\n    }],\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: false,\n    layout: { padding: { top: 40, right: 60, bottom: 20, left: 20 } },\n    plugins: {\n      title: {\n        display: true,\n        text: 'bar-heart-rate-zones · javascript · chartjs · anyplot.ai',\n        color: t.ink,\n        font: { size: 22, weight: 'bold' },\n        padding: { top: 16, bottom: 6 },\n      },\n      subtitle: {\n        display: true,\n        text: '60-Minute Threshold Run',\n        color: t.inkSoft,\n        font: { size: 16, style: 'italic' },\n        padding: { bottom: 24 },\n      },\n      legend: { display: false },\n      tooltip: { enabled: true },\n    },\n    scales: {\n      x: {\n        ticks: {\n          color: t.inkSoft,\n          font: { size: 13 },\n          maxRotation: 0,\n        },\n        grid: { display: false },\n        border: { color: t.grid },\n      },\n      y: {\n        title: {\n          display: true,\n          text: 'Time (minutes)',\n          color: t.ink,\n          font: { size: 16 },\n        },\n        ticks: {\n          color: t.inkSoft,\n          font: { size: 14 },\n          stepSize: 5,\n        },\n        grid: { color: t.grid },\n        border: { display: false },\n        beginAtZero: true,\n        max: yMax,\n      },\n    },\n  },\n  plugins: [bgPlugin, valueLabelPlugin],\n});\n"}