Merge pull request #120 from TNG/bar-chart

Bar chart
TNG · Sep 22, 2023 · 64cb05a · 64cb05a
2 parents a57f034 + b5dccfc
commit 64cb05a
Show file tree

Hide file tree

Showing 14 changed files with 260 additions and 200 deletions.
diff --git 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
@@ -6,6 +6,7 @@
     <link rel="icon" type="image/png" href="icon_192.png" />
     <link rel="apple-touch-icon" sizes="192x192" href="icon_192.png" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" />
     <title>Next Generation Scrum Poker</title>
   </head>
   <body>

diff --git a/frontend/src/Components/BarChart/BarChart.css 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
@@ -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
@@ -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 (
+    <>
+      <style>{chartStyles}</style>
+      <ChartistBarChart
+        data={data}
+        options={{
+          low: 0,
+          high,
+          axisY: { onlyInteger: true },
+          chartPadding: 16,
+        }}
+        className={classes.chart}
+      />
+    </>
+  );
+});
diff --git a/frontend/src/Components/BarChart/getChartVoteData.test.ts 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<CardValue>([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
@@ -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<WebSocketState, 'votes' | 'scale'>): {
+  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<CardValue, number>();
+
+  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
diff --git a/frontend/src/Components/PieChart/getPieChartVoteData.test.ts b/frontend/src/Components/PieChart/getPieChartVoteData.test.ts
diff --git a/frontend/src/Components/PieChart/getPieChartVoteData.ts b/frontend/src/Components/PieChart/getPieChartVoteData.ts
diff --git 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;
+}