564d212148
Data: - Expand datacenter inventory from 38 to 108 facilities - Add 14 North Carolina datacenters (Apple, Google, AWS, Microsoft, etc.) - Add missing operators (Cloudflare, Switch, Vantage, Apple, Aligned, Iron Mountain) - Fill geographic gaps (Southeast, Northwest, Midwest) Map UX: - Dark mode via ColorScheme.DARK, hide all default UI controls - Center on Chapel Hill, NC (lat 35.91, lng -79.06) at zoom 6 - New map legend component (price gradient, marker scale, pulse/glow key) - Floating region price labels via AdvancedMarker at region centroids - Tune breathing animation: 8s period, only stressed regions, 5 FPS - Enhanced markers: capacity labels on 200+ MW, status-based styling Charts: - Fix generation chart timestamp duplication (use epoch ms dataKey) - Fix correlation chart black-on-black axis labels - Context-aware tick formatting (time-only for 24h, date for longer ranges) GPU Calculator: - Default to B200 (1,000W), add R200 Rubin (1,800W) Navigation: - Granular Suspense boundaries on all 5 pages - Extract data-fetching into async Server Components per section - Page shells render instantly, sections stream in independently
30 lines
964 B
TypeScript
30 lines
964 B
TypeScript
import { Suspense } from 'react';
|
|
|
|
import { ChartSkeleton } from '@/components/charts/chart-skeleton.js';
|
|
import type { Metadata } from 'next';
|
|
|
|
import { DemandChartSection } from './_sections/demand-chart-section.js';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Demand Analysis | Energy & AI Dashboard',
|
|
description: 'Regional electricity demand growth, peak tracking, and datacenter load impact',
|
|
};
|
|
|
|
export default function DemandPage() {
|
|
return (
|
|
<div className="px-4 py-6 sm:px-6 sm:py-8">
|
|
<div className="mb-6 sm:mb-8">
|
|
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">Demand Analysis</h1>
|
|
<p className="mt-2 text-muted-foreground">
|
|
Regional demand growth trends, peak demand tracking, and estimated datacenter load as a percentage of regional
|
|
demand.
|
|
</p>
|
|
</div>
|
|
|
|
<Suspense fallback={<ChartSkeleton />}>
|
|
<DemandChartSection />
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
}
|