-
Notifications
You must be signed in to change notification settings - Fork 0
/
Gauge.js
111 lines (97 loc) · 2.61 KB
/
Gauge.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { Component } from 'react';
import Highcharts from 'highcharts';
import addHighchartsMore from 'highcharts/highcharts-more';
import addSolidGaugeModule from 'highcharts/modules/solid-gauge';
import {
HighchartsChart, withHighcharts, XAxis, YAxis, Pane, SolidGaugeSeries
} from 'react-jsx-highcharts';
import ExampleCode from '../utils/ExampleCode';
import code from './exampleCode';
// Apply addtional modules
addHighchartsMore(Highcharts);
addSolidGaugeModule(Highcharts);
const plotOptions = {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
};
const dataLabels = {
format: '<div style="text-align:center"><span style="font-size:25px;color:black">{y}</span><br/><span style="font-size:12px;color:silver">km/h</span></div>',
y: -50
};
const tooltip = {
valueSuffix: ' km/h'
};
class Gauge extends Component {
state = {
kmph: 80
}
componentDidMount () {
this.interval = window.setInterval(this.updateSpeed, 1000)
}
componentWillUnmount () {
window.clearInterval(this.interval)
}
updateSpeed = () => {
this.setState(({ kmph }) => {
const offset = this.getRandomSpeedOffset()
const newKmph = Math.max(0, Math.min(200, kmph + offset));
return {
kmph: newKmph
}
})
}
getRandomSpeedOffset = () => {
return Math.floor(Math.random() * 40) - 20;
}
render() {
return (
<div className="app">
<HighchartsChart gauge plotOptions={plotOptions}>
<Pane
center={['50%', '85%']}
size='100%'
startAngle={-90}
endAngle={90}
background={{
backgroundColor: '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}} />
<XAxis />
<YAxis
stops={[
[0.1, '#55BF3B'],
[0.5, '#DDDF0D'],
[0.9, '#DF5353']
]}
lineWidth={0}
minorTickInterval={null}
tickPixelInterval={400}
tickWidth={0}
labels={{
y: 16,
style: { display: 'none' }
}}
min={0}
max={200}>
<YAxis.Title y={-110}>Speed</YAxis.Title>
<SolidGaugeSeries
name='Speed'
data={[ this.state.kmph ]}
dataLabels={dataLabels}
tooltip={tooltip}
/>
</YAxis>
</HighchartsChart>
<ExampleCode name="Gauge">{code}</ExampleCode>
</div>
);
}
}
export default withHighcharts(Gauge, Highcharts);