From ee33269cc919942829d8eadccb86aba6f717d2f3 Mon Sep 17 00:00:00 2001 From: Derek Eder Date: Tue, 22 Mar 2022 22:09:17 -0500 Subject: [PATCH 1/6] cleanup the single bar component --- src/components/singlebar.js | 60 ++++++++----------------------------- src/pages/index.js | 6 ++-- 2 files changed, 14 insertions(+), 52 deletions(-) diff --git a/src/components/singlebar.js b/src/components/singlebar.js index 3f7ec540..9a0368fe 100644 --- a/src/components/singlebar.js +++ b/src/components/singlebar.js @@ -1,50 +1,23 @@ import React from "react"; -import { - BarChart, - Bar, - XAxis, - YAxis, - LabelList, - CartesianGrid -} from "recharts"; +import { BarChart, Bar, XAxis, YAxis, LabelList, CartesianGrid } from "recharts" -const barColors = ["#685e4a", "#b7b7b7", "#d9d9d9", "#f3f3f3"]; +const getLabel=(props, label) => { return label } -function getTotal (payload) { - return payload[0].value + payload[1].value + payload[2].value + payload[3].value -} - -function calcPercent (payload, index) { - return (100 * payload[index].value.toFixed(1) / getTotal(payload)).toFixed(1) -} - -// const renderLabel = (props, text) =>{ -// const { x, y, width, height, value } = props -// return ( -// {text}: {value} -// ) -// } - -const getLabel=(props, label) => {return label} - - -//Render the stacked bar. - export default function SingleBarChart({emissions_data}) { +export default function SingleBarChart({emissions_data}) { return ( - {return label} position: "insideBottomLeft" }} /> - - getLabel(props, 'Dumps, Farms, Industrial & Other')} - position="insideTopLeft" - /> + + getLabel(props, 'Dumps, Farms, Industrial & Other')} position="insideTopLeft" /> - - getLabel(props, 'Transportation')} - position="insideTopLeft" /> + + getLabel(props, 'Transportation')} position="insideTopLeft" /> - + getLabel(props, 'Buildings')} position="insideTopLeft" /> - + getLabel(props, 'Dirty Power')} position="insideTopLeft" /> - ); + ) } \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 5db2d3ef..f3f02fea 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -49,7 +49,7 @@ const IndexPage = ({data}) => { cut climate pollution by {cutPerYearPrcnt} a year.

- +

When it comes to solving the climate crisis there's one main thing @@ -57,9 +57,7 @@ const IndexPage = ({data}) => {

-
- [stacked bar graph of emissions source] -
+

From 5a255e03d60a8d4866464b60afa5dff72cd32dac Mon Sep 17 00:00:00 2001 From: Derek Eder Date: Tue, 22 Mar 2022 22:19:40 -0500 Subject: [PATCH 2/6] linting --- src/components/singlebar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/singlebar.js b/src/components/singlebar.js index 9a0368fe..7e7d0bea 100644 --- a/src/components/singlebar.js +++ b/src/components/singlebar.js @@ -1,9 +1,9 @@ -import React from "react"; +import React from "react" import { BarChart, Bar, XAxis, YAxis, LabelList, CartesianGrid } from "recharts" const getLabel=(props, label) => { return label } -export default function SingleBarChart({emissions_data}) { +export default function SingleBarChart ({emissions_data}) { return ( getLabel(props, 'Dumps, Farms, Industrial & Other')} position="insideTopLeft" /> - + getLabel(props, 'Transportation')} position="insideTopLeft" /> From 7930553046eb3501f6eb10d94869f38963f1b0b3 Mon Sep 17 00:00:00 2001 From: Dylan Date: Wed, 23 Mar 2022 19:44:03 -0500 Subject: [PATCH 3/6] Content change to valueAccessor on label list --- src/components/singlebar.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/singlebar.js b/src/components/singlebar.js index 7e7d0bea..53cb6323 100644 --- a/src/components/singlebar.js +++ b/src/components/singlebar.js @@ -1,9 +1,15 @@ import React from "react" import { BarChart, Bar, XAxis, YAxis, LabelList, CartesianGrid } from "recharts" -const getLabel=(props, label) => { return label } +const getPct = (value, total) => { return Math.round((value/total)*100) } +const getLabel = (entry, total, field, label) => { return `${label}: ${getPct(entry[field], total)}%` } export default function SingleBarChart ({emissions_data}) { + // sum all emissions fields except year + const totalEmissions = Object.entries(emissions_data[0]) + .filter(([key,_val]) => key !== 'year') + .reduce((acc, [_key,val]) => acc + val, 0); + return ( - getLabel(props, 'Dumps, Farms, Industrial & Other')} position="insideTopLeft" /> + getLabel(entry, totalEmissions, 'dumps_farms_industrial_other', 'Dumps, Farms, Industrial & Other')} position="insideTopLeft" /> - getLabel(props, 'Transportation')} position="insideTopLeft" /> + getLabel(entry, totalEmissions, 'transportation', 'Transportation')} position="insideTopLeft" /> - getLabel(props, 'Buildings')} position="insideTopLeft" /> + getLabel(entry, totalEmissions, 'buildings', 'Buildings')} position="insideTopLeft" /> - getLabel(props, 'Dirty Power')} position="insideTopLeft" /> + getLabel(entry, totalEmissions, 'dirty_power', 'Dirty Power')} position="insideTopLeft" /> ) From 6824876108010f35c80973cf8b712d304509705b Mon Sep 17 00:00:00 2001 From: Dylan Date: Wed, 23 Mar 2022 20:02:07 -0500 Subject: [PATCH 4/6] Lint --- src/components/singlebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/singlebar.js b/src/components/singlebar.js index 53cb6323..f3fc1ee2 100644 --- a/src/components/singlebar.js +++ b/src/components/singlebar.js @@ -8,7 +8,7 @@ export default function SingleBarChart ({emissions_data}) { // sum all emissions fields except year const totalEmissions = Object.entries(emissions_data[0]) .filter(([key,_val]) => key !== 'year') - .reduce((acc, [_key,val]) => acc + val, 0); + .reduce((acc, [_key,val]) => acc + val, 0) return ( Date: Thu, 24 Mar 2022 14:48:32 -0500 Subject: [PATCH 5/6] remove YAxis from home page chart --- src/components/singlebar.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/singlebar.js b/src/components/singlebar.js index f3fc1ee2..f4b125a0 100644 --- a/src/components/singlebar.js +++ b/src/components/singlebar.js @@ -24,15 +24,6 @@ export default function SingleBarChart ({emissions_data}) { }} > - getLabel(entry, totalEmissions, 'dumps_farms_industrial_other', 'Dumps, Farms, Industrial & Other')} position="insideTopLeft" /> From 96eba172d4eec317c8dfd35a3ed45728805089eb Mon Sep 17 00:00:00 2001 From: Derek Eder Date: Thu, 24 Mar 2022 17:08:54 -0500 Subject: [PATCH 6/6] removed unused component references --- src/components/singlebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/singlebar.js b/src/components/singlebar.js index f4b125a0..42929b1f 100644 --- a/src/components/singlebar.js +++ b/src/components/singlebar.js @@ -1,5 +1,5 @@ import React from "react" -import { BarChart, Bar, XAxis, YAxis, LabelList, CartesianGrid } from "recharts" +import { BarChart, Bar, LabelList, CartesianGrid } from "recharts" const getPct = (value, total) => { return Math.round((value/total)*100) } const getLabel = (entry, total, field, label) => { return `${label}: ${getPct(entry[field], total)}%` }