{"spec_id":"span-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// span-basic: Basic Span Plot (Highlighted Region)\n// Library: muix 7.29.1 | JavaScript 22.23.1\n// Quality: 91/100 | Created: 2026-07-25\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport { useDrawingArea, useXScale, useYScale } from \"@mui/x-charts/hooks\";\n\nconst t = window.ANYPLOT_TOKENS;\nconst TITLE = \"span-basic · javascript · muix · anyplot.ai\";\nconst TITLE_HEIGHT = 56;\n\n// --- Data (in-memory, deterministic): hourly API latency over one day -------\nconst hours = Array.from({ length: 24 }, (_, i) => i);\nconst latencyMs = [\n  118, 112, 295, 338, 261, 124, 119, 127, 141, 155, 168, 176, 182, 179, 171,\n  163, 154, 146, 138, 131, 126, 122, 119, 115,\n];\n\n// Overnight maintenance window: reduced capacity drives up response times.\nconst MAINTENANCE_START = 2;\nconst MAINTENANCE_END = 5;\n\n// Degraded-latency threshold: values above this are considered SLA breaches.\nconst DEGRADED_THRESHOLD = 200;\n\n// --- Vertical span highlighting the maintenance window -----------------------\n// No ChartsReferenceArea ships in the community package (7.29.1) — a rect\n// positioned via the chart's own scale/drawing-area hooks reproduces it while\n// staying entirely within the @mui/x-charts community surface.\nfunction MaintenanceSpan() {\n  const xScale = useXScale();\n  const { top, height } = useDrawingArea();\n  const x0 = xScale(MAINTENANCE_START);\n  const x1 = xScale(MAINTENANCE_END);\n  const left = Math.min(x0, x1);\n  const width = Math.abs(x1 - x0);\n\n  return (\n    <g>\n      <rect\n        x={left}\n        y={top}\n        width={width}\n        height={height}\n        fill={t.amber}\n        fillOpacity={0.25}\n      />\n      <text x={left + 8} y={top + height - 12} fontSize={13} fill={t.inkSoft}>\n        Maintenance window\n      </text>\n    </g>\n  );\n}\n\n// --- Horizontal span highlighting the degraded-latency threshold zone -------\n// A second region on the y-axis (spec allows 1-5 spans on either direction)\n// showing the value range above the SLA threshold, reusing the same\n// hooks-based approach as MaintenanceSpan.\nfunction ThresholdSpan() {\n  const yScale = useYScale();\n  const { left, top, width } = useDrawingArea();\n  const yThreshold = yScale(DEGRADED_THRESHOLD);\n  const bandTop = Math.min(top, yThreshold);\n  const bandHeight = Math.abs(yThreshold - top);\n\n  return (\n    <g>\n      <rect\n        x={left}\n        y={bandTop}\n        width={width}\n        height={bandHeight}\n        fill={t.amber}\n        fillOpacity={0.12}\n      />\n      <text\n        x={left + 12}\n        y={bandTop + 16}\n        fontSize={13}\n        fill={t.inkSoft}\n      >\n        Degraded (&gt;{DEGRADED_THRESHOLD}ms)\n      </text>\n    </g>\n  );\n}\n\nexport default function Chart() {\n  const chartHeight = window.ANYPLOT_SIZE.height - TITLE_HEIGHT;\n\n  return (\n    <div\n      style={{\n        width: window.ANYPLOT_SIZE.width,\n        height: window.ANYPLOT_SIZE.height,\n      }}\n    >\n      <div\n        style={{\n          height: TITLE_HEIGHT,\n          lineHeight: `${TITLE_HEIGHT}px`,\n          paddingLeft: 24,\n          fontSize: 22,\n          fontWeight: 500,\n          color: t.ink,\n        }}\n      >\n        {TITLE}\n      </div>\n      <LineChart\n        width={window.ANYPLOT_SIZE.width}\n        height={chartHeight}\n        skipAnimation\n        series={[\n          {\n            data: latencyMs,\n            label: \"API latency\",\n            color: t.palette[0],\n            showMark: true,\n            curve: \"monotoneX\",\n          },\n        ]}\n        xAxis={[\n          {\n            data: hours,\n            scaleType: \"linear\",\n            label: \"Hour of Day (UTC)\",\n            labelStyle: { fontSize: 16 },\n            tickLabelStyle: { fontSize: 14 },\n            valueFormatter: (v) => `${v}:00`,\n            tickMinStep: 2,\n          },\n        ]}\n        yAxis={[\n          {\n            label: \"Latency (ms)\",\n            labelStyle: { fontSize: 16 },\n            tickLabelStyle: { fontSize: 14 },\n          },\n        ]}\n        grid={{ horizontal: true }}\n        slotProps={{ legend: { hidden: true } }}\n      >\n        <ThresholdSpan />\n        <MaintenanceSpan />\n        <ChartsReferenceLine\n          x={MAINTENANCE_START}\n          lineStyle={{ stroke: t.amber, strokeDasharray: \"4 4\" }}\n        />\n        <ChartsReferenceLine\n          x={MAINTENANCE_END}\n          lineStyle={{ stroke: t.amber, strokeDasharray: \"4 4\" }}\n        />\n        <ChartsReferenceLine\n          y={DEGRADED_THRESHOLD}\n          lineStyle={{ stroke: t.amber, strokeDasharray: \"2 3\" }}\n        />\n      </LineChart>\n    </div>\n  );\n}\n"}