add tooltip with event type cpunts to events outside areas

GlobalFishingWatch · Oct 23, 2023 · 97301b1 · 97301b1
1 parent 7737d21
commit 97301b1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/apps/fishing-map/features/vessel/areas/VesselAreas.module.css b/apps/fishing-map/features/vessel/areas/VesselAreas.module.css
@@ -82,6 +82,7 @@
 }
 
 .unknownRegionEventsNumber {
+  cursor: help;
   font: var(--font-S);
   color: var(--color-secondary-blue);
 }
diff --git a/apps/fishing-map/features/vessel/areas/VesselAreas.tsx b/apps/fishing-map/features/vessel/areas/VesselAreas.tsx
@@ -254,9 +254,23 @@ const VesselAreas = ({ updateAreaLayersVisibility }: VesselAreasProps) => {
                     regionType: t(`layer.areas.${vesselArea}`, vesselArea),
                   })}
                 </span>
-                <span className={styles.unknownRegionEventsNumber}>
-                  <I18nNumber number={eventsGroupedUnknown?.total} />
-                </span>
+                <Tooltip
+                  content={Object.entries(eventsGroupedUnknown)
+                    .sort((a, b) => (b[1] as number) - (a[1] as number))
+                    .map(([key, value]) => {
+                      if (key === 'total' || key === 'region') return ''
+                      return (
+                        <p>
+                          {t(`event.${key}`, { defaultValue: key, count: value as number })}:{' '}
+                          <I18nNumber number={value} />
+                        </p>
+                      )
+                    })}
+                >
+                  <span className={styles.unknownRegionEventsNumber}>
+                    <I18nNumber number={eventsGroupedUnknown?.total} />
+                  </span>
+                </Tooltip>
               </p>
             )}
           </div>