{"spec_id":"line-stepwise","library":"echarts","language":"javascript","code":"// anyplot.ai\n// line-stepwise: Step Line Plot\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Smart thermostat target-temperature schedule: the setpoint changes at a\n// handful of events per day and holds constant until the next event — a\n// textbook piecewise-constant signal, sampled across 8 days.\nconst DAILY_SCHEDULE = [\n  [0, 18],\n  [5.5, 19],\n  [6.5, 21],\n  [8, 18],\n  [17, 20],\n  [18.5, 22],\n  [22, 18],\n];\n\nconst hours = [];\nconst setpoints = [];\nfor (let day = 0; day < 8; day++) {\n  for (const [hourOfDay, tempC] of DAILY_SCHEDULE) {\n    hours.push(day * 24 + hourOfDay);\n    setpoints.push(tempC);\n  }\n}\nconst data = hours.map((h, i) => [h, setpoints[i]]);\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: \"line-stepwise · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n  },\n  tooltip: {\n    trigger: \"axis\",\n    formatter: (params) => {\n      const p = params[0];\n      const h = p.value[0];\n      const day = Math.floor(h / 24) + 1;\n      const hourOfDay = h % 24;\n      const hh = String(Math.floor(hourOfDay)).padStart(2, \"0\");\n      const mm = String(Math.round((hourOfDay % 1) * 60)).padStart(2, \"0\");\n      return `Day ${day}, ${hh}:${mm} → ${p.value[1]}°C`;\n    },\n  },\n  grid: { left: 90, right: 60, top: 100, bottom: 80 },\n  xAxis: {\n    type: \"value\",\n    name: \"Time (days)\",\n    nameLocation: \"middle\",\n    nameGap: 40,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 0,\n    max: 192,\n    interval: 24,\n    axisLabel: { color: t.inkSoft, fontSize: 14, formatter: (v) => `Day ${v / 24 + 1}` },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Target Temperature (°C)\",\n    nameLocation: \"middle\",\n    nameGap: 60,\n    nameTextStyle: { color: t.ink, fontSize: 16 },\n    min: 16,\n    max: 24,\n    axisLabel: { color: t.inkSoft, fontSize: 14, formatter: \"{value}°C\" },\n    axisLine: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    {\n      type: \"line\",\n      data: data,\n      step: \"end\",\n      symbol: \"circle\",\n      symbolSize: 6,\n      lineStyle: { color: t.palette[0], width: 3.5 },\n      itemStyle: { color: t.palette[0] },\n      areaStyle: { color: t.palette[0], opacity: 0.12 },\n      markLine: {\n        silent: true,\n        symbol: \"none\",\n        lineStyle: { color: t.inkSoft, type: \"dashed\", width: 1.5 },\n        label: {\n          color: t.inkSoft,\n          fontSize: 12,\n          position: \"insideEndTop\",\n          formatter: \"Peak setpoint: 22°C\",\n        },\n        data: [{ yAxis: 22 }],\n      },\n    },\n  ],\n});\n"}