tracks zero alerts in alerts deforestation chart

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<string[]>([]);
   const [selectedDate, setSelectedDate] = useState<number>(null);
+  const ticks = useRef<number[]>([]);
   const { supplierId }: { supplierId: string } = useParams();
   const dispatch = useAppDispatch();
   const {
@@ -151,6 +152,7 @@ const DeforestationAlertsChart = (): JSX.Element => {
               margin={{
                 top: 20,
                 bottom: 15,
+                right: 20,
               }}
             >
               <CartesianGrid strokeDasharray="3 3" vertical={false} />
@@ -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 => {
                         <Dot
                           {...props}
                           onClick={() => 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 (
                         <Dot
                           {...props}
+                          r={5}
                           onClick={() => handleClickDot(payload)}
-                          className={cn('cursor-pointer', {
-                            // todo: fill when we have design
-                            '': payload.alertDate === selectedDate,
-                          })}
+                          className="cursor-pointer"
                         />
                       );
                     }}

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 (
     <section className="space-y-4 rounded-xl border border-gray-100 p-7 shadow-md">
       <div className="flex items-center space-x-2">
@@ -44,9 +52,10 @@ const DeforestationAlerts = (): JSX.Element => {
         <div className="rounded-xl bg-orange-100 px-6 py-4 text-xs">
           There were <span className="font-bold">{data?.totalAlerts}</span> deforestation alerts
           reported for the supplier between the{' '}
-          <span className="font-bold">{dateFormatter(data.startAlertDate)}</span> and the{' '}
+          <span className="font-bold">{formattedBeginOfMonth}</span> and the{' '}
           <div className="flex items-center space-x-2">
-            <span className="font-bold">{dateFormatter(data.endAlertDate)}</span>.
+            <span className="font-bold">{formattedEndOfMonth}</span>
+            .
             <BellRing className="h-5 w-5 fill-black" />
           </div>
         </div>

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<HTMLDivElement>(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 (
     <MapProvider>