Skip to content

Commit

Permalink
Merge pull request #1 from UNDP-Data/new-design
Browse files Browse the repository at this point in the history 
New design
  • Loading branch information
@balagurova
balagurova authored Apr 29, 2024
2 parents 9712a82 + 116debf commit 2622610
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 115 deletions.
136 changes: 74 additions & 62 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
/* eslint-disable no-plusplus */
import React, { useEffect, useState } from 'react';
import { csv } from 'd3-fetch';
import { Radio } from 'antd';
import { Segmented } from 'antd';
import styled from 'styled-components';
import { ChoroplethMap } from './Components/Graphs/Maps/ChoroplethMap';
import World from './Components/Graphs/Maps/MapData/worldMap.json';
Expand Down Expand Up @@ -33,6 +33,25 @@ const StyledSpan = styled.span`
}
`;

const StyledSegmented = styled(Segmented)`
background-color: var(--gray-200) !important; // Change track background color
.ant-segmented-item {
&:hover {
background-color: var(
--gray-300
) !important; // Change hover background color
}
&.ant-segmented-item-selected {
background-color: var(
--blue-600
) !important; // Change selected item background color
color: white; // Change text color for selected item
}
}
`;

interface ProgrammeDetail {
column: string;
note: string;
Expand Down Expand Up @@ -66,9 +85,11 @@ interface ColumnDescription {
};
}

type SegmentedValue = string | number;

function App() {
const [data, setData] = useState<ChoroplethMapDataType[]>([]);
const [selectedColumn, setSelectedColumn] = useState<string>(
const [selectedColumn, setSelectedColumn] = useState<SegmentedValue>(
'public_finance_budget',
);
const [counts, setCounts] = useState<Counts>(initialState);
Expand Down Expand Up @@ -151,14 +172,26 @@ function App() {
setCounts(newCounts);
})
.catch((err: any) => {
// eslint-disable-next-line no-console
console.error('Error loading the CSV file:', err);
});
}, [selectedColumn]);

const handleSelectColumn = (column: string) => {
setSelectedColumn(column);
const handleSelectColumn = (value: any) => {
setSelectedColumn(value);
};

const options = [
{ label: 'Budgeting', value: 'public_finance_budget' },
{ label: 'Taxation', value: 'public_finance_tax' },
{ label: 'Debt', value: 'public_finance_debt' },
{
label: 'Insurance and risk',
value: 'insurance_and_risk_finance',
},
{ label: 'Private Capital', value: 'private_capital' },
];

const tooltip = (d: any) => {
return (
<div>
Expand All @@ -176,7 +209,8 @@ function App() {
</div>
<div style={{ padding: '1rem 1.5rem' }}>
<div key={d.countryCode}>
<div className='flex-div flex-column margin-bottom-00'>

<div className='flex-div flex-column margin-bottom-00'>
<div
style={{ width: '100%' }}
className='flex-div flex-column margin-00 gap-03'
Expand Down Expand Up @@ -210,6 +244,9 @@ function App() {
key={p.key}
style={{
color: '#757575',
textWrap: 'wrap',
textAlign: 'left',

width: '100%',
overflowWrap: 'break-word',
}}
Expand Down Expand Up @@ -253,80 +290,57 @@ function App() {
};

return (
<div className='undp-container flex-div flex-column flex-wrap flex-hor-align-center'>
<div className='undp-container'>
<div
className='flex-div flex-column gap-02 padding-07'
className='flex-div padding-top-06 padding-left-06 padding-bottom-03 margin-00'
style={{
backgroundColor: 'var(--gray-300)',
padding: '1rem',
}}
>
<h6
style={{
fontSize: '0.75rem',
marginTop: '0',
letterSpacing: '.48px',
fontWeight: '700',
}}
>
DASHBOARD
</h6>
<h2
className='undp-typography'
style={{
fontFamily: 'var(--fontFamilyHeadings) !important',
textTransform: 'uppercase',
color: 'var(--gray-700)',
marginBottom: '0.5rem',
}}
>
Sustainable Finance Programmes
</h2>

<p style={{ margin: '0' }} className='undp-typography label'>
Programme areas
</p>
<Radio.Group
defaultValue='public_finance_budget'
size='small'
className='undp-button-radio'
buttonStyle='solid'
onChange={e => {
// eslint-disable-next-line no-console
handleSelectColumn(e.target.value);
}}
>
<Radio.Button value='public_finance_budget'>Budgeting</Radio.Button>
<Radio.Button value='public_finance_tax'>Taxation</Radio.Button>
<Radio.Button value='public_finance_debt'>Debt</Radio.Button>
<Radio.Button value='insurance_and_risk_finance'>
Insurance and risk finance
</Radio.Button>
<Radio.Button value='private_capital'>Private Capital</Radio.Button>
</Radio.Group>
<div style={{ zIndex: '4' }}>
<h2 className='margin-00' style={{ color: 'var(--gray-700)' }}>
Sustainable Finance Hub Dashboard{' '}
</h2>
<div className='padding-top-04' style={{ marginLeft: '-4px' }}>
<p className='undp-typography label margin-bottom-02 margin-left-02'>
Countries with programmes related to
</p>
<StyledSegmented
className='undp-segmented-small'
onChange={handleSelectColumn}
options={options}
/>
</div>
</div>
</div>
<div className='flex-div flex-wrap'>
<div className='flex-div' style={{ flexGrow: 2 }}>

<div
className='flex-div flex-wrap gap-00 padding-top-05 padding-bottom-05 margin-bottom-07'
style={{
backgroundColor: 'var(--gray-300)',
}}
>
<div style={{ flexGrow: 2 }}>
<ChoroplethMap
data={data.map(d => ({
...d,
x: d[selectedColumn],
}))}
backgroundColor
centerPoint={[470, 370]}
scale={270}
backgroundColor='var(--gray-300)'
centerPoint={[430, 360]}
scale={240}
height={600}
// domain={[0, 1, 2, 3, 4]}
tooltip={tooltip}
/>
</div>
<div
className='flex-div flex-column'
style={{ flexGrow: 1, minWidth: '370px' }}
className='flex-div flex-column padding-right-04'
style={{ flexGrow: 1, minWidth: '370px', flexDirection: 'column' }}
>
<div
className='stat-card no-hover'
style={{
backgroundColor: 'var(--gray-100)',
flexBasis: '0',
}}
>
Expand All @@ -340,13 +354,12 @@ function App() {
>
countries with sustainable
<br />
finance programming <b>in total</b>
finance programming <b>in total</b>
</p>
</div>
<div
className='stat-card no-hover'
style={{
backgroundColor: 'var(--gray-100)',
flexBasis: '0',
}}
>
Expand All @@ -372,7 +385,6 @@ function App() {
<div
className='stat-card no-hover'
style={{
backgroundColor: 'var(--gray-100)',
flexBasis: '0',
}}
>
Expand Down
28 changes: 14 additions & 14 deletions src/Components/Graphs/Maps/ChoroplethMap/Graph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@ export function Graph(props: Props) {
key={j}
d={masterPath}
style={{
stroke: 'var(--gray-500)',
stroke: 'var(--gray-300)',
}}
strokeWidth={0.25}
fill={UNDPColorModule.graphNoData}
strokeWidth={0.5}
fill='var(--gray-400)'
/>
);
})
Expand All @@ -130,10 +130,10 @@ export function Graph(props: Props) {
key={j}
d={path}
style={{
stroke: 'var(--gray-500)',
stroke: 'var(--gray-300)',
}}
strokeWidth={0.25}
fill={UNDPColorModule.graphNoData}
strokeWidth={0.4}
fill='var(--gray-400)'
/>
);
})}
Expand All @@ -149,8 +149,8 @@ export function Graph(props: Props) {
d.x !== undefined
? d.x === '1'
? UNDPColorModule.categoricalColors.colors[0]
: UNDPColorModule.graphNoData
: UNDPColorModule.graphNoData;
: 'var(--gray-400)'
: 'var(--gray-400)';
return (
<g
key={i}
Expand Down Expand Up @@ -201,9 +201,9 @@ export function Graph(props: Props) {
key={j}
d={masterPath}
style={{
stroke: 'var(--gray-400)',
stroke: 'var(--gray-300)',
}}
strokeWidth={0.25}
strokeWidth={0.4}
fill={color}
/>
);
Expand All @@ -226,9 +226,9 @@ export function Graph(props: Props) {
key={j}
d={path}
style={{
stroke: 'var(--gray-500)',
stroke: 'var(--gray-300)',
}}
strokeWidth={0.25}
strokeWidth={0.5}
fill={color}
/>
);
Expand Down Expand Up @@ -267,7 +267,7 @@ export function Graph(props: Props) {
key={j}
d={masterPath}
style={{
stroke: 'var(--gray-700)',
stroke: 'var(--gray-300)',
fill: 'none',
fillOpacity: 0,
strokeWidth: '0.5',
Expand All @@ -291,7 +291,7 @@ export function Graph(props: Props) {
key={j}
d={path}
style={{
stroke: 'var(--gray-700)',
stroke: 'var(--gray-300)',
fill: 'none',
fillOpacity: 0,
strokeWidth: '0.5',
Expand Down
6 changes: 1 addition & 5 deletions src/Components/Graphs/Maps/ChoroplethMap/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ interface Props {
scale?: number;
centerPoint?: [number, number];
backgroundColor?: string | boolean;
padding?: string;
tooltip?: (_d: any) => JSX.Element | any;
onSeriesMouseOver?: (_d: any) => void;
}
Expand All @@ -43,7 +42,6 @@ export function ChoroplethMap(props: Props) {
// categorical,
scale,
centerPoint,
padding,
backgroundColor,
tooltip,
onSeriesMouseOver,
Expand All @@ -65,9 +63,7 @@ export function ChoroplethMap(props: Props) {
style={{
display: 'flex',
width: '100%',
padding: backgroundColor
? padding || 'var(--spacing-05)'
: padding || 0,
padding: 0,
backgroundColor: !backgroundColor
? 'transparent'
: backgroundColor === true
Expand Down
Loading

0 comments on commit 2622610

Please sign in to comment.