{"spec_id":"dashboard-metrics-tiles","library":"muix","language":"javascript","code":"// anyplot.ai\n// dashboard-metrics-tiles: Real-Time Dashboard Tiles\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 94/100 | Created: 2026-09-02\nimport { Box, Typography } from \"@mui/material\";\nimport { SparkLineChart } from \"@mui/x-charts/SparkLineChart\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Tiny LCG so the sparkline noise is reproducible without a browser RNG.\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\n\n// Builds history backward from the current value so the sparkline always\n// ends exactly on the tile's headline number, trending in the direction\n// implied by trendPerStep.\nfunction buildHistory(end, trendPerStep, noiseScale, seed, points = 16) {\n  const rand = lcg(seed);\n  const values = [end];\n  let value = end;\n  for (let i = 1; i < points; i += 1) {\n    value -= trendPerStep + (rand() - 0.5) * noiseScale;\n    values.unshift(Math.max(0, value));\n  }\n  return values;\n}\n\nconst STATUS_COLOR = {\n  good: t.palette[0],\n  warning: t.amber,\n  critical: t.palette[4],\n};\n\n// Higher-severity statuses sort first so the dashboard's eye-order surfaces\n// the most urgent metric before the routine ones.\nconst SEVERITY_RANK = { critical: 0, warning: 1, good: 2 };\n\nconst RAW_METRICS = [\n  {\n    name: \"CPU Usage\",\n    status: \"good\",\n    increaseIsGood: false,\n    changePercent: -3.7,\n    currentValue: 63,\n    format: (v) => `${v.toFixed(0)}%`,\n    history: buildHistory(63, -0.16, 1.0, 11),\n  },\n  {\n    name: \"Memory\",\n    status: \"warning\",\n    increaseIsGood: false,\n    changePercent: 4.6,\n    currentValue: 58,\n    format: (v) => `${v.toFixed(0)}%`,\n    history: buildHistory(58, 0.17, 1.0, 22),\n  },\n  {\n    name: \"Response Time\",\n    status: \"good\",\n    increaseIsGood: false,\n    changePercent: -9.3,\n    currentValue: 187,\n    format: (v) => `${v.toFixed(0)}ms`,\n    history: buildHistory(187, -1.28, 4.0, 33),\n  },\n  {\n    name: \"Error Rate\",\n    status: \"critical\",\n    increaseIsGood: false,\n    changePercent: 12.3,\n    currentValue: 2.4,\n    format: (v) => `${v.toFixed(1)}%`,\n    history: buildHistory(2.4, 0.045, 0.08, 44),\n  },\n  {\n    name: \"Requests / sec\",\n    status: \"good\",\n    increaseIsGood: true,\n    changePercent: 6.4,\n    currentValue: 1834,\n    format: (v) => v.toLocaleString(\"en-US\", { maximumFractionDigits: 0 }),\n    history: buildHistory(1834, 11, 35, 55),\n  },\n  {\n    name: \"Uptime\",\n    status: \"warning\",\n    increaseIsGood: true,\n    changePercent: -0.02,\n    currentValue: 99.95,\n    format: (v) => `${v.toFixed(2)}%`,\n    history: buildHistory(99.95, -0.001, 0.015, 66),\n  },\n];\n\nconst metrics = [...RAW_METRICS].sort((a, b) => SEVERITY_RANK[a.status] - SEVERITY_RANK[b.status]);\n\nfunction changeColor(metric) {\n  const favorable = metric.changePercent > 0 === metric.increaseIsGood;\n  return favorable ? t.palette[0] : t.palette[4];\n}\n\n// Small-magnitude metrics (e.g. uptime) need 2 decimals so a badge like the\n// arrow direction never contradicts a percentage that rounded down to \"0.0%\".\nfunction formatChangePercent(value) {\n  const abs = Math.abs(value);\n  return `${abs.toFixed(abs < 1 ? 2 : 1)}%`;\n}\n\nfunction hexToRgba(hex, alpha) {\n  const value = hex.replace(\"#\", \"\");\n  const r = parseInt(value.slice(0, 2), 16);\n  const g = parseInt(value.slice(2, 4), 16);\n  const b = parseInt(value.slice(4, 6), 16);\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\n// A crisp vector arrow (instead of a Unicode glyph) for the change badge.\nfunction ChangeArrow({ up, color }) {\n  return (\n    <svg width=\"11\" height=\"11\" viewBox=\"0 0 10 10\" style={{ display: \"block\", flexShrink: 0 }} aria-hidden=\"true\">\n      <path d={up ? \"M5 1 L9 8 L1 8 Z\" : \"M5 9 L9 2 L1 2 Z\"} fill={color} />\n    </svg>\n  );\n}\n\n// --- Sparkline area fill: a subtle top-to-bottom alpha fade instead of a ----\n// flat opaque fill. One gradient per status is declared once (below) and\n// referenced by each tile's SparkLineChart via the `area` slot.\nconst GRADIENT_IDS = {\n  good: \"spark-gradient-good\",\n  warning: \"spark-gradient-warning\",\n  critical: \"spark-gradient-critical\",\n};\n\nfunction AreaGradientFill({ d, gradientId, className }) {\n  return <path d={d} className={className} fill={`url(#${gradientId})`} stroke=\"none\" />;\n}\n\nfunction SparklineGradientDefs() {\n  return (\n    <svg width={0} height={0} style={{ position: \"absolute\" }} aria-hidden=\"true\">\n      <defs>\n        {Object.entries(STATUS_COLOR).map(([status, color]) => (\n          <linearGradient key={status} id={GRADIENT_IDS[status]} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor={color} stopOpacity={0.55} />\n            <stop offset=\"100%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n        ))}\n      </defs>\n    </svg>\n  );\n}\n\n// --- Tile --------------------------------------------------------------------\n\nfunction MetricTile({ metric }) {\n  const accent = STATUS_COLOR[metric.status];\n  const isCritical = metric.status === \"critical\";\n  const arrowUp = metric.changePercent > 0;\n  const lo = Math.min(...metric.history);\n  const hi = Math.max(...metric.history);\n  const pad = (hi - lo) * 0.25 || hi * 0.05 || 1;\n\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"space-between\",\n        height: \"100%\",\n        boxSizing: \"border-box\",\n        borderRadius: \"10px\",\n        border: `1px solid ${isCritical ? hexToRgba(accent, 0.4) : t.grid}`,\n        borderLeft: `${isCritical ? 8 : 6}px solid ${accent}`,\n        background: isCritical\n          ? `linear-gradient(${hexToRgba(accent, 0.08)}, ${hexToRgba(accent, 0.08)}), ${t.elevatedBg}`\n          : t.elevatedBg,\n        padding: \"18px 24px\",\n      }}\n    >\n      <Typography sx={{ fontSize: 15, fontWeight: 500, color: t.inkSoft, letterSpacing: \"0.4px\" }}>\n        {metric.name.toUpperCase()}\n      </Typography>\n\n      <Box sx={{ display: \"flex\", alignItems: \"baseline\", gap: \"12px\", marginTop: \"4px\" }}>\n        <Typography sx={{ fontSize: 42, fontWeight: 700, color: t.ink, lineHeight: 1 }}>\n          {metric.format(metric.currentValue)}\n        </Typography>\n        <Box sx={{ display: \"flex\", alignItems: \"center\", gap: \"4px\" }}>\n          <ChangeArrow up={arrowUp} color={changeColor(metric)} />\n          <Typography sx={{ fontSize: 17, fontWeight: 600, color: changeColor(metric) }}>\n            {formatChangePercent(metric.changePercent)}\n          </Typography>\n        </Box>\n      </Box>\n\n      <Box sx={{ height: 60, marginTop: \"8px\" }}>\n        <SparkLineChart\n          data={metric.history}\n          yAxis={{ min: lo - pad, max: hi + pad }}\n          colors={[accent]}\n          area\n          curve=\"monotoneX\"\n          showHighlight\n          skipAnimation\n          resolveSizeBeforeRender\n          height={60}\n          margin={{ top: 8, bottom: 4, left: 4, right: 4 }}\n          slots={{ area: AreaGradientFill }}\n          slotProps={{ area: { gradientId: GRADIENT_IDS[metric.status] } }}\n        />\n      </Box>\n    </Box>\n  );\n}\n\n// --- Dashboard (default-exported component — the harness mounts it) --------\n\nexport default function Chart() {\n  return (\n    <Box\n      sx={{\n        width: window.ANYPLOT_SIZE.width,\n        height: window.ANYPLOT_SIZE.height,\n        boxSizing: \"border-box\",\n        backgroundColor: t.pageBg,\n        padding: \"28px 36px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"18px\",\n      }}\n    >\n      <SparklineGradientDefs />\n\n      <Typography sx={{ fontSize: 22, fontWeight: 500, color: t.ink }}>\n        dashboard-metrics-tiles · javascript · muix · anyplot.ai\n      </Typography>\n\n      <Box\n        sx={{\n          flex: 1,\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(3, 1fr)\",\n          gridTemplateRows: \"repeat(2, 1fr)\",\n          gap: \"18px\",\n        }}\n      >\n        {metrics.map((metric) => (\n          <MetricTile key={metric.name} metric={metric} />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"}