/
small-chart.js
85 lines (79 loc) · 2.02 KB
/
small-chart.js
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 React, { Component } from 'react';
import moment from 'moment';
import {
LineSeries,
MarkSeries,
makeWidthFlexible,
XAxis,
XYPlot,
YAxis
} from 'react-vis';
import {makeLabelValues} from './large-chart';
const FlexibleXYPlot = makeWidthFlexible(XYPlot);
// import * as CONSTANTS from './constants.js';
export default class SmallChart extends Component {
render() {
const {highlighted, highlightX, series} = this.props;
if (!series) {
return <div />;
}
const minValue = Math.min(...series.map(d => d.y));
const maxValue = Math.max(...series.map(d => d.y));
const yDomain = [0.98 * minValue, 1.02 * maxValue];
const labelValues = makeLabelValues(series);
return <div style={{
display: 'inline-block',
height: '225px',
marginLeft: '-12px',
marginRight: '24px',
position: 'relative',
width: 'calc(25% - 12px)'
}}>
<div style={{
background: 'white',
borderRadius: 3,
boxShadow: '0 1px 2px 0 rgba(0,0,0,0.1)',
padding: '12px'
}}>
<div style={{
fontSize: 13,
lineHeight: '16px',
marginBottom: 12,
paddingLeft: 40
}}>{this.props.title}</div>
<FlexibleXYPlot
height={200}
margin={{top: 5, bottom: 25, left: 40, right: 0}}
onMouseLeave={() => this.props.highlightX(null)}
yDomain={yDomain}
>
{highlighted === undefined ? null :
<MarkSeries
data={[{
x: highlighted && highlighted.x,
y: highlighted && series[highlighted.i].y
}]}
color='rgba(17,147,154,0.7)'
size='2'
/>
}
<LineSeries
data={series}
onNearestX={highlightX}
stroke='#11939a'
strokeWidth={1}
/>
<XAxis
tickSize={4}
tickValues={labelValues}
labelValues={labelValues}
labelFormat={(d) => moment(new Date(d)).format('MM/DD')}
/>
<YAxis
tickSize={4}
/>
</FlexibleXYPlot>
</div>
</div>;
}
}