Skip to content

Commit

Permalink
fix stats
Browse files Browse the repository at this point in the history
  • Loading branch information
@anamontiaga
anamontiaga committed Apr 4, 2024
1 parent 070d65e commit fc52910
Showing 1 changed file with 165 additions and 159 deletions.
324 changes: 165 additions & 159 deletions client/src/containers/projects/stats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useGetIndicatorFields } from '@/types/generated/indicator-field';
import BarsChart from '@/containers/charts/bar';

import ContentLoader from '@/components/ui/loader';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

import SingleBar from '../charts/single-bar';
Expand Down Expand Up @@ -53,174 +54,179 @@ export default function Stats() {
{data && (
<div className="flex flex-col space-y-2">
<h3 className="mb-2 text-lg font-extrabold text-gray-400">Overview</h3>
<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">
Total funding{' '}
{data.project_funding.unit && <span>({data.project_funding.unit})</span>}
</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>

<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total value invested to the projects in the AFoCO Member Countries.
</Markdown>
</p>
</TooltipContent>
</Tooltip>
</div>
<SingleBar data={data?.project_funding} />
</div>
</div>
<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">Total intervention area</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>

<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total areas of project activities conducted in the AFoCO Member
Countries.
</Markdown>
</p>
</TooltipContent>
</Tooltip>
<ScrollArea className="h-[69vh] 2xl:h-[75vh]">
<div className="flex flex-col space-y-2">
<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">
Total funding{' '}
{data.project_funding.unit && <span>({data.project_funding.unit})</span>}
</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>

<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total value invested to the projects in the AFoCO Member Countries.
</Markdown>
</p>
</TooltipContent>
</Tooltip>
</div>
<SingleBar data={data?.project_funding} />
</div>
</div>
<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">Total intervention area</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>

<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total areas of project activities conducted in the AFoCO Member
Countries.
</Markdown>
</p>
</TooltipContent>
</Tooltip>
</div>

<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(data.intervention_area_total['value'])}{' '}
{data.intervention_area_total['unit']}
</p>

<div className="space-y-4">
{totalInterventionArea.map(({ name, value }) => (
<div key={name} className="space-between flex w-full">
<div className="flex w-full flex-col text-sm">
<p>{name}</p>

<div
className="h-2 rounded-3xl bg-[#FFCC73]"
style={{
width: !!data[value]
? `${
(data[value].value * 100) / data.intervention_area_total['value']
}%`
: '0%',
}}
/>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(data.intervention_area_total['value'])}{' '}
{data.intervention_area_total['unit']}
</p>

<div className="space-y-4">
{totalInterventionArea.map(({ name, value }) => (
<div key={name} className="space-between flex w-full">
<div className="flex w-full flex-col text-sm">
<p>{name}</p>

<div
className="h-2 rounded-3xl bg-[#FFCC73]"
style={{
width: !!data[value]
? `${
(data[value].value * 100) /
data.intervention_area_total['value']
}%`
: '0%',
}}
/>
</div>

<p className="w-10 text-right font-extrabold">
{formatCompactNumber(Math.round(data[value]['value']))}
</p>
</div>
))}

<div>
<p className="text-right text-xs text-gray-500">ha</p>
</div>

<p className="w-10 text-right font-extrabold">
{formatCompactNumber(Math.round(data[value]['value']))}
</p>
</div>
))}

<div>
<p className="text-right text-xs text-gray-500">ha</p>
</div>
</div>
</div>
</div>
<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">Total beneficiaries</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>

<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total number of short- and long-term jobs generated by the project
interventions in the AFoCO Member Countries
</Markdown>
</p>
</TooltipContent>
</Tooltip>
</div>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(data.beneficiaries_total['value'])}
</p>

<div className="h-44">
{data.beneficiaries && (
<BarsChart
data={Object.entries(data.beneficiaries['value']).map(([year, uv]) => ({
year,
uv,
}))}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70CCB0"
margin={{
top: 2,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
/>
)}
</div>
</div>
</div>

<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">Total jobs</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>
<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total number of short- and long-term jobs generated by the project
interventions in the AFoCO Member Countries.
</Markdown>
</p>
</TooltipContent>
</Tooltip>
<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">Total beneficiaries</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>

<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total number of short- and long-term jobs generated by the project
interventions in the AFoCO Member Countries
</Markdown>
</p>
</TooltipContent>
</Tooltip>
</div>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(data.beneficiaries_total['value'])}
</p>

<div className="h-44">
{data.beneficiaries && (
<BarsChart
data={Object.entries(data.beneficiaries['value']).map(([year, uv]) => ({
year,
uv,
}))}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70CCB0"
margin={{
top: 2,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
/>
)}
</div>
</div>
</div>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(data.jobs_total['value'])}
</p>{' '}
<div className="h-44">
{data.jobs && (
<BarsChart
data={Object.entries(data.jobs['value']).map(([year, uv]) => ({
year,
uv,
}))}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70B6CC"
margin={{
top: 2,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
/>
)}

<div className="flex flex-col space-y-2">
<div className="w-full rounded-xl bg-white p-4 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="text-base text-green-800">Total jobs</h3>
<Tooltip>
<TooltipTrigger className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50">
<Info className="text-green-800" size={20} />
</TooltipTrigger>
<TooltipContent className="max-w-[200px] p-2">
<p className="text-sm text-yellow-900">
<Markdown remarkPlugins={[remarkGfm]} className="prose text-xs">
The total number of short- and long-term jobs generated by the project
interventions in the AFoCO Member Countries.
</Markdown>
</p>
</TooltipContent>
</Tooltip>
</div>
<p className="py-4 text-3xl font-extrabold">
{formatCompactNumber(data.jobs_total['value'])}
</p>{' '}
<div className="h-44">
{data.jobs && (
<BarsChart
data={Object.entries(data.jobs['value']).map(([year, uv]) => ({
year,
uv,
}))}
barDataKey="uv"
barRadius={[20, 20, 20, 20]}
fillBar="#70B6CC"
margin={{
top: 2,
right: 10,
left: -20,
bottom: -4,
}}
xAxisDataKey="year"
/>
)}
</div>
</div>
</div>
</div>
</div>
</ScrollArea>
</div>
)}
</ContentLoader>
Expand Down

0 comments on commit fc52910

Please sign in to comment.