Bump path-parse from 1.0.6 to 1.0.7

gatsby-browser.js

@@ -6,6 +6,7 @@ export const wrapPageElement = ({ element, props }) => {
     <GlobalStoreProvider
       initialTown={props.pageContext.townName}
       townCounts={props.pageContext.townCounts}
+      vaccinations={props.pageContext.vaccinations}
     >
       {element}
     </GlobalStoreProvider>

gatsby-node.js

@@ -17,6 +17,14 @@ const formatCaseCountNumber = n => {
   return n.replace(/[,]/gi, "")
 }
 
+const trimAndParseInt = str => {
+  try {
+    return parseInt(str.trim().replace(",", ""))
+  } catch (err) {
+    return 0
+  }
+}
+
 const parseReportDate = memoize(dateStr => {
   return parse(dateStr, "M/d/yy", new Date())
 })
@@ -297,26 +305,68 @@ exports.createPages = async ({ graphql, actions }) => {
     })
   })
 
+  const vaccinations = results.data.vaccinations.nodes.reduce(
+    (final, current) => {
+      const {
+        town,
+        ageGroup,
+        population,
+        fullyVaccinated,
+        partiallyVaccinated,
+      } = current
+
+      if (town === "Town") return final
+
+      let color = "black"
+      try {
+        color = allNormalized[town].color
+      } catch (err) {}
+
+      final[town] = final[town] || {
+        townName: town,
+        color: color,
+        totalEligible: 0,
+        totalFullyVaccinated: 0,
+        totalPartiallyVaccinated: 0,
+      }
+
+      if (ageGroup !== "Total") {
+        final[town].totalEligible =
+          final[town].totalEligible + trimAndParseInt(population)
+        final[town].totalFullyVaccinated =
+          final[town].totalFullyVaccinated + trimAndParseInt(fullyVaccinated)
+        final[town].totalPartiallyVaccinated =
+          final[town].totalPartiallyVaccinated +
+          trimAndParseInt(partiallyVaccinated)
+      }
+
+      return final
+    },
+    {}
+  )
+
   const productTemplate = path.resolve(`src/templates/index.js`)
 
   createPage({
     path: `/`,
     component: productTemplate,
     context: {
       townCounts: allNormalized,
+      vaccinations,
     },
   })
 
-  //if (process.env.NODE_ENV === "production") {
-  Object.keys(populations).map(townName => {
-    createPage({
-      path: `/${slugify(townName, { lower: true })}/`,
-      component: productTemplate,
-      context: {
-        townCounts: allNormalized,
-        townName: townName,
-      },
+  if (process.env.NODE_ENV === "production") {
+    Object.keys(populations).map(townName => {
+      createPage({
+        path: `/${slugify(townName, { lower: true })}/`,
+        component: productTemplate,
+        context: {
+          townCounts: allNormalized,
+          townName: townName,
+          vaccinations,
+        },
+      })
     })
-  })
-  //}
+  }
 }

gatsby-ssr.js

@@ -6,6 +6,7 @@ export const wrapPageElement = ({ element, props }) => {
     <GlobalStoreProvider
       initialTown={props.pageContext.townName || ""}
       townCounts={props.pageContext.townCounts || []}
+      vaccinations={props.pageContext.vaccinations || []}
     >
       {element}
     </GlobalStoreProvider>

src/components/App/index.js

@@ -1,14 +1,20 @@
 import React from "react"
 import SearchBox from "../SearchBox"
 import { observer } from "mobx-react"
+import { useStore } from "../../stores/global"
 import Header from "../Header"
 import Grid from "@material-ui/core/Grid"
 import FAQ from "../FAQ"
 import loadable from "@loadable/component"
+import VaccinationTable from "../VaccinationTable"
+import Box from "@material-ui/core/Box"
+import Typography from "@material-ui/core/Typography"
 
 const Chart = loadable(() => import("../Chart"))
 
-export default observer(() => {
+export default observer(props => {
+  const { selectedTowns } = useStore()
+
   return (
     <>
       <Grid container spacing={2} style={{ padding: 20 }}>
@@ -23,6 +29,20 @@ export default observer(() => {
             {typeof window !== "undefined" && <Chart />}
           </div>
         </Grid>
+        {selectedTowns.length !== 0 && (
+          <Grid item xs={12}>
+            <Box>
+              <Typography
+                component="h3"
+                variant="h4"
+                style={{ marginBottom: "10px" }}
+              >
+                Vaccinations
+              </Typography>
+              <VaccinationTable />
+            </Box>
+          </Grid>
+        )}
         <Grid
           item
           xs={12}

src/components/VaccinationTable/index.js

@@ -0,0 +1,66 @@
+import React, { useMemo } from "react"
+import Table from "@material-ui/core/Table"
+import TableBody from "@material-ui/core/TableBody"
+import TableCell from "@material-ui/core/TableCell"
+import TableContainer from "@material-ui/core/TableContainer"
+import TableHead from "@material-ui/core/TableHead"
+import TableRow from "@material-ui/core/TableRow"
+import Paper from "@material-ui/core/Paper"
+import { observer } from "mobx-react"
+import { useStore } from "../../stores/global"
+
+export default observer(props => {
+  const { selectedTowns, vaccinations } = useStore()
+
+  const selectedTownsStr = JSON.stringify(selectedTowns)
+
+  const towns = useMemo(() => {
+    const selectedTownNames = selectedTowns.map(st => st.town)
+    return Object.values(vaccinations).filter(({ townName }) => {
+      return selectedTownNames.indexOf(townName) > -1
+    })
+  }, [selectedTownsStr, vaccinations, selectedTowns])
+
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="simple table">
+        <caption>Percentage of eligible residents who are vaccinated</caption>
+        <TableHead>
+          <TableRow>
+            <TableCell>Town</TableCell>
+            <TableCell align="center">Fully Vaccinated</TableCell>
+            <TableCell align="center">Fully & Partially Vaccinated</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {towns.map(
+            ({
+              townName,
+              color,
+              totalEligible,
+              totalFullyVaccinated,
+              totalPartiallyVaccinated,
+            }) => (
+              <TableRow key={townName} style={{ color }}>
+                <TableCell scope="row" style={{ color: "inherit" }}>
+                  {townName}
+                </TableCell>
+                <TableCell scope="row" align="center" style={{ color }}>
+                  {Math.round((totalFullyVaccinated / totalEligible) * 100)}%
+                </TableCell>
+                <TableCell align="center" style={{ color }}>
+                  {Math.round(
+                    ((totalFullyVaccinated + totalPartiallyVaccinated) /
+                      totalEligible) *
+                      100
+                  )}
+                  %
+                </TableCell>
+              </TableRow>
+            )
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+})

src/stores/global.js

@@ -67,6 +67,8 @@ class GlobalStore {
 
   dataTypes = DATA_TYPES
 
+  vaccinations = {}
+
   setTownCounts = (counts = []) => {
     this.townCounts = counts.reduce((final, current) => {
       final[current.town] = current
@@ -137,9 +139,15 @@ const initializedGlobalStore = new GlobalStore()
 
 const storeContext = React.createContext(initializedGlobalStore)
 
-export const GlobalStoreProvider = ({ initialTown, townCounts, children }) => {
+export const GlobalStoreProvider = ({
+  initialTown,
+  townCounts,
+  vaccinations,
+  children,
+}) => {
   initializedGlobalStore.availableTowns = Object.values(townCounts)
   initializedGlobalStore.townCounts = townCounts
+  initializedGlobalStore.vaccinations = vaccinations
 
   if (initialTown) {
     initializedGlobalStore.selectedTowns = [

src/templates/index.js

@@ -5,9 +5,9 @@ import App from "../components/App"
 
 const getPageDescription = town => {
   if (town) {
-    return `Track and compare COVID-19 cases in ${town} and towns throughout Massachusetts.`
+    return `Track and compare COVID-19 cases and vaccinations in ${town} and towns throughout Massachusetts.`
   } else {
-    return `Track and compare COVID-19 cases towns throughout Massachusetts.`
+    return `Track and compare COVID-19 cases and vaccinations towns throughout Massachusetts.`
   }
 }
 
@@ -17,7 +17,7 @@ const IndexPage = props => {
       <SEO
         title={`${
           props.pageContext.townName || "Home"
-        } | Track COVID-19 cases in every Massachusetts town.`}
+        } | Track COVID-19 cases and vaccinations in every Massachusetts town.`}
         description={getPageDescription(props.pageContext.townName)}
       />
       <App {...props} />

yarn.lock

@@ -10851,9 +10851,9 @@ path-key@^3.0.0, path-key@^3.1.0:
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-starts-with@^1.0.0:
   version "1.0.0"