cleanup the single bar component

[derekeder]

Overview

Small PR to clean up the code from #36 and place it in the proper place on the home page

Closes #18

Demo

Testing Instructions

• confirm the single stacked bar chart renders as expected on the home page

[netlify]

✅ Deploy Preview for state-decarbonize ready!

Name	Link
🔨 Latest commit	96eba17
🔍 Latest deploy log	https://app.netlify.com/sites/state-decarbonize/deploys/623cebff2598a300098f5749
😎 Deploy Preview	https://deploy-preview-39--state-decarbonize.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nofurtherinformation]

Hey @derekeder, was just taking a look at this out of curiosity, one more peculiarity of the content property on LabelList is that it exposes the additive y axis value for each stacked bar, not the source data value value (so, buildings appears as to represent ~57%, since that is its total accumulated amount in the stack, but not individual percent).

valueAccessor exposes the actual data value though, so something like the below works -- what do you think? Happy to push on this PR if ok!

// helpers

const getPct = (value, total) => { return Math.round((value/total)*100) }
const getLabel = (
  entry, 
  total, 
  field, 
  label
) => { 
  return `${label}: ${getPct(entry[field], total)}%` 
}

function SingleBarChart ({emissions_data}) {
  // sum all emissions fields except year
  const totalEmissions = Object.entries(emissions_data[0])
    .filter((key) => key !== 'year')
    .reduce((acc, curr) => acc + curr[1], 0);
  // ... some lines later
  <Bar dataKey="dumps_farms_industrial_other" stackId="a" fill="#98886c">
          <LabelList 
            valueAccessor={entry => getLabel(
              entry, 
              totalEmissions, 
              'dumps_farms_industrial_other', 
              'Dumps, Farms, Industrial & Other'
            )} 
            position="insideTopLeft" 
            /> 
  </Bar>
}

Looks like:

[derekeder]

@nofurtherinformation nice! one question for the bar in your screenshot, why do the totals add up to less than 100%? (20 + 7 + 23 + 28 = 78%)

[nofurtherinformation]

🤦‍♀️ My bad on that one, the filter statement wasn’t destructuring the keys properly, so wasn’t removing the year data. Will push a commit here once I’m back home

…

Sent from my iPhone

On Mar 23, 2022, at 5:03 PM, Derek Eder ***@***.***> wrote:  @nofurtherinformation nice! one question for the bar in your screenshot, why do the totals add up to less than 100%? (20 + 7 + 23 + 28 = 78%) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[vkoves]

@derekeder - this look solid but I don't think it actually closes #17, since that also includes a drawdown graph showing emissions going down to 0. I think this does close Issue #29.

Also could we move the axis closer to the actual data? It's really hard to read in my mind since it's so far away. However, if the specific Gigatonne values don't matter (which I am open to, since it's basically for showing percentages), we could just drop the axis and the label.

[derekeder]

@nofurtherinformation nice - this looks correct now. Thanks for the assist

@vkoves I agree the YAxis is a bit far away. It doesn't give us much value so I removed it. Also updated the issue description so it closes #18, which was mistakenly closed from the previous PR #36.

This is ready for another look

[vkoves]

Awesome work! There's a few unused variables and imports GitHub is pointing out, but I don't think that's a blocker - I'd rather get this merged so I can integrate it on the state details page and start figuring out how to highlight individual sections as green.

[derekeder]

@vkoves cool. I removed those references. Once it builds I'll bring this in.