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

/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */
var React = require("react");
var MIXINS = require("../mixins/ButtonEventListener.js");




/**
 *  Transmit and Receive Component
 *  It's props values and a brief description below
 *
 *
 *
 **/
module.exports = React.createClass({
  displayName: 'TransmitReceive',
  mixins:MIXINS,
  propTypes: {
    component_data:React.PropTypes.shape({
      incoming:React.PropTypes.shape({
        bytes:React.PropTypes.number,
        packets:React.PropTypes.number,
        label:React.PropTypes.string, 
        "byte-rate":React.PropTypes.number,
        "packet-rate":React.PropTypes.number
      }),
      outgoing:React.PropTypes.shape({
        bytes:React.PropTypes.number,
        packets:React.PropTypes.number,
        label:React.PropTypes.string, 
        "byte-rate":React.PropTypes.number,
        "packet-rate":React.PropTypes.number
      })
    })
  },

  /**
   * Defines default state.
   *

   */
  getInitialState: function() {
  },


  /**
   *  Called when props are changed.  Syncs props with state.
   */
  componentWillReceiveProps: function(nextProps) {

  },

  /**
   * Calls the render on the gauge object once the component first mounts
   */
  componentDidMount: function() {
    this.canvasRender(this.state);
  },

  /**
   * If any of the state variables have changed, the component should update.
   * Note, this is where the render step occures for the gauge object.
   */
  shouldComponentUpdate: function(nextProps, nextState) {

  },

  /**
   * Renders the Gauge Component
   * Returns the canvas element the gauge will be housed in.
   * @returns {*}
   */
  render: function() {
    var gaugeDOM = React.createElement("div", null,
      React.createElement("canvas",
        {className: "rwgauge", style:
          {width:'100%',height:'100%','maxWidth':this.state.width + 'px','maxHeight':'240px'},
          ref:'gaugeDOM'
        }
      )
    )



    return gaugeDOM;
  }
});