fix(locationMap): duplicate zones + color palette for low max

aphp · Jul 4, 2024 · 3946210 · 3946210
1 parent 126c333
commit 3946210
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/src/components/Dashboard/Preview/LocationMap/index.tsx b/src/components/Dashboard/Preview/LocationMap/index.tsx
@@ -63,7 +63,7 @@ const IrisZones = (props: IrisZonesProps) => {
   const [dataLoadingProgress, setDataLoadingProgress] = useState(0)
   const [zones, setZones] = useState<Array<{ shape: LatLngTuple[]; meta: { count: number; name: string } }>>([])
   const [visibleZones, setVisibleZones] = useState<
-    Array<{ shape: LatLngTuple[]; meta: { count: number; name: string } }>
+    Array<{ shape: LatLngTuple[]; meta: { count: number; name: string; id?: string } }>
   >([])
   const [bounds, setBounds] = useState<LatLngBounds | null>(null)
   const [loadedBounds, setLoadedBounds] = useState<LatLngBounds[]>([])
@@ -147,6 +147,7 @@ const IrisZones = (props: IrisZonesProps) => {
               const existingNames = existingZones.map((zone) => zone.meta.name)
               const newZones = existingZones.concat(
                 locations
+                  .filter((ft, i) => locations.findIndex((f) => ft.id === f.id) === i) // to filter out duplicates
                   .filter((ft) => ft.name && existingNames.indexOf(ft.name) === -1)
                   .map((ft) => {
                     return {
@@ -156,7 +157,8 @@ const IrisZones = (props: IrisZonesProps) => {
                         ) || [],
                       meta: {
                         count: ft.extension?.find((ext) => ext.url === LOCATION_COUNT_EXTENSION_URL)?.valueInteger || 0,
-                        name: ft.name || ''
+                        name: ft.name || '',
+                        id: ft.id
                       }
                     }
                   })
@@ -286,24 +288,26 @@ const IrisZones = (props: IrisZonesProps) => {
             ))}
         </div>
       )}
-      {visibleZones.map((zone, i) => (
-        <Polygon
-          key={i}
-          pathOptions={{
-            color: colorize(colorPalette, zone.meta.count, maxCount),
-            opacity: (BORDER_RELATIVE_OPACITY * zoneOpacity) / 100,
-            fillOpacity: zoneOpacity / 100
-          }}
-          positions={zone.shape}
-        >
-          <Tooltip sticky>
-            <div>
-              <b>{zone.meta.name}</b>
-            </div>
-            <div>Total: {zone.meta.count}</div>
-          </Tooltip>
-        </Polygon>
-      ))}
+      {visibleZones.map((zone, i) => {
+        return (
+          <Polygon
+            key={i}
+            pathOptions={{
+              color: colorize(colorPalette, zone.meta.count, maxCount),
+              opacity: (BORDER_RELATIVE_OPACITY * zoneOpacity) / 100,
+              fillOpacity: zoneOpacity / 100
+            }}
+            positions={zone.shape}
+          >
+            <Tooltip sticky>
+              <div>
+                <b>{zone.meta.name}</b>
+              </div>
+              <div>Total: {zone.meta.count}</div>
+            </Tooltip>
+          </Polygon>
+        )
+      })}
       <MapLegend maxCount={maxCount} colorPalette={colorPalette} />
     </div>
   )

diff --git a/src/components/Dashboard/Preview/LocationMap/utils.ts b/src/components/Dashboard/Preview/LocationMap/utils.ts
@@ -96,8 +96,12 @@ export const getColorPalette = (colors: string[], maxCount: number): string[] =>
   if (maxCount >= colors.length) {
     return colors
   }
+  if (maxCount === 2) {
+    return [colors[0], colors[colors.length - 1]]
+  }
   const colorPalette: string[] = [colors[0]]
-  for (let i = 1; i < maxCount; i++) {
+  const inc = Math.floor(colors.length / maxCount)
+  for (let i = inc; i < colors.length; i += inc) {
     colorPalette.push(colors[i])
   }
   return colorPalette
@@ -108,7 +112,7 @@ export const getColorPalette = (colors: string[], maxCount: number): string[] =>
  */
 export const colorize = (colorPalette: string[], count: number, maxCount: number): string => {
   const step = maxCount / colorPalette.length
-  const colorIndex = Math.floor(count / step)
+  const colorIndex = Math.floor((count - 0.1) / step)
   if (colorIndex >= colorPalette.length) {
     return colorPalette[colorPalette.length - 1]
   }