{"spec_id":"area-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// area-basic: Basic Area Chart\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 83/100 | Created: 2026-08-20\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;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n\n// Tiny fixed-seed LCG — the browser has no seeded RNG\nfunction lcg(seed: number) {\n  let s = seed >>> 0;\n  return () => {\n    s = (Math.imul(1664525, s) + 1013904223) >>> 0;\n    return s / 4294967295;\n  };\n}\nconst rand = lcg(42);\n\n// Daily website visitors over two months, with weekday/weekend seasonality\n// and a gradual growth trend.\nconst DAY_COUNT = 60;\nconst startDate = new Date(2026, 0, 5);\nconst dates = Array.from({ length: DAY_COUNT }, (_, i) => {\n  const d = new Date(startDate);\n  d.setDate(d.getDate() + i);\n  return d;\n});\nconst visitors = dates.map((d, i) => {\n  const trend = 4100 + i * 34;\n  const isWeekend = d.getDay() === 0 || d.getDay() === 6;\n  const seasonality = isWeekend ? -950 : 180;\n  const noise = (rand() - 0.5) * 600;\n  return Math.max(0, Math.round(trend + seasonality + noise));\n});\nconst avgVisitors = visitors.reduce((a, b) => a + b, 0) / visitors.length;\n\nconst TITLE = \"Website Visitors · area-basic · javascript · muix · anyplot.ai\";\nconst TITLE_H = 58;\nconst AREA_GRADIENT_ID = \"areaBasicFillGradient\";\n\n// --- Chart (default-exported component — the harness mounts it) ------------\n\nexport default function Chart() {\n  const { width, height } = window.ANYPLOT_SIZE;\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        bgcolor: t.pageBg,\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <Box\n        sx={{\n          height: TITLE_H,\n          display: \"flex\",\n          alignItems: \"center\",\n          px: \"40px\",\n          pt: \"10px\",\n        }}\n      >\n        <Typography\n          sx={{\n            color: t.ink,\n            fontSize: \"25px\",\n            fontWeight: 600,\n            lineHeight: 1,\n          }}\n        >\n          {TITLE}\n        </Typography>\n      </Box>\n\n      <LineChart\n        width={width}\n        height={height - TITLE_H}\n        skipAnimation\n        grid={{ horizontal: true }}\n        xAxis={[\n          {\n            data: dates,\n            scaleType: \"time\",\n            valueFormatter: (v: Date) =>\n              v.toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" }),\n            tickNumber: 8,\n            label: \"Date\",\n            tickLabelStyle: { fontSize: 14 },\n            labelStyle: { fontSize: 16 },\n          },\n        ]}\n        yAxis={[\n          {\n            min: 0,\n            label: \"Daily Visitors\",\n            valueFormatter: (v: number) => `${(v / 1000).toFixed(1)}k`,\n            // tickFontSize drives the auto-computed label offset (see MUI X\n            // ChartsYAxis: labelRefPoint.x = -(tickFontSize + tickSize + 10));\n            // set it wide enough to clear the \"6.5k\"-style tick text, while\n            // tickLabelStyle.fontSize keeps the rendered tick size correct.\n            tickFontSize: 40,\n            tickLabelStyle: { fontSize: 14 },\n            labelStyle: { fontSize: 16 },\n          },\n        ]}\n        series={[\n          {\n            id: \"visitors\",\n            data: visitors,\n            label: \"Visitors\",\n            color: t.palette[0],\n            area: true,\n            showMark: false,\n            curve: \"monotoneX\",\n            baseline: 0,\n          },\n        ]}\n        margin={{ top: 20, bottom: 70, left: 130, right: 40 }}\n        sx={{\n          \"& .MuiAreaElement-root\": { fill: `url(#${AREA_GRADIENT_ID})` },\n          \"& .MuiLineElement-root\": { strokeWidth: 3 },\n          \"& .MuiChartsGrid-line\": { stroke: t.grid, strokeWidth: 1 },\n        }}\n        slotProps={{ legend: { hidden: true } }}\n      >\n        {/* Fade the fill from the line down to the baseline — the spec's\n            suggested \"gradient fill for visual appeal\", not a decorative one:\n            it keeps visual weight on the trend line and lightens near zero. */}\n        <defs>\n          <linearGradient id={AREA_GRADIENT_ID} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor={t.palette[0]} stopOpacity={0.55} />\n            <stop offset=\"100%\" stopColor={t.palette[0]} stopOpacity={0.04} />\n          </linearGradient>\n        </defs>\n        <ChartsReferenceLine\n          y={avgVisitors}\n          label={`Avg ${(avgVisitors / 1000).toFixed(1)}k`}\n          labelAlign=\"end\"\n          lineStyle={{ stroke: t.ink, strokeDasharray: \"6 4\", strokeOpacity: 0.5 }}\n          labelStyle={{ fill: t.inkSoft, fontSize: 13 }}\n        />\n      </LineChart>\n    </Box>\n  );\n}\n"}