Merge pull request #30 from Vizzuality/widgets-last-updated

Add last updated at value to widgets
Vizzuality · Oct 31, 2023 · a3fb3b8 · a3fb3b8
2 parents 2ffac9b + cbbec57
commit a3fb3b8
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 30 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -45,6 +45,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "d3-format": "^3.1.0",
+    "d3-time-format": "^4.1.0",
     "date-fns": "^2.30.0",
     "deck.gl": "8.9.31",
     "jotai": "2.4.3",

diff --git a/frontend/src/components/widget/index.tsx b/frontend/src/components/widget/index.tsx
@@ -1,16 +1,23 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
+
+import { timeFormat } from 'd3-time-format';
 
 type WidgetProps = {
   title: string;
   lastUpdated: string;
 };
 
 const Widget: React.FC<PropsWithChildren<WidgetProps>> = ({ title, lastUpdated, children }) => {
+  const formattedLastUpdated = useMemo(
+    () => timeFormat('%B %Y')(new Date(lastUpdated)),
+    [lastUpdated]
+  );
+
   return (
     <div className="py-4 px-4 md:px-8">
       <div className="pt-2">
         <h2 className="font-sans text-xl font-bold">{title}</h2>
-        <span className="text-xs">Data last updated: {lastUpdated}</span>
+        <span className="text-xs">Data last updated: {formattedLastUpdated}</span>
       </div>
       <div>{children}</div>
     </div>

diff --git a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx
@@ -11,19 +11,43 @@ type HabitatWidgetProps = {
 };
 
 const HabitatWidget: React.FC<HabitatWidgetProps> = ({ location }) => {
-  const lastUpdated = 'October 2023';
-
-  const { data: habitatStatsResponse } = useGetHabitatStats({
-    populate: '*',
+  const defaultQueryParams = {
     filters: {
       location: {
         code: location.code,
       },
     },
-    'pagination[limit]': -1,
-  });
+  };
+
+  const { data: dataLastUpdate } = useGetHabitatStats(
+    {
+      ...defaultQueryParams,
+      sort: 'updatedAt:desc',
+      'pagination[limit]': 1,
+    },
+    {
+      query: {
+        select: ({ data }) => data?.[0]?.attributes?.updatedAt,
+        placeholderData: { data: null },
+      },
+    }
+  );
 
-  const habitatStatsData = habitatStatsResponse?.data;
+  const {
+    data: { data: habitatStatsData },
+  } = useGetHabitatStats(
+    {
+      ...defaultQueryParams,
+      populate: '*',
+      'pagination[limit]': -1,
+    },
+    {
+      query: {
+        select: ({ data }) => ({ data }),
+        placeholderData: { data: [] },
+      },
+    }
+  );
 
   const widgetChartData = useMemo(() => {
     if (!habitatStatsData) return [];
@@ -50,7 +74,7 @@ const HabitatWidget: React.FC<HabitatWidgetProps> = ({ location }) => {
   return (
     <Widget
       title="Proportion of Habitat within Protected and Conserved Areas"
-      lastUpdated={lastUpdated}
+      lastUpdated={dataLastUpdate}
     >
       {widgetChartData.map((chartData) => (
         <HorizontalBarChart key={chartData.slug} className="py-2" data={chartData} />

diff --git a/frontend/src/containers/data-tool/sidebar/widgets/marine-conservation/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/marine-conservation/index.tsx
@@ -13,32 +13,51 @@ type MarineConservationWidgetProps = {
 };
 
 const MarineConservationWidget: React.FC<MarineConservationWidgetProps> = ({ location }) => {
-  const lastUpdated = 'October 2023';
-
-  const { data: protectionStatsResponse } = useGetProtectionCoverageStats({
-    populate: '*',
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    'sort[year]': 'asc',
+  const defaultQueryParams = {
     filters: {
       location: {
         code: location.code,
       },
-      // protection_status: {
-      //   slug: 'oecm', // oecm | mpa
-      // },
     },
-    'pagination[limit]': -1,
-  });
+  };
+
+  const { data: dataLastUpdate } = useGetProtectionCoverageStats(
+    {
+      ...defaultQueryParams,
+      sort: 'updatedAt:desc',
+      'pagination[limit]': 1,
+    },
+    {
+      query: {
+        select: ({ data }) => data?.[0]?.attributes?.updatedAt,
+        placeholderData: { data: null },
+      },
+    }
+  );
 
-  const protectionStats = useMemo(() => {
-    return protectionStatsResponse?.data || [];
-  }, [protectionStatsResponse?.data]);
+  const {
+    data: { data: protectionStatsData },
+  } = useGetProtectionCoverageStats(
+    {
+      ...defaultQueryParams,
+      populate: '*',
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      'sort[year]': 'asc',
+      'pagination[limit]': -1,
+    },
+    {
+      query: {
+        select: ({ data }) => ({ data }),
+        placeholderData: { data: [] },
+      },
+    }
+  );
 
   const mergedProtectionStats = useMemo(() => {
-    if (!protectionStats.length) return null;
+    if (!protectionStatsData.length) return null;
 
-    const groupedByYear = groupBy(protectionStats, 'attributes.year');
+    const groupedByYear = groupBy(protectionStatsData, 'attributes.year');
 
     return Object.keys(groupedByYear).map((year) => {
       const entries = groupedByYear[year];
@@ -54,7 +73,7 @@ const MarineConservationWidget: React.FC<MarineConservationWidgetProps> = ({ loc
         protectedArea,
       };
     });
-  }, [protectionStats]);
+  }, [protectionStatsData]);
 
   const stats = useMemo(() => {
     if (!mergedProtectionStats) return null;
@@ -115,7 +134,7 @@ const MarineConservationWidget: React.FC<MarineConservationWidgetProps> = ({ loc
   if (!stats || !chartData) return null;
 
   return (
-    <Widget title="Marine Conservation Coverage" lastUpdated={lastUpdated}>
+    <Widget title="Marine Conservation Coverage" lastUpdated={dataLastUpdate}>
       <div className="mt-6 mb-4 flex flex-col text-blue">
         <span className="text-5xl font-bold">
           {stats?.protectedPercentage}

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -5850,7 +5850,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d3-time-format@npm:2 - 4":
+"d3-time-format@npm:2 - 4, d3-time-format@npm:^4.1.0":
   version: 4.1.0
   resolution: "d3-time-format@npm:4.1.0"
   dependencies:
@@ -11617,6 +11617,7 @@ __metadata:
     clsx: ^2.0.0
     cmdk: ^0.2.0
     d3-format: ^3.1.0
+    d3-time-format: ^4.1.0
     date-fns: ^2.30.0
     deck.gl: 8.9.31
     eslint: 8.32.0