Merge pull request #34

Allow chart data download
Vizzuality · Nov 22, 2024 · f9978de · f9978de
2 parents 7446b0b + d060ce2
commit f9978de
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 21 deletions.
diff --git a/client/package.json b/client/package.json
@@ -57,6 +57,7 @@
     "cmdk": "1.0.0",
     "date-fns": "4.1.0",
     "express": "4.21.1",
+    "lodash-es": "4.17.21",
     "mapbox-gl": "3.7.0",
     "next": "14.2.15",
     "nuqs": "2.0.4",
@@ -74,6 +75,7 @@
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
     "@tanstack/eslint-plugin-query": "5.59.7",
+    "@types/lodash-es": "^4",
     "@types/node": "22.7.6",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",

diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { getMonth } from "date-fns";
+import { getMonth, getYear } from "date-fns";
 import { format } from "date-fns/format";
+import { camelCase } from "lodash-es";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import * as React from "react";
@@ -22,11 +23,15 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import YearChart from "@/components/year-chart";
+import useLocation from "@/hooks/use-location";
+import { useLocationByCode } from "@/hooks/use-location-by-code";
 import useMapLayers from "@/hooks/use-map-layers";
+import useYearChartData from "@/hooks/use-year-chart-data";
 import { cn } from "@/lib/utils";
 import CalendarDaysIcon from "@/svgs/calendar-days.svg";
 import ChevronDownIcon from "@/svgs/chevron-down.svg";
 import DownloadIcon from "@/svgs/download.svg";
+import GraphIcon from "@/svgs/graph.svg";
 import PauseIcon from "@/svgs/pause.svg";
 import PlayIcon from "@/svgs/play.svg";
 import QuestionMarkIcon from "@/svgs/question-mark.svg";
@@ -50,6 +55,7 @@ interface DatasetCardProps {
 
 const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCardProps) => {
   const [layersConfiguration, { addLayer, updateLayer, removeLayer }] = useMapLayers();
+  const [location] = useLocation();
 
   const defaultSelectedLayerId = useMemo(
     () => getDefaultSelectedLayerId(defaultLayerId, layers, layersConfiguration),
@@ -101,6 +107,15 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
     [layers, selectedLayerId],
   );
 
+  const { data: chartData, isLoading: chartIsLoading } = useYearChartData(
+    selectedLayerId,
+    selectedDate,
+  );
+
+  const { data: locationData, isLoading: locationIsLoading } = useLocationByCode(
+    location.code.slice(-1)[0],
+  );
+
   const onToggleAnimation = useCallback(() => {
     const newIsAnimated = !isAnimated;
 
@@ -207,6 +222,37 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
     [selectedLayerId, isDatasetActive, addLayer, updateLayer, layers, layersConfiguration],
   );
 
+  const onClickSaveChartData = useCallback(() => {
+    if (chartIsLoading || !chartData || locationIsLoading || !locationData || !selectedDate) {
+      return;
+    }
+
+    const data = {
+      dataset: name,
+      datasetMetadata: Object.entries(metadata ?? {}).reduce((res, [key, value]) => {
+        if (key === "id") {
+          return res;
+        }
+
+        return {
+          ...res,
+          [camelCase(key)]: value,
+        };
+      }, {}),
+      year: getYear(selectedDate),
+      location: locationData.name,
+      ...chartData,
+    };
+
+    const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
+
+    const link = document.createElement("a");
+    link.download = `${name} - ${locationData.name}.json`;
+    link.href = URL.createObjectURL(blob);
+    link.click();
+    link.remove();
+  }, [name, metadata, chartData, chartIsLoading, selectedDate]);
+
   // When the layer is animated, show each month of the year in a loop
   useEffect(() => {
     if (isAnimated && selectedDate !== undefined && selectedLayerId !== undefined) {
@@ -237,6 +283,28 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
           {name}
         </Label>
         <div className="flex items-center gap-1 pt-1.5">
+          {selectedDate !== undefined && selectedLayerId !== undefined && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    className="group/chart"
+                    disabled={chartIsLoading || !chartData || locationIsLoading || !locationData}
+                    onClick={onClickSaveChartData}
+                  >
+                    <span className="sr-only">Save chart data</span>
+                    <GraphIcon
+                      className="!size-4 transition-colors group-hover/chart:text-casper-blue-300"
+                      aria-hidden
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Save chart data</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
           {!!selectedLayer?.attributes!.download_link && (
             <TooltipProvider>
               <Tooltip>
@@ -329,7 +397,12 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
         )}
         {selectedDate !== undefined && selectedLayerId !== undefined && (
           <div className="mt-3">
-            <YearChart layerId={selectedLayerId} date={selectedDate} active={isDatasetActive} />
+            <YearChart
+              data={chartData}
+              date={selectedDate}
+              loading={chartIsLoading}
+              active={isDatasetActive}
+            />
           </div>
         )}
         {selectedDate !== undefined && dateRange !== undefined && isDatasetActive && (

diff --git a/client/src/components/year-chart/index.tsx b/client/src/components/year-chart/index.tsx
@@ -11,6 +11,7 @@ import { Text, TextProps } from "@visx/text";
 import { extent } from "d3-array";
 import { interpolateRgb, piecewise } from "d3-interpolate";
 import { format } from "date-fns/format";
+import { uniqueId } from "lodash-es";
 import { ComponentProps, useCallback, useMemo } from "react";
 
 import { Skeleton } from "@/components/ui/skeleton";
@@ -19,8 +20,9 @@ import tailwindConfig from "@/lib/tailwind-config";
 import { cn } from "@/lib/utils";
 
 interface YearChartProps {
-  layerId: number;
+  data: ReturnType<typeof useYearChartData>["data"];
   date: string;
+  loading: boolean;
   active: boolean;
 }
 
@@ -35,17 +37,15 @@ const Y_AXIS_TICK_WIDTH = 5;
 const Y_AXIS_TICK_COUNT = 5;
 const GRADIENT_OPACITY_EXTENT = [0.9, 0.7];
 
-const YearChart = ({ layerId, date, active }: YearChartProps) => {
+const YearChart = ({ data, date, loading, active }: YearChartProps) => {
   const { parentRef, width } = useParentSize({ ignoreDimensions: ["height"] });
   const height = useMemo(
     () => Math.max(Math.min(width / 2.7, CHART_MAX_HEIGHT), CHART_MIN_HEIGHT),
     [width],
   );
 
-  const { data, isLoading } = useYearChartData(layerId, date);
-
   const unitWidth = useMemo(() => {
-    if (isLoading || !data) {
+    if (loading || !data) {
       return 0;
     }
 
@@ -59,21 +59,21 @@ const YearChart = ({ layerId, date, active }: YearChartProps) => {
       }, Y_AXIS_TICK_WIDTH) ?? Y_AXIS_TICK_WIDTH;
 
     return (data.unit?.length ?? 0) * 8 + subtract;
-  }, [data, isLoading]);
+  }, [data, loading]);
 
   const xScale = useMemo(() => {
-    if (isLoading || !data) {
+    if (loading || !data) {
       return undefined;
     }
 
     return scalePoint({
       range: [0, width - Y_AXIS_WIDTH - X_AXIS_OFFSET_RIGHT - unitWidth],
       domain: data.data.map(({ x }) => x),
     });
-  }, [width, data, isLoading, unitWidth]);
+  }, [width, data, loading, unitWidth]);
 
   const yScale = useMemo(() => {
-    if (isLoading || !data) {
+    if (loading || !data) {
       return undefined;
     }
 
@@ -82,18 +82,18 @@ const YearChart = ({ layerId, date, active }: YearChartProps) => {
       domain: extent(data.data.map(({ y }) => y)) as [number, number],
       nice: Y_AXIS_TICK_COUNT,
     });
-  }, [height, data, isLoading]);
+  }, [height, data, loading]);
 
   const fillColorScale = useMemo(() => {
-    if (isLoading || !data) {
+    if (loading || !data) {
       return undefined;
     }
 
     return scaleLinear({
       range: data.colorRange,
       domain: data.colorDomain,
     }).interpolate(() => piecewise(interpolateRgb, data.colorRange));
-  }, [data, isLoading]);
+  }, [data, loading]);
 
   const xAxisTickLabelProps = useCallback<
     NonNullable<Exclude<ComponentProps<typeof AxisBottom>["tickLabelProps"], Partial<TextProps>>>
@@ -134,6 +134,8 @@ const YearChart = ({ layerId, date, active }: YearChartProps) => {
     };
   }, []);
 
+  const gradientId = useMemo(() => uniqueId(), []);
+
   const gradientColorStops = useMemo(() => {
     if (!fillColorScale || !yScale) {
       return [];
@@ -162,8 +164,8 @@ const YearChart = ({ layerId, date, active }: YearChartProps) => {
 
   return (
     <div ref={parentRef}>
-      {isLoading && !data && <Skeleton style={{ width: `${width}px`, height: `${height}px` }} />}
-      {!isLoading && !!data && !!xScale && !!yScale && !!fillColorScale && (
+      {loading && !data && <Skeleton style={{ width: `${width}px`, height: `${height}px` }} />}
+      {!loading && !!data && !!xScale && !!yScale && !!fillColorScale && (
         <svg
           width={width}
           height={height}
@@ -173,7 +175,7 @@ const YearChart = ({ layerId, date, active }: YearChartProps) => {
             "grayscale-0": active,
           })}
         >
-          <LinearGradient id={`year-chart-gradient-${layerId}`}>
+          <LinearGradient id={`year-chart-gradient-${gradientId}`}>
             {gradientColorStops.map((stop, index) => (
               <stop key={index} {...stop} />
             ))}
@@ -204,7 +206,7 @@ const YearChart = ({ layerId, date, active }: YearChartProps) => {
               x={(d) => xScale(d.x) ?? 0}
               y={(d) => yScale(d.y) ?? 0}
               yScale={yScale}
-              fill={`url('#year-chart-gradient-${layerId}')`}
+              fill={`url('#year-chart-gradient-${gradientId}')`}
             />
             <LinePath
               data={data.data}

diff --git a/client/src/hooks/use-year-chart-data.ts b/client/src/hooks/use-year-chart-data.ts
@@ -17,10 +17,10 @@ interface YearChartData {
   colorDomain: [number, number];
 }
 
-export default function useYearChartData(layerId: number, date: string) {
+export default function useYearChartData(layerId?: number, date?: string) {
   const [location] = useLocation();
 
-  const year = useMemo(() => getYear(date), [date]);
+  const year = useMemo(() => getYear(date ?? new Date()), [date]);
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore-error
@@ -60,6 +60,7 @@ export default function useYearChartData(layerId: number, date: string) {
     },
     {
       query: {
+        enabled: layerId !== undefined && date !== undefined,
         placeholderData: { data: [] },
         select: (data) => {
           if (!data?.data?.length) {

diff --git a/client/src/svgs/graph.svg b/client/src/svgs/graph.svg
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -4522,7 +4522,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.172":
+"@types/lodash-es@npm:^4":
+  version: 4.17.12
+  resolution: "@types/lodash-es@npm:4.17.12"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 10c0/5d12d2cede07f07ab067541371ed1b838a33edb3c35cb81b73284e93c6fd0c4bbeaefee984e69294bffb53f62d7272c5d679fdba8e595ff71e11d00f2601dde0
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*, @types/lodash@npm:^4.14.172":
   version: 4.17.13
   resolution: "@types/lodash@npm:4.17.13"
   checksum: 10c0/c3d0b7efe7933ac0369b99f2f7bff9240d960680fdb74b41ed4bd1b3ca60cca1e31fe4046d9abbde778f941a41bc2a75eb629abf8659fa6c27b66efbbb0802a9
@@ -5912,6 +5921,7 @@ __metadata:
     "@turf/bbox": "npm:7.1.0"
     "@turf/helpers": "npm:7.1.0"
     "@turf/meta": "npm:7.1.0"
+    "@types/lodash-es": "npm:^4"
     "@types/mapbox-gl": "npm:3.4.0"
     "@types/node": "npm:22.7.6"
     "@types/react": "npm:18.3.1"
@@ -5940,6 +5950,7 @@ __metadata:
     express: "npm:4.21.1"
     husky: "npm:9.1.6"
     jiti: "npm:1.21.6"
+    lodash-es: "npm:4.17.21"
     mapbox-gl: "npm:3.7.0"
     next: "npm:14.2.15"
     nuqs: "npm:2.0.4"
@@ -9147,6 +9158,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 10c0/fb407355f7e6cd523a9383e76e6b455321f0f153a6c9625e21a8827d10c54c2a2341bd2ae8d034358b60e07325e1330c14c224ff582d04612a46a4f0479ff2f2
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"