Needs Assessment: Shelter and Storage Data Visualization

[wwwwwlwwwww]

For each region, we would like to have a bar chart (https://nivo.rocks/components/) with the shelter and storage needs. This should look pretty similar to the first chart on page 29 of our Prezi static Q3 needs assessment report: https://prezi.com/i/7qqhisc0ssfr/q3-needs-assessment-report-2022/.

You'll be working with the DANeed data available through gatsby's graphql api.

Checkout this CodeSee map of relevant files.

Checklist

• [ ] Sign the /CONTRIBUTORS.md file if this is your first contribution.
• [ ] Create the visualization component and implement it for a single region on the /src/pages/vis.tsx page.
• [ ] Implement the visualization dynamically for each region using the region page template.
• [ ] Write unit tests for the visualization component and end-to-end tests for the region pages, to ensure the visualization code works!

[JasonFritsche]

I'll take this one!

[JasonFritsche]

I may need help with creating the graphql query.

[JasonFritsche]

I've added this additional query to the {DaRegion.slug}.tsx:

    allDaNeed(
      filter: {place: {region: {id: {eq: $id}}}}
    ) {
      nodes {
        product {
          ageGender
          category
          item
          sizeStyle
          unit
        }
        need
      }
    }

This is bringing back around 200 nodes. Is that to be expected, or is my querying grabbing too much data?

The entire query looks like this:

export const query = graphql`
  query ($id: String!) {
    region: daRegion(id: { eq: $id }) {
      id
      name
      map {
        gatsbyImageData
      }
      overview
      governmentResponse
      newsUpdates {
        title
        visibleCount
        updates {
          title
          content
          date
          pinned
        }
      }
      stayInformed {
        title
        links {
          label
          url
          description
        }
      }
      subregions {
        path
        name
      }
    },
    allDaNeed(
      filter: {place: {region: {id: {eq: $id}}}}
    ) {
      nodes {
        product {
          ageGender
          category
          item
          sizeStyle
          unit
        }
        need
      }
    }
  }
`

[JasonFritsche]

@jtfairbank Thoughts on the above?

[jtfairbank]

Hey @JasonFritsche sorry for the delay. Still catching up after winter break.

There are a lot of Needs nodes so that sounds correct. The reason I've set it up this way is to make the Gatsby Graphql layer as flexible as possible to spur front-end development. If performance starts to become an issue we can look at pre-calculating derivative nodes for the graphs which contain the results they need.

[jtfairbank]

Btw I'm currently working on testing #792 which will have a lot of relevant code for this one. You might want to branch off of it instead of saga, or give me a few more days till it's merged in.

[JasonFritsche]

@jtfairbank I think waiting on you to merge in will align well with my schedule. I haven't really had the bandwidth to work on anything outside of my day job recently, but the busyness should start to taper down this week.

[jtfairbank]

@JasonFritsche #792 is merged!

[JasonFritsche]

@jtfairbank incredible job on the Needs chart!!!!

Regarding using the chart in the regions/subregions, is the screenshot below along the lines of what we're expecting to see?

[jtfairbank]

Hey @JasonFritsche just got the initial regions & needs assessments pages launched.

I kinda hacked together a link back to the needs assessment explorer for now, but we'd definitely want to upgrade that to show a variety of configurations of the static chart.I kinda hacked together I believe @wwwwwlwwwww can provide some more direction here next week.

[JasonFritsche]

@jtfairbank I believe what we want to do for each Region page is to show two tabs: Overview and Needs. Needs currently doesn't have path information being returned in Graphql. Would it be cool to create a component for Overview and a component for Needs, then show the selected component beneath the tabs based on the currently selected tab? I started going that route but wasn't sure if that's the Gatsby way to do things. Thanks!