spb/datacenterindex

1"use client";23import type { Dashboard } from "@dci/core";4import { AreaChart, ColumnChart } from "@/components/ui/charts";5import { EmptyState } from "@/components/ui/states";6import { fmtCompact, fmtMw } from "@/lib/format";78export function CapacityOverTime({ data }: { data: Dashboard["capacityOverTime"] }) {9  const pts = data.filter((d) => d.cumulativeMw !== null || d.knownMw !== null);10  if (pts.length < 2) return <EmptyState compact title="Not enough history yet" description="Capacity over time appears once several years of openings are indexed." />;11  return (12    <AreaChart13      series={[14        { name: "Cumulative known MW", data: pts.map((d) => ({ x: d.year, y: d.cumulativeMw })), color: "var(--ink)" },15      ]}16      height={200}17      format={(v) => fmtMw(v)}18      ariaLabel="Cumulative known operational capacity by opening year"19    />20  );21}2223export function PipelineByYear({ data }: { data: Dashboard["pipelineByYear"] }) {24  if (!data.length) return <EmptyState compact title="No dated pipeline" description="Expected-opening years will chart here." />;25  const hasMw = data.some((d) => d.mw !== null && d.mw > 0);26  return (27    <ColumnChart28      data={data.map((d) => ({ label: d.year, value: hasMw ? d.mw : d.count }))}29      height={150}30      format={hasMw ? (v) => fmtMw(v) : (v) => fmtCompact(v, 0)}31      ariaLabel={hasMw ? "Pipeline MW by expected opening year" : "Pipeline projects by expected opening year"}32    />33  );34}35