{"spec_id":"line-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// line-basic: Basic Line Plot\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-08-24\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport { Box, Typography } from \"@mui/material\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Daily average temperature across an 8-week early-spring warming trend, with\n// day-to-day weather noise layered on top of the seasonal rise.\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\nconst rand = lcg(42);\n\nconst NUM_DAYS = 56;\nconst START_DATE = new Date(2026, 2, 1);\nconst dates = Array.from({ length: NUM_DAYS }, (_, day) => {\n  const d = new Date(START_DATE);\n  d.setDate(d.getDate() + day);\n  return d;\n});\n\nconst temperatures = dates.map((_, day) => {\n  const seasonalRise = day * 0.28;\n  const noise = (rand() - 0.5) * 3;\n  return Math.round((8 + seasonalRise + noise) * 10) / 10;\n});\nconst avgTemperature = Math.round((temperatures.reduce((sum, v) => sum + v, 0) / temperatures.length) * 10) / 10;\n\nconst TITLE = \"line-basic · javascript · muix · anyplot.ai\";\n\n// --- Chart (default-exported component — the harness mounts it) ------------\nexport default function Chart() {\n  const size = window.ANYPLOT_SIZE;\n  const padding = { top: 28, right: 48, bottom: 24, left: 40 };\n  const titleBlockHeight = 56;\n  const yLabelWidth = 34;\n  const chartWidth = size.width - padding.left - padding.right - yLabelWidth;\n  const chartHeight = size.height - padding.top - padding.bottom - titleBlockHeight;\n\n  return (\n    <Box\n      sx={{\n        width: size.width,\n        height: size.height,\n        boxSizing: \"border-box\",\n        padding: `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`,\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <Typography sx={{ fontSize: 22, fontWeight: 600, color: \"text.primary\", mb: \"20px\", lineHeight: 1 }}>\n        {TITLE}\n      </Typography>\n      <Box sx={{ display: \"flex\", flexDirection: \"row\", height: chartHeight }}>\n        <Box sx={{ width: yLabelWidth, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>\n          <Typography\n            sx={{\n              fontSize: 16,\n              color: \"text.secondary\",\n              whiteSpace: \"nowrap\",\n              transform: \"rotate(-90deg)\",\n            }}\n          >\n            Temperature (°C)\n          </Typography>\n        </Box>\n        <LineChart\n          width={chartWidth}\n          height={chartHeight}\n          skipAnimation\n          series={[\n            {\n              data: temperatures,\n              color: t.palette[0],\n              showMark: true,\n              curve: \"monotoneX\",\n              area: true,\n              valueFormatter: (v) => `${v}°C`,\n            },\n          ]}\n          xAxis={[\n            {\n              data: dates,\n              scaleType: \"time\",\n              label: \"Date\",\n              valueFormatter: (date) => date.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n              tickLabelStyle: { fontSize: 14 },\n              labelStyle: { fontSize: 16 },\n            },\n          ]}\n          yAxis={[\n            {\n              tickLabelStyle: { fontSize: 14 },\n            },\n          ]}\n          grid={{ horizontal: true }}\n          slotProps={{ legend: { hidden: true } }}\n          sx={{\n            \"& .MuiLineElement-root\": { strokeWidth: 3 },\n            \"& .MuiMarkElement-root\": { r: 6, stroke: t.pageBg, strokeWidth: 2, fill: t.palette[0] },\n            \"& .MuiAreaElement-root\": { fill: t.palette[0], fillOpacity: 0.12 },\n            \"& .MuiChartsGrid-line\": { strokeDasharray: \"4 3\" },\n          }}\n        >\n          <ChartsReferenceLine\n            y={avgTemperature}\n            label={`Avg ${avgTemperature}°C`}\n            labelAlign=\"end\"\n            lineStyle={{ stroke: t.inkSoft, strokeDasharray: \"6 4\", strokeWidth: 1.5 }}\n            labelStyle={{ fontSize: 13, fill: t.inkSoft }}\n          />\n        </LineChart>\n      </Box>\n    </Box>\n  );\n}\n"}