-
Notifications
You must be signed in to change notification settings - Fork 51
/
FilterableMatrixTable.jsx
93 lines (91 loc) · 2.87 KB
/
FilterableMatrixTable.jsx
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
57
58
59
60
61
62
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
91
92
93
import React from 'react'
import PropTypes from 'prop-types'
import ContentStateFilter from './ContentStateFilter'
import CalendarMonthMatrix from './CalendarMonthMatrix'
import CalendarPeriodHeading from './CalendarPeriodHeading'
import CategoryMatrixTable from './CategoryMatrixTable'
import {
ContentStates
} from '../../constants/Options'
/**
* Bottom section of contribution statistic page.
* See RecentContribution for main page.
*/
const FilterableMatrixTable = ({
dateRange,
selectedContentState,
selectedDay,
wordCountForEachDay,
wordCountForSelectedDay,
handleFilterChanged,
handleSelectedDayChanged
}) => {
const categoryTables = (wordCountForSelectedDay.length > 0)
? ([
<CategoryMatrixTable
key='locales'
matrixData={wordCountForSelectedDay}
category='localeId'
categoryTitle='localeDisplayName'
categoryName='Languages' />,
<CategoryMatrixTable
key='projects'
matrixData={wordCountForSelectedDay}
category='projectSlug'
categoryTitle='projectName'
categoryName='Projects' />
])
: <div className='u-textMuted'>No contributions</div>
return (
<div>
<div className='u-flexRow'>
<ContentStateFilter selectedContentState={selectedContentState}
handleFilterChanged={handleFilterChanged} />
</div>
<div className='matrix-table'>
<div className='matrix-inner'>
<CalendarMonthMatrix
matrixData={wordCountForEachDay}
selectedDay={selectedDay}
selectedContentState={selectedContentState}
dateRange={dateRange}
handleSelectedDayChanged={handleSelectedDayChanged} />
</div>
<div className='matrixHeading'>
<CalendarPeriodHeading
dateRange={dateRange}
selectedDay={selectedDay} />
{categoryTables}
</div>
</div>
</div>
)
}
FilterableMatrixTable.propTypes = {
wordCountForEachDay: PropTypes.arrayOf(
PropTypes.shape(
{
date: PropTypes.string.isRequired,
wordCount: PropTypes.number.isRequired
})
).isRequired,
wordCountForSelectedDay: PropTypes.arrayOf(
PropTypes.shape(
{
savedDate: PropTypes.string.isRequired,
projectSlug: PropTypes.string.isRequired,
projectName: PropTypes.string.isRequired,
versionSlug: PropTypes.string.isRequired,
localeId: PropTypes.string.isRequired,
localeDisplayName: PropTypes.string.isRequired,
savedState: PropTypes.string.isRequired,
wordCount: PropTypes.number.isRequired
})
).isRequired,
dateRange: PropTypes.object.isRequired,
selectedContentState: PropTypes.oneOf(ContentStates).isRequired,
selectedDay: PropTypes.string,
handleFilterChanged: PropTypes.func,
handleSelectedDayChanged: PropTypes.func.isRequired
}
export default FilterableMatrixTable