diff --git a/packages/concordia-app/src/components/PollView/PollGraph/PollChartBar/index.jsx b/packages/concordia-app/src/components/PollView/PollGraph/PollChartBar/index.jsx
index c5ca9d7..63b1d4c 100644
--- a/packages/concordia-app/src/components/PollView/PollGraph/PollChartBar/index.jsx
+++ b/packages/concordia-app/src/components/PollView/PollGraph/PollChartBar/index.jsx
@@ -35,8 +35,8 @@ const PollChartBar = (props) => {
show: false,
},
y: {
- formatter(value, { seriesIndex }) {
- return `
${voterNames[seriesIndex].join('
')}
`;
+ formatter(value, { dataPointIndex }) {
+ return `${voterNames[dataPointIndex].join('
')}
`;
},
title: {
formatter: () => null,
diff --git a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx
index 8c0bb7d..3cea672 100644
--- a/packages/concordia-app/src/components/PollView/PollGraph/index.jsx
+++ b/packages/concordia-app/src/components/PollView/PollGraph/index.jsx
@@ -1,18 +1,24 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {
+ useCallback, useEffect, useMemo, useState,
+} from 'react';
import {
- Grid, Header, Statistic, Tab,
+ Grid,
+ Header, Statistic, Tab,
} from 'semantic-ui-react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import PollChartBar from './PollChartBar';
import PollChartDonut from './PollChartDonut';
import './styles.css';
+import { CHART_TYPE_BAR, CHART_TYPE_DONUT } from '../../../constants/polls/PollGraph';
const PollGraph = (props) => {
const {
pollOptions, userVoteIndex, voteCounts, voterNames,
} = props;
- const [totalVotes, setTotalVotes] = useState(voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0));
+ const [totalVotes, setTotalVotes] = useState(
+ voteCounts.reduce((accumulator, voteCount) => accumulator + voteCount, 0),
+ );
const { t } = useTranslation();
useEffect(() => {
@@ -20,7 +26,7 @@ const PollGraph = (props) => {
}, [voteCounts]);
const footer = useMemo(() => (
- <>
+
{ totalVotes }
@@ -36,84 +42,88 @@ const PollGraph = (props) => {
{pollOptions[userVoteIndex]}
)}
- >
+
), [pollOptions, t, totalVotes, userVoteIndex]);
- const panes = useMemo(() => {
- // TODO: tidy up duplicated code below using CHART_TYPE_BAR and CHART_TYPE_DONUT
- const chartBarPane = (
+ function calculateChartBarWidth(nOptions) {
+ if (nOptions < 6) return 8;
+ if (nOptions < 10) return 10;
+ if (nOptions < 14) return 12;
+ if (nOptions < 18) return 14;
+ return 16;
+ }
+
+ function calculateChartDonutWidth(nOptions) {
+ if (nOptions < 10) return 8;
+ if (nOptions < 16) return 10;
+ return 12;
+ }
+
+ const generatePane = useCallback(
+ (type) => (
-
- {totalVotes > 0
+
+ {type === CHART_TYPE_BAR
? (
- )
- : (
-
- {t('topic.poll.tab.results.no.votes')}
-
- )}
-
-
-
-
-
- {totalVotes > 0 && footer}
-
-
-
-
- );
- const chartDonutPane = (
-
-
-
-
-
- {totalVotes > 0
- ? (
+ ) : (
- )
- : (
-
- {t('topic.poll.tab.results.no.votes')}
-
)}
- {totalVotes > 0 && footer}
+ {footer}
- );
+ ),
+ [footer, pollOptions, voteCounts, voterNames],
+ );
+
+ const panes = useMemo(() => {
+ const chartBarPane = generatePane(CHART_TYPE_BAR);
+ const chartDonutPane = generatePane(CHART_TYPE_DONUT);
return ([
{ menuItem: { key: 'chart-bar', icon: 'chart bar' }, render: () => chartBarPane },
{ menuItem: { key: 'chart-donut', icon: 'chart pie' }, render: () => chartDonutPane },
]);
- }, [footer, pollOptions, t, totalVotes, voteCounts, voterNames]);
-
- return (
-
- );
+ }, [generatePane]);
+ return useMemo(() => (
+ <>
+ {totalVotes > 0
+ ? (
+
+ )
+ : (
+
+ {t('topic.poll.tab.results.no.votes')}
+
+ )}
+ >
+ ), [panes, t, totalVotes]);
};
PollGraph.defaultProps = {