{"spec_id":"line-confidence","library":"muix","language":"javascript","code":"// anyplot.ai\n// line-confidence: Line Plot with Confidence Interval\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-05\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// A 60-day daily-active-user forecast: a rising trend with weekly seasonality,\n// paired with a 95% prediction interval that widens the further out the model\n// looks — the classic shape of a forecast confidence band.\nconst DAY_COUNT = 60;\nconst START_DATE = new Date(2024, 0, 1);\n\nconst dates = Array.from(\n  { length: DAY_COUNT },\n  (_, i) => new Date(START_DATE.getTime() + i * 86_400_000),\n);\n\nconst centralUsers = Array.from(\n  { length: DAY_COUNT },\n  (_, i) => 12_000 + 45 * i + 800 * Math.sin((2 * Math.PI * i) / 14),\n);\n\n// Forecast standard error grows linearly with horizon; 1.96*sigma -> 95% CI.\nconst halfWidths = Array.from({ length: DAY_COUNT }, (_, i) => 1.96 * (300 + 25 * i));\nconst lowerUsers = centralUsers.map((y, i) => y - halfWidths[i]);\nconst bandWidths = halfWidths.map((h) => 2 * h);\n\n// --- Chart (default-exported component — the harness mounts it) -------------\nexport default function Chart() {\n  const W = window.ANYPLOT_SIZE.width;\n  const H = window.ANYPLOT_SIZE.height;\n  const CHART_TOP = 64;\n\n  const title = \"Active User Forecast · line-confidence · javascript · muix · anyplot.ai\";\n  const titleSize = title.length > 67 ? Math.round((22 * 67) / title.length) : 22;\n\n  return (\n    <Box sx={{ position: \"relative\", width: W, height: H, bgcolor: t.pageBg }}>\n      <Box sx={{ position: \"absolute\", top: 20, left: 56, right: 56 }}>\n        <Typography sx={{ color: t.ink, fontSize: titleSize, fontWeight: 500 }}>{title}</Typography>\n      </Box>\n      <Box sx={{ position: \"absolute\", top: CHART_TOP, left: 0, right: 0, bottom: 0 }}>\n        <LineChart\n          width={W}\n          height={H - CHART_TOP}\n          skipAnimation\n          series={[\n            {\n              id: \"lower\",\n              data: lowerUsers,\n              stack: \"confidence\",\n              area: true,\n              color: t.palette[0],\n              showMark: false,\n            },\n            {\n              id: \"band\",\n              data: bandWidths,\n              label: \"95% confidence interval\",\n              stack: \"confidence\",\n              area: true,\n              color: \"rgba(0, 158, 115, 0.2)\",\n              showMark: false,\n            },\n            {\n              id: \"central\",\n              data: centralUsers,\n              label: \"Forecast (mean)\",\n              color: t.palette[0],\n              showMark: false,\n            },\n          ]}\n          xAxis={[\n            {\n              data: dates,\n              scaleType: \"time\",\n              label: \"Date\",\n              labelStyle: { fontSize: 16 },\n              tickLabelStyle: { fontSize: 14 },\n              valueFormatter: (value: Date) =>\n                value.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n            },\n          ]}\n          yAxis={[\n            {\n              label: \"Daily active users\",\n              labelStyle: { fontSize: 16 },\n              tickFontSize: 30,\n              tickLabelStyle: { fontSize: 14 },\n              min: 9500,\n              max: 19500,\n              valueFormatter: (value: number) => `${Math.round(value / 1000)}k`,\n            },\n          ]}\n          margin={{ left: 88 }}\n          grid={{ horizontal: true }}\n          slotProps={{ legend: { labelStyle: { fontSize: 14 } } }}\n          sx={{\n            \"& .MuiLineElement-series-central\": {\n              strokeWidth: 3.5,\n              filter: `drop-shadow(0 0 2.5px ${t.pageBg}) drop-shadow(0 0 2.5px ${t.pageBg})`,\n            },\n            \"& .MuiAreaElement-series-lower\": { display: \"none\" },\n            \"& .MuiLineElement-series-lower\": { display: \"none\" },\n            \"& .MuiLineElement-series-band\": { display: \"none\" },\n            // MUI X derives the area's *fill* from `d3Color(color).brighter(0.5).formatHex()`,\n            // which drops any alpha channel in the series `color` — override fill/fillOpacity\n            // directly so the band is genuinely semi-transparent (spec: alpha 0.2-0.4).\n            \"& .MuiAreaElement-series-band\": { fill: t.palette[0], fillOpacity: 0.22 },\n          }}\n        />\n      </Box>\n    </Box>\n  );\n}\n"}