spb/datacenterindex

1"use client";23import { BarList, ColumnChart, LineChart, type BarListItem, type ColumnDatum, type Series } from "@/components/ui/charts";4import { fmtCompact, fmtInt, fmtMw } from "@/lib/format";56/* ------------------------------------------------------------------------------------------7   Client wrappers so server pages can request a formatter by name (functions cannot cross the8   RSC boundary). All charts are the ui kit's SVG charts; nothing new is drawn here.9   ------------------------------------------------------------------------------------------ */1011type Fmt = "int" | "mw" | "compact";12const FMT: Record<Fmt, (v: number | null) => string> = { int: (v) => fmtInt(v), mw: (v) => fmtMw(v), compact: (v) => fmtCompact(v) };1314export function Columns({ data, format = "int", height, color, unit, ariaLabel, className }: { data: ColumnDatum[]; format?: Fmt; height?: number; color?: string; unit?: string; ariaLabel?: string; className?: string }) {15  return <ColumnChart data={data} format={FMT[format]} height={height} color={color} unit={unit} ariaLabel={ariaLabel} className={className} />;16}1718export function Lines({ series, format = "int", height, unit, ariaLabel, className, yLabel }: { series: Series[]; format?: Fmt; height?: number; unit?: string; ariaLabel?: string; className?: string; yLabel?: string }) {19  return <LineChart series={series} format={FMT[format]} height={height} unit={unit} ariaLabel={ariaLabel} className={className} yLabel={yLabel} />;20}2122/** Step chart for cumulative values (countries / metros entered by year). */23export function StepLines(props: Parameters<typeof Lines>[0]) {24  return <Lines {...props} series={props.series.map((s) => ({ ...s, step: true }))} />;25}2627export function Bars({ items, format = "int", showRank, max, className, barColor }: { items: BarListItem[]; format?: Fmt; showRank?: boolean; max?: number; className?: string; barColor?: string }) {28  return <BarList items={items} format={FMT[format]} showRank={showRank} max={max} className={className} barColor={barColor} />;29}30