Skip to content

Commit

Permalink
units api
Browse files Browse the repository at this point in the history
  • Loading branch information
@mluena
mluena committed Apr 2, 2024
1 parent 5e00855 commit 79d81ae
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 55 deletions.
4 changes: 0 additions & 4 deletions client/src/containers/countries/detail/constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ export const PANEL_OVERVIEW_ITEMS = [
{
title: 'National Forest Area',
value: 'tree_cover_extent_2010_ha',
unit: 'ha',
percentage: 'forest_area_pct',
note: 'of land)',
},
Expand All @@ -23,19 +22,16 @@ export const RESUME_ITEMS = [
{
title: 'Completed',
value: 'projects_completed',
unit: null,
icon: CHECK_SVG,
},
{
title: 'Planted area',
value: 'area_plantation_total',
unit: 'ha',
icon: AREA_SVG,
},
{
title: 'Trees planted',
value: 'trees_planted_total',
unit: null,
icon: SEEDS_SVG,
},
];
Expand Down
117 changes: 66 additions & 51 deletions client/src/containers/countries/detail/panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,18 @@ export default function CountryDetailPanel() {
return Object.assign(
{},
...(response.data ?? []).map((item) => ({
[item.attributes?.indicator_name as string]: item.attributes?.value,
[`${item.attributes?.indicator_name}_unit` as string]: item.attributes?.unit,
[item.attributes?.indicator_name as string]: {
value: item.attributes?.value,
unit: item.attributes?.unit,
},
}))
);
},
},
}
);
const queryParams = useSyncQueryParams();

console.log(indicators);
const jsonToCsv = (json: CountryCountryIndicatorFieldsDataItem['attributes'] & Country) => {
let csv = '';

Expand Down Expand Up @@ -185,47 +187,57 @@ export default function CountryDetailPanel() {

{indicators && (
<div className="flex flex-col justify-center">
{PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage, unit }) => (
<div
key={title}
className="flex h-10 items-center justify-between border-b-2 border-dotted border-green-50 py-4 first:border-t-2"
>
<p className="text-xs font-medium uppercase text-gray-500">{title}</p>
<div className="flex items-end space-x-1">
<p className="text-sm text-yellow-900">
{formatCompactNumber(Math.round(indicators[value]))} {unit}
</p>

<p className="text-2xs flex text-gray-500">
{percentage && <span>({Math.round(indicators[percentage])}%</span>}
<span>{note}</span>
</p>
</div>
</div>
))}
<div className="grid grid-cols-2 grid-rows-2 gap-2 py-4">
{RESUME_ITEMS.map(({ title, icon, value, unit }) => (
{PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage }) => {
const unit = indicators[value]['unit'];
return (
<div
key={title}
className="relative flex items-center space-x-6 rounded-xl bg-white p-4 text-sm text-green-800 shadow-sm"
className="flex h-10 items-center justify-between border-b-2 border-dotted border-green-50 py-4 first:border-t-2"
>
<div className="flex flex-col">
<div className="flex items-end space-x-0.5">
<p className="text-2xl font-extrabold text-green-400">{indicators[value]}</p>
<p className="text-xs font-medium uppercase text-gray-500">{title}</p>
<div className="flex items-end space-x-1">
<p className="text-sm text-yellow-900">
{formatCompactNumber(Math.round(indicators[value]['value']))} {unit}
</p>

<p className="text-2xs flex text-gray-500">
{percentage && <span>({Math.round(indicators[percentage]['value'])}%</span>}
<span>{note}</span>
</p>
</div>
</div>
);
})}
<div className="grid grid-cols-2 grid-rows-2 gap-2 py-4">
{RESUME_ITEMS.map(({ title, icon, value }) => {
const unit = indicators[value]['unit'];
return (
<div
key={title}
className="relative flex items-center space-x-6 rounded-xl bg-white p-4 text-sm text-green-800 shadow-sm"
>
<div className="flex flex-col">
<div className="flex items-end space-x-0.5">
<p className="text-2xl font-extrabold text-green-400">
{indicators[value]['value']}
</p>

{unit && <p className="mb-0.5 text-base font-normal text-green-400">{unit}</p>}
{unit && (
<p className="mb-0.5 text-base font-normal text-green-400">{unit}</p>
)}
</div>
<p>{title}</p>
</div>
<p>{title}</p>
<Image
src={icon}
alt={title}
width={24}
height={34}
className="absolute right-4 top-4"
/>
</div>
<Image
src={icon}
alt={title}
width={24}
height={34}
className="absolute right-4 top-4"
/>
</div>
))}
);
})}
</div>

<div className="flex flex-col space-y-2">
Expand Down Expand Up @@ -299,11 +311,12 @@ export default function CountryDetailPanel() {
<p className="py-4 text-3xl font-extrabold">
{/* //!TODO: This value should come from API. */}
{formatCompactNumber(
indicators.area_plantation_total +
indicators.area_protected_total +
indicators.area_reforested_total
indicators.area_plantation_total['value'] +
indicators.area_protected_total['value'] +
indicators.area_reforested_total['value']
)}{' '}
ha
{/* //!TODO: This value should come from API. */}
{indicators.area_plantation_total['unit']}
</p>

<div className="space-y-4">
Expand All @@ -318,20 +331,22 @@ export default function CountryDetailPanel() {
width: !!indicators[value]
? `${
(indicators[value] * 100) /
(indicators.area_plantation_total +
indicators.area_protected_total +
indicators.area_reforested_total)
(indicators.area_plantation_total['value'] +
indicators.area_protected_total['value'] +
indicators.area_reforested_total['value'])
}%`
: '0%',
}}
/>
</div>

<p className="w-10 text-right font-extrabold">{indicators[value]}</p>
<p className="w-10 text-right font-extrabold">{indicators[value]['value']}</p>
</div>
))}
<div>
<p className="text-right text-xs text-gray-500">ha</p>
<p className="text-right text-xs text-gray-500">
{indicators.area_plantation_total['unit']}
</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -368,12 +383,12 @@ export default function CountryDetailPanel() {
</div>

<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(indicators.beneficiaries_total)}
{formatCompactNumber(indicators.beneficiaries_total['value'])}
</p>
{indicators.beneficiaries && (
<div className="h-44">
<BarsChart
data={Object.entries(indicators.beneficiaries).map(([year, uv]) => ({
data={Object.entries(indicators.beneficiaries['value']).map(([year, uv]) => ({
year,
uv,
}))}
Expand Down Expand Up @@ -421,12 +436,12 @@ export default function CountryDetailPanel() {
</div>

<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(indicators.jobs_total)}
{formatCompactNumber(indicators.jobs_total['value'])}
</p>
{indicators.jobs && (
<div className="h-44">
<BarsChart
data={Object.entries(indicators.jobs).map(([year, uv]) => ({
data={Object.entries(indicators.jobs['value']).map(([year, uv]) => ({
year,
uv,
}))}
Expand Down

0 comments on commit 79d81ae

Please sign in to comment.