dc1a0839e496835de49f48e7649f8e097723e9ff
4 * Copyright 2016 RIFT.IO Inc
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
19 var React
= require("react");
20 var ReactDOM
= require('react-dom');
21 var MIXINS
= require("../mixins/ButtonEventListener.js");
22 var Gauge
= require("../../js/gauge-modified.js");
23 var GUID
= require("utils/guid");
24 import _
from 'underscore'
31 * It's props values and a brief description below
33 * min: minimum value expected
34 * max: maximum value expected
35 * width: width of gauge in px
36 * height: height of gauge in px
37 * value: the number displayed on the gauge
38 * resize: should the gauge resize with container
39 * unit: the units displayed on the gauge
40 * valueFormat: An object with an 'int' and 'dec' property. The 'int' is the min number of integer digits displayed
41 * and the 'dec' object is the min number of fractional digits displayed.
45 module
.exports
= React
.createClass({
49 min
: React
.PropTypes
.number
,
50 max
: React
.PropTypes
.number
,
51 width
: React
.PropTypes
.number
,
52 height
: React
.PropTypes
.string
,
53 value
: React
.PropTypes
.number
,
54 resize
: React
.PropTypes
.bool
,
55 isAggregate
: React
.PropTypes
.bool
,
56 units
: React
.PropTypes
.string
,
57 valueFormat
: React
.PropTypes
.shape({
58 'int': React
.PropTypes
.number
,
59 'dec': React
.PropTypes
.number
62 clone: function(obj
) {
63 if (null == obj
|| "object" != typeof obj
) return obj
;
64 var copy
= obj
.constructor();
65 for (var attr
in obj
) {
66 if (obj
.hasOwnProperty(attr
)) copy
[attr
] = obj
[attr
];
72 * Defines default state.
74 * min: minimum value expected
75 * max: maximum value expected
76 * nSteps: fixed number for now. The number of ticks in the gauge.
77 * width: width of gauge in px
78 * height: height of gauge in px
79 * value: the number displayed on the gauge
80 * resize: should the gauge resize with container
81 * unit: the units displayed on the gauge
82 * valueFormat: An object with an 'int' and 'dec' property. The 'int' is the min number of integer digits displayed
83 * and the 'dec' object is the min number of fractional digits displayed.
85 getInitialState: function() {
86 var valueFormatState
= null
88 this.gaugeID
= GUID();
89 if (!this.props
.valueFormat
) {
90 if ((this.props
.max
&& this.props
.max
> 1000) || this.props
.value
) {
102 valueFormatState
= this.props
.valueFormat
;
105 //sizeOfButton: this.props.size || '', //There is no Medium value in CSS, default size is the absence of a value
106 min
: this.props
.min
|| 0,
107 max
: this.props
.max
|| 0,
109 height
: this.props
.height
|| 200,
110 width
: this.props
.width
|| 200,
111 color
: this.props
.color
|| 'hsla(212, 57%, 50%, 1)',
112 value
: this.props
.value
|| 0,
113 valueFormat
: valueFormatState
,
114 isAggregate
: this.props
.isAggregate
|| false,
115 units
: this.props
.units
|| '',
116 resize
:this.props
.resize
|| false
123 * Called when props are changed. Syncs props with state.
125 componentWillReceiveProps: function(nextProps
) {
127 max
:nextProps
.max
|| this.state
.max
,
128 value
:nextProps
.value
|| 0,
129 valueFormat
:nextProps
.valueFormat
|| this.state
.valueFormat
134 * Calls the render on the gauge object once the component first mounts
136 componentDidMount: function() {
137 this.canvasRender(this.state
);
141 * If any of the state variables have changed, the component should update.
142 * Note, this is where the render step occures for the gauge object.
144 shouldComponentUpdate: function(nextProps
, nextState
) {
145 var currentStateString
= String(this.state
.max
) + String(this.state
.valueFormat
.int) + String(this.state
.valueFormat
.dec
) + String(this.state
.value
);
146 var nextStateString
= String(nextState
.max
) + String(nextState
.valueFormat
.int) + String(nextState
.valueFormat
.dec
) + String(nextState
.value
);
147 if (currentStateString
== nextStateString
) {
150 this.state
.valueFormat
= this.determineValueFormat(nextState
.value
);
151 this.canvasRender(nextState
);
156 * Default value format based on units.
158 determineValueFormat: function(value
) {
159 if (value
> 999 || this.state
.units
== "%") {
174 * Render step for the gauge object. Sets some defaults, passes some of the component's state down.
176 canvasRender: function(state
) {
177 if (state
.max
== state
.min
) {
180 var range
= state
.max
- state
.min
;
181 var step
= Math
.round(range
/ state
.nSteps
);
183 for (var i
= 0; i
<= state
.nSteps
; i
++) {
184 majorTicks
.push(state
.min
+ (i
* step
));
186 var redLine
= state
.min
+ (range
* 0.9);
188 isAggregate
: state
.isAggregate
,
189 renderTo
: ReactDOM
.findDOMNode(document
.getElementById(this.gaugeID
)),
191 height
: state
.height
,
197 majorTicks
: majorTicks
,
198 valueFormat
: this.determineValueFormat(self
.value
),
203 plate
: 'rgba(0,0,0,0)',
204 majorTicks
: 'rgba(15, 123, 182, .84)',
206 title
: 'rgba(50,50,50,100)',
207 units
: 'rgba(50,50,50,100)',
210 start
: 'rgba(255, 255, 255, 1)',
211 end
: 'rgba(255, 255, 255, 1)'
216 var min
= config
.minValue
;
217 var max
= config
.maxValue
;
219 var increment
= (max
- min
) / N
;
220 for (i
= 0; i
< N
; i
++) {
221 var temp_color
= 'rgb(0, 172, 238)';
222 if (i
> 0.5714 * N
&& i
<= 0.6428 * N
) {
223 temp_color
= 'rgb(0,157,217)';
224 } else if (i
>= 0.6428 * N
&& i
< 0.7142 * N
) {
225 temp_color
= 'rgb(0,142,196)';
226 } else if (i
>= 0.7142 * N
&& i
< 0.7857 * N
) {
227 temp_color
= 'rgb(0,126,175)';
228 } else if (i
>= 0.7857 * N
&& i
< 0.8571 * N
) {
229 temp_color
= 'rgb(0,122,154)';
230 } else if (i
>= 0.8571 * N
&& i
< 0.9285 * N
) {
231 temp_color
= 'rgb(0,96,133)';
232 } else if (i
>= 0.9285 * N
) {
233 temp_color
= 'rgb(0,80,112)';
235 config
.highlights
.push({
237 to
: increment
* (i
+ 2),
241 var updateSize
= _
.debounce(function() {
242 config
.maxValue
= state
.max
;
244 if (state
.resize
) $(window
).resize(updateSize
)
247 this.gauge
.setValue(Math
.ceil(state
.value
* 100) / 100)
248 this.gauge
.updateConfig(config
);
250 this.gauge
= new Gauge(config
);
251 this.gauge
.setValue(Math
.ceil(state
.value
* 100) / 100)
257 * Renders the Gauge Component
258 * Returns the canvas element the gauge will be housed in.
262 var gaugeDOM
= React
.createElement("div", null,
263 React
.createElement("canvas",
264 {className
: "rwgauge", style
:
265 {width
:'100%','maxWidth':this.state
.width
+ 'px','maxHeight':this.state
.width
},