diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index df36e49..8c03534 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/packages/concordia-app/public/locales/en/translation.json @@ -92,6 +92,7 @@ "topic.poll.tab.graph.title": "Results", "topic.poll.tab.results.vote": "Vote", "topic.poll.tab.results.votes": "Votes", + "topic.poll.tab.results.no.votes": "No one has voted yet!", "topic.poll.tab.results.user.vote": "You voted: ", "topic.poll.tab.vote.no.changes": "This poll does not allow vote changes.", "topic.poll.tab.vote.form.button.submit": "Submit", diff --git a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx index 8b47551..8c0bb7d 100644 --- a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx +++ b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx @@ -1,5 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { Grid, Statistic, Tab } from 'semantic-ui-react'; +import { + Grid, Header, Statistic, Tab, +} from 'semantic-ui-react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import PollChartBar from './PollChartBar'; @@ -38,23 +40,32 @@ const PollGraph = (props) => { ), [pollOptions, t, totalVotes, userVoteIndex]); const panes = useMemo(() => { + // TODO: tidy up duplicated code below using CHART_TYPE_BAR and CHART_TYPE_DONUT const chartBarPane = ( - - + + {totalVotes > 0 + ? ( + + ) + : ( +
+ {t('topic.poll.tab.results.no.votes')} +
+ )}
- {footer} + {totalVotes > 0 && footer}
@@ -65,18 +76,26 @@ const PollGraph = (props) => { - - + + {totalVotes > 0 + ? ( + + ) + : ( +
+ {t('topic.poll.tab.results.no.votes')} +
+ )}
- {footer} + {totalVotes > 0 && footer}
@@ -87,7 +106,7 @@ const PollGraph = (props) => { { menuItem: { key: 'chart-bar', icon: 'chart bar' }, render: () => chartBarPane }, { menuItem: { key: 'chart-donut', icon: 'chart pie' }, render: () => chartDonutPane }, ]); - }, [footer, pollOptions, voteCounts, voterNames]); + }, [footer, pollOptions, t, totalVotes, voteCounts, voterNames]); return (