diff --git a/plugins/polio/js/src/domains/Calendar/campaignCalendar/Styles.ts b/plugins/polio/js/src/domains/Calendar/campaignCalendar/Styles.ts index b8b21c107e..a6022e8f60 100644 --- 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 index c9b196d6d1..cf1da62c2d 100644 --- 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 = ({ 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 = ({ 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 = ({ []; campaigns: MappedCampaign[]; }; - +const ScopeHashedPattern = () => ( + +); export const CalendarMapContainer: FunctionComponent = ({ campaignsShapes, mergedShapes, @@ -75,18 +84,27 @@ export const CalendarMapContainer: FunctionComponent = ({ - {zoom > 6 && ( - - )} - {zoom <= 6 && ( - - )} + + + <> + {zoom > 6 && ( + + )} + {zoom <= 6 && ( + + )} + + ); }; diff --git a/plugins/polio/js/src/domains/Calendar/campaignCalendar/map/VaccinesLegend.tsx b/plugins/polio/js/src/domains/Calendar/campaignCalendar/map/VaccinesLegend.tsx index f1797ac721..847332745c 100644 --- 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 = () => {