skyquake/framework/widgets/transmit-receive/transmit-receive.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   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
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  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.
  17  *
  18  */
  19 var React = require("react");
  20 var MIXINS = require("../mixins/ButtonEventListener.js");
  21
  22
  23
  24
  25 /**
  26  *  Transmit and Receive Component
  27  *  It's props values and a brief description below
  28  *
  29  *
  30  *
  31  **/
  32 module.exports = React.createClass({
  33   displayName: 'TransmitReceive',
  34   mixins:MIXINS,
  35   propTypes: {
  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
  43       }),
  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
  50       })
  51     })
  52   },
  53
  54   /**
  55    * Defines default state.
  56    *
  57
  58    */
  59   getInitialState: function() {
  60   },
  61
  62
  63   /**
  64    *  Called when props are changed.  Syncs props with state.
  65    */
  66   componentWillReceiveProps: function(nextProps) {
  67
  68   },
  69
  70   /**
  71    * Calls the render on the gauge object once the component first mounts
  72    */
  73   componentDidMount: function() {
  74     this.canvasRender(this.state);
  75   },
  76
  77   /**
  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.
  80    */
  81   shouldComponentUpdate: function(nextProps, nextState) {
  82
  83   },
  84
  85   /**
  86    * Renders the Gauge Component
  87    * Returns the canvas element the gauge will be housed in.
  88    * @returns {*}
  89    */
  90   render: function() {
  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'},
  95           ref:'gaugeDOM'
  96         }
  97       )
  98     )
  99
 100
 101
 102     return gaugeDOM;
 103   }
 104 });