@/climatemappedafrica Hero page map colour codes

apps/climatemappedafrica/src/components/Hero/Hero.js

@@ -4,6 +4,8 @@ import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 
+import Legend from "./Legend";
+
 import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg";
 import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
 import Image from "@/climatemappedafrica/components/Image";
@@ -23,6 +25,8 @@ function Hero({
   properties,
   level,
   explorePageSlug,
+  averageTemperature,
+  legend,
   ...props
 }) {
   const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
@@ -99,45 +103,44 @@ function Hero({
             </RichTypography>
           </Grid>
           {/* Since map is dynamic-ally loaded, no need for implementation="css" */}
-          <Box
-            sx={{
-              display: {
-                xs: "none",
-                md: "block",
-              },
-            }}
-          >
-            <Grid item md={5}>
-              {center ? (
-                <Map
-                  center={[center[1], center[0]]}
-                  zoom={zoom}
-                  tileLayer={{
-                    url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
-                  }}
-                  onLayerMouseOver={setHoverGeo}
-                  featuredLocations={featuredLocations}
-                  explorePageSlug={explorePageSlug}
-                  {...props}
-                />
-              ) : null}
-              <Box sx={{ height: 80 }}>
-                <RichTypography
-                  variant="h6"
-                  sx={{
-                    lineHeight: 23 / 18,
-                    lineSpacing: "0.9px",
-                    fontWeight: "normal",
-                    textTransform: "capitalize",
-                    display: "flex",
-                    justifyContent: "flex-end",
-                  }}
-                >
-                  {hoverGeo}
-                </RichTypography>
-              </Box>
-            </Grid>
-          </Box>
+
+          <Grid item md={6} xs={12} justifyContent="flex-end">
+            {center ? (
+              <Map
+                center={[center[1], center[0]]}
+                zoom={zoom}
+                tileLayer={{
+                  url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
+                }}
+                onLayerMouseOver={setHoverGeo}
+                featuredLocations={featuredLocations}
+                explorePageSlug={explorePageSlug}
+                {...props}
+              />
+            ) : null}
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              gap={2}
+              sx={{ height: 80, width: "100%" }}
+            >
+              <Legend title={averageTemperature} data={legend} />
+              <RichTypography
+                variant="h6"
+                sx={{
+                  lineHeight: 23 / 18,
+                  lineSpacing: "0.9px",
+                  fontWeight: "normal",
+                  textTransform: "capitalize",
+                  display: "flex",
+                  justifyContent: "flex-end",
+                }}
+              >
+                {hoverGeo}
+              </RichTypography>
+            </Box>
+          </Grid>
         </Grid>
       </Section>
     </Box>
@@ -154,6 +157,7 @@ Hero.propTypes = {
   properties: PropTypes.shape({}),
   level: PropTypes.string,
   explorePageSlug: PropTypes.string,
+  averageTemperature: PropTypes.string,
 };
 
 export default Hero;

apps/climatemappedafrica/src/components/Hero/Hero.snap.js

@@ -90,14 +90,40 @@ exports[`<Hero /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiBox-root css-h9r63z"
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
         >
           <div
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-5 css-1f9gci5-MuiGrid-root"
+            class="MuiBox-root css-ljsg2c"
           >
             <div
-              class="MuiBox-root css-4tnojn"
-            />
+              class="MuiBox-root css-0"
+            >
+              <div
+                class="MuiBox-root css-70qvj9"
+              >
+                <div
+                  class="MuiBox-root css-1wok3bd"
+                />
+                <div
+                  class="MuiBox-root css-1fg12k3"
+                />
+                <div
+                  class="MuiBox-root css-55biq3"
+                />
+                <div
+                  class="MuiBox-root css-9qafv7"
+                />
+                <div
+                  class="MuiBox-root css-5srxm6"
+                />
+                <div
+                  class="MuiBox-root css-1kw6r8l"
+                />
+                <div
+                  class="MuiBox-root css-oi5eih"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>

apps/climatemappedafrica/src/components/Hero/Hero.test.js

@@ -48,6 +48,15 @@ const defaultProps = {
   },
   variant: "explore",
   icon: null,
+  legend: [
+    { min: 10, max: 13, color: "#021AFE" },
+    { min: 13, max: 16, color: "#5455FF" },
+    { min: 16, max: 19, color: "#928EFD" },
+    { min: 19, max: 22, color: "#B494DF" },
+    { min: 22, max: 25, color: "#FA9B9B" },
+    { min: 25, max: 28, color: "#F96264" },
+    { min: 28, max: 31, color: "#F80701" },
+  ],
 };
 
 describe("<Hero />", () => {

apps/climatemappedafrica/src/components/Hero/Legend.js

@@ -0,0 +1,59 @@
+import { RichTypography } from "@commons-ui/legacy";
+import { Box } from "@mui/material";
+import PropTypes from "prop-types";
+import React, { useState, forwardRef } from "react";
+
+const Legend = forwardRef(function Legend({ data, title }, ref) {
+  const [hoveredValue, setHoveredValue] = useState(null);
+
+  const handleMouseEnter = (value) => {
+    setHoveredValue(value);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredValue(null);
+  };
+
+  return (
+    <Box>
+      <RichTypography variant="caption" sx={{ fontWeight: "bold", mb: 1 }}>
+        {title}
+      </RichTypography>
+      <Box ref={ref} display="flex" alignItems="center">
+        {data.map((item) => (
+          <Box
+            key={`${item.min} - ${item.max}`}
+            onMouseEnter={() => handleMouseEnter(`${item.min} - ${item.max}`)}
+            onMouseLeave={handleMouseLeave}
+            sx={{
+              backgroundColor: item.color,
+              height: 24,
+              minWidth: 24,
+              cursor: "pointer",
+            }}
+          />
+        ))}
+        {hoveredValue && (
+          <RichTypography
+            variant="caption"
+            sx={{ marginLeft: 2, whiteSpace: "nowrap" }}
+          >
+            {hoveredValue}
+          </RichTypography>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+Legend.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      min: PropTypes.number.isRequired,
+      max: PropTypes.number.isRequired,
+      color: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};
+
+export default Legend;

apps/climatemappedafrica/src/components/Hero/Map.js

@@ -17,44 +17,41 @@ function Map({
   geoJSONStyles = {
     color: "#2A2A2C",
     weight: 1,
-    opacity: 1,
     dashArray: "2",
   },
   onLayerMouseOver,
   featuredLocations,
   explorePageSlug,
+  choropleth,
 }) {
   const router = useRouter();
 
-  const countyCodes = featuredLocations?.map(({ code }) => code);
-
+  const regionCodes = featuredLocations?.map(({ code }) => code);
   const theme = useTheme();
   const onEachFeature = (feature, layer) => {
+    const choroplethColor = choropleth?.find?.(
+      (c) => c.code.toLowerCase() === feature.properties.code.toLowerCase(),
+    );
     layer.setStyle({
       fillColor: theme.palette.background.default,
+      ...choroplethColor,
       fillOpacity: 1,
     });
 
-    if (countyCodes.includes(feature.properties.code?.toLowerCase())) {
-      layer.setStyle({
-        weight: 1.5,
-        dashArray: 0,
-      });
+    if (regionCodes.includes(feature.properties.code?.toLowerCase())) {
+      layer.setStyle(geoJSONStyles);
       layer.on("mouseover", () => {
         onLayerMouseOver(feature.properties.name.toLowerCase());
         if (explorePageSlug) {
           layer.setStyle({
-            fillColor: theme.palette.primary.main,
-            fillOpacity: 0.5,
+            fillColor: choroplethColor?.fillColor,
+            fillOpacity: 0.4,
           });
         }
       });
       layer.on("mouseout", () => {
         onLayerMouseOver(null);
-        layer.setStyle({
-          fillOpacity: 1,
-          fillColor: theme.palette.background.default,
-        });
+        layer.setStyle({ ...choroplethColor, fillOpacity: 1, weight: 1 });
       });
       layer.on("click", () => {
         if (explorePageSlug) {
@@ -67,36 +64,38 @@ function Map({
   };
 
   return (
-    <Box
-      sx={{
-        position: "relative",
-        height: { sm: "350px", lg: "471px" },
-        width: { sm: "300px", lg: "500px" },
-        marginTop: { sm: "55px", lg: "42px" },
-        "& .leaflet-container": {
-          background: "transparent",
-        },
-      }}
-    >
-      <MapContainer
-        center={center}
-        zoom={zoom}
-        boxZoom={false}
-        dragging={false}
-        doubleClickZoom={false}
-        zoomControl={false}
-        scrollWheelZoom={false}
-        touchZoom={false}
-        trackResize={false}
-        zoomSnap={0.25}
-        style={styles}
+    <Box display="flex" justifyContent={{ xs: "center", md: "flex-end" }}>
+      <Box
+        sx={{
+          position: "relative",
+          height: "471px",
+          width: { xs: "100%", md: "300px", lg: "500px" },
+          marginTop: { sm: "55px", lg: "42px" },
+          "& .leaflet-container": {
+            background: "transparent",
+          },
+        }}
       >
-        <GeoJSON
-          data={boundary}
-          style={geoJSONStyles}
-          onEachFeature={onEachFeature}
-        />
-      </MapContainer>
+        <MapContainer
+          center={center}
+          zoom={zoom}
+          boxZoom={false}
+          dragging={false}
+          doubleClickZoom={false}
+          zoomControl={false}
+          scrollWheelZoom={false}
+          touchZoom={false}
+          trackResize={false}
+          zoomSnap={0.25}
+          style={styles}
+        >
+          <GeoJSON
+            data={boundary}
+            style={geoJSONStyles}
+            onEachFeature={onEachFeature}
+          />
+        </MapContainer>
+      </Box>
     </Box>
   );
 }

apps/climatemappedafrica/src/lib/data/blockify/hero.js

@@ -1,3 +1,5 @@
+import { generateChoropleth } from "@hurumap/next";
+
 import {
   fetchProfile,
   fetchProfileGeography,
@@ -12,6 +14,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
   const {
     profilePage,
     rootGeography: { center, code, hasData: pinRootGeography },
+    profile: hurumapProfile,
   } = hurumap ?? { rootGeography: {} };
   const { geometries } = await fetchProfileGeography(code.toLowerCase());
   const { level } = geometries.boundary?.properties ?? {};
@@ -21,6 +24,12 @@ export default async function hero(block, _api, _context, { hurumap }) {
   };
   const childLevel = childLevelMaps[level];
   const { locations, preferredChildren } = await fetchProfile();
+  const chloropleth = hurumapProfile?.choropleth ?? null;
+  const { choropleth, legend } = generateChoropleth(
+    chloropleth,
+    locations,
+    "choropleth",
+  );
   const preferredChildrenPerLevel = preferredChildren[level];
   const { children } = geometries;
   const preferredLevel =
@@ -40,5 +49,7 @@ export default async function hero(block, _api, _context, { hurumap }) {
     pinRootGeography,
     properties: geometries.boundary?.properties,
     slug: "hero",
+    choropleth,
+    legend,
   };
 }