Skip to content

Commit

Permalink
Add api integration for keyfigures,charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@roshni73
roshni73 committed Dec 19, 2024
1 parent 9976005 commit 90f9025
Showing 1 changed file with 27 additions and 95 deletions.
122 changes: 27 additions & 95 deletions app/src/views/OperationalLearning/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
} from '@ifrc-go/ui';
import { useTranslation } from '@ifrc-go/ui/hooks';
import {
DateLike,

Check failure on line 27 in app/src/views/OperationalLearning/index.tsx

View workflow job for this annotation

GitHub Actions / Lint JS 

DateLike not found in '@ifrc-go/ui/utils'
getDatesSeparatedByMonths,
getFormattedDateKey,
hasSomeDefinedValue,
Expand Down Expand Up @@ -94,6 +95,7 @@ type QueryType = Pick<
| 'per_component_validated__in'
| 'search_extracts'
>;
type Learnings = GoApiResponse<'/api/v2/ops-learning/stats'>;

Check warning on line 98 in app/src/views/OperationalLearning/index.tsx

View workflow job for this annotation

GitHub Actions / Lint JS 

'Learnings' is defined but never used

const regionKeySelector = (region: RegionOption) => region.key;
const countryKeySelector = (country: Country) => country.id;
Expand All @@ -103,86 +105,7 @@ const perComponentKeySelector = (option: PerComponent) => option.id;
const disasterTypeKeySelector = (type: DisasterType) => type.id;
const disasterTypeLabelSelector = (type: DisasterType) => type.name ?? '?';

const responseData = {
operations_included: 9,
learning_extracts: 6,
sectors_covered: 6,
sources_used: 8,
learning_by_region: [
{
region_name: 'Americas',
region_id: 1,
count: 2,
},
{
region_name: 'Asia Pacific',
region_id: 2,
count: 5,
},
{
region_name: 'Europe',
region_id: 3,
count: 2,
},
],
learning_by_sector: [
{
id: 17,
count: 1,
title: 'health',
},
{
id: 18,
count: 1,
title: 'education',
},
{
id: 19,
count: 3,
title: 'Livelihoods and basic needs',
},
{
id: 20,
count: 4,
title: 'Migration',
},
{
id: 21,
count: 1,
title: 'WASH',
},
{
id: 22,
count: 1,
title: 'Shelter',
},
],
sources_overtime: {
DREF: [
{ year: 2023, count: 1 },
{ year: 2024, count: 3 },
],
'Emergency Appeal': [
{ year: 2023, count: 1 },
{ year: 2024, count: 1 },
],
'International Appeal': [
{ year: 2023, count: 1 },
{ year: 2024, count: 1 },
],
'Forecast Based Action': [
{ year: 2022, count: 1 },
],
},
};

const timeSeriesDataKeys = Object.entries(
responseData.sources_overtime,
).flatMap(([source, entries]) => entries.map((entry) => ({
date: `${entry.year}-01-01`,
value: entry.count,
source,
})));
const timeSeriesDataKeys = ['Learnings'];

const oneYearAgo = new Date();
oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
Expand Down Expand Up @@ -394,14 +317,26 @@ export function Component() {
setQuery(undefined);
}, [resetFilter]);

const {
response: learningStatsResponse,
} = useRequest({
url: '/api/v2/ops-learning/stats/',
query: {
...query,
},
});
const timeSeriesValueSelector = useCallback(
(_: string, date: Date) => {
const entry = timeSeriesDataKeys?.find(
(source) => getFormattedDateKey(source.date) === getFormattedDateKey(date),
);
return entry ? entry.value : undefined;
if (!Array.isArray(learningStatsResponse)) {
return 0;
}
return learningStatsResponse.find(
(source: { date: DateLike; }) => (
getFormattedDateKey(source.date) === getFormattedDateKey(date)
),
)?.count ?? 0;
},
[],
[learningStatsResponse],
);

return (
Expand Down Expand Up @@ -566,40 +501,37 @@ export function Component() {
</>
)}
/>
<div
className={styles.keyFigureCardList}
>
<div className={styles.keyFigureCardList}>
<div className={styles.keyFigureCard}>
<KeyFigure
className={styles.keyFigure}
value={responseData.operations_included}
value={learningStatsResponse?.operations_included}
label={strings.operationsIncluded}
labelClassName={styles.keyFigureDescription}
/>
<div className={styles.separator} />
<KeyFigure
className={styles.keyFigure}
value={responseData.sources_used}
value={learningStatsResponse?.sources_used}
label={strings.sourcesUsed}
labelClassName={styles.keyFigureDescription}
/>
<div className={styles.separator} />
<KeyFigure
className={styles.keyFigure}
value={responseData.learning_extracts}
value={learningStatsResponse?.learning_extracts}
label={strings.learningExtract}
labelClassName={styles.keyFigureDescription}
/>
<div className={styles.separator} />
<KeyFigure
className={styles.keyFigure}
value={responseData.sectors_covered}
value={learningStatsResponse?.sectors_covered}
label={strings.sectorsCovered}
labelClassName={styles.keyFigureDescription}
/>
</div>
</div>

<div
className={styles.learningOverview}
>
Expand All @@ -614,7 +546,7 @@ export function Component() {
withInternalPadding
>
<BarChart
data={responseData.learning_by_sector}
data={learningStatsResponse?.learning_by_sector}
keySelector={sectorsKeySelector}
valueSelector={sectorsValueSelector}
labelSelector={sectorsLabelSelector}
Expand All @@ -627,7 +559,7 @@ export function Component() {
withInternalPadding
>
<BarChart
data={responseData.learning_by_region}
data={learningStatsResponse?.learning_by_region}
keySelector={regionsKeySelector}
valueSelector={regionValueSelector}
labelSelector={regionLabelSelector}
Expand Down

0 comments on commit 90f9025

Please sign in to comment.