spb/countryatlas

1'use client';2import { ArrowRight } from 'lucide-react';3import Link from 'next/link';4import { t } from '@/i18n';5import { fixed } from '@/lib/format';6import { routes } from '@/lib/site';7import type { ScatterResponse } from '@/lib/types-analytics';8import { BubbleChart } from '@/components/charts/bubble-chart';910/** Homepage teaser of the trajectories view: one static frame (latest year) of income vs life expectancy. */11export function TrajectoryTeaser({ data }: { data: ScatterResponse }) {12  const x = { format: data.x.format, unit: data.x.unit, unit_short: data.x.unit_short, precision: data.x.precision, name: data.x.short_name ?? data.x.name };13  const y = { format: data.y.format, unit: data.y.unit, unit_short: data.y.unit_short, precision: data.y.precision, name: data.y.short_name ?? data.y.name };14  const size = data.size ? { format: data.size.format, unit: data.size.unit, unit_short: data.size.unit_short, precision: data.size.precision, name: data.size.short_name ?? data.size.name } : null;15  const points = data.points.map((p) => ({ id: p.id, label: p.name ?? p.id, flag: p.flag, x: p.x, y: p.y, size: p.size, region: p.region, yearX: p.year_x, yearY: p.year_y }));16  return (17    <div className="min-w-0">18      <BubbleChart points={points} xSpec={x} ySpec={y} sizeSpec={size} logX={data.stats.log_x} logY={data.stats.log_y} height={340} labelCount={8} animate={false} yearLabel={data.year_used} highlight={['CAN']} />19      <div className="mt-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-ink-3">20        <span className="tnum">21          {t('home.trajectory.stats', { n: data.n, rho: data.stats.spearman != null ? fixed(data.stats.spearman, 2) : t('common.na'), year: data.year_used ?? '' })} · {data.note}22        </span>23        <Link href={routes.trajectories({ x: data.x.slug, y: data.y.slug })} className="inline-flex min-h-[36px] items-center gap-1 text-sm text-accent hover:underline">24          {t('home.trajectory.open')} <ArrowRight size={14} aria-hidden />25        </Link>26      </div>27    </div>28  );29}30