Stat Card Choropleth

1"use client";
2 
3import type { ChoroplethFeature } from "@/components/charts";
4import {
5  ChartStatFlow,
6  ChoroplethChart,
7  ChoroplethFeatureComponent,
8  ChoroplethTooltip,
9} from "@/components/charts";
10import { useState } from "react";
11import { useWorldDataStandalone } from "@/lib/use-world-data";
12import {
13  Card,
14  CardAction,
15  CardContent,
16  CardHeader,
17  CardTitle,
18} from "@/components/ui/card";
19import {
20  getVisitorColor,
21  getVisitorValue,
22  visitorStats,
23} from "../data/visitors";
24import {
25  StatCardChart,
26  type StatCardHoverState,
27  statCardLabelClassName,
28  statCardValueClassName,
29} from "./stat-card-chart";
30import { StatCardChoroplethHoverBridge } from "./stat-card-choropleth-hover-bridge";
31import { TrendBadge } from "./trend-badge";
32 
33export function StatCardChoropleth() {
34  const { worldData, isLoading } = useWorldDataStandalone();
35  const [hover, setHover] = useState<StatCardHoverState>({
36    value: null,
37    label: null,
38    trend: null,
39  });
40  const displayValue = hover.value ?? visitorStats.total;
41  const displayLabel = hover.label ?? "Total";
42  const displayTrend = hover.trend ?? visitorStats.trend;
43 
44  return (
45    <Card className="relative w-full gap-0 overflow-hidden py-0">
46      <CardHeader className="pointer-events-none absolute inset-x-0 top-0 z-10 grid auto-rows-min grid-cols-[1fr_auto] items-start gap-1 border-0 bg-gradient-to-b from-45% from-card to-transparent px-4 py-3 pb-10 shadow-none ring-0">
47        <div className="flex flex-col gap-0.5">
48          <CardTitle>Unique Visitors</CardTitle>
49          <ChartStatFlow
50            label={displayLabel}
51            labelClassName={statCardLabelClassName}
52            value={displayValue}
53            valueClassName={statCardValueClassName}
54          />
55        </div>
56        <CardAction>
57          <TrendBadge value={displayTrend} />
58        </CardAction>
59      </CardHeader>
60 
61      <CardContent className="p-0">
62        {isLoading || !worldData ? (
63          <StatCardChart className="mx-0 mb-0 min-h-[420px]" size="lg">
64            <div className="flex h-full min-h-[420px] items-center justify-center text-muted-foreground text-xs">
65              Loading map…
66            </div>
67          </StatCardChart>
68        ) : (
69          <StatCardChart className="mx-0 mb-0 min-h-[420px]" size="lg">
70            <ChoroplethChart
71              aspectRatio="2.5 / 1"
72              className="min-h-[420px] w-full"
73              data={worldData}
74            >
75// … truncated