Merge branch 'feat/history-graph-changes'

Author: jhf

app/src/app/api/reports/history-changes/route.ts

@@ -0,0 +1,26 @@
+import { getServerRestClient } from "@/context/RestClientStore";
+import { Enums } from "@/lib/database.types";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const resolution = searchParams.get(
+    "resolution"
+  ) as Enums<"history_resolution">;
+  const unitType = searchParams.get("unit_type") as
+    UnitType;
+  const series_codes = searchParams.get("series_codes")?.split(",");
+
+  const client = await getServerRestClient();
+  const { data, error } = await client.rpc("statistical_history_highcharts", {
+    p_resolution: resolution,
+    p_unit_type: unitType,
+    p_series_codes: series_codes,
+  });
+
+  if (error) {
+    return NextResponse.json({ message: error.message });
+  }
+
+  return NextResponse.json(data);
+}

app/src/app/reports/history-changes/history-changes-chart.tsx

@@ -0,0 +1,98 @@
+"use client";
+import { useRef } from "react";
+import * as highcharts from "highcharts";
+import type { Chart } from "highcharts";
+import { chart } from "highcharts";
+import { useGuardedEffect } from "@/hooks/use-guarded-effect";
+
+export const HistoryChangesChart = ({
+  history,
+}: {
+  readonly history: StatisticalHistoryHighcharts;
+}) => {
+  const _ref = useRef<HTMLDivElement>(null);
+  const _chart = useRef<Chart | null>(null);
+
+
+  const colors = [
+    "#1A3A70",
+    "#4B8B3B",
+    "#AA4643",
+    "#80699B",
+    "#D6995C",
+    "#628DCB",
+    "#C7B491",
+    "#f45b5b",
+    "#e4d354",
+    "#89A54E",
+    "#2b908f",
+    "#CAC47F",
+  ].reverse();
+
+  useGuardedEffect(
+    () => {
+      const chartSeries = history.series;
+      if (!_ref.current || !highcharts || !chartSeries) return;
+      _chart.current?.destroy();
+
+      _chart.current = chart({
+        lang: {
+          thousandsSep: " ",
+        },
+        chart: {
+          type: "column",
+          renderTo: _ref.current,
+          backgroundColor: "white",
+        },
+        title: {
+          text: "",
+        },
+        xAxis: {
+          type: "datetime",
+        },
+        yAxis: {
+          title: {
+            text: "Change count",
+          },
+        },
+        tooltip: {
+          xDateFormat: "%Y-%m-%d",
+          shared: true,
+        },
+        colors: colors,
+        plotOptions: {
+          series: {
+            connectNulls: false,
+            marker: { radius: 3, enabled: true },
+            states: {
+              inactive: {
+                opacity: 1,
+              },
+            },
+          },
+          column: {
+            borderWidth: 0,
+          },
+        },
+
+        series: chartSeries
+          .sort((a, b) => a.priority - b.priority)
+          .map((s, i) => ({
+            type: "column",
+            name: s.name,
+            data: s.data,
+            visible: i < 5,
+            color: colors[i % colors.length],
+          })),
+        credits: { enabled: false },
+        legend: {
+          enabled: true,
+        },
+      });
+    },
+    [history],
+    "HistoryChangesChart:createChart"
+  );
+
+  return <div ref={_ref} />;
+};

app/src/app/reports/history-changes/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React, { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useStatisticalHistoryChanges } from "./use-statistical-history-changes";
+import { HistoryChangesChart } from "./history-changes-chart";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const unitTypes: { value: UnitType; label: string }[] = [
+  { value: "enterprise", label: "Enterprises" },
+  { value: "legal_unit", label: "Legal Units" },
+  { value: "establishment", label: "Establishments" },
+];
+
+export default function HistoryChangesPage() {
+  const [activeUnitType, setActiveUnitType] = useState<UnitType>("enterprise");
+  const { history, isLoading } = useStatisticalHistoryChanges(
+    activeUnitType,
+    "year",
+    [
+      "births",
+      "deaths",
+      "name_change_count",
+      "primary_activity_category_change_count",
+      "physical_region_change_count",
+    ]
+  );
+
+  return (
+    <main className="mx-auto flex w-full max-w-5xl flex-col px-2 py-8 md:py-12">
+      <h1 className="mb-3 text-center text-2xl">Changes over time</h1>
+      <p className="mb-12 text-center">
+        Annual overview of births, deaths, name changes, and other changes
+      </p>
+      <div className="w-full space-y-8">
+        <Tabs
+          defaultValue="enterprise"
+          onValueChange={(value) => setActiveUnitType(value as UnitType)}
+        >
+          <TabsList className="mx-auto">
+            {unitTypes.map((unitType) => (
+              <TabsTrigger key={unitType.value} value={unitType.value}>
+                {unitType.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {unitTypes.map((unitType) => (
+            <TabsContent
+              key={unitType.value}
+              value={unitType.value}
+              className="space-y-8"
+            >
+              {!isLoading && history ? (
+                <HistoryChangesChart history={history} />
+              ) : (
+                <Skeleton className="w-full h-[400px]" />
+              )}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </main>
+  );
+}

app/src/app/reports/history-changes/types.d.ts

@@ -0,0 +1,16 @@
+declare interface StatisticalHistoryHighcharts {
+  series: Array<{
+    code: string;
+    name: string;
+    data: [number, number][];
+    priority: number;
+  }>;
+  unit_type: UnitType;
+  resolution: Enums<"history_resolution">;
+  filtered_series: string[];
+  available_series: Array<{
+    code: string;
+    name: string;
+    priority: number;
+  }>;
+}

app/src/app/reports/history-changes/use-statistical-history-changes.ts

@@ -0,0 +1,32 @@
+"use client";
+import useSWR from "swr";
+import { Enums } from "@/lib/database.types";
+import { fetchWithAuthRefresh } from "@/context/RestClientStore";
+
+export const useStatisticalHistoryChanges = (
+  unitType: UnitType,
+  resolution: Enums<"history_resolution"> = "year",
+  series_codes: string[]
+) => {
+  const urlSearchParams = new URLSearchParams();
+
+  urlSearchParams.set("resolution", resolution);
+  urlSearchParams.set("unit_type", unitType);
+  urlSearchParams.set("series_codes", series_codes.join(","));
+
+  const fetcher = (url: string) =>
+    fetchWithAuthRefresh(url).then((res) => res.json());
+
+  const { data: history, isLoading } = useSWR<StatisticalHistoryHighcharts>(
+    `/api/reports/history-changes?${urlSearchParams.toString()}`,
+    fetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  return {
+    history,
+    isLoading,
+  };
+};

app/src/components/command-palette/command-palette.tsx

@@ -22,6 +22,7 @@ import {
   Database,
   FileSpreadsheet,
   Binary,
+  ChartColumn,
   Users,
 } from "lucide-react";
 
@@ -126,6 +127,13 @@ export function CommandPalette() {
               <BarChartHorizontal className="mr-2 h-4 w-4" />
               <span>Reports</span>
             </CommandItem>
+            <CommandItem
+              onSelect={() => navigate("/reports/history-changes")}
+              value="History changes chart"
+            >
+              <ChartColumn className="mr-2 h-4 w-4" />
+              <span>History chart</span>
+            </CommandItem>
             <CommandItem onSelect={() => navigate("/profile")} value="Profile">
               <User className="mr-2 h-4 w-4" />
               <span>Profile</span>