From f75889b7fcb1a1bbf84f5c8a455ebbb7e4259eb0 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Thu, 26 Oct 2023 13:40:09 +0100 Subject: [PATCH 1/5] Marine conservation widget: improve data fetching + add updatedAt --- .../widgets/marine-conservation/index.tsx | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) 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 index 4e68bfac..8ef6eb9e 100644 --- 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,36 @@ type MarineConservationWidgetProps = { }; const MarineConservationWidget: React.FC = ({ location }) => { - const lastUpdated = 'October 2023'; - - const { data: protectionStatsResponse } = useGetProtectionCoverageStats({ - populate: '*', - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - 'sort[year]': 'asc', - filters: { - location: { - code: location.code, + const { + data: { data: protectionStatsData, meta: protectionStatsMeta }, + } = useGetProtectionCoverageStats( + { + populate: '*', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + 'sort[year]': 'asc', + filters: { + location: { + code: location.code, + }, + // protection_status: { + // slug: 'oecm', // oecm | mpa + // }, }, - // protection_status: { - // slug: 'oecm', // oecm | mpa - // }, + 'pagination[limit]': -1, }, - 'pagination[limit]': -1, - }); - - const protectionStats = useMemo(() => { - return protectionStatsResponse?.data || []; - }, [protectionStatsResponse?.data]); + { + query: { + select: ({ data, meta }) => ({ data, meta }), + placeholderData: { data: [], meta: undefined }, + }, + } + ); 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 +58,7 @@ const MarineConservationWidget: React.FC = ({ loc protectedArea, }; }); - }, [protectionStats]); + }, [protectionStatsData]); const stats = useMemo(() => { if (!mergedProtectionStats) return null; @@ -115,7 +119,7 @@ const MarineConservationWidget: React.FC = ({ loc if (!stats || !chartData) return null; return ( - +
{stats?.protectedPercentage} From 28f8a9b4cfb363f7e931f2523998fbaac82dc6d6 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Thu, 26 Oct 2023 13:40:26 +0100 Subject: [PATCH 2/5] Habitat widget: improve data fetching + add updatedAt --- .../sidebar/widgets/habitat/index.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx index c7fb8ed6..decf3bc2 100644 --- 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,25 @@ type HabitatWidgetProps = { }; const HabitatWidget: React.FC = ({ location }) => { - const lastUpdated = 'October 2023'; - - const { data: habitatStatsResponse } = useGetHabitatStats({ - populate: '*', - filters: { - location: { - code: location.code, + const { + data: { data: habitatStatsData, meta: habitatStatsMeta }, + } = useGetHabitatStats( + { + populate: '*', + filters: { + location: { + code: location.code, + }, }, + 'pagination[limit]': -1, }, - 'pagination[limit]': -1, - }); - - const habitatStatsData = habitatStatsResponse?.data; + { + query: { + select: ({ data, meta }) => ({ data, meta }), + placeholderData: { data: [], meta: undefined }, + }, + } + ); const widgetChartData = useMemo(() => { if (!habitatStatsData) return []; @@ -50,7 +56,7 @@ const HabitatWidget: React.FC = ({ location }) => { return ( {widgetChartData.map((chartData) => ( From 437dda052b7454fea6c70c088fe02563adde1d5f Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Thu, 26 Oct 2023 13:53:51 +0100 Subject: [PATCH 3/5] Format MarineConservation and ProportionOfHabitat widget data last updated --- frontend/package.json | 1 + frontend/src/components/widget/index.tsx | 11 +++++++++-- .../data-tool/sidebar/widgets/habitat/index.tsx | 4 ++++ frontend/yarn.lock | 3 ++- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 5be506f3..4ba180be 100644 --- 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 index 858c3c66..e86a5c2f 100644 --- a/frontend/src/components/widget/index.tsx +++ b/frontend/src/components/widget/index.tsx @@ -1,4 +1,6 @@ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useMemo } from 'react'; + +import { timeFormat } from 'd3-time-format'; type WidgetProps = { title: string; @@ -6,11 +8,16 @@ type WidgetProps = { }; const Widget: React.FC> = ({ title, lastUpdated, children }) => { + const formattedLastUpdated = useMemo( + () => timeFormat('%B %Y')(new Date(lastUpdated)), + [lastUpdated] + ); + return (

{title}

- Data last updated: {lastUpdated} + Data last updated: {formattedLastUpdated}
{children}
diff --git a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx index decf3bc2..69229fb4 100644 --- a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx @@ -11,6 +11,10 @@ type HabitatWidgetProps = { }; const HabitatWidget: React.FC = ({ location }) => { + const updatedAtQuery = useGetHabitatStats({ + sort: 'updatedAt:desc', + }); + const { data: { data: habitatStatsData, meta: habitatStatsMeta }, } = useGetHabitatStats( diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 9fb2fd81..95478431 100644 --- 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 From d7997d9aa529ef4065126424318fa8a5ce2ec9aa Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 31 Oct 2023 13:10:45 +0000 Subject: [PATCH 4/5] Change how to pull the last data update for the HabitatStats widget --- .../sidebar/widgets/habitat/index.tsx | 38 +++++++++++++------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx index 69229fb4..c37c333e 100644 --- a/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/widgets/habitat/index.tsx @@ -11,26 +11,40 @@ type HabitatWidgetProps = { }; const HabitatWidget: React.FC = ({ location }) => { - const updatedAtQuery = useGetHabitatStats({ - sort: 'updatedAt:desc', - }); + const defaultQueryParams = { + filters: { + location: { + code: location.code, + }, + }, + }; + + const { data: dataLastUpdate } = useGetHabitatStats( + { + ...defaultQueryParams, + sort: 'updatedAt:desc', + 'pagination[limit]': 1, + }, + { + query: { + select: ({ data }) => data?.[0]?.attributes?.updatedAt, + placeholderData: { data: null }, + }, + } + ); const { - data: { data: habitatStatsData, meta: habitatStatsMeta }, + data: { data: habitatStatsData }, } = useGetHabitatStats( { + ...defaultQueryParams, populate: '*', - filters: { - location: { - code: location.code, - }, - }, 'pagination[limit]': -1, }, { query: { - select: ({ data, meta }) => ({ data, meta }), - placeholderData: { data: [], meta: undefined }, + select: ({ data }) => ({ data }), + placeholderData: { data: [] }, }, } ); @@ -60,7 +74,7 @@ const HabitatWidget: React.FC = ({ location }) => { return ( {widgetChartData.map((chartData) => ( From cbbec5763e5e5c165c0c474bd04f783e364ddc03 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 31 Oct 2023 13:19:49 +0000 Subject: [PATCH 5/5] Change how to pull the last data update for the MarineConservation widget --- .../widgets/marine-conservation/index.tsx | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) 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 index 8ef6eb9e..38c89a6d 100644 --- 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,28 +13,43 @@ type MarineConservationWidgetProps = { }; const MarineConservationWidget: React.FC = ({ location }) => { + const defaultQueryParams = { + filters: { + location: { + code: location.code, + }, + }, + }; + + const { data: dataLastUpdate } = useGetProtectionCoverageStats( + { + ...defaultQueryParams, + sort: 'updatedAt:desc', + 'pagination[limit]': 1, + }, + { + query: { + select: ({ data }) => data?.[0]?.attributes?.updatedAt, + placeholderData: { data: null }, + }, + } + ); + const { - data: { data: protectionStatsData, meta: protectionStatsMeta }, + data: { data: protectionStatsData }, } = useGetProtectionCoverageStats( { + ...defaultQueryParams, populate: '*', // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore 'sort[year]': 'asc', - filters: { - location: { - code: location.code, - }, - // protection_status: { - // slug: 'oecm', // oecm | mpa - // }, - }, 'pagination[limit]': -1, }, { query: { - select: ({ data, meta }) => ({ data, meta }), - placeholderData: { data: [], meta: undefined }, + select: ({ data }) => ({ data }), + placeholderData: { data: [] }, }, } ); @@ -119,7 +134,7 @@ const MarineConservationWidget: React.FC = ({ loc if (!stats || !chartData) return null; return ( - +
{stats?.protectedPercentage}