add hashed color to calendar

BLSQ · Dec 18, 2024 · f6fa717 · f6fa717
1 parent a59454b
commit f6fa717
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 22 deletions.
diff --git a/plugins/polio/js/src/domains/Calendar/campaignCalendar/Styles.ts b/plugins/polio/js/src/domains/Calendar/campaignCalendar/Styles.ts
@@ -167,7 +167,7 @@ export const useStyles = makeStyles(theme => {
             right: theme.spacing(2),
         },
         mapLegendVaccine: {
-            width: 100,
+            width: 150,
             marginTop: theme.spacing(2),
         },
         mapLegendCampaigns: {

diff --git a/plugins/polio/js/src/domains/Calendar/campaignCalendar/cells/RoundCell.tsx b/plugins/polio/js/src/domains/Calendar/campaignCalendar/cells/RoundCell.tsx
@@ -45,9 +45,10 @@ export const RoundCell: FunctionComponent<Props> = ({
         if (!hasScope(campaign)) {
             return DEFAULT_CELL_COLOR;
         }
-        const vaccineColor = polioVaccines.find(
+        const vaccineConfig = polioVaccines.find(
             polioVaccine => polioVaccine.value === vaccine,
-        )?.color;
+        );
+        const vaccineColor = vaccineConfig?.legendColor || vaccineConfig?.color;
         return vaccineColor || OTHER_VACCINE_COLOR;
     };
     const handleClick = useCallback(
@@ -74,8 +75,8 @@ export const RoundCell: FunctionComponent<Props> = ({
     const isLogged = useIsLoggedIn();
     const vaccinesList = useMemo(() => {
         const list = campaign.separateScopesPerRound
-            ? round.vaccine_names?.split(',') ?? []
-            : campaign.original.vaccines?.split(',') ?? [];
+            ? (round.vaccine_names?.split(',') ?? [])
+            : (campaign.original.vaccines?.split(',') ?? []);
         return list.map((vaccineName: string) => vaccineName.trim());
     }, [
         campaign.original.vaccines,
@@ -97,7 +98,7 @@ export const RoundCell: FunctionComponent<Props> = ({
                     <span
                         key={`${campaign.id}-${round.number}-${vaccine}`}
                         style={{
-                            backgroundColor: getCellColor(vaccine),
+                            background: getCellColor(vaccine),
                             opacity: vaccineOpacity,
                             display: 'block',
                             height: `${100 / vaccinesList.length}%`,

diff --git a/plugins/polio/js/src/domains/Calendar/campaignCalendar/map/CalendarMapContainer.tsx b/plugins/polio/js/src/domains/Calendar/campaignCalendar/map/CalendarMapContainer.tsx
@@ -21,7 +21,10 @@ import { CampaignsLegend } from './CampaignsLegend';
 import { VaccinesLegend } from './VaccinesLegend';
 import { boundariesZoomLimit } from './constants';
 
+import { ColorsHashedPattern } from '../../../../../../../../hat/assets/js/apps/Iaso/components/maps/HashedPatterns/ColorsHashedPattern';
+import { PaneWithPattern } from '../../../../../../../../hat/assets/js/apps/Iaso/components/maps/PaneWithPattern/PaneWithPattern';
 import { DropdownOptions } from '../../../../../../../../hat/assets/js/apps/Iaso/types/utils';
+import { HASHED_MAP_PATTERN_N_OPV2_B_OPV } from '../../../../constants/virus';
 import { MapRoundSelector } from './MapRoundSelector';
 
 type Props = {
@@ -35,7 +38,13 @@ type Props = {
     options: DropdownOptions<string>[];
     campaigns: MappedCampaign[];
 };
-
+const ScopeHashedPattern = () => (
+    <ColorsHashedPattern
+        id={HASHED_MAP_PATTERN_N_OPV2_B_OPV}
+        strokeColor="#00b0f0"
+        fillColor="#ffff00"
+    />
+);
 export const CalendarMapContainer: FunctionComponent<Props> = ({
     campaignsShapes,
     mergedShapes,
@@ -75,18 +84,27 @@ export const CalendarMapContainer: FunctionComponent<Props> = ({
                     <VaccinesLegend />
                 </Box>
             </div>
-            {zoom > 6 && (
-                <CalendarMapPanesRegular
-                    campaignsShapes={campaignsShapes}
-                    zoom={zoom}
-                />
-            )}
-            {zoom <= 6 && (
-                <CalendarMapPanesMerged
-                    mergedShapes={mergedShapes}
-                    zoom={zoom}
-                />
-            )}
+
+            <PaneWithPattern
+                name="CalendarMap"
+                patterns={[ScopeHashedPattern]}
+                patternIds={[HASHED_MAP_PATTERN_N_OPV2_B_OPV]}
+            >
+                <>
+                    {zoom > 6 && (
+                        <CalendarMapPanesRegular
+                            campaignsShapes={campaignsShapes}
+                            zoom={zoom}
+                        />
+                    )}
+                    {zoom <= 6 && (
+                        <CalendarMapPanesMerged
+                            mergedShapes={mergedShapes}
+                            zoom={zoom}
+                        />
+                    )}
+                </>
+            </PaneWithPattern>
         </>
     );
 };
diff --git a/plugins/polio/js/src/domains/Calendar/campaignCalendar/map/VaccinesLegend.tsx b/plugins/polio/js/src/domains/Calendar/campaignCalendar/map/VaccinesLegend.tsx
@@ -27,18 +27,22 @@ export const VaccinesLegend: FunctionComponent = () => {
                         <Grid container spacing={1}>
                             <Grid
                                 item
-                                sm={6}
+                                sm={4}
                                 container
                                 justifyContent="flex-start"
                             >
                                 <span
                                     className={classes.roundColor}
-                                    style={{ backgroundColor: vaccine.color }}
+                                    style={{
+                                        background:
+                                            vaccine.legendColor ||
+                                            vaccine.color,
+                                    }}
                                 />
                             </Grid>
                             <Grid
                                 item
-                                sm={6}
+                                sm={8}
                                 container
                                 justifyContent="flex-end"
                                 alignItems="center"