DashboardCommittersAndContributorsChart.tsx 4.12 KB
Newer Older
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
import { CircularProgress, createStyles, makeStyles } from '@material-ui/core';
import {
  api_prefix,
  brightBlue,
  CONFIG_FOR_BAR_LINE_CHART,
  END_POINT,
  FETCH_METHOD,
  getCurrentMode,
  MODE_REACT_ONLY,
} from '../../../../Constants/Constants';
import { Bar } from 'react-chartjs-2';
import { memo, useState, useEffect, useContext } from 'react';
import PortalContext from '../../../../Context/PortalContext';
import { fetchWrapper } from '../../../../Utils/formFunctionHelpers';

const isReactOnlyMode = getCurrentMode() === MODE_REACT_ONLY;

const useStyles = makeStyles(() =>
  createStyles({
    fullWidthChartCtn: {
      width: '100%',
      height: '100%',
    },
    loadingCtn: {
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
  })
);

function DashboardCommittersAndContributorsChart() {
  const classes = useStyles();
  const [chartMonths, setChartMonths] = useState<Array<string>>([]);
37
  const { orgId, chartCommits, setChartCommits, chartCommitters, setChartCommitters } = useContext(PortalContext);
38
39
40
41
42
43
44
45
46
47

  const DATA_FOR_BAR_LINE_CHART = {
    labels: chartMonths,
    datasets: [
      {
        type: 'line',
        label: 'Committers',
        borderColor: brightBlue,
        borderWidth: 2,
        fill: false,
48
        data: chartCommitters || [],
49
50
51
52
53
      },
      {
        type: 'bar',
        label: 'Commits',
        backgroundColor: '#F0F2F8',
54
        data: chartCommits || [],
55
56
57
58
59
      },
    ],
  };

  useEffect(() => {
60
    if (!orgId || chartCommits !== null) {
61
62
      return;
    }
63

64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
    // For chart - commits data
    const urlForChartCommits = isReactOnlyMode
      ? '/membership_data/test_chart_commits.json'
      : api_prefix() + `/${END_POINT.organizations}/${orgId}/${END_POINT.activity_yearly}`;

    const saveChartCommitsData = (data: { activity: Array<any> }) => {
      // Make sure the latest date will appear at the end/right of the chart
      const sortedData = data.activity.sort((currentItem, nextItem) =>
        currentItem.period >= nextItem.period ? 1 : -1
      );
      const monthArray = sortedData.map((item) => {
        // Format the date from yyyymm to yy-mmm, like"21-Oct"
        let theDate = item.period;
        theDate = new Date(theDate.slice(0, 4) + '/' + theDate.slice(4));

        const options = { year: 'numeric', month: 'short' };
        const dateString = theDate.toLocaleDateString('en-CA', options);
        const month = dateString.slice(0, 3);
        const year = dateString.slice(-2);

        return `${year}-${month}`;
      });
      const dataCommitsArray = sortedData.map((item) => item.count);

      setChartCommits(dataCommitsArray);
      setChartMonths(monthArray);
    };
91
92
93
94
95
96
97
    fetchWrapper(urlForChartCommits, FETCH_METHOD.GET, saveChartCommitsData);
  }, [orgId, chartCommits, setChartCommits]);

  useEffect(() => {
    if (!orgId || chartCommitters !== null) {
      return;
    }
98
99
100
101
102
103
104
105
106
107
108
109
110
111

    // For chart - committers data
    const urlForChartCommitters = isReactOnlyMode
      ? '/membership_data/test_chart_committers.json'
      : api_prefix() + `/${END_POINT.organizations}/${orgId}/${END_POINT.committers_yearly}`;

    const saveChartCommittersData = (data: { activity: Array<any> }) => {
      // Make sure the latest date will appear at the end/right of the chart
      const sortedData = data.activity.sort((currentItem, nextItem) =>
        currentItem.period >= nextItem.period ? 1 : -1
      );
      const dataCommittersArray = sortedData.map((item) => item.count);
      setChartCommitters(dataCommittersArray);
    };
112
113
    fetchWrapper(urlForChartCommitters, FETCH_METHOD.GET, saveChartCommittersData);
  }, [orgId, chartCommitters, setChartCommitters]);
114
115
116

  return (
    <div className={classes.fullWidthChartCtn}>
117
      {chartCommits && chartCommitters ? (
118
119
120
121
122
123
124
125
126
127
128
129
        <Bar data={DATA_FOR_BAR_LINE_CHART} options={CONFIG_FOR_BAR_LINE_CHART} />
      ) : (
        <div className={classes.loadingCtn}>
          <CircularProgress />
        </div>
      )}
    </div>
  );
}

// Using memo here to prevent the chart from re-rendering when a non-related state changes
export default memo(DashboardCommittersAndContributorsChart);