spb/countryatlas

1'use client';2import { t, tOpt } from '@/i18n';3import type { FormatSpec } from '@/lib/types';4import type { RegionCompareResponse } from '@/lib/types-analytics';5import { LineChart, type LineSeries } from '@/components/charts/line-chart';67/** Historical aggregates of one or two groups from `/regions/compare` (history block): one small chart per indicator. */8export function GroupHistory({ data, ids, names }: { data: RegionCompareResponse; ids: string[]; names: Record<string, string> }) {9  const entries = Object.entries(data.history);10  if (!entries.length) return <p className="text-sm text-ink-3">{t('common.noDataLong')}</p>;11  return (12    <div className="grid gap-x-8 gap-y-6 sm:grid-cols-2 lg:grid-cols-4">13      {entries.map(([slug, h]) => {14        const row = data.rows.find((r) => r.indicator.slug === slug);15        const ind = row?.indicator;16        const spec: FormatSpec = { format: ind?.format ?? 'number', unit: ind?.unit, unit_short: ind?.unit_short, precision: ind?.precision, name: ind?.short_name ?? ind?.name ?? slug };17        const years = h.years;18        const series: LineSeries[] = [];19        ids.forEach((id, i) => {20          const arr = (h as Record<string, unknown>)[id];21          if (!Array.isArray(arr)) return;22          const points = years.map((y, k) => ({ period: `${y}-01-01`, year: y, value: (arr[k] as number | null) ?? null })).filter((p) => p.value != null);23          if (points.length) series.push({ id, name: names[id] ?? id, colorIndex: i, points });24        });25        const kind = (h as { kind?: string }).kind;26        return (27          <LineChart key={slug} series={series} spec={spec} height={200} title={spec.name} subtitle={kind ? tOpt(`regions.${kind}`, kind) : undefined} endLabels={false} defaultWidth={320} margin={{ right: 14 }} />28        );29      })}30    </div>31  );32}33