Choropleth

1"use client";
2 
3import { useMemo, useState } from "react";
4import { useTheme } from "next-themes";
5 
6import { Map, MapControls, MapGeoJSON, MapPopup } from "@/components/ui/map";
7import { useWorldData } from "@/lib/use-world-data";
8import { mapConfig, visitorsByCountry, type Theme } from "./data";
9 
10// WebGL paint can't read CSS variables, so we build a concrete value→color
11// expression per theme. The hovered country is highlighted in place via the
12// `hover` feature-state, restricted to countries that actually have data.
13function buildFillColor(theme: Theme): unknown[] {
14  const { base, ramp, hover } = mapConfig.colors[theme];
15  const [s0, s1, s2, s3, s4] = mapConfig.scaleStops;
16  const ramped = [
17    "interpolate",
18    ["linear"],
19    ["coalesce", ["get", "visitors"], 0],
20    s0,
21    base,
22    s1,
23    ramp[0],
24    s2,
25    ramp[1],
26    s3,
27    ramp[2],
28    s4,
29    ramp[3],
30  ];
31  return [
32    "case",
33    [
34      "all",
35      ["boolean", ["feature-state", "hover"], false],
36      [">", ["coalesce", ["get", "visitors"], 0], 0],
37    ],
38    hover,
39    ramped,
40  ];
41}
42 
43const legendGradientStyle = {
44  "--choropleth-ramp-light": `linear-gradient(to right, ${mapConfig.colors.light.ramp.join(", ")})`,
45  "--choropleth-ramp-dark": `linear-gradient(to right, ${mapConfig.colors.dark.ramp.join(", ")})`,
46} as React.CSSProperties;
47 
48interface HoverInfo {
49  name: string;
50  visitors: number;
51  lng: number;
52  lat: number;
53}
54 
55interface CountryProperties {
56  NAME_LONG: string;
57  visitors: number;
58}
59 
60type CountryFeatureCollection = GeoJSON.FeatureCollection<
61  GeoJSON.Geometry,
62  CountryProperties
63>;
64 
65export default function Page() {
66  const { resolvedTheme } = useTheme();
67  const theme: Theme = resolvedTheme === "dark" ? "dark" : "light";
68  const [hover, setHover] = useState<HoverInfo | null>(null);
69  const world = useWorldData();
70 
71  const countries = useMemo<CountryFeatureCollection | null>(() => {
72    if (!world) return null;
73    return {
74      type: "FeatureCollection",
75      features: world.features.map((f) => ({
76        ...f,
77        properties: {
78          NAME_LONG: f.properties.NAME_LONG,
79          visitors: visitorsByCountry[f.properties.NAME_LONG] ?? 0,
80        },
81      })),
82    };
83  }, [world]);
84 
85  // Recompute paint only when the theme changes; MapGeoJSON recolors in place.
86  const fillPaint = useMemo(
87    () => ({
88      "fill-color": buildFillColor(theme) as never,
89      "fill-opacity": 0.92,
90    }),
91    [theme],
92  );
93 
94  return (
95// … truncated