Skip to content

Commit

Permalink
Add source and aggregation methodology in the ket insihgts
Browse files Browse the repository at this point in the history
  • Loading branch information
@mustafasaifee42
mustafasaifee42 committed Feb 15, 2024
1 parent 9a23cf3 commit e0a0d18
Show file tree
Hide file tree
Showing 8 changed files with 477 additions and 87 deletions.
33 changes: 16 additions & 17 deletions src/GrapherComponent/Settings/BarGraphSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useContext, useEffect, useState } from 'react';
import { Select, Checkbox } from 'antd';
import { Checkbox, Radio } from 'antd';
import {
ChevronDownCircle,
ChevronRightCircle,
Expand Down Expand Up @@ -48,11 +48,7 @@ export function BarGraphSettings(props: Props) {
} = useContext(Context) as CtxDataType;
const barGraphIndicators = indicators.filter(d => !d.IsCategorical);
const options = barGraphIndicators.map(d => d.DataKey);
const colorOptions = indicators
.filter(d => d.IsCategorical)
.map(d => d.DataKey);
colorOptions.unshift('Income Groups');
colorOptions.unshift('Continents');
const colorOptions = ['Continents', 'Income Groups'];
const [settingsExpanded, setSettingsExpanded] = useState(true);
useEffect(() => {
if (options.findIndex(d => d === xAxisIndicator) === -1) {
Expand Down Expand Up @@ -80,41 +76,44 @@ export function BarGraphSettings(props: Props) {
{selectedCountryOrRegion ? null : (
<div className='settings-option-div'>
<p className='label'>Color By</p>
<Select
className='undp-select'
showSearch
maxTagCount='responsive'
<Radio.Group
className='undp-radio'
value={colorIndicator}
style={{ width: '100%' }}
placeholder='Color By'
onChange={d => {
const indx = indicators.findIndex(
indicator => indicator.IndicatorLabel === d,
indicator => indicator.IndicatorLabel === d.target.value,
);
updateColorIndicator(
indx === -1 ? d : indicators[indx].DataKey,
indx === -1 ? d.target.value : indicators[indx].DataKey,
);
}}
defaultValue='Continent'
>
{colorOptions.map(d => (
<Select.Option
className='undp-select-option'
<Radio
key={
indicators.findIndex(el => el.DataKey === d) === -1
? d
: indicators[
indicators.findIndex(el => el.DataKey === d)
].IndicatorLabel
}
value={
indicators.findIndex(el => el.DataKey === d) === -1
? d
: indicators[
indicators.findIndex(el => el.DataKey === d)
].IndicatorLabel
}
>
{indicators.findIndex(el => el.DataKey === d) === -1
? d
: indicators[indicators.findIndex(el => el.DataKey === d)]
.IndicatorLabel}
</Select.Option>
</Radio>
))}
</Select>
</Radio.Group>
</div>
)}
</div>
Expand Down
33 changes: 16 additions & 17 deletions src/GrapherComponent/Settings/ScatterPlotSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useContext, useEffect, useState } from 'react';
import { Select, Checkbox } from 'antd';
import { Checkbox, Radio } from 'antd';
import {
ChevronDownCircle,
ChevronRightCircle,
Expand Down Expand Up @@ -51,11 +51,7 @@ export function ScatterPlotSettings(props: Props) {
const scatterPlotIndicators = indicators.filter(d => !d.IsCategorical);
const sizeIndicators = indicators.filter(d => d.Sizing);
const options = scatterPlotIndicators.map(d => d.DataKey);
const colorOptions = indicators
.filter(d => d.IsCategorical)
.map(d => d.DataKey);
colorOptions.unshift('Income Groups');
colorOptions.unshift('Continents');
const colorOptions = ['Continents', 'Income Groups'];
const [settingsExpanded, setSettingsExpanded] = useState(true);
useEffect(() => {
if (options.findIndex(d => d === xAxisIndicator) === -1) {
Expand Down Expand Up @@ -118,41 +114,44 @@ export function ScatterPlotSettings(props: Props) {
{selectedCountryOrRegion ? null : (
<div className='settings-option-div'>
<p className='label'>Color By</p>
<Select
className='undp-select'
showSearch
<Radio.Group
className='undp-radio'
value={colorIndicator}
maxTagCount='responsive'
style={{ width: '100%' }}
placeholder='Color By'
onChange={d => {
const indx = indicators.findIndex(
indicator => indicator.IndicatorLabel === d,
indicator => indicator.IndicatorLabel === d.target.value,
);
updateColorIndicator(
indx === -1 ? d : indicators[indx].DataKey,
indx === -1 ? d.target.value : indicators[indx].DataKey,
);
}}
defaultValue='Continent'
>
{colorOptions.map(d => (
<Select.Option
className='undp-select-option'
<Radio
key={
indicators.findIndex(el => el.DataKey === d) === -1
? d
: indicators[
indicators.findIndex(el => el.DataKey === d)
].IndicatorLabel
}
value={
indicators.findIndex(el => el.DataKey === d) === -1
? d
: indicators[
indicators.findIndex(el => el.DataKey === d)
].IndicatorLabel
}
>
{indicators.findIndex(el => el.DataKey === d) === -1
? d
: indicators[indicators.findIndex(el => el.DataKey === d)]
.IndicatorLabel}
</Select.Option>
</Radio>
))}
</Select>
</Radio.Group>
</div>
)}
</div>
Expand Down
84 changes: 84 additions & 0 deletions src/KeyInsights/EnergyKeyInsights.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,34 @@ export function EnergyKeyInsights() {
However, achieving full electrification by 2030 requires an
annual rate of growth in access of 1 percentage point per year
from 2021 onward—almost twice the current pace.
<br />
<br />
<span
className='undp-typography small-font margin-bottom-00'
style={{ color: 'var(--gray-600)' }}
>
Data source:{' '}
<a
href='https://data.worldbank.org/indicator/EG.ELC.ACCS.ZS'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
World Bank
</a>
. Aggregation methodology for world can be found{' '}
<a
href='https://data.undp.org/sites/g/files/zskgke476/files/2024-02/DFX%20Indicator%20Aggregation%20Methodology.pdf'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
here
</a>
.
</span>
</p>
</div>
<div className='flex-div flex-vert-align-center margin-top-07'>
Expand Down Expand Up @@ -97,6 +125,34 @@ export function EnergyKeyInsights() {
in accessing reliable and affordable electrification. Without
escalated efforts, the world may still fall short of achieving
universal electrification by 2030.
<br />
<br />
<span
className='undp-typography small-font margin-bottom-00'
style={{ color: 'var(--gray-600)' }}
>
Data source:{' '}
<a
href='https://data.worldbank.org/indicator/EG.ELC.ACCS.ZS'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
World Bank
</a>
. Aggregation methodology for world can be found{' '}
<a
href='https://data.undp.org/sites/g/files/zskgke476/files/2024-02/DFX%20Indicator%20Aggregation%20Methodology.pdf'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
here
</a>
.
</span>
</p>
</div>
<div className='flex-div flex-vert-align-center margin-top-07'>
Expand Down Expand Up @@ -164,6 +220,34 @@ export function EnergyKeyInsights() {
claim millions of lives each year while perpetuating gender
inequity, deforestation, and negative climate impacts unless
efforts are rapidly scaled up.
<br />
<br />
<span
className='undp-typography small-font margin-bottom-00'
style={{ color: 'var(--gray-600)' }}
>
Data source:{' '}
<a
href='https://data.worldbank.org/indicator/EG.CFT.ACCS.ZS'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
World Bank
</a>
. Aggregation methodology for world can be found{' '}
<a
href='https://data.undp.org/sites/g/files/zskgke476/files/2024-02/DFX%20Indicator%20Aggregation%20Methodology.pdf'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
here
</a>
.
</span>
</p>
</div>
<div className='flex-div flex-vert-align-center margin-top-07'>
Expand Down
47 changes: 46 additions & 1 deletion src/KeyInsights/EnvironmentKeyInsights.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,34 @@ export function EnvironmentKeyInsights() {
relatively modest when compared to the enormity of the
challenge.
</p>
<br />
<br />
<span
className='undp-typography small-font margin-bottom-00'
style={{ color: 'var(--gray-600)' }}
>
Data source:{' '}
<a
href='https://www.climatewatchdata.org/ghg-emissions'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
World Resources Institute (WRI)
</a>
. Aggregation methodology for world can be found{' '}
<a
href='https://data.undp.org/sites/g/files/zskgke476/files/2024-02/DFX%20Indicator%20Aggregation%20Methodology.pdf'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
here
</a>
.
</span>
</div>
<div className='flex-div flex-vert-align-center margin-top-07'>
<img
Expand Down Expand Up @@ -95,6 +123,23 @@ export function EnvironmentKeyInsights() {
<span className='bold'>
97 billion tons, an increase of 120%.
</span>
<br />
<br />
<span
className='undp-typography small-font margin-bottom-00'
style={{ color: 'var(--gray-600)' }}
>
Data source:{' '}
<a
href='http://hdr.undp.org/en/data'
target='_blank'
rel='noreferrer'
className='undp-style'
style={{ color: 'var(--gray-600)' }}
>
United Nations Development Programme (UNDP)
</a>
</span>
</p>
</div>
<div className='flex-div flex-vert-align-center margin-top-07'>
Expand Down Expand Up @@ -128,7 +173,7 @@ export function EnvironmentKeyInsights() {
backgroundColor={['var(--gray-200)', 'var(--gray-200)']}
baseYears={[1990]}
color={['#55606E', '#55606E']}
title='Global material footprint in tonnes'
title='Global material footprint in tonnes (2021)'
circleRadius={5}
suffix=' tons'
multiplyByPopulation
Expand Down
Loading

0 comments on commit e0a0d18

Please sign in to comment.