DataMade Code Challenge Submission - Syd

map/serializers.py

@@ -31,4 +31,6 @@ def get_num_permits(self, obj):
         ]
         """
 
-        pass
+        year = self.context.get("year")
+        num_permits = RestaurantPermit.objects.filter(community_area_id=str(obj.area_id), issue_date__year=year).count()
+        return num_permits

map/static/js/RestaurantPermitMap.js

@@ -45,47 +45,75 @@ export default function RestaurantPermitMap() {
   const yearlyDataEndpoint = `/map-data/?year=${year}`
 
   useEffect(() => {
-    fetch()
+    fetch(yearlyDataEndpoint)
       .then((res) => res.json())
       .then((data) => {
-        /**
-         * TODO: Fetch the data needed to supply to map with data
-         */
+        setCurrentYearData(data)
       })
   }, [yearlyDataEndpoint])
 
 
+  const totalPermits = currentYearData.reduce(
+    (sum, area) => sum + area.num_permits,
+    0
+  )
+
+  const maxNumPermits = Math.max(
+    ...currentYearData.map((area) => area.num_permits),
+    0
+  )
+
   function getColor(percentageOfPermits) {
-    /**
-     * TODO: Use this function in setAreaInteraction to set a community 
-     * area's color using the communityAreaColors constant above
-     */
+
+    if (percentageOfPermits > 0.75) return communityAreaColors[3]
+    if (percentageOfPermits > 0.5) return communityAreaColors[2]
+    if (percentageOfPermits > 0.25) return communityAreaColors[1]
+    return communityAreaColors[0]
   }
 
   function setAreaInteraction(feature, layer) {
-    /**
-     * TODO: Use the methods below to:
-     * 1) Shade each community area according to what percentage of 
-     * permits were issued there in the selected year
-     * 2) On hover, display a popup with the community area's raw 
-     * permit count for the year
-     */
-    layer.setStyle()
-    layer.on("", () => {
-      layer.bindPopup("")
+
+    const areaName = feature.properties.community
+    const areaData = currentYearData.find((area) => area.name === areaName)
+    const numPermits = areaData ? areaData.num_permits : 0
+
+    // scaled by maxNumPermits instead of totalPermits to better differentiate between areas when total permits is very high
+    const percentageOfPermits = maxNumPermits > 0 ? numPermits / maxNumPermits : 0
+
+    layer.setStyle({
+      fillColor: getColor(percentageOfPermits),
+      fillOpacity: percentageOfPermits === 0 ? 0 : 0.7,
+      weight: 1,
+      color: communityAreaColors[3],
+    })
+    layer.bindPopup(
+        // permit with pluralization
+        `<b>${areaName}</b> <p>${numPermits} permit${numPermits === 1 ? "" : "s"} issued in ${year}</p>`
+    )
+    layer.on("mouseover", () => {
+      layer.setStyle({
+        fillOpacity: percentageOfPermits === 0 ? 0 : 0.9,
+        weight: 2,
+      })
       layer.openPopup()
     })
+    layer.on("mouseout", () => {
+      layer.setStyle({
+        fillOpacity: percentageOfPermits === 0 ? 0 : 0.7,
+        weight: 1,
+      })
+      layer.closePopup()
+    })
   }
 
   return (
     <>
       <YearSelect filterVal={year} setFilterVal={setYear} />
       <p className="fs-4">
-        Restaurant permits issued this year: {/* TODO: display this value */}
+        Restaurant permits issued this year: {totalPermits}
       </p>
       <p className="fs-4">
-        Maximum number of restaurant permits in a single area:
-        {/* TODO: display this value */}
+        Maximum number of restaurant permits in a single area:  {maxNumPermits}
       </p>
       <MapContainer
         id="restaurant-map"

tests/test_views.py

@@ -1,3 +1,5 @@
+from urllib import response
+
 import pytest
 from datetime import date
 
@@ -21,6 +23,11 @@ def test_map_data_view():
         community_area_id=area1.area_id, issue_date=date(2021, 2, 20)
     )
 
+    #non-2021 permit for Beverly
+    RestaurantPermit.objects.create(
+        community_area_id=area1.area_id, issue_date=date(2020, 2, 20)
+    )
+
     # Test permits for Lincoln Park
     RestaurantPermit.objects.create(
         community_area_id=area2.area_id, issue_date=date(2021, 3, 10)
@@ -39,3 +46,13 @@ def test_map_data_view():
     # TODO: Complete the test by asserting that the /map-data/ endpoint
     # returns the correct number of permits for Beverly and Lincoln 
     # Park in 2021
+
+    assert response.status_code == 200
+    data = response.json()
+
+    expected_response = [
+        {"name": "Beverly", "num_permits": 2},
+        {"name": "Lincoln Park", "num_permits": 3},
+    ]
+
+    assert response.json() == expected_response