From eb58dd52b5ad6366bba8c0b524018fc95d96c0e9 Mon Sep 17 00:00:00 2001 From: Maria Luiza Ferreira Date: Thu, 30 Dec 2021 17:51:31 -0300 Subject: [PATCH] US25-VisualizacaoTotaisMobile (#247) * #237 - Adjusting total data in audiences and adding carousel cards * #245 - Creating TotalsGrid component * #245 - Adjusting spacing in audiencies page * #245- Adjusting padding top in TotalsGrid component * #237 - Adjusting total data in wikilegis and adding carousel cards * #245 - Adjusting min-width on mobile visualization on audiencies page * #245 - Adding margin top in Totals Grid component * #245 - Adjusting spacing in wikilegis page * #245 - Adjusting spacing tooltip in section header component * #245 - Adjusting spacing in title on totals grid * #245 - Adjusting spacing bottom in Totals Grid component * #245 - Adjusting tablet TotalFrame visualization * #245 - Creating TotalsGrid component tests * #246 - Adjusting mobile menu --- src/components/ChartDataFrame/style.js | 2 +- src/components/Headers/SectionHeader/index.js | 4 +- .../Headers/SubSectionHeader/index.js | 2 +- .../Headers/SubSectionHeader/style.js | 7 + .../__test__/__snapshots__/index.test.js.snap | 9 + .../TotalsGrid/__test__/index.test.js | 65 ++++++++ src/components/TotalsGrid/index.js | 119 ++++++++++++++ src/components/TotalsGrid/style.js | 27 +++ src/containers/Audiencias/index.js | 154 ++++++++---------- src/containers/Audiencias/style.js | 44 ++++- src/containers/Wikilegis/index.js | 113 ++++++++----- src/containers/Wikilegis/style.js | 40 ++++- src/layouts/Navbar/style.js | 2 +- src/styles/pages/audienciasPageStyle.js | 3 +- src/styles/pages/wikilegisPageStyle.js | 3 +- 15 files changed, 446 insertions(+), 148 deletions(-) create mode 100644 src/components/TotalsGrid/__test__/__snapshots__/index.test.js.snap create mode 100644 src/components/TotalsGrid/__test__/index.test.js create mode 100644 src/components/TotalsGrid/index.js create mode 100644 src/components/TotalsGrid/style.js diff --git a/src/components/ChartDataFrame/style.js b/src/components/ChartDataFrame/style.js index 961248cb..460931e3 100644 --- a/src/components/ChartDataFrame/style.js +++ b/src/components/ChartDataFrame/style.js @@ -5,7 +5,7 @@ export const useStyles = makeStyles((theme) => ({ root: { display: 'flex', width: '100%', - padding: '0px 16px 0px 0px', + padding: '0px 16px 0px 16px', [theme.breakpoints.up('sm')]: { padding: '0px 35px 0px 0px', diff --git a/src/components/Headers/SectionHeader/index.js b/src/components/Headers/SectionHeader/index.js index ec3fa89a..85a585f9 100644 --- a/src/components/Headers/SectionHeader/index.js +++ b/src/components/Headers/SectionHeader/index.js @@ -18,14 +18,14 @@ export default function SectionHeader(props) { const handleClose = () => setOpen(false); return ( - + {title} - + {(toolTipText !== null && toolTipText !== undefined) && } diff --git a/src/components/Headers/SubSectionHeader/index.js b/src/components/Headers/SubSectionHeader/index.js index 7c6a8afe..fbdb49d1 100644 --- a/src/components/Headers/SubSectionHeader/index.js +++ b/src/components/Headers/SubSectionHeader/index.js @@ -9,7 +9,7 @@ export default function SubSectionHeader(props) { const { title, style } = props; return ( - + {title} diff --git a/src/components/Headers/SubSectionHeader/style.js b/src/components/Headers/SubSectionHeader/style.js index 29f8dcc0..819697c5 100644 --- a/src/components/Headers/SubSectionHeader/style.js +++ b/src/components/Headers/SubSectionHeader/style.js @@ -2,6 +2,13 @@ import { makeStyles } from '@material-ui/core'; export const useStyles = makeStyles((theme) => ({ + subSectionHeader: { + padding: '0px 0px 0px 16px', + + [theme.breakpoints.up('sm')]: { + padding: '0px', + }, + }, typography: { fontWeight: 'bold', fontSize: '16px', diff --git a/src/components/TotalsGrid/__test__/__snapshots__/index.test.js.snap b/src/components/TotalsGrid/__test__/__snapshots__/index.test.js.snap new file mode 100644 index 00000000..76792d18 --- /dev/null +++ b/src/components/TotalsGrid/__test__/__snapshots__/index.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render Totals Grid ToolTip With Data 1`] = `ReactWrapper {}`; + +exports[`Render Totals Grid With Data 1`] = `ReactWrapper {}`; + +exports[`snapshot should not have changes 1`] = `ShallowWrapper {}`; + +exports[`snapshot should not have changes 2`] = `ShallowWrapper {}`; diff --git a/src/components/TotalsGrid/__test__/index.test.js b/src/components/TotalsGrid/__test__/index.test.js new file mode 100644 index 00000000..a292e235 --- /dev/null +++ b/src/components/TotalsGrid/__test__/index.test.js @@ -0,0 +1,65 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import TotalsGrid, { ToolTip } from '../index'; +import MockTheme from '../../../mocks/theme/mockTheme'; +import * as TEXTCONSTANTS from '../../../settings/texts/AudienciasPage'; + +const mockData = [ + { + isLoaded: true, + info: '5000', + title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.title, + toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTip, + toolTipAriaLabel: + TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTipAriaLabel, + toolTipColor: '#DA7F0B', + }, + { + isLoaded: true, + info: '5000', + title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.title, + toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTip, + toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTipAriaLabel, + toolTipColor: '#DA7F0B', + subInformation: '200 realizadas', + }, + { + isLoaded: true, + info: '5000', + title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.title, + toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTip, + toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTipAriaLabel, + toolTipColor: '#DA7F0B', + }, + { + isLoaded: true, + info: '5000', + title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title, + toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTip, + toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTipAriaLabel, + }, +]; + +it('snapshot should not have changes', () => { + const component = shallow(); + expect(component.exists()).toEqual(true); + expect(component).toMatchSnapshot(); +}); + +it('Render Totals Grid With Data', () => { + const component = mount(); + expect(component.exists()).toEqual(true); + expect(component).toMatchSnapshot(); +}); + +it('snapshot should not have changes', () => { + const component = shallow(); + expect(component.exists()).toEqual(true); + expect(component).toMatchSnapshot(); +}); + +it('Render Totals Grid ToolTip With Data', () => { + const component = mount(); + expect(component.exists()).toEqual(true); + expect(component).toMatchSnapshot(); +}); diff --git a/src/components/TotalsGrid/index.js b/src/components/TotalsGrid/index.js new file mode 100644 index 00000000..22aadfe0 --- /dev/null +++ b/src/components/TotalsGrid/index.js @@ -0,0 +1,119 @@ +/* eslint-disable react/prop-types */ +/* eslint-disable no-confusing-arrow */ + +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import { + Box, Typography, +} from '@material-ui/core'; +import CheckCircleIcon from '@material-ui/icons/CheckCircle'; +import Tooltips from '../ToolTip/index'; +import InfoModal from '../InfoModal'; +import { useStyles } from './style'; +import useMobile from '../../hooks/useMobile'; + +export function ToolTip(props) { + const { + // eslint-disable-next-line react/prop-types + itens, index, + } = props; + const [open, setOpen] = useState(false); + const { mobileView, tabletView } = useMobile(); + const handleOpen = () => (mobileView || tabletView) && setOpen(true); + const handleClose = () => setOpen(false); + + return ( + <> + {(itens[index] && itens[index].toolTipText !== null && itens[index].toolTipText !== undefined) + && ( + <> + + + + + + )} + + ); +} + +export default function TotalsGrid(props) { + const classes = useStyles(); + const { + itens, className, + } = props; + + return ( + + {itens.map((item, index) => ( + <> + {item.isLoaded ? ( + <> + + + + + {item.title} + + + + + + + {item.info} + + {item.subInformation && item.subInformation.length !== 0 && ( + + + + + + + {item.subInformation} + + + + )} + + + { index % 2 === 0 && ( +
+ )} + { index === 1 && ( +
+ )} + + ) : ( + + + + )} + + ))} + + ); +} + +TotalsGrid.propTypes = { + itens: PropTypes.array, + className: PropTypes.object, +}; + +TotalsGrid.defaultProps = { + itens: [], + className: {}, +}; diff --git a/src/components/TotalsGrid/style.js b/src/components/TotalsGrid/style.js new file mode 100644 index 00000000..92c0fd69 --- /dev/null +++ b/src/components/TotalsGrid/style.js @@ -0,0 +1,27 @@ +/* eslint-disable import/prefer-default-export */ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles((theme) => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + flex: 1, + flexDirection: 'row', + backgroundColor: '#000000', + justifyContent: 'space-between', + overflow: 'hidden', + left: 0, + }, + text: { + color: theme.palette.white.main, + alignItems: 'center', + padding: '4px 8px 0px 16px', + }, + info: { + color: '#FFF', + alignSelf: 'center', + fontWeight: 'bold', + fontSize: '20px', + paddingLeft: '16px', + }, +})); diff --git a/src/containers/Audiencias/index.js b/src/containers/Audiencias/index.js index 5708b238..7b542583 100644 --- a/src/containers/Audiencias/index.js +++ b/src/containers/Audiencias/index.js @@ -36,6 +36,7 @@ import { getParticipationChartDataByMonth, getParticipationChartDataByYear, } from './auxFunctions/computeParticipation'; +import TotalsGrid from '../../components/TotalsGrid'; import { getRoomTotalsChartDataByDay, getRoomTotalsChartDataByMonth, @@ -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( @@ -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 = { @@ -543,6 +585,10 @@ function Audiencias(props) { updateAllPageInformations(selectedPeriod, selectedMonth, selectedYear); }, [apisDataObject]); + useEffect(() => { + updateAudiencesData(); + }, [audienciasTotalsData, totalsAreLoaded]); + useEffect(() => { checkIfCachedDataIsUpdated(); }, []); @@ -557,14 +603,14 @@ function Audiencias(props) { headerColors={headerColors} initialYear={audienceInitialYear} /> - + {showCachedDataAlert && ( )} - + - - - - - - - - - - - - - - + { + audienciasData.map((audiencia, index) => ( + + + + )) + } + + + + + + @@ -777,7 +767,7 @@ function Audiencias(props) { )} - + {newUsersChartData !== undefined && newUsersChartData.length > 0 ? ( diff --git a/src/containers/Audiencias/style.js b/src/containers/Audiencias/style.js index 527b3581..8c0c9f19 100644 --- a/src/containers/Audiencias/style.js +++ b/src/containers/Audiencias/style.js @@ -57,17 +57,47 @@ export const useStyles = makeStyles((theme) => ({ paddingTop: '48px', }, }, - totalFrame: { + totalFrameDesktop: { + [theme.breakpoints.up('md')]: { + padding: '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 35px 0px 0px', + padding: '0px 0px 19px 0px', }, - [theme.breakpoints.up('md')]: { - padding: '0px 20px 0px 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', }, }, })); diff --git a/src/containers/Wikilegis/index.js b/src/containers/Wikilegis/index.js index 53c62c46..0a0ef3b7 100644 --- a/src/containers/Wikilegis/index.js +++ b/src/containers/Wikilegis/index.js @@ -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 @@ -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); @@ -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 = { @@ -393,6 +435,10 @@ function Wikilegis(props) { updateAllPageInformations(selectedPeriod, selectedMonth, selectedYear); }, [apisDataObject]); + useEffect(() => { + updateWikilegisData(); + }, [wikilegisTotalsData, totalsAreLoaded]); + useEffect(() => { checkIfCachedDataIsUpdated(); }, []); @@ -461,51 +507,28 @@ function Wikilegis(props) { /> - - - - - - - - - - - - - - + { + wikilegisData.map((item) => ( + + + + )) + } + + + + + + diff --git a/src/containers/Wikilegis/style.js b/src/containers/Wikilegis/style.js index 55df35d5..536d6139 100644 --- a/src/containers/Wikilegis/style.js +++ b/src/containers/Wikilegis/style.js @@ -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', }, }, })); diff --git a/src/layouts/Navbar/style.js b/src/layouts/Navbar/style.js index f1baa514..514cb4cf 100644 --- a/src/layouts/Navbar/style.js +++ b/src/layouts/Navbar/style.js @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme) => ({ background: 'black', color: 'white', width: '100%', - height: '-webkit-fill-available', + height: '100%', }, tab: { height: '92%', diff --git a/src/styles/pages/audienciasPageStyle.js b/src/styles/pages/audienciasPageStyle.js index 567a8820..1b28d8ae 100644 --- a/src/styles/pages/audienciasPageStyle.js +++ b/src/styles/pages/audienciasPageStyle.js @@ -12,7 +12,6 @@ export const useStyles = makeStyles((theme) => ({ maxWidth: '1280px', marginLeft: 'auto', marginRight: 'auto', - padding: '0px 0px 0px 16px', marginTop: '40px', // '@media (max-width: 1025px)': { @@ -30,7 +29,7 @@ export const useStyles = makeStyles((theme) => ({ }, }, boxTitle: { - padding: '0px 16px 0px 0px', + padding: '0px 16px 0px 16px', [theme.breakpoints.up('sm')]: { padding: '0px 35px 0px 0px', diff --git a/src/styles/pages/wikilegisPageStyle.js b/src/styles/pages/wikilegisPageStyle.js index 48c786db..0bc6d04a 100644 --- a/src/styles/pages/wikilegisPageStyle.js +++ b/src/styles/pages/wikilegisPageStyle.js @@ -34,7 +34,6 @@ export const useStyles = makeStyles((theme) => ({ maxWidth: '1280px', marginLeft: 'auto', marginRight: 'auto', - padding: '0px 0px 0px 16px', marginTop: '40px', // '@media (max-width: 1025px)': { @@ -52,7 +51,7 @@ export const useStyles = makeStyles((theme) => ({ }, }, boxTitle: { - padding: '0px 16px 0px 0px', + padding: '0px 16px 0px 16px', [theme.breakpoints.up('sm')]: { padding: '0px 35px 0px 0px',