React Component

gistfile1.txt

window.Components = window.Components || {};
window.Components.Telematics = Components.Telematics || {};
window.Components.Telematics.Sensor = Components.Telematics.Sensor || {};

Components.Telematics.Sensor.Chart = React.createClass({
  _tooltip: function(props){
    this._tooltipFactory = this._tooltipFactory || React.createFactory(Components.Telematics.Sensor.Tooltip);
    return this._tooltipFactory(props);
  },
  _callTooltipHandler: true,
  _closestPoint: function(at){
    return Math.floor(at * this.chart.x().y.length);
  },
  _handleOnMouseOver: function(d) {
    if (this._callTooltipHandler) {
      var mes = {
        src: this.props.container,
        at: d.index / this.chart.x().y.length
      };
      this.props.handleOnMouseOver(mes);
    }
  },
  _handleOnMouseOut: function(d){
    // wait
    if (this._callTooltipHandler){
      this.props.handleOnMouseOut({src: this.props.container});
    }
  },
  _renderChart: function(data){
    var that = this;
    this.chart = c3.generate({
      bindto: "#" + that.props.container,
      data: {
        json: this._prepareData(data),
        keys : {
          x: "x",
          value: ["y"]
        },
        type: 'area',
        onmouseover: this._handleOnMouseOver,
        onmouseout: this._handleOnMouseOut,
      },
      point: {
          show: false
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: '%H:%M:%S',
            count: 24,
          }
        }
      },
      tooltip: {
        format: {
          title: function(x) { return that.props.name; },
          name: function (name, ratio, id, index) { return thaht.props.units; },
          value: function (value, ratio, id) {
              return value;
          },
        },
        contents: function (d, title, value, color) {
          var opts = {
            d: d[0],
            name: that.props.name,
            units: that.props.units,
            classes: this.CLASS
          };
          return React.renderToStaticMarkup(that._tooltip(opts));
        }
    },
    legend: {
      show: false
    }
    });
  },
  _prepareData: function(data){
    console.log(data);
    console.log('--data--');
    return data.map(function(el){
      console.log(el);
      console.log('--el--');
      el.x = el.x*1000;
      return el;
    });
  },
  componentDidMount: function () {
    this._renderChart(this.props.data);
  },
  componentWillReceiveProps: function (newProps) {
       this.chart.load({
           json: newProps.data
       }); // or whatever API you need
   },
  render: function() {
    return (
      <div className="sensor-chart widget">
        <div className="widget_header">
          <h3>
            {this.props.name}
          </h3>
        </div>
        <div className="widget_inside" style={{left: "-10px"}}>
          <div id={this.props.container} className="widget_chart"></div>
        </div>
      </div>
    );
  },
  showTooltip: function(where){
    this._callTooltipHandler = false;
    this.chart.tooltip.show({index: this._closestPoint(where.at), src: where.src});
    this._callTooltipHandler = true;
  },
  hideTooltip: function(){
    this._callTooltipHandler = false;
    this.chart.tooltip.hide();
    this._callTooltipHandler = true;
  }
});