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 15, 2021
1 parent e57d57f commit c6afa11
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 87 deletions.
146 changes: 68 additions & 78 deletions src/containers/Audiencias/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import { useStyles } from './style';
import customTheme from '../../styles/theme';

import * as TEXTCONSTANTS from '../../settings/texts/AudienciasPage';
import CaroulselCards from '../../components/CarouselCards';

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 @@ -72,8 +73,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 @@ -348,6 +351,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 @@ -542,6 +584,10 @@ function Audiencias(props) {
updateAllPageInformations(selectedPeriod, selectedMonth, selectedYear);
}, [apisDataObject]);

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

useEffect(() => {
checkIfCachedDataIsUpdated();
}, []);
Expand Down Expand Up @@ -571,84 +617,28 @@ 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}>
<CaroulselCards carouselItens={audienciasData} classes={classes} />
</Box>
</Box>
</Grid>

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

[theme.breakpoints.up('sm')]: {
padding: '0px 35px 0px 0px',
'@media (min-width: 1025px)': {
display: 'block',
},
[theme.breakpoints.up('md')]: {
padding: '0px 20px 0px 0px',
},
mobile: {
display: 'block',

'@media (min-width: 1025px)': {
display: 'none',
},
},
totalFrameDesktop: {
[theme.breakpoints.up('md')]: {
padding: '0px 0px',
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 c6afa11

Please sign in to comment.