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
|
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { toArray, toTuples } from '../util'
import C3Chart from 'react-c3js'
import 'c3/c3.css'
class PaperChart extends Component {
render() {
const { rows, title } = this.props
if (!rows.length) return null
const colorPattern = [
"#00b200",
"#ff0000",
"#e0c200",
"#dddddd",
]
return (
<div className='chart'>
<div>
<C3Chart
data={{
columns: rows,
type: 'pie',
}}
color={{
pattern: colorPattern,
}}
tooltip={{
format: {
value: value => value,
}
}}
size={{
height: rows.length < 4 ? 316 : 336,
}}
/>
<span className='chartCaption'>{title}</span>
</div>
</div>
)
}
}
/*
legend={{
position: 'right'
}}
tooltip={{
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
const countriesByYearLookup = years[yearList[d[0].x]]
let countriesByYear = Object.keys(countriesByYearLookup).map(country => [country, countriesByYearLookup[country]]).sort((a,b) => b[1] - a[1])
let topCountriesForThisYear = countriesByYear.slice(0, topCountryCount)
let bottomTotal = countriesByYear.slice(topCountryCount).reduce((a,b) => (a + b[1]), 0)
// console.log(topCountriesForThisYear)
topCountriesForThisYear.push([otherCountriesLabel, bottomTotal])
const tableRows = topCountriesForThisYear.filter(pair => !!pair[1]).map(([country, total]) => {
let colorIndex = topCountries.indexOf(country)
if (colorIndex < 0) colorIndex = colorPattern.length - 1
const color = colorPattern[ colorIndex ]
return [
"<tr>",
"<td>",
"<span style='background-color:" + color + "' class='swatch'></span>",
country,
"</td>",
"<td>",
total,
"</td>",
"</tr>",
].join('')
})
return [
"<table class='c3-tooltip'>",
...tableRows,
"</table>",
].join('')
}
}}
*/
export default PaperChart
|
