mPowersocial/public_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New bar chart added in newborn community intervention page

Browse Source
This commit is contained in:
F Shrabon 2024-12-04 13:47:05 +06:00
parent 74dc41fcbb
commit e0daa25bba
1 changed files with 104 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/NewbornAndChildPages/NewbornAndChildCommunityIntervention.tsx
View File

@ -68,6 +68,22 @@ const NewbornAndChildCommunityIntervention = () => {
label: [],
});
const [totalKMC1stFollowUpWeightByOrg, setTotalKMC1stFollowUpWeightByOrg] =
useState({
data: [],
label: [],
});
const [totalKMC2ndFollowUpWeightByOrg, setTotalKMC2ndtFollowUpWeightByOrg] =
useState({
data: [],
label: [],
});
const [totalKMC3rdFollowUpWeightByOrg, setTotalKMC3rdtFollowUpWeightByOrg] =
useState({
data: [],
label: [],
});
// Mutation Function for Graph & Chart Data
const { mutate, isPending, error } = useMutation({
mutationFn: mutationData,
@ -76,7 +92,11 @@ const NewbornAndChildCommunityIntervention = () => {
newbornCommIntKMC,
newbornCommIntKMCFollowup,
newbornCommIntSCANUFollowup,
totalKMC1stFollowUpWeight,
totalKMC2ndFollowUpWeight,
totalKMC3rdFollowUpWeight,
} = data?.data ?? {};
const byMonthCommunityKMC = newbornCommIntKMC?.["By Month"] ?? [];
const byOrgCommunityKMC = newbornCommIntKMC?.["By Org"] ?? [];
@ -108,6 +128,23 @@ const NewbornAndChildCommunityIntervention = () => {
setCommunityFollowUpOfSCANUDischargeBabiesByOrg(
getDataAndLabel(byOrgCommunityFollowUpOfSCANUDischargeBabies)
);
const totalKMC1stFollowUpWeightByOrg =
totalKMC1stFollowUpWeight?.["By Org"] ?? [];
const totalKMC2ndFollowUpWeightByOrg =
totalKMC2ndFollowUpWeight?.["By Org"] ?? [];
const totalKMC3rdFollowUpWeightByOrg =
totalKMC3rdFollowUpWeight?.["By Org"] ?? [];
setTotalKMC1stFollowUpWeightByOrg(
getDataAndLabel(totalKMC1stFollowUpWeightByOrg)
);
setTotalKMC2ndtFollowUpWeightByOrg(
getDataAndLabel(totalKMC2ndFollowUpWeightByOrg)
);
setTotalKMC3rdtFollowUpWeightByOrg(
getDataAndLabel(totalKMC3rdFollowUpWeightByOrg)
);
},
onError: (error) => {
// Optional: Function to run when the mutation encounters an error
@ -159,7 +196,7 @@ const NewbornAndChildCommunityIntervention = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const chartData: chartDataType[] = useMemo(
const allChartData: chartDataType[] = useMemo(
() => [
{
title: "Community KMC",
@ -225,6 +262,45 @@ const NewbornAndChildCommunityIntervention = () => {
]
);
const newChartData: chartDataType[] = useMemo(
() => [
{
title: "Total 1st KMC Follow-up Conducted with Category of Weight",
categories: totalKMC1stFollowUpWeightByOrg?.label,
data: totalKMC1stFollowUpWeightByOrg?.data,
chartTitle: `By ${graphTitle}`,
isLoading: isPending,
type: "bar",
},
{
title: "Total 2nd KMC Follow-up Conducted with Category of Weight",
categories: totalKMC2ndFollowUpWeightByOrg?.label,
data: totalKMC2ndFollowUpWeightByOrg?.data,
chartTitle: `By ${graphTitle}`,
isLoading: isPending,
type: "bar",
},
{
title: "Total 3rd KMC Follow-up Conducted with Category of Weight",
categories: totalKMC3rdFollowUpWeightByOrg?.label,
data: totalKMC3rdFollowUpWeightByOrg?.data,
chartTitle: `By ${graphTitle}`,
isLoading: isPending,
type: "bar",
},
],
[
graphTitle,
isPending,
totalKMC1stFollowUpWeightByOrg?.data,
totalKMC1stFollowUpWeightByOrg?.label,
totalKMC2ndFollowUpWeightByOrg?.data,
totalKMC2ndFollowUpWeightByOrg?.label,
totalKMC3rdFollowUpWeightByOrg?.data,
totalKMC3rdFollowUpWeightByOrg?.label,
]
);
return (
<NewBornHeader setFormValues={setFormValues} submit={submit}>
<div className="">
@ -250,18 +326,33 @@ const NewbornAndChildCommunityIntervention = () => {
<DefaultSpinner />
</div>
) : (
<div className="grid lg:grid-cols-2 gap-4">
{chartData.map((chart, index) => (
<ComboBarLineChartTile
key={index}
title={chart.title}
categories={chart.categories}
data={chart.data}
chartTitle={chart.chartTitle}
isLoading={chart.isLoading}
type={chart?.type}
/>
))}
<div className="space-y-4">
<div className="grid lg:grid-cols-2 gap-4">
{allChartData.map((chart, index) => (
<ComboBarLineChartTile
key={index}
title={chart.title}
categories={chart.categories}
data={chart.data}
chartTitle={chart.chartTitle}
isLoading={chart.isLoading}
type={chart?.type}
/>
))}
</div>
<div className="grid lg:grid-cols-3 gap-4">
{newChartData.map((chart, index) => (
<ComboBarLineChartTile
key={index}
title={chart.title}
categories={chart.categories}
data={chart.data}
chartTitle={chart.chartTitle}
isLoading={chart.isLoading}
type={chart?.type}
/>
))}
</div>
</div>
)}
</div>