From 3577dc89e5cacb614c0b876b22b446b49ce8a96c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?= Date: Wed, 20 Mar 2024 16:18:35 +0100 Subject: [PATCH] tracks zero alerts in alerts deforestation chart --- .../deforestation-alerts/chart/index.tsx | 37 +++++++++++++------ .../deforestation-alerts/index.tsx | 17 +++++++-- .../src/pages/eudr/suppliers/[supplierId].tsx | 10 ++++- 3 files changed, 47 insertions(+), 17 deletions(-) diff --git a/client/src/containers/analysis-eudr-detail/deforestation-alerts/chart/index.tsx b/client/src/containers/analysis-eudr-detail/deforestation-alerts/chart/index.tsx index 99c2203ea..e90696a75 100644 --- a/client/src/containers/analysis-eudr-detail/deforestation-alerts/chart/index.tsx +++ b/client/src/containers/analysis-eudr-detail/deforestation-alerts/chart/index.tsx @@ -11,7 +11,7 @@ import { ResponsiveContainer, } from 'recharts'; import { useParams } from 'next/navigation'; -import { useCallback, useMemo, useState } from 'react'; +import { useCallback, useMemo, useRef, useState } from 'react'; import { EUDR_COLOR_RAMP } from '@/utils/colors'; import { useEUDRSupplier } from '@/hooks/eudr'; @@ -28,6 +28,7 @@ type DotPropsWithPayload = DotProps & { payload: { alertDate: number } }; const DeforestationAlertsChart = (): JSX.Element => { const [selectedPlots, setSelectedPlots] = useState([]); const [selectedDate, setSelectedDate] = useState(null); + const ticks = useRef([]); const { supplierId }: { supplierId: string } = useParams(); const dispatch = useAppDispatch(); const { @@ -151,6 +152,7 @@ const DeforestationAlertsChart = (): JSX.Element => { margin={{ top: 20, bottom: 15, + right: 20, }} > @@ -159,9 +161,25 @@ const DeforestationAlertsChart = (): JSX.Element => { scale="time" dataKey="alertDate" domain={xDomain} - tickFormatter={(value: string | number, x) => { - if (x === 0) return format(new UTCDate(value), 'LLL yyyy'); - return format(new UTCDate(value), 'LLL'); + minTickGap={25} + tickFormatter={(value: number, index) => { + ticks.current[index] = value; + + const tickDate = new UTCDate(value); + const tickYear = tickDate.getUTCFullYear(); + + if (!ticks.current[index - 1]) { + return format(tickDate, 'LLL yyyy'); + } + + const prevTickDate = new UTCDate(ticks.current[index - 1]); + const prevTickYear = prevTickDate.getUTCFullYear(); + + if (prevTickYear !== tickYear) { + return format(tickDate, 'LLL yyyy'); + } + + return format(tickDate, 'LLL'); }} tickLine={false} padding={{ left: 20, right: 20 }} @@ -188,10 +206,7 @@ const DeforestationAlertsChart = (): JSX.Element => { handleClickDot(payload)} - className={cn('cursor-pointer', { - // todo: fill when we have design - '': payload.alertDate === selectedDate, - })} + className="cursor-pointer stroke-[3px]" /> ); }} @@ -200,11 +215,9 @@ const DeforestationAlertsChart = (): JSX.Element => { return ( handleClickDot(payload)} - className={cn('cursor-pointer', { - // todo: fill when we have design - '': payload.alertDate === selectedDate, - })} + className="cursor-pointer" /> ); }} diff --git a/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx b/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx index 6ab152fff..a28ee809e 100644 --- a/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx +++ b/client/src/containers/analysis-eudr-detail/deforestation-alerts/index.tsx @@ -1,5 +1,5 @@ import { useParams } from 'next/navigation'; -import { format } from 'date-fns'; +import { format, endOfMonth, startOfMonth } from 'date-fns'; import { UTCDate } from '@date-fns/utc'; import { BellRing } from 'lucide-react'; @@ -10,7 +10,7 @@ import { eudrDetail } from '@/store/features/eudr-detail'; import { useAppSelector } from '@/store/hooks'; import InfoModal from '@/components/legend/item/info-modal'; -const dateFormatter = (date: string) => format(new UTCDate(date), "do 'of' MMMM yyyy"); +const dateFormatter = (date: UTCDate) => format(date, "do 'of' MMMM yyyy"); const DeforestationAlerts = (): JSX.Element => { const { supplierId }: { supplierId: string } = useParams(); @@ -28,6 +28,14 @@ const DeforestationAlerts = (): JSX.Element => { }, ); + const formattedBeginOfMonth = data?.startAlertDate + ? dateFormatter(startOfMonth(new UTCDate(data.startAlertDate))) + : undefined; + + const formattedEndOfMonth = data?.endAlertDate + ? dateFormatter(endOfMonth(new UTCDate(data.endAlertDate))) + : undefined; + return (
@@ -44,9 +52,10 @@ const DeforestationAlerts = (): JSX.Element => {
There were {data?.totalAlerts} deforestation alerts reported for the supplier between the{' '} - {dateFormatter(data.startAlertDate)} and the{' '} + {formattedBeginOfMonth} and the{' '}
- {dateFormatter(data.endAlertDate)}. + {formattedEndOfMonth} + .
diff --git a/client/src/pages/eudr/suppliers/[supplierId].tsx b/client/src/pages/eudr/suppliers/[supplierId].tsx index 48ac37ba1..d1ee58c78 100644 --- a/client/src/pages/eudr/suppliers/[supplierId].tsx +++ b/client/src/pages/eudr/suppliers/[supplierId].tsx @@ -17,6 +17,8 @@ import SupplierInfo from '@/containers/analysis-eudr-detail/supplier-info'; import SupplierSourcingInfo from '@/containers/analysis-eudr-detail/sourcing-info'; import { Separator } from '@/components/ui/separator'; import DeforestationAlerts from '@/containers/analysis-eudr-detail/deforestation-alerts'; +import { eudrDetail } from '@/store/features/eudr-detail'; +import { useAppSelector } from '@/store/hooks'; import type { NextPageWithLayout } from 'pages/_app'; import type { ReactElement } from 'react'; @@ -25,9 +27,15 @@ import type { GetServerSideProps } from 'next'; const MapPage: NextPageWithLayout = () => { const scrollRef = useRef(null); const [isCollapsed, setIsCollapsed] = useState(false); + const { + filters: { dates }, + } = useAppSelector(eudrDetail); const { supplierId }: { supplierId: string } = useParams(); - const { data } = useEUDRSupplier(supplierId); + const { data } = useEUDRSupplier(supplierId, { + startAlertDate: dates.from, + endAlertDate: dates.to, + }); return (