Skip to content

Commit

Permalink
#237 - Adjusting total data in audiences 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 3b3379c commit 403b4da
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 86 deletions.
147 changes: 69 additions & 78 deletions src/containers/Audiencias/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
getParticipationChartDataByMonth,
getParticipationChartDataByYear,
} from './auxFunctions/computeParticipation';
import TotalsGrid from '../../components/TotalsGrid';
import {
getRoomTotalsChartDataByDay,
getRoomTotalsChartDataByMonth,
Expand Down Expand Up @@ -73,8 +74,10 @@ function Audiencias(props) {
};

const classes = useStyles();
const { totalFrame, totalFrameDesktop } = useStyles();
// Charts and report Data
const [audienciasTotalsData, setAudienciasTotalsData] = useState('');
const [audienciasData, setAudienciasData] = useState([]);
const [newUsersChartData, setNewUsersChartData] = useState([]);
const [totalUsersChartData, setTotalUsersChartData] = useState([]);
const [roomsRankingData, setRoomsRankingData] = useState(
Expand Down Expand Up @@ -349,6 +352,45 @@ function Audiencias(props) {
}
}

async function updateAudiencesData() {
await setAudienciasData(
[
{
isLoaded: totalsAreLoaded,
info: audienciasTotalsData.users_total,
title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.title,
toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.audiencias.seabuckthorn,
},
{
isLoaded: totalsAreLoaded,
info: audienciasTotalsData.audiencias_total,
title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.title,
toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.audiencias.seabuckthorn,
subInformation: `${audienciasTotalsData.audiencias_total_finished} realizadas`,
},
{
isLoaded: totalsAreLoaded,
info: audienciasTotalsData.messages_total,
title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.title,
toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTipAriaLabel,
toolTipColor: customTheme.palette.audiencias.seabuckthorn,
},
{
isLoaded: totalsAreLoaded,
info: audienciasTotalsData.questions_total,
title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title,
toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTip,
toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTipAriaLabel,
},
],
);
}

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

useEffect(() => {
updateAudiencesData();
}, [audienciasTotalsData, totalsAreLoaded]);

useEffect(() => {
checkIfCachedDataIsUpdated();
}, []);
Expand Down Expand Up @@ -572,84 +618,29 @@ function Audiencias(props) {
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
className={classes.totalFrame}
isLoaded={totalsAreLoaded}
info={`${audienciasTotalsData.users_total}`}
title={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals
.title
}
toolTipText={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals
.toolTip
}
toolTipAriaLabel={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals
.toolTipAriaLabel
}
toolTipColor={customTheme.palette.audiencias.seabuckthorn}
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
className={classes.totalFrame}
isLoaded={totalsAreLoaded}
info={`${audienciasTotalsData.audiencias_total}`}
title={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.title
}
toolTipText={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals
.toolTip
}
toolTipAriaLabel={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals
.toolTipAriaLabel
}
toolTipColor={customTheme.palette.audiencias.seabuckthorn}
subInformation={`${audienciasTotalsData.audiencias_total_finished} realizadas`}
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
isLoaded={totalsAreLoaded}
info={`${audienciasTotalsData.messages_total}`}
title={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.title
}
toolTipText={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals
.toolTip
}
toolTipAriaLabel={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals
.toolTipAriaLabel
}
toolTipColor={customTheme.palette.audiencias.seabuckthorn}
/>
</Grid>

<Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
<TotalFrame
className={classes.totalFrameDesktop}
isLoaded={totalsAreLoaded}
info={audienciasTotalsData.questions_total}
title={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title
}
toolTipText={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals
.toolTip
}
toolTipAriaLabel={
TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals
.toolTipAriaLabel
}
/>
{
audienciasData.map((audiencia, index) => (
<Grid key={audiencia.title} item md={3} className={`${classes.spacing} ${classes.desktop}`} style={{ padding: 0 }}>
<TotalFrame
// className={`${index + 1 === audienciasData.length && classes.totalFrameDesktop}`}
isLoaded={audiencia.isLoaded}
info={audiencia.info}
title={audiencia.title}
toolTipText={audiencia.toolTipText}
toolTipAriaLabel={audiencia.toolTipAriaLabel}
toolTipColor={audiencia.toolTipColor}
subInformation={audiencia.subInformation}
/>
</Grid>
))
}
<Grid className={classes.mobile} item xs={12}>
<Box className={classes.caroulselBox}>
<Box className={classes.caroulselInsideBox}>
<TotalsGrid itens={audienciasData} />
{/* <CaroulselCards carouselItens={audienciasData} classes={classes} /> */}
</Box>
</Box>
</Grid>

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

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

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

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

0 comments on commit 403b4da

Please sign in to comment.