Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

units api #82

Merged
merged 5 commits into from
Apr 2, 2024
Merged

units api #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7182fb
units api
mluena Apr 2, 2024
02ebc25
fix harcoded units on country detail
anamontiaga Apr 2, 2024
b22e526
country detail total intervention area fix
anamontiaga Apr 2, 2024
4487998
harcoded units on stats and dashboard
anamontiaga Apr 2, 2024
7626c67
minor fix: hide project description when there is no data
anamontiaga Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions client/src/containers/countries/detail/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,11 @@ export const PANEL_OVERVIEW_ITEMS = [
{
title: 'National Forest Area',
value: 'tree_cover_extent_2010_ha',
unit: 'ha',
percentage: 'forest_area_pct',
note: 'of land)',
},
{
title: 'Net carbon 2001 - 2022 (MtCO₂e/year)',
title: 'Net carbon 2001 - 2022',
value: 'net_flux_co2e_year',
note: '(emission)',
},
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
124 changes: 70 additions & 54 deletions client/src/containers/countries/detail/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,17 @@ 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();

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

Expand Down Expand Up @@ -150,7 +151,8 @@ export default function CountryDetailPanel() {
{data?.data?.attributes?.name}
</h2>
</div>
<p className="my-4 line-clamp-5 text-sm text-gray-500">

<p className="my-4 line-clamp-5 border text-sm text-gray-500">
<DescriptionWithoutMarkdown description={data?.data?.attributes?.description} />
</p>

Expand Down Expand Up @@ -185,47 +187,59 @@ 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 unitValue = 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} ({unitValue})
</p>
<div className="flex items-end space-x-1">
<p className="text-sm text-yellow-900">
{formatCompactNumber(Math.round(indicators[value]['value']))}{' '}
</p>

<p className="text-2xs mb-[1.7px] 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 @@ -279,7 +293,6 @@ export default function CountryDetailPanel() {
<div className="border-b border-t border-gray-100 py-2.5">
<p className="px-6 text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose">
{/* <p className="px-6 text-sm text-yellow-900">{props.attributes.info}</p> */}
The total areas of project activities conducted in the AFoCO Member
Countries
</Markdown>
Expand All @@ -299,11 +312,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 @@ -317,21 +331,23 @@ export default function CountryDetailPanel() {
style={{
width: !!indicators[value]
? `${
(indicators[value] * 100) /
(indicators.area_plantation_total +
indicators.area_protected_total +
indicators.area_reforested_total)
(indicators[value].value * 100) /
(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 +384,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 +437,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
43 changes: 26 additions & 17 deletions client/src/containers/projects/detail/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ export default function ProjectDashboard({ id }: { id: string }) {
Object.assign(
{},
...(response.data ?? []).map((item) => ({
[item.attributes?.indicator_name as string]: item.attributes?.value,
[item.attributes?.indicator_name as string]: {
value: item.attributes?.value,
unit: item.attributes?.unit,
},
}))
),
},
Expand Down Expand Up @@ -60,8 +63,14 @@ export default function ProjectDashboard({ id }: { id: string }) {
</div>
<div className="flex flex-col">
<div className="flex items-end space-x-0.5">
<p className="text-5xl font-extrabold text-green-400">{indicators[value]}</p>
{unit && <p className="mb-0.5 text-base font-normal text-green-400">{unit}</p>}
<p className="text-5xl font-extrabold text-green-400">
{indicators[value].value}
</p>
{unit && (
<p className="mb-0.5 text-base font-normal text-green-400">
{indicators[value].unit}
</p>
)}
</div>
<p>{title}</p>
</div>
Expand Down Expand Up @@ -113,7 +122,7 @@ export default function ProjectDashboard({ id }: { id: string }) {
)}
</Dialog>
</div>
<SingleBar data={indicators.project_funding} />
<SingleBar data={indicators.project_funding['value']} />
</div>
<div className="w-1/2 rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
Expand All @@ -123,11 +132,11 @@ export default function ProjectDashboard({ id }: { id: string }) {

<p className="py-4 text-3xl font-extrabold">
{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
{indicators.area_plantation_total['unit']}
</p>

<div className="space-y-3">
Expand All @@ -141,18 +150,18 @@ export default function ProjectDashboard({ id }: { id: string }) {
style={{
width: !!indicators[value]
? `${
(indicators[value] * 100) /
(indicators.area_plantation_total +
indicators.area_protected_total +
indicators.area_reforested_total)
(indicators[value].value * 100) /
(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">
{Math.round(indicators[value])}
{Math.round(indicators[value]['value'])}
</p>
</div>
))}
Expand All @@ -170,12 +179,12 @@ export default function ProjectDashboard({ id }: { id: string }) {
<Info className="h-5 w-5 text-green-800" />
</div>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(indicators.beneficiaries_total) || 0}
{formatCompactNumber(indicators.beneficiaries_total['value']) || 0}
</p>
<div className="h-32">
{indicators.beneficiaries && (
<BarsChart
data={Object.entries(indicators.beneficiaries).map(([year, uv]) => ({
data={Object.entries(indicators.beneficiaries['value']).map(([year, uv]) => ({
year,
uv,
}))}
Expand All @@ -199,12 +208,12 @@ export default function ProjectDashboard({ id }: { id: string }) {
<Info className="h-5 w-5 text-green-800" />
</div>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(indicators.jobs_total) || 0}
{formatCompactNumber(indicators.jobs_total['value']) || 0}
</p>
<div className="h-32">
{indicators.jobs && (
<BarsChart
data={Object.entries(indicators.jobs).map(([year, uv]) => ({
data={Object.entries(indicators.jobs['value']).map(([year, uv]) => ({
year,
uv,
}))}
Expand Down
11 changes: 7 additions & 4 deletions client/src/containers/projects/detail/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,13 @@ export default function ProjectDetailPanel() {
<Share />
</div>
</div>
<div className="flex flex-col space-y-8">
<p className="mt-72 pt-2 text-sm text-gray-500">
<DescriptionWithoutMarkdown description={data?.description} />
</p>
<div className="mt-72 flex flex-col space-y-8">
{data?.description && (
<p className="pt-2 text-sm text-gray-500">
<DescriptionWithoutMarkdown description={data?.description} />
</p>
)}

<div>
<div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
<p className="text-xs font-medium uppercase text-gray-500">Status</p>
Expand Down
Loading
Loading