← Back to Articles
2024-10-29frontend

Global utilization speedometer

  • Change: react-speedometer gauge added for the global server utilization metric (ce91a7fd "added speedometer for global utilization"). Required dynamic import via next/dynamic to avoid SSR crashes (85c1efd4). Temporarily disabled during a debugging pass (1a384c8d "Revert 'fixed speedometer to be dynamically imported'", 2024-11-05), then restored.
  • Why: A utilization percentage reads better as a gauge than as a number in a statbox. The speedometer made 72% feel immediately different from 22% without needing to read the label.
  • Affected Modules: src/components/local/ (utilization gauge), pages/index.tsx, package.json
  • Trade-offs:
    • Pro: Instant visual context for a single-number metric that's hard to read in isolation.
    • Con: react-speedometer depends on browser canvas APIs; SSR is impossible without dynamic import. The revert-and-re-fix cycle during debugging suggests the dependency's SSR behavior is fragile and not well-documented.