leaderboard-graph LeaderBoardGraph.tsx

100% Statements 8/8

0% Branches 0/5

100% Functions 5/5

100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15x
 
 
 
 
 
 
83x
28x
 
28x
83x
 
 
 
 
 
 
 
 
 
 
 
28x
 
 
 
 
 
 
 
 
  import { memo, useMemo } from 'react';
 
import { Stack } from '@allshares/studio-design-system';
 
import { sumTotalForUser, type DataLeaderboard } from '../../dashboard.utils';
 
import { LeaderBoardRow } from './LeaderBoardRow';
 
interface LeaderBoardGraphProps {
  readonly colors?: string[];
  readonly data?: DataLeaderboard[];
  readonly height?: number | string;
  readonly width?: number | string;
  readonly loading?: boolean;
}
 
export const LeaderBoardGraph = memo(function LeaderBoardGraph({
  colors = [],
  data = [],
  width = '300px',
  height = '300px',
  loading = true,
}: LeaderBoardGraphProps) {
  const max = useMemo(() => Math.max(...data.map((entry) => sumTotalForUser(entry))), [data]);
  const graphs = useMemo(
    () =>
      data.map((row, idx) => (
        <LeaderBoardRow
          key={row.user.email}
          colors={colors}
          idx={idx}
          loading={loading}
          max={max}
          row={row}
          rowsCount={data.length}
        />
      )),
    [colors, data, loading, max],
  );
  return (
    <Stack
      gap={12}
      style={{ height, width }}
    >
      {graphs}
    </Stack>
  );
});