forked from xivanalysis/xivanalysis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PieChartWithLegend.tsx
85 lines (77 loc) · 1.81 KB
/
PieChartWithLegend.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
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
import {merge} from 'lodash'
import React from 'react'
import {ChartComponentProps, Pie} from 'react-chartjs-2'
import * as styles from './PieChartWithLegend.module.css'
interface DataPoint {
value: number,
label: string,
backgroundColor?: string,
additional?: React.ReactNode[],
}
type Props = ChartComponentProps & {
headers?: {
label?: React.ReactNode,
additional?: React.ReactNode[],
},
data: DataPoint[],
}
const MISSING_COLOUR_FALLBACK = '#888'
export default class PieChartWithLegend extends React.Component<Props> {
override render() {
const {
data: propData,
headers,
} = this.props
const backgrounds = propData.map(d => d.backgroundColor || MISSING_COLOUR_FALLBACK)
const data = {
labels: propData.map(d => d.label),
datasets: [{
data: propData.map(d => d.value),
backgroundColor: backgrounds,
}],
}
const options = merge({
responsive: false,
legend: {display: false},
tooltips: {enabled: false},
}, this.props.options)
return <>
<div className={styles.chartWrapper}>
<Pie
width={100}
height={100}
{...this.props}
data={data}
options={options}
/>
</div>
<table className={styles.table}>
{headers && <thead>
<tr>
<th></th>
<th>{headers.label || 'Label'}</th>
{headers.additional && headers.additional.map(
(val, index) => <th key={index}>{val}</th>,
)}
</tr>
</thead>}
<tbody>
{propData.map((val, index) => {
return <tr key={index}>
<td>
<span
className={styles.swatch}
style={{backgroundColor: backgrounds[index]}}
/>
</td>
<td>{val.label}</td>
{val.additional && val.additional.map(
(val, index) => <td key={index}>{val}</td>,
)}
</tr>
})}
</tbody>
</table>
</>
}
}