skyquake/framework/widgets/metric-bars/metricBarGroup.jsx

/*
 * 
 *   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.
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';
import d3 from 'd3';
import './metricBarGroup.scss';

class MetricBarGroup extends React.Component {
  constructor(props) {
    super(props);

  }
  componentWillMount() {
    const {...props} = this.props;
    this.margin = {top: 20, right: 50, bottom: 700, left: 100};
    this.width = 1220 - this.margin.left - this.margin.right;
    this.height = 1220 - this.margin.top - this.margin.bottom;
    // this.width = 800;
    // this.height = 600;
    this.x = d3.scale.ordinal()
      .rangeRoundBands([0, this.width], .1);

    this.y = d3.scale.linear()
      .range([this.height, 0]);

    this.xAxis = d3.svg.axis()
      .scale(this.x)
      .orient("bottom");

    this.yAxis = d3.svg.axis()
        .scale(this.y)
        .orient("left")
        .ticks(props.ticks.number, props.ticks.type);
  }
  componentDidMount() {
    let el = document.querySelector('#' + this.props.title + this.props.lp_id);
    this.svg = d3.select(el)
      .append('svg');
    let self = this;

    let totalWidth = this.width + this.margin.left + this.margin.right;
    let totalHeight = this.height + this.margin.top + this.margin.bottom;
    this.svg = this.svg
      .attr("viewBox", "-10 0 " + totalWidth + " " + totalHeight + "")
      .attr("preserveAspectRatio", "xMidYMid meet")
      .style("overflow","visible")
      .append("g")
      .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");

    this.svg.append("g")
        .attr("class", "y axis")
        .call(this.yAxis);
    this.svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(-1," + this.height + ")")
        .call(this.xAxis)
    this.drawBars(this.props);


  }
  componentWillReceiveProps(props) {
    this.drawBars(props);
  }
  drawBars = (props) => {
    let DATA = props.data.sort(function(a,b){
      return (a.id > b.id) ? -1 : 1;
    });
    this.x.domain(DATA.map(function(d, i) { return d.id }));
    let self = this;
    let barGroup = this.svg.selectAll(".barGroup").data(DATA, function(d, i) { return d.id});;
    let barGroupExit = barGroup.exit().remove();
    let barGroupEnter =  barGroup.enter().append('g')
      .attr('class', 'barGroup');
    barGroupEnter
      .append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return self.x(d.id); })
      .attr("width", self.x.rangeBand())
      .attr("y", function(d) { return self.y(d[props.valueName]); })
      .attr("height", function(d) {return self.height - self.y(d[props.valueName]); });
    barGroupEnter.append("g")
      .attr("transform", function(d){
        return "translate("+ (parseInt(self.x(d.id)) + (self.x.rangeBand() / 2) + 10) +"," + (parseInt(self.height) + 10) + ")"
       })
      .append('text')
      .classed('metriclabel', true)
      .style("text-anchor", "end")
      .attr('transform', 'rotate(-75)')
      .text(function(d) { return d.name;} )

    let barGroupUpdate = barGroup.transition();
    barGroupUpdate.select('rect')
      .attr("class", "bar")
      .attr("x", function(d) { return self.x(d.id) })
      .attr("width", self.x.rangeBand())
      .attr("y", function(d) { return self.y(d[props.valueName]); })
      .attr("height", function(d) {return self.height - self.y(d[props.valueName]); });
    barGroupUpdate
      .select('g')
      .attr("transform", function(d){
        return "translate("+ (parseInt(self.x(d.id)) + (self.x.rangeBand() / 2) + 10) +"," + (parseInt(self.height) + 10) + ")"
       })
      .select('text')
      .style("text-anchor", "end")
      .attr('transform', 'rotate(-75)')
      .text(function(d) { return d.name;} )
  }
  render() {
    let html = <div></div>;
    let self = this;
    return <div className="metricBarGroup"><h3>{this.props.title}</h3><div id={this.props.title + this.props.lp_id}></div></div>;
  }
}
MetricBarGroup.defaultProps = {
  ticks: {
    number: 2,
    type: '%'
  },
  valueName: 'utilization',
  title: '',
  data: []
}


export default MetricBarGroup;