Skip to content

Commit

Permalink
Change structure of Constants
Browse files Browse the repository at this point in the history
  • Loading branch information
@balagurova
balagurova committed Jul 12, 2024
1 parent 9cab721 commit 794514a
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 353 deletions.
117 changes: 50 additions & 67 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Segmented } from 'antd';
import { ChoroplethMap } from './Components/Graphs/Maps/ChoroplethMap';
import Header from './Components/Header';
import FilterCountryGroup from './Components/Filter';
import { PROGRAMMES, SPECIFIED_PROGRAMMES } from './Components/Constants';
import { PROGRAMMES } from './Components/Constants';
import { ProgrammeProvider, useProgramme } from './Components/ProgrammeContext';
import CheckboxGroup from './Components/CheckboxGroup';
import { ChoroplethMapDataType } from './Types';
Expand Down Expand Up @@ -58,23 +58,29 @@ function AppContent() {
setLdcCountries(ldc);

const transformedData = loadedData.map((item: any) => {
const allProgrammesSum = SPECIFIED_PROGRAMMES.reduce(
(sum, program) => sum + (parseInt(item[program.value], 10) || 0),
0,
);
const allProgrammesSum =
PROGRAMMES[0].subprogrammes?.reduce(
(sum, program) => sum + (parseInt(item[program.value], 10) || 0),
0,
) || 0;

const publicFinanceSum = [
'public_tax',
'public_debt',
'public_budget',
'public_insurance',
].reduce((sum, key) => sum + (parseInt(item[key], 10) || 0), 0);
const publicProgramme = PROGRAMMES[0].subprogrammes?.find(
p => p.value === 'public',
);
const publicFinanceSum =
publicProgramme?.subprogrammes?.reduce(
(sum, sub) => sum + (parseInt(item[sub.value], 10) || 0),
0,
) || 0;

const privateCapitalSum = [
'private_pipelines',
'private_impact',
'private_environment',
].reduce((sum, key) => sum + (parseInt(item[key], 10) || 0), 0);
const privateProgramme = PROGRAMMES[0].subprogrammes?.find(
p => p.value === 'private',
);
const privateCapitalSum =
privateProgramme?.subprogrammes?.reduce(
(sum, sub) => sum + (parseInt(item[sub.value], 10) || 0),
0,
) || 0;

return {
...item,
Expand All @@ -90,8 +96,16 @@ function AppContent() {

const handleSegmentChange = useCallback(
(value: string | number) => {
const programme = PROGRAMMES.find(p => p.value === value);
if (programme) setCurrentProgramme(programme);
const allProgrammesOption = PROGRAMMES.find(
p => p.value === 'all_programmes',
);
const programme =
allProgrammesOption?.subprogrammes?.find(p => p.value === value) ||
PROGRAMMES.find(p => p.value === value);

if (programme) {
setCurrentProgramme(programme);
}
},
[setCurrentProgramme],
);
Expand Down Expand Up @@ -140,32 +154,21 @@ function AppContent() {
let value = 0;

if (programme === 'all_programmes') {
if (selectedCheckboxes.includes('public')) {
const publicSum = [
'public_budget',
'public_tax',
'public_debt',
'public_insurance',
].reduce((sum, sub) => sum + (parseInt(item[sub], 10) || 0), 0);
value += publicSum;
}

if (selectedCheckboxes.includes('private')) {
const privateSum = [
'private_pipelines',
'private_impact',
'private_environment',
].reduce((sum, sub) => sum + (parseInt(item[sub], 10) || 0), 0);
value += privateSum;
}

if (selectedCheckboxes.includes('frameworks')) {
value += parseInt(item.frameworks, 10) || 0;
}

if (selectedCheckboxes.includes('biofin')) {
value += parseInt(item.biofin, 10) || 0;
}
const mainProgrammes = PROGRAMMES[0].subprogrammes || [];
mainProgrammes.forEach(mainProgramme => {
if (selectedCheckboxes.includes(mainProgramme.value)) {
value +=
mainProgramme.subprogrammes?.reduce(
(sum, sub) => sum + (parseInt(item[sub.value], 10) || 0),
0,
) || 0;
}
});
} else if (currentProgramme.subprogrammes) {
value = currentProgramme.subprogrammes.reduce(
(sum, sub) => sum + (parseInt(item[sub.value], 10) || 0),
0,
);
} else {
value = parseFloat(item[programme]);
}
Expand All @@ -177,7 +180,7 @@ function AppContent() {
};
});
},
[filterData, selectedCheckboxes],
[filterData, selectedCheckboxes, currentProgramme],
);

const filteredAndTransformedData = transformData(
Expand All @@ -188,32 +191,12 @@ function AppContent() {

const filteredDataForCards = filterData(data, selectedRadio);

const subcategoriesToShow =
currentProgramme.value === 'public'
? SPECIFIED_PROGRAMMES.filter(program =>
[
'public_budget',
'public_tax',
'public_debt',
'public_insurance',
].includes(program.value),
)
: currentProgramme.value === 'private'
? SPECIFIED_PROGRAMMES.filter(program =>
[
'private_pipelines',
'private_impact',
'private_environment',
].includes(program.value),
)
: currentProgramme.value === 'all_programmes'
? PROGRAMMES.filter(program => program.value !== 'all_programmes')
: [];
const subcategoriesToShow = currentProgramme.subprogrammes || [];

useEffect(() => {
const subcategories = subcategoriesToShow.map(sub => sub.value);
setSelectedCheckboxes(subcategories);
}, [currentProgramme]);
}, [currentProgramme, subcategoriesToShow]);

return (
<div
Expand Down
108 changes: 35 additions & 73 deletions src/Components/Cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Search } from 'lucide-react';
import React, { useState, useMemo } from 'react';
import { Input, Tag } from 'antd';
import styled from 'styled-components';
import { SPECIFIED_PROGRAMMES, PROGRAMMES } from './Constants';
import { PROGRAMMES } from './Constants';
import { useProgramme } from './ProgrammeContext';

interface Props {
Expand Down Expand Up @@ -57,86 +57,48 @@ function Cards(props: Props) {
);
}, [data, searchTerm]);

const subProgrammes = useMemo(() => {
if (currentProgramme.value === 'public') {
return SPECIFIED_PROGRAMMES.filter(program =>
[
'public_budget',
'public_tax',
'public_debt',
'public_insurance',
].includes(program.value),
);
}
if (currentProgramme.value === 'private') {
return SPECIFIED_PROGRAMMES.filter(program =>
['private_pipelines', 'private_impact', 'private_environment'].includes(
program.value,
),
);
}
if (currentProgramme.value === 'all_programmes') {
return PROGRAMMES.filter(program =>
['public', 'private', 'frameworks', 'biofin'].includes(program.value),
);
}
return [];
}, [currentProgramme.value]);

const getCountryName = (iso: string) => {
const country = taxonomy.find(item => item['Alpha-3 code'] === iso);
return country ? country['Country or Area'] : iso;
};

const getProgramTags = (item: any) => {
if (currentProgramme.value === 'all_programmes') {
const tags: { value: string; short: string; color: string }[] = [];

if (
['public_budget', 'public_tax', 'public_debt', 'public_insurance'].some(
sub => item[sub] === '1',
)
) {
tags.push({
value: 'public',
short: 'Public finance',
color: '#5DD4F0',
});
}
if (
['private_pipelines', 'private_impact', 'private_environment'].some(
sub => item[sub] === '1',
)
) {
tags.push({
value: 'private',
short: 'Private finance',
color: '#02A38A',
});
}
if (item.frameworks === '1') {
tags.push({
value: 'frameworks',
short: 'Integrated Frameworks',
color: '#E78625',
});
}
if (item.biofin === '1') {
tags.push({
value: 'biofin',
short: 'Biodiversity finance',
color: '#E0529E',
});
const allProgrammes = PROGRAMMES.find(p => p.value === 'all_programmes');

return (
allProgrammes?.subprogrammes
?.filter(program => {
if (program.subprogrammes) {
return program.subprogrammes.some(sub => item[sub.value] === '1');
}
return item[program.value] === '1';
})
.map(program => ({
value: program.value,
short: program.short,
color: program.color,
}))
.filter(program => selectedCheckboxes.includes(program.value)) || []
);
}

// Handle cases for individual programmes
if (currentProgramme.subprogrammes) {
const subprogrammeTags = currentProgramme.subprogrammes
.filter(sub => item[sub.value] === '1')
.map(sub => sub);

if (subprogrammeTags.length > 0) {
return subprogrammeTags;
}
}

return tags.filter(tag => selectedCheckboxes.includes(tag.value));
if (item[currentProgramme.value] === '1') {
return [currentProgramme];
}

return subProgrammes.filter(
program =>
item[program.value] === '1' &&
selectedCheckboxes.includes(program.value),
);
return [];
};

return (
Expand All @@ -149,9 +111,9 @@ function Cards(props: Props) {
/>
<CardContainer className='margin-top-04 undp-scrollbar'>
{filteredData.map((item, index) => {
const subProgrammesForCountry = getProgramTags(item);
const programTagsForCountry = getProgramTags(item);

const showCard = subProgrammesForCountry.length > 0;
const showCard = programTagsForCountry.length > 0;

if (!showCard) return null;

Expand All @@ -166,7 +128,7 @@ function Cards(props: Props) {
</h6>
</CountryDiv>
<ProgramsDiv>
{subProgrammesForCountry.map(program => (
{programTagsForCountry.map(program => (
<StyledTag key={program.value} color={program.color}>
{program.short}
</StyledTag>
Expand Down
Loading

0 comments on commit 794514a

Please sign in to comment.