Show Progress Needed This Year On Graphs To Provide More Context

[SuragNuthulapaty]

Overview

Updates the progress bars to look less gloomy and give an indicator on how much progress is needed in the next year Closes #169

Demo

Testing Instructions

go to any state page and check each of the progress indicators

[netlify[bot]]

✅ Deploy Preview for decarb-my-state ready!

Name	Link
🔨 Latest commit	146e6be381f2e0041f31878cabde8f41b5bb4e42
🔍 Latest deploy log	https://app.netlify.com/sites/decarb-my-state/deploys/63ed9887d0a6b200075c4fa9
😎 Deploy Preview	https://deploy-preview-181--decarb-my-state.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.

[vkoves]

@SuragNuthulapaty - the new section is missing on the power section, can you add it to that?

I also think two slight CSS tweaks make this look better:

fill: #6c757d;
font-size: 0.75rem;

This increases a font a touch to 12px, which is a good minimum text size, but lightens the text.

[derekeder]

I think this is moving in a good direction, but the addition of a third color makes this bar chart a bit harder to parse. We need to label each section somehow. The note under the bar is not enough. A few ideas:

• use recharts to render it as a single bar chart and enable hover/tap functionality to show values and labels. Here's an example of what I'm thinking: https://recharts.org/en-US/examples/SimpleBarChart
• similar to how we show the black reference lines on the about page for the electrification chart, we could show them below this chart as well

[vkoves]

Subtle, but the MWs graph is getting cut off at the top:

[vkoves]

@SuragNuthulapaty - sorry, I also noticed the colors of the graphs are different 😆

Maybe we really should move those into one component, but I'll leave that up to you if you want to take that on.

There's also no right label on that graph but maybe you and @derekeder discussed not needing that for the power graph 🤷🏻‍♂️

[derekeder]

I agree we could use some consistency here. It might look better to not have the right label shown at all.

Moving everything into a single component will probably make these changes easier, but up to you @SuragNuthulapaty

[SuragNuthulapaty]

Sounds good, I’ll move both charts into one component

[SuragNuthulapaty]

@derekeder I combined the graphs, if you want to take a look at this now