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 MIXINS
= require("../mixins/ButtonEventListener.js");
26 * Transmit and Receive Component
27 * It's props values and a brief description below
32 module
.exports
= React
.createClass({
33 displayName
: 'TransmitReceive',
36 component_data
:React
.PropTypes
.shape({
37 incoming
:React
.PropTypes
.shape({
38 bytes
:React
.PropTypes
.number
,
39 packets
:React
.PropTypes
.number
,
40 label
:React
.PropTypes
.string
,
41 "byte-rate":React
.PropTypes
.number
,
42 "packet-rate":React
.PropTypes
.number
44 outgoing
:React
.PropTypes
.shape({
45 bytes
:React
.PropTypes
.number
,
46 packets
:React
.PropTypes
.number
,
47 label
:React
.PropTypes
.string
,
48 "byte-rate":React
.PropTypes
.number
,
49 "packet-rate":React
.PropTypes
.number
55 * Defines default state.
59 getInitialState: function() {
64 * Called when props are changed. Syncs props with state.
66 componentWillReceiveProps: function(nextProps
) {
71 * Calls the render on the gauge object once the component first mounts
73 componentDidMount: function() {
74 this.canvasRender(this.state
);
78 * If any of the state variables have changed, the component should update.
79 * Note, this is where the render step occures for the gauge object.
81 shouldComponentUpdate: function(nextProps
, nextState
) {
86 * Renders the Gauge Component
87 * Returns the canvas element the gauge will be housed in.
91 var gaugeDOM
= React
.createElement("div", null,
92 React
.createElement("canvas",
93 {className
: "rwgauge", style
:
94 {width
:'100%',height
:'100%','maxWidth':this.state
.width
+ 'px','maxHeight':'240px'},