feat(locationMap): add info on map + better color palette management

aphp · Jul 3, 2024 · ec75e11 · ec75e11
1 parent 2cff50c
commit ec75e11
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/src/components/Dashboard/Preview/LocationMap/index.tsx b/src/components/Dashboard/Preview/LocationMap/index.tsx
@@ -13,6 +13,7 @@ import {
   _explodeBoundsIntoMesh,
   colorize,
   computeNearFilter,
+  getColorPalette,
   isBoundCovered,
   parseShape,
   uncoveredBoundMeshUnits
@@ -68,6 +69,7 @@ const IrisZones = (props: IrisZonesProps) => {
   const [loadedBounds, setLoadedBounds] = useState<LatLngBounds[]>([])
   const [maxCount, setMaxCount] = useState(MAX_COUNT_DEFAULT)
   const [zoneOpacity, setZoneOpacity] = useState(ZONE_COLOR_OPACITY * 100)
+  const colorPalette = getColorPalette(COLOR_PALETTE, maxCount)
 
   const updateBounds = useCallback((newBounds: LatLngBounds) => {
     setBounds((prevBounds) => {
@@ -188,11 +190,13 @@ const IrisZones = (props: IrisZonesProps) => {
     const newVisibleZones = zones.filter((zone) => zone.shape.find((shape) => bounds?.contains(shape)))
     setVisibleZones(newVisibleZones)
     const maxCount =
-      d3.quantile(
-        newVisibleZones.map((zone) => zone.meta.count),
-        MAX_COUNT_QUANTILE
-      ) || Math.max(...newVisibleZones.map((zone) => zone.meta.count))
-    setMaxCount(maxCount)
+      newVisibleZones.length === 0
+        ? MAX_COUNT_DEFAULT
+        : d3.quantile(
+            newVisibleZones.map((zone) => zone.meta.count),
+            MAX_COUNT_QUANTILE
+          ) || Math.max(...newVisibleZones.map((zone) => zone.meta.count))
+    setMaxCount(Math.floor(maxCount))
   }, [zones, bounds])
 
   /***************************************************** */
@@ -286,7 +290,7 @@ const IrisZones = (props: IrisZonesProps) => {
         <Polygon
           key={i}
           pathOptions={{
-            color: colorize(COLOR_PALETTE, zone.meta.count, maxCount),
+            color: colorize(colorPalette, zone.meta.count, maxCount),
             opacity: (BORDER_RELATIVE_OPACITY * zoneOpacity) / 100,
             fillOpacity: zoneOpacity / 100
           }}
@@ -300,13 +304,13 @@ const IrisZones = (props: IrisZonesProps) => {
           </Tooltip>
         </Polygon>
       ))}
-      <MapLegend maxCount={maxCount} />
+      <MapLegend maxCount={maxCount} colorPalette={colorPalette} />
     </div>
   )
 }
 
-const MapLegend = (props: { maxCount: number }) => {
-  const { maxCount } = props
+const MapLegend = (props: { maxCount: number; colorPalette: string[] }) => {
+  const { maxCount, colorPalette } = props
   return (
     <div
       className="leaflet-control leaflet-bar"
@@ -326,7 +330,7 @@ const MapLegend = (props: { maxCount: number }) => {
       <div>
         <div>Densité</div>
         <div style={{ display: 'flex', justifyContent: 'center', width: '100%', height: '10px' }}>
-          {COLOR_PALETTE.map((color, i) => (
+          {colorPalette.map((color, i) => (
             <div key={i} style={{ flexGrow: 1, backgroundColor: color }} />
           ))}
         </div>
@@ -337,7 +341,7 @@ const MapLegend = (props: { maxCount: number }) => {
           }}
         >
           <div>1</div>
-          <div>{Math.max(Math.round(maxCount / 10), 1) * 10}+</div>
+          <div>{maxCount}+</div>
         </div>
       </div>
     </div>

diff --git a/src/components/Dashboard/Preview/LocationMap/utils.ts b/src/components/Dashboard/Preview/LocationMap/utils.ts
@@ -92,6 +92,17 @@ export const uncoveredBoundMeshUnits = (map: L.Map, bounds: LatLngBounds, loaded
   return boundMesh.filter((b) => !loadedBounds.some((lb) => lb.contains(b)))
 }
 
+export const getColorPalette = (colors: string[], maxCount: number): string[] => {
+  if (maxCount >= colors.length) {
+    return colors
+  }
+  const colorPalette: string[] = [colors[0]]
+  for (let i = 1; i < maxCount; i++) {
+    colorPalette.push(colors[i])
+  }
+  return colorPalette
+}
+
 /**
  * Colorize a count based on a color palette
  */

diff --git a/src/components/Dashboard/Preview/Preview.tsx b/src/components/Dashboard/Preview/Preview.tsx
@@ -8,7 +8,9 @@ import {
   Table,
   TableBody,
   TableContainer,
-  Typography
+  Typography,
+  IconButton,
+  Tooltip
 } from '@mui/material'
 import { TableCellWrapper } from 'components/ui/TableCell/styles'
 
@@ -17,6 +19,7 @@ import BarChart from './Charts/BarChart'
 import GroupedBarChart from './Charts/GroupedBarChart'
 import DonutChart from './Charts/DonutChart'
 import PyramidChart from './Charts/PyramidChart'
+import InfoIcon from '@mui/icons-material/Info'
 
 import useStyles from './styles'
 import clsx from 'clsx'
@@ -239,6 +242,11 @@ const Preview: React.FC<PreviewProps> = ({
               <Grid container item className={classes.chartTitle}>
                 <Typography id="location-map-card-title" variant="h3" color="primary">
                   Répartition spatiale par zone IRIS
+                  <Tooltip title="Les localisations des patients sont affichées uniquement si leur adresse est disponible (certains patients n'ayant pas d'adresse associée).">
+                    <IconButton style={{ padding: '0 0 0 4px', marginTop: '-2.5px', position: 'absolute' }}>
+                      <InfoIcon style={{ height: 22 }} />
+                    </IconButton>
+                  </Tooltip>
                 </Typography>
               </Grid>