Skip to content

Commit 65ce33d

Browse files
samsharasamshara
committed
fix: show filtered values on country 3W project stats
1 parent 33ad862 commit 65ce33d

File tree

2 files changed

+81
-72
lines changed

2 files changed

+81
-72
lines changed

‎src/views/CountryThreeWNationalSocietyProjects/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export function Component() {
129129
ongoingProjectBudget,
130130
programmeTypeStats,
131131
projectStatusTypeStats,
132-
activeNSCount,
132+
countryCountWithNSProjects,
133133
} = useMemo(() => {
134134
const projectsOngoing = filteredProjectList
135135
.filter((p) => p.status === PROJECT_STATUS_ONGOING);
@@ -164,15 +164,15 @@ export function Component() {
164164
(d, k) => ({ label: String(k), value: d.length }),
165165
);
166166

167-
const numberOfActiveNS = unique(projectsOngoing, (d) => d.reporting_ns).length;
167+
const numCountriesWithNSProjects = unique(projectsOngoing, (d) => d.project_country).length;
168168

169169
return {
170170
ongoingProjects: projectsOngoing,
171171
targetedPopulation: peopleTargeted,
172172
ongoingProjectBudget: ongoingBudget,
173173
programmeTypeStats: programmeTypes,
174174
projectStatusTypeStats: projectStatusTypes,
175-
activeNSCount: numberOfActiveNS,
175+
countryCountWithNSProjects: numCountriesWithNSProjects,
176176
};
177177
}, [filteredProjectList]);
178178

@@ -286,8 +286,8 @@ export function Component() {
286286
projectListResponse?.count,
287287
]);
288288

289-
const showCard1 = activeNSCount > 0 || targetedPopulation > 0;
290-
const showCard2 = projectList.length > 0 || programmeTypeStats.length > 0;
289+
const showCard1 = countryCountWithNSProjects > 0 || targetedPopulation > 0;
290+
const showCard2 = filteredProjectList.length > 0 || programmeTypeStats.length > 0;
291291
const showCard3 = ongoingProjectBudget > 0 || projectStatusTypeStats.length > 0;
292292

293293
const showCardsSection = showCard1 || showCard2 || showCard3;
@@ -301,7 +301,7 @@ export function Component() {
301301
<div className={styles.keyFigureCard}>
302302
<KeyFigure
303303
className={styles.keyFigure}
304-
value={activeNSCount}
304+
value={countryCountWithNSProjects}
305305
label={strings.activeDeploymentsTitle}
306306
labelClassName={styles.keyFigureDescription}
307307
/>
@@ -319,7 +319,7 @@ export function Component() {
319319
<div className={styles.keyFigureCard}>
320320
<KeyFigure
321321
className={styles.keyFigure}
322-
value={projectList.length}
322+
value={filteredProjectList.length}
323323
label={strings.totalProjectsTitle}
324324
labelClassName={styles.keyFigureDescription}
325325
/>

‎src/views/CountryThreeWProjects/index.tsx‎

Lines changed: 74 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -346,77 +346,86 @@ export function Component() {
346346
triggerExportStart,
347347
projectListResponse?.count,
348348
]);
349-
349+
const showCard1 = activeNSCount > 0 || targetedPopulation > 0;
350+
const showCard2 = filteredProjectList.length > 0 || programmeTypeStats.length > 0;
351+
const showCard3 = ongoingProjectBudget > 0 || projectStatusTypeStats.length > 0;
352+
const showCardsSection = showCard1 || showCard2 || showCard3;
350353
return (
351354
<div className={styles.countryThreeWProjects}>
352355
{projectListPending && <BlockLoading />}
353-
{!projectListPending && (
356+
{!projectListPending && showCardsSection && (
354357
<div className={styles.keyFigureCardList}>
355-
<div className={styles.keyFigureCard}>
356-
<KeyFigure
357-
className={styles.keyFigure}
358-
value={activeNSCount}
359-
label={strings.activeDeploymentsTitle}
360-
labelClassName={styles.keyFigureDescription}
361-
/>
362-
<div className={styles.separator} />
363-
<KeyFigure
364-
className={styles.keyFigure}
365-
value={targetedPopulation}
366-
label={strings.targetedPopulationTitle}
367-
labelClassName={styles.keyFigureDescription}
368-
compactValue
369-
/>
370-
</div>
371-
<div className={styles.keyFigureCard}>
372-
<KeyFigure
373-
className={styles.keyFigure}
374-
value={projectList.length}
375-
label={strings.totalProjectsTitle}
376-
labelClassName={styles.keyFigureDescription}
377-
/>
378-
<div className={styles.separator} />
379-
<Container
380-
heading={strings.programmeType}
381-
headingLevel={5}
382-
>
383-
<PieChart
384-
className={styles.pieChart}
385-
data={programmeTypeStats}
386-
valueSelector={numericValueSelector}
387-
labelSelector={stringLabelSelector}
388-
keySelector={stringLabelSelector}
389-
colors={primaryRedColorShades}
390-
pieRadius={40}
391-
chartPadding={10}
358+
{showCard1 && (
359+
<div className={styles.keyFigureCard}>
360+
<KeyFigure
361+
className={styles.keyFigure}
362+
value={activeNSCount}
363+
label={strings.activeDeploymentsTitle}
364+
labelClassName={styles.keyFigureDescription}
392365
/>
393-
</Container>
394-
</div>
395-
<div className={styles.keyFigureCard}>
396-
<KeyFigure
397-
className={styles.keyFigure}
398-
value={ongoingProjectBudget}
399-
label={strings.ongoingProjectBudgetTitle}
400-
labelClassName={styles.keyFigureDescription}
401-
compactValue
402-
/>
403-
<div className={styles.separator} />
404-
<Container
405-
heading={strings.projectStatus}
406-
headingLevel={5}
407-
>
408-
<PieChart
409-
className={styles.pieChart}
410-
data={projectStatusTypeStats}
411-
valueSelector={numericValueSelector}
412-
labelSelector={stringLabelSelector}
413-
keySelector={stringLabelSelector}
414-
colors={primaryRedColorShades}
415-
pieRadius={40}
416-
chartPadding={10}
366+
<div className={styles.separator} />
367+
<KeyFigure
368+
className={styles.keyFigure}
369+
value={targetedPopulation}
370+
label={strings.targetedPopulationTitle}
371+
labelClassName={styles.keyFigureDescription}
372+
compactValue
417373
/>
418-
</Container>
419-
</div>
374+
</div>
375+
)}
376+
{showCard2 && (
377+
<div className={styles.keyFigureCard}>
378+
<KeyFigure
379+
className={styles.keyFigure}
380+
value={filteredProjectList.length}
381+
label={strings.totalProjectsTitle}
382+
labelClassName={styles.keyFigureDescription}
383+
/>
384+
<div className={styles.separator} />
385+
<Container
386+
heading={strings.programmeType}
387+
headingLevel={5}
388+
>
389+
<PieChart
390+
className={styles.pieChart}
391+
data={programmeTypeStats}
392+
valueSelector={numericValueSelector}
393+
labelSelector={stringLabelSelector}
394+
keySelector={stringLabelSelector}
395+
colors={primaryRedColorShades}
396+
pieRadius={40}
397+
chartPadding={10}
398+
/>
399+
</Container>
400+
</div>
401+
)}
402+
{showCard3 && (
403+
<div className={styles.keyFigureCard}>
404+
<KeyFigure
405+
className={styles.keyFigure}
406+
value={ongoingProjectBudget}
407+
label={strings.ongoingProjectBudgetTitle}
408+
labelClassName={styles.keyFigureDescription}
409+
compactValue
410+
/>
411+
<div className={styles.separator} />
412+
<Container
413+
heading={strings.projectStatus}
414+
headingLevel={5}
415+
>
416+
<PieChart
417+
className={styles.pieChart}
418+
data={projectStatusTypeStats}
419+
valueSelector={numericValueSelector}
420+
labelSelector={stringLabelSelector}
421+
keySelector={stringLabelSelector}
422+
colors={primaryRedColorShades}
423+
pieRadius={40}
424+
chartPadding={10}
425+
/>
426+
</Container>
427+
</div>
428+
)}
420429
</div>
421430
)}
422431
<Container

0 commit comments

Comments
 (0)