{"spec_id":"step-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// step-basic: Basic Step Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 90/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Thermostat setpoint schedule: the setpoint is set at each hour and holds\n// constant until the next scheduled change — a textbook step function.\nconst hours = Array.from({ length: 25 }, (_, i) => i); // 00:00 .. 24:00\n\nconst scheduledSetpoint = (hour) => {\n  if (hour < 6) return 17; // night setback\n  if (hour < 9) return 21; // morning occupied\n  if (hour < 16) return 19; // daytime away (energy saving)\n  if (hour < 22) return 22; // evening occupied\n  return 17; // night setback\n};\n\nconst categories = hours.map((h) => `${String(h).padStart(2, \"0\")}:00`);\nconst setpoints = hours.map(scheduledSetpoint);\n\n// Markers only at the hours where the setpoint actually changes.\nconst seriesData = setpoints.map((value, i) => {\n  const isChange = i === 0 || value !== setpoints[i - 1];\n  return { value, symbol: \"circle\", symbolSize: isChange ? 14 : 0 };\n});\n\n// --- Init ---------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"step-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  tooltip: { trigger: \"axis\" },\n  grid: { left: 110, right: 60, top: 110, bottom: 90 },\n  xAxis: {\n    type: \"category\",\n    data: categories,\n    name: \"Time of Day\",\n    nameLocation: \"middle\",\n    nameGap: 45,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    axisLabel: {\n      color: t.inkSoft,\n      fontSize: 14,\n      interval: (index) => index % 3 === 0,\n    },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Setpoint Temperature (°C)\",\n    nameLocation: \"middle\",\n    nameGap: 65,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 15,\n    max: 24,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"line\",\n      step: \"end\",\n      data: seriesData,\n      lineStyle: { width: 3.5, color: t.palette[0] },\n      itemStyle: { color: t.palette[0] },\n      areaStyle: { color: t.palette[0], opacity: 0.08 },\n    },\n  ],\n});\n"}