{"spec_id":"step-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// step-basic: Basic Step Plot\n// Library: muix 7.29.1 | JavaScript 22.23.1\n// Quality: 93/100 | Created: 2026-07-25\n\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nconst t = window.ANYPLOT_TOKENS;\nconst sz = window.ANYPLOT_SIZE;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Warehouse inventory level, sampled daily over a month. Stock holds\n// constant between restock/shipment events, then jumps or drops on the\n// event day — a textbook \"stepAfter\" pattern (the reported value applies\n// from the current day until the next reading).\nconst days = Array.from({ length: 24 }, (_, i) => i + 1);\nconst unitsInStock = [\n  500, 500, 460, 460, 460, 410, 410, 410, 680, 680, 680, 630, 630, 580, 580,\n  580, 820, 820, 760, 760, 760, 700, 700, 650,\n];\nconst REORDER_POINT = 500;\n\n// The two largest restock jumps (day 9: 410 -> 680, day 17: 580 -> 820) get a\n// bigger, filled marker so the chart's story reads at a glance instead of a\n// uniform row of small dots.\nconst EVENT_INDICES = [8, 16];\n\nfunction EventMark({ x, y, color, dataIndex }) {\n  const isEvent = EVENT_INDICES.includes(dataIndex);\n  return (\n    <circle\n      cx={x}\n      cy={y}\n      r={isEvent ? 9 : 6}\n      fill={isEvent ? color : t.pageBg}\n      stroke={color}\n      strokeWidth={isEvent ? 3 : 2}\n    />\n  );\n}\n\nconst margin = { top: 90, bottom: 80, left: 110, right: 60 };\n\n// --- Chart (default-exported component — the harness mounts it) -------------\nexport default function Chart() {\n  return (\n    <Box sx={{ position: \"relative\", width: sz.width, height: sz.height }}>\n      <Typography\n        sx={{\n          position: \"absolute\",\n          top: 14,\n          left: 0,\n          right: 0,\n          textAlign: \"center\",\n          color: t.ink,\n          fontSize: 22,\n          fontWeight: 600,\n          zIndex: 1,\n          pointerEvents: \"none\",\n        }}\n      >\n        step-basic · javascript · muix · anyplot.ai\n      </Typography>\n\n      {/* Rotated y-axis label, centered on the drawing area — rendered\n          manually because ChartsYAxis positions its built-in `label` from\n          `tickFontSize` rather than the tick labels' measured width, which\n          overlaps 3-digit tick numbers at this font size. */}\n      <Box\n        sx={{\n          position: \"absolute\",\n          left: 4,\n          top: margin.top,\n          height: sz.height - margin.top - margin.bottom,\n          width: 28,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          pointerEvents: \"none\",\n        }}\n      >\n        <Typography sx={{ transform: \"rotate(-90deg)\", whiteSpace: \"nowrap\", color: t.ink, fontSize: 16 }}>\n          Units in Stock\n        </Typography>\n      </Box>\n\n      <LineChart\n        width={sz.width}\n        height={sz.height}\n        skipAnimation\n        margin={margin}\n        colors={[t.palette[0]]}\n        grid={{ horizontal: true }}\n        sx={{\n          \"& .MuiLineElement-root\": { strokeWidth: 3 },\n          \"& .MuiAreaElement-root\": { fillOpacity: 0.12 },\n        }}\n        xAxis={[\n          {\n            data: days,\n            label: \"Day of Month\",\n            scaleType: \"linear\",\n            tickNumber: 12,\n            labelStyle: { fontSize: 16, fill: t.ink },\n            tickLabelStyle: { fontSize: 14, fill: t.inkSoft },\n          },\n        ]}\n        yAxis={[\n          {\n            min: 0,\n            tickLabelStyle: { fontSize: 14, fill: t.inkSoft },\n          },\n        ]}\n        series={[\n          {\n            data: unitsInStock,\n            label: \"Warehouse Inventory\",\n            curve: \"stepAfter\",\n            showMark: true,\n            area: true,\n          },\n        ]}\n        slots={{ mark: EventMark }}\n        slotProps={{ legend: { hidden: true } }}\n      >\n        <ChartsReferenceLine\n          y={REORDER_POINT}\n          label=\"Reorder Point\"\n          labelAlign=\"end\"\n          lineStyle={{ stroke: t.amber, strokeDasharray: \"6 4\", strokeWidth: 2 }}\n          labelStyle={{ fontSize: 13, fontWeight: 600, fill: t.amber }}\n        />\n      </LineChart>\n    </Box>\n  );\n}\n"}