Revert "Remove code blocks for challenge"

This reverts commit 7e088b8.

Author: msj

map/serializers.py

@@ -11,24 +11,8 @@ class Meta:
     num_permits = serializers.SerializerMethodField()
 
     def get_num_permits(self, obj):
-        """
-        TODO: supplement each community area object with the number
-        of permits issued in the given year.
+        year = self.context.get("year", 2026)
 
-        e.g. The endpoint /map-data/?year=2017 should return something like:
-        [
-            {
-                "ROGERS PARK": {
-                    area_id: 17,
-                    num_permits: 2
-                },
-                "BEVERLY": {
-                    area_id: 72,
-                    num_permits: 2
-                },
-                ...
-            }
-        ]
-        """
-
-        pass
+        return RestaurantPermit.objects.filter(
+            community_area_id=str(obj.area_id), issue_date__year=year
+        ).count()

map/static/js/RestaurantPermitMap.js

@@ -40,27 +40,37 @@ export default function RestaurantPermitMap() {
   const [currentYearData, setCurrentYearData] = useState([])
   const [year, setYear] = useState(2026)
 
-  const yearlyDataEndpoint = `/map-data/?year=${year}`
+  const currentUrl = `/map-data/?year=${year}`
 
+  const totalPermits = currentYearData.reduce(
+    (acc, curr) => acc + curr.num_permits,
+    0
+  )
+  const maxNumPermits = Math.max(...currentYearData.map((c) => c.num_permits))
+
+  const communityAreaDict = Object.fromEntries(
+    currentYearData.map((d) => [d.name, d])
+  )
+
+  // Get values for community areas
   useEffect(() => {
-    fetch()
+    fetch(currentUrl)
       .then((res) => res.json())
-      .then((data) => {
-        /**
-         * TODO: Fetch the data needed to supply to map with data
-         */
-      })
-  }, [yearlyDataEndpoint])
+      .then((data) => setCurrentYearData(data))
+  }, [currentUrl])
 
   function setAreaInteraction(feature, layer) {
-    /**
-     * TODO: use the methods below to:
-     * 1) shade each area according to how many permits it had in a year
-     * 2) display a popup with area details during user interaction
-     */
-    layer.setStyle()
-    layer.on("", () => {
-      layer.bindPopup("")
+    const thisAreaData = communityAreaDict[feature.properties.community],
+      numPermits = thisAreaData.num_permits,
+      pcntPermits = numPermits / maxNumPermits
+    layer.setStyle({
+      fillOpacity: pcntPermits,
+    })
+    layer.on("mouseover", () => {
+      layer.bindPopup(`
+        <h3>${feature.properties.community}</h3>
+        <p>Restaurant permits issued during ${year}: ${thisAreaData.num_permits}</p>
+      `)
       layer.openPopup()
     })
   }
@@ -69,11 +79,11 @@ export default function RestaurantPermitMap() {
     <>
       <YearSelect filterVal={year} setFilterVal={setYear} />
       <p className="fs-4">
-        Restaurant permits issued this year: {/* TODO: display this value */}
+        Restaurant permits issued this year: {totalPermits || "0"}
       </p>
       <p className="fs-4">
         Maximum number of restaurant permits in a single area:
-        {/* TODO: display this value */}
+        {" " + (maxNumPermits || "0")}
       </p>
       <MapContainer
         id="restaurant-map"