diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 87444671..08566f83 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -17,7 +17,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v3
with:
- node-version: 16
+ node-version: 18
- name: Install dependencies
run: npm ci
- name: Run tests
@@ -34,7 +34,7 @@ jobs:
- name: Setup Node
uses: actions/setup-node@v3
with:
- node-version: 16
+ node-version: 18
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
diff --git a/frontend/index.html b/frontend/index.html
index b489666b..ff602ea1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,7 @@
+
Next Generation Scrum Poker
diff --git a/frontend/src/Components/BarChart/BarChart.css b/frontend/src/Components/BarChart/BarChart.css
new file mode 100644
index 00000000..f0ba9864
--- /dev/null
+++ b/frontend/src/Components/BarChart/BarChart.css
@@ -0,0 +1,18 @@
+.ct-label {
+ font-size: 16px;
+ color: var(--text-primary);
+}
+
+.ct-grid {
+ stroke: var(--text-primary);
+ opacity: 50%;
+}
+
+.ct-horizontal {
+ display: none;
+}
+
+.ct-bar {
+ stroke: var(--primary) !important;
+ stroke-width: 48px;
+}
diff --git a/frontend/src/Components/BarChart/BarChart.module.css b/frontend/src/Components/BarChart/BarChart.module.css
new file mode 100644
index 00000000..4e2b799e
--- /dev/null
+++ b/frontend/src/Components/BarChart/BarChart.module.css
@@ -0,0 +1,5 @@
+.chart {
+ height: 320px;
+ width: 640px;
+ max-width: 95vw;
+}
diff --git a/frontend/src/Components/BarChart/BarChart.tsx b/frontend/src/Components/BarChart/BarChart.tsx
new file mode 100644
index 00000000..45ec0f52
--- /dev/null
+++ b/frontend/src/Components/BarChart/BarChart.tsx
@@ -0,0 +1,26 @@
+import { ChartistBarChart } from 'preact-chartist';
+import { connectToWebSocket } from '../WebSocket/WebSocket';
+import chartStyles from './BarChart.css?inline';
+import classes from './BarChart.module.css';
+import { useDeepCompareMemoize } from '../../helpers/helpers';
+import { getChartVoteData } from './getChartVoteData';
+
+export const BarChart = connectToWebSocket(({ socket }) => {
+ const { data, high } = useDeepCompareMemoize(getChartVoteData(socket.state));
+
+ return (
+ <>
+
+
+
+ );
+});
diff --git a/frontend/src/Components/BarChart/getChartVoteData.test.ts b/frontend/src/Components/BarChart/getChartVoteData.test.ts
new file mode 100644
index 00000000..45cba4da
--- /dev/null
+++ b/frontend/src/Components/BarChart/getChartVoteData.test.ts
@@ -0,0 +1,48 @@
+import { CardValue, VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../../shared/cards';
+import { getChartVoteData } from './getChartVoteData';
+
+describe('The getChartVoteData function', () => {
+ it('accumulates votes correctly', () => {
+ const { data, high } = getChartVoteData({
+ votes: {
+ user1: '2',
+ user2: '2',
+ user3: '1',
+ user4: '2',
+ user5: '1',
+ user6: '0.5',
+ user7: '4',
+ },
+ scale: ['0', '0.5', '1', '2', '3', '4', '5'],
+ });
+ expect(data.series).toEqual([[1, 2, 3, 0, 1]]);
+ expect(data.labels).toEqual(['0.5', '1', '2', '3', '4']);
+ expect(high).toBe(3);
+ });
+
+ it.each([VOTE_COFFEE, VOTE_OBSERVER, VOTE_NOTE_VOTED])('ignores %j votes', (vote) => {
+ const { data, high } = getChartVoteData({
+ votes: {
+ user1: '1',
+ user2: vote,
+ user3: '?',
+ },
+ scale: ['0', '0.5', '1', '2', '3'],
+ });
+ expect(data.series).toEqual([[1, 1]]);
+ expect(data.labels).toEqual(['1', '?']);
+ expect(high).toBe(1);
+ });
+
+ it('returns full scale when no valid vote was given', () => {
+ const { data, high } = getChartVoteData({
+ votes: {
+ user1: VOTE_COFFEE,
+ },
+ scale: ['0', '0.5', '1', '2', '3', '4', '5'],
+ });
+ expect(data.series).toEqual([[]]);
+ expect(data.labels).toEqual(['0', '0.5', '1', '2', '3', '4', '5']);
+ expect(high).toBe(1);
+ });
+});
diff --git a/frontend/src/Components/BarChart/getChartVoteData.ts b/frontend/src/Components/BarChart/getChartVoteData.ts
new file mode 100644
index 00000000..7fc04215
--- /dev/null
+++ b/frontend/src/Components/BarChart/getChartVoteData.ts
@@ -0,0 +1,47 @@
+import { CardValue, VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../../shared/cards';
+import { WebSocketState } from '../../../../shared/serverMessages';
+
+export const getChartVoteData = ({
+ votes,
+ scale,
+}: Pick): {
+ data: { labels: CardValue[]; series: [number[]] };
+ high: number;
+} => {
+ const labels = scale.filter(
+ (value) => ![VOTE_OBSERVER, VOTE_NOTE_VOTED, VOTE_COFFEE, '?'].includes(value),
+ );
+ const votesByValue = new Map(labels.map((value) => [value, 0]));
+ const otherVotesByValue = new Map();
+
+ for (const value of Object.values(votes)) {
+ if (labels.includes(value)) {
+ votesByValue.set(value, (votesByValue.get(value) ?? 0) + 1);
+ }
+
+ if (['?'].includes(value)) {
+ otherVotesByValue.set(value, (otherVotesByValue.get(value) ?? 0) + 1);
+ }
+ }
+
+ const accumulatedVotes = [...votesByValue.entries()];
+ const firstVoteIndex = accumulatedVotes.findIndex(([, votes]) => votes !== 0);
+ const lastVoteIndex = accumulatedVotes.findLastIndex(([, votes]) => votes !== 0);
+ const slicedAccumulatedVotes = [
+ ...accumulatedVotes.slice(firstVoteIndex, lastVoteIndex + 1),
+ ...otherVotesByValue.entries(),
+ ];
+ const slicedLabels = slicedAccumulatedVotes.length
+ ? [...labels.slice(firstVoteIndex, lastVoteIndex + 1), ...otherVotesByValue.keys()]
+ : [...labels, ...otherVotesByValue.keys()];
+
+ const data = slicedAccumulatedVotes.map(([, numberOfVotes]) => numberOfVotes);
+
+ return {
+ data: {
+ labels: slicedLabels,
+ series: [data],
+ },
+ high: Math.max(1, ...data),
+ };
+};
diff --git a/frontend/src/Components/PieChart/PieChart.tsx b/frontend/src/Components/PieChart/PieChart.tsx
deleted file mode 100644
index 9452cd56..00000000
--- a/frontend/src/Components/PieChart/PieChart.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { ArcElement, Chart, ChartOptions, Legend, PieController, Tooltip } from 'chart.js';
-import { useContext, useEffect, useRef } from 'preact/hooks';
-import { useDeepCompareMemoize } from '../../helpers/helpers';
-import { ColorMode } from '../ColorModeProvider/ColorModeProvider';
-import { connectToWebSocket } from '../WebSocket/WebSocket';
-import { getPieChartVoteData } from './getPieChartVoteData';
-
-Chart.register(PieController, ArcElement, Legend, Tooltip);
-
-export const PieChart = connectToWebSocket(({ socket }) => {
- const canvasRef = useRef(null);
- const chartRef = useRef | null>(null);
- const { isDark } = useContext(ColorMode);
- const { labels, datasets } = useDeepCompareMemoize(getPieChartVoteData(socket.state.votes));
-
- useEffect(() => {
- if (chartRef.current) {
- chartRef.current.config.data.datasets = datasets;
- chartRef.current.config.data.labels = labels;
- chartRef.current.config.options = getChartOptions();
- chartRef.current.update('none');
- }
- }, [datasets, labels, isDark]);
-
- useEffect(() => {
- if (!canvasRef.current) return;
-
- chartRef.current = new Chart(canvasRef.current, {
- type: 'pie',
- data: {
- labels,
- datasets,
- },
- options: getChartOptions(),
- });
-
- return () => {
- if (chartRef.current) {
- chartRef.current.destroy();
- chartRef.current = null;
- }
- };
- }, []);
-
- if (!datasets.length) {
- return null;
- }
-
- return (
-
- );
-});
-
-const getChartOptions = (): ChartOptions<'pie'> => ({
- layout: {
- padding: 16,
- },
- plugins: {
- legend: {
- labels: { color: getComputedStyle(document.body).getPropertyValue('--text-primary') },
- },
- },
-});
diff --git a/frontend/src/Components/PieChart/getPieChartVoteData.test.ts b/frontend/src/Components/PieChart/getPieChartVoteData.test.ts
deleted file mode 100644
index fbfc4317..00000000
--- a/frontend/src/Components/PieChart/getPieChartVoteData.test.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CardValue, VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../../shared/cards';
-import { getPieChartVoteData } from './getPieChartVoteData';
-
-describe('The getPieChartVoteData function', () => {
- it('accumulates votes correctly', () => {
- const { datasets, labels } = getPieChartVoteData({
- user1: '2',
- user2: '2',
- user3: '1',
- user4: '2',
- user5: '1',
- user6: '0.5',
- });
- expect(datasets[0].data).toEqual([1, 2, 3]);
- expect(labels).toEqual(['0.5', '1', '2']);
- });
-
- it.each([VOTE_COFFEE, VOTE_OBSERVER, VOTE_NOTE_VOTED])('ignores %j votes', (vote) => {
- const { datasets, labels } = getPieChartVoteData({
- user1: '1',
- user2: vote,
- });
- expect(datasets[0].data).toEqual([1]);
- expect(labels).toEqual(['1']);
- });
-});
diff --git a/frontend/src/Components/PieChart/getPieChartVoteData.ts b/frontend/src/Components/PieChart/getPieChartVoteData.ts
deleted file mode 100644
index 59bd992d..00000000
--- a/frontend/src/Components/PieChart/getPieChartVoteData.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ChartDataset } from 'chart.js';
-import { CardValue, VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../../shared/cards';
-import { Votes } from '../../../../shared/serverMessages';
-import { compareCardValues } from '../../helpers/compareVotes';
-
-export const getPieChartVoteData = (
- votes: Votes,
-): { labels: CardValue[]; datasets: ChartDataset<'pie', number[]>[] } => {
- const votesByValue: Partial> = {};
- for (const value of Object.values(votes)) {
- if (![VOTE_OBSERVER, VOTE_NOTE_VOTED, VOTE_COFFEE].includes(value)) {
- votesByValue[value] = (votesByValue[value] ?? 0) + 1;
- }
- }
-
- const accumulatedVotes = Object.entries(votesByValue) as [CardValue, number][];
-
- accumulatedVotes.sort(([value1], [value2]) => compareCardValues(value1, value2));
-
- const datasets: ChartDataset<'pie', number[]>[] = [
- {
- data: accumulatedVotes.map(([, numberOfVotes]) => numberOfVotes),
- backgroundColor: [
- // Colors taken from https://colorbrewer2.org/
- '#a6cee3',
- '#1f78b4',
- '#b2df8a',
- '#33a02c',
- '#fb9a99',
- '#e31a1c',
- '#fdbf6f',
- '#ff7f00',
- '#cab2d6',
- '#6a3d9a',
- '#ffff99',
- '#b15928',
- ],
- hoverOffset: 4,
- borderColor: getComputedStyle(document.body).getPropertyValue('--background'),
- },
- ];
-
- return {
- labels: accumulatedVotes.map(([label]) => label),
- datasets,
- };
-};
diff --git a/frontend/src/Components/ResultsPage/ResultsPage.module.css b/frontend/src/Components/ResultsPage/ResultsPage.module.css
index 2ebdad63..4b5460e9 100644
--- a/frontend/src/Components/ResultsPage/ResultsPage.module.css
+++ b/frontend/src/Components/ResultsPage/ResultsPage.module.css
@@ -20,3 +20,7 @@
color: var(--text-tertiary);
fill: var(--text-tertiary);
}
+
+.loading {
+ line-height: 320px;
+}
diff --git a/frontend/src/Components/ResultsPage/ResultsPage.tsx b/frontend/src/Components/ResultsPage/ResultsPage.tsx
index 12ec77a6..857345d6 100644
--- a/frontend/src/Components/ResultsPage/ResultsPage.tsx
+++ b/frontend/src/Components/ResultsPage/ResultsPage.tsx
@@ -1,3 +1,4 @@
+import { Suspense, lazy } from 'preact/compat';
import { CardValue, VOTE_COFFEE, VOTE_NOTE_VOTED, VOTE_OBSERVER } from '../../../../shared/cards';
import {
COLUMN_NAME,
@@ -5,16 +6,15 @@ import {
HEADING_RESULTS,
TOOLTIP_PENDING_CONNECTION,
} from '../../constants';
+import { compareVotes } from '../../helpers/compareVotes';
+import { UserState, getVotingState } from '../../helpers/getVotingState';
import sharedClasses from '../../styles.module.css';
import { WebSocketApi } from '../../types/WebSocket';
import { IconCoffee } from '../IconCoffee/IconCoffee';
import { IconNotVoted } from '../IconNotVoted/IconNotVoted';
import { IconObserver } from '../IconObserver/IconObserver';
-import { PieChart } from '../PieChart/PieChart';
import { ResetButton } from '../ResetButton/ResetButton';
import { connectToWebSocket } from '../WebSocket/WebSocket';
-import { compareVotes } from '../../helpers/compareVotes';
-import { getVotingState, UserState } from '../../helpers/getVotingState';
import classes from './ResultsPage.module.css';
const getSortedResultsArray = (socket: WebSocketApi): UserState[] => {
@@ -37,35 +37,39 @@ const getVote = (vote: CardValue) => {
const getClassName = (vote: CardValue) =>
vote === VOTE_NOTE_VOTED || vote === VOTE_OBSERVER ? classes.notVotedEntry : classes.votedEntry;
-export const ResultsPage = connectToWebSocket(({ socket }) => (
-
-
{HEADING_RESULTS}
-
-
-
-
-
-
-
- {getSortedResultsArray(socket).map(({ user, vote, pendingConnection }) => (
-
- |
- {user}
- |
- {getVote(vote)} |
+const BarChart = lazy(() => import('../BarChart/BarChart').then((value) => value.BarChart));
+
+export const ResultsPage = connectToWebSocket(({ socket }) => {
+ return (
+
+
{HEADING_RESULTS}
+
Loading...}>
+
+
+
+
+
+
+ {getSortedResultsArray(socket).map(({ user, vote, pendingConnection }) => (
+
+ |
+ {user}
+ |
+ {getVote(vote)} |
+
+ ))}
+
+
+
+