All files / libs/reporting/dashboards/components/src/lib/home-legacy/leaderboard-widget LeaderBoardWidget.tsx

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
50
51
52
53
54
55
56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useTheme } from '@emotion/react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';

import { CustomReportsPresetsEnum } from '@amalia/reporting/custom-reports/shared';
import { type UserContract } from '@amalia/tenants/users/types';

import { DashboardWidget } from '../dashboard-widget/DashboardWidget';
import { WidgetTitle } from '../widget-title/WidgetTitle';

import { LeaderBoardGraph } from './leaderboard-graph/LeaderBoardGraph';
import { useLeaderBoardData } from './use-leaderboard-data';

export interface LeaderBoardWidgetProps {
  readonly allUsers: Pick<UserContract, 'email' | 'firstName' | 'lastName' | 'pictureURL'>[];
  readonly selectedPlanIds: string[];
  readonly selectedTeamIds: string[];
  readonly selectedUserIds: string[];
  readonly periodId: string;
}

export const LeaderBoardWidget = memo(function LeaderBoardWidget({
  allUsers,
  selectedUserIds,
  selectedPlanIds,
  selectedTeamIds,
  periodId,
}: LeaderBoardWidgetProps) {
  const theme = useTheme();

  const { isLeaderBoardLoading, dataLeaderBoard } = useLeaderBoardData(
    periodId,
    selectedUserIds,
    selectedTeamIds,
    selectedPlanIds,
    allUsers,
  );

  return (
    <DashboardWidget>
      <WidgetTitle
        customReportId={CustomReportsPresetsEnum.PRESET_LEADERBOARD}
        title={<FormattedMessage defaultMessage="Leaderboard" />}
      />

      <LeaderBoardGraph
        colors={[theme.ds.colors.primary[400], theme.ds.hues.green[300], theme.ds.hues.magenta[300]]}
        data={dataLeaderBoard}
        height="auto"
        loading={isLeaderBoardLoading}
        width="100%"
      />
    </DashboardWidget>
  );
});