Skip to content

Commit

Permalink
#237 - Adjusting total data in wikilegis and adding carousel cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlfaa
mlfaa committed Dec 29, 2021
1 parent 214722c commit 5a1bdba
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 50 deletions.
113 changes: 68 additions & 45 deletions src/containers/Wikilegis/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { useStyles } from './style';
import customTheme from '../../styles/theme';

import * as TEXTCONSTANTS from '../../settings/texts/WikilegisPage';
import TotalsGrid from '../../components/TotalsGrid';

const defaultSelectedPeriodType = APPLICATION_OPTIONS.DEFAULT_SELECTED_PERIOD_TYPE; // Get all months of the year
const defaultMonthPeriod = APPLICATION_OPTIONS.DEFAULT_MONTH_PERIOD; // All months
Expand All @@ -53,6 +54,7 @@ function Wikilegis(props) {
const classes = useStyles();
// Charts and report Data
const [wikilegisTotalsData, setWikilegisTotalsData] = useState('');
const [wikilegisData, setWikilegisData] = useState([]);
const [newUsersChartData, setNewUsersChartData] = useState([]);
const [totalUsersChartData, setTotalUsersChartData] = useState([]);
const [roomsRankingData, setRoomsRankingData] = useState(defaultApisData.wikilegisRankingData);
Expand Down Expand Up @@ -181,6 +183,46 @@ function Wikilegis(props) {
}
}

async function updateWikilegisData() {
await setWikilegisData(
[
{
isLoaded: totalsAreLoaded,
info: wikilegisTotalsData.participants_total,
title: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.title,
toolTipText: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.wikilegis.jade,
},
{
isLoaded: totalsAreLoaded,
info: wikilegisTotalsData.legis_propo_total,
title: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.title,
toolTipText: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.wikilegis.jade,
},
{
isLoaded: totalsAreLoaded,
info: wikilegisTotalsData.opinions_total,
title: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionOpinionsTotals.title,
toolTipText: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionOpinionsTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionOpinionsTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.wikilegis.jade,
},
{
isLoaded: totalsAreLoaded,
isLast: true,
info: wikilegisTotalsData.votes_total,
title: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.title,
toolTipText: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.wikilegis.jade,
},
],
);
}

async function updateTotalsData() {
try {
const dataJson = {
Expand Down Expand Up @@ -393,6 +435,10 @@ function Wikilegis(props) {
updateAllPageInformations(selectedPeriod, selectedMonth, selectedYear);
}, [apisDataObject]);

useEffect(() => {
updateWikilegisData();
}, [wikilegisTotalsData, totalsAreLoaded]);

useEffect(() => {
checkIfCachedDataIsUpdated();
}, []);
Expand Down Expand Up @@ -461,51 +507,28 @@ function Wikilegis(props) {
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
className={classes.totalFrame}
isLoaded={totalsAreLoaded}
info={`${wikilegisTotalsData.participants_total}`}
title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.title}
toolTipText={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.toolTip}
toolTipAriaLabel={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.toolTipAriaLabel}
toolTipColor={customTheme.palette.wikilegis.jade}
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
className={classes.totalFrame}
isLoaded={totalsAreLoaded}
info={`${wikilegisTotalsData.legis_propo_total}`}
title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.title}
toolTipText={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.toolTip}
toolTipAriaLabel={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.toolTipAriaLabel}
toolTipColor={customTheme.palette.wikilegis.jade}
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
isLoaded={totalsAreLoaded}
info={`${wikilegisTotalsData.opinions_total}`}
title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionOpinionsTotals.title}
toolTipText={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionOpinionsTotals.toolTip}
toolTipAriaLabel={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionOpinionsTotals.toolTipAriaLabel}
toolTipColor={customTheme.palette.wikilegis.jade}
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
className={classes.totalFrameDesktop}
isLoaded={totalsAreLoaded}
info={wikilegisTotalsData.votes_total}
title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.title}
toolTipText={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.toolTip}
toolTipAriaLabel={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.toolTipAriaLabel}
toolTipColor={customTheme.palette.wikilegis.jade}
/>
{
wikilegisData.map((item) => (
<Grid key={item.title} item md={3} className={`${classes.spacing} ${classes.desktop}`} style={{ padding: 0 }}>
<TotalFrame
isLast={item.isLast}
isLoaded={item.isLoaded}
info={item.info}
title={item.title}
toolTipText={item.toolTipText}
toolTipAriaLabel={item.toolTipAriaLabel}
toolTipColor={item.toolTipColor}
subInformation={item.subInformation}
/>
</Grid>
))
}
<Grid className={classes.mobile} item xs={12}>
<Box className={classes.totalsGridBox}>
<Box className={classes.totalsGridInsideBox}>
<TotalsGrid itens={wikilegisData} />
</Box>
</Box>
</Grid>

<Grid item xs={12} className={classes.spacing} style={{ padding: 0 }}>
Expand Down
40 changes: 35 additions & 5 deletions src/containers/Wikilegis/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,43 @@ export const useStyles = makeStyles((theme) => ({
[theme.breakpoints.up('sm')]: {
padding: '0px 35px 0px 0px',
},
[theme.breakpoints.up('md')]: {
padding: '0px 20px 0px 0px',
},
desktop: {
display: 'none',

'@media (min-width: 600px)': {
display: 'block',
},
},
mobile: {
display: 'block',

'@media (min-width: 600px)': {
display: 'none',
},
},
totalsGridBox: {
width: '100%',
minHeight: '100%',
display: 'flex',
padding: '2px 0px 0px 0px',

[theme.breakpoints.up('sm')]: {
padding: '0px 0px 19px 0px',
},
[theme.breakpoints.down('md')]: {
alignItems: 'center',
justifyContent: 'center',
},
},
totalFrameDesktop: {
[theme.breakpoints.up('md')]: {
padding: '0px 0px',
totalsGridInsideBox: {
width: '100%',
},
sectionHeader: {
padding: '0px 0px 0px 16px',

[theme.breakpoints.up('sm')]: {
padding: '0px',
},
},
}));

0 comments on commit 5a1bdba

Please sign in to comment.