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

   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 import React from 'react';
  20 import ReactDOM from 'react-dom';
  21 import d3 from 'd3';
  22 import './metricBarGroup.scss';
  23
  24 class MetricBarGroup extends React.Component {
  25   constructor(props) {
  26     super(props);
  27
  28   }
  29   componentWillMount() {
  30     const {...props} = this.props;
  31     this.margin = {top: 20, right: 50, bottom: 700, left: 100};
  32     this.width = 1220 - this.margin.left - this.margin.right;
  33     this.height = 1220 - this.margin.top - this.margin.bottom;
  34     // this.width = 800;
  35     // this.height = 600;
  36     this.x = d3.scale.ordinal()
  37       .rangeRoundBands([0, this.width], .1);
  38
  39     this.y = d3.scale.linear()
  40       .range([this.height, 0]);
  41
  42     this.xAxis = d3.svg.axis()
  43       .scale(this.x)
  44       .orient("bottom");
  45
  46     this.yAxis = d3.svg.axis()
  47         .scale(this.y)
  48         .orient("left")
  49         .ticks(props.ticks.number, props.ticks.type);
  50   }
  51   componentDidMount() {
  52     let el = document.querySelector('#' + this.props.title + this.props.lp_id);
  53     this.svg = d3.select(el)
  54       .append('svg');
  55     let self = this;
  56
  57     let totalWidth = this.width + this.margin.left + this.margin.right;
  58     let totalHeight = this.height + this.margin.top + this.margin.bottom;
  59     this.svg = this.svg
  60       .attr("viewBox", "-10 0 " + totalWidth + " " + totalHeight + "")
  61       .attr("preserveAspectRatio", "xMidYMid meet")
  62       .style("overflow","visible")
  63       .append("g")
  64       .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
  65
  66     this.svg.append("g")
  67         .attr("class", "y axis")
  68         .call(this.yAxis);
  69     this.svg.append("g")
  70         .attr("class", "x axis")
  71         .attr("transform", "translate(-1," + this.height + ")")
  72         .call(this.xAxis)
  73     this.drawBars(this.props);
  74
  75
  76   }
  77   componentWillReceiveProps(props) {
  78     this.drawBars(props);
  79   }
  80   drawBars = (props) => {
  81     let DATA = props.data.sort(function(a,b){
  82       return (a.id > b.id) ? -1 : 1;
  83     });
  84     this.x.domain(DATA.map(function(d, i) { return d.id }));
  85     let self = this;
  86     let barGroup = this.svg.selectAll(".barGroup").data(DATA, function(d, i) { return d.id});;
  87     let barGroupExit = barGroup.exit().remove();
  88     let barGroupEnter =  barGroup.enter().append('g')
  89       .attr('class', 'barGroup');
  90     barGroupEnter
  91       .append("rect")
  92       .attr("class", "bar")
  93       .attr("x", function(d) { return self.x(d.id); })
  94       .attr("width", self.x.rangeBand())
  95       .attr("y", function(d) { return self.y(d[props.valueName]); })
  96       .attr("height", function(d) {return self.height - self.y(d[props.valueName]); });
  97     barGroupEnter.append("g")
  98       .attr("transform", function(d){
  99         return "translate("+ (parseInt(self.x(d.id)) + (self.x.rangeBand() / 2) + 10) +"," + (parseInt(self.height) + 10) + ")"
 100        })
 101       .append('text')
 102       .classed('metriclabel', true)
 103       .style("text-anchor", "end")
 104       .attr('transform', 'rotate(-75)')
 105       .text(function(d) { return d.name;} )
 106
 107     let barGroupUpdate = barGroup.transition();
 108     barGroupUpdate.select('rect')
 109       .attr("class", "bar")
 110       .attr("x", function(d) { return self.x(d.id) })
 111       .attr("width", self.x.rangeBand())
 112       .attr("y", function(d) { return self.y(d[props.valueName]); })
 113       .attr("height", function(d) {return self.height - self.y(d[props.valueName]); });
 114     barGroupUpdate
 115       .select('g')
 116       .attr("transform", function(d){
 117         return "translate("+ (parseInt(self.x(d.id)) + (self.x.rangeBand() / 2) + 10) +"," + (parseInt(self.height) + 10) + ")"
 118        })
 119       .select('text')
 120       .style("text-anchor", "end")
 121       .attr('transform', 'rotate(-75)')
 122       .text(function(d) { return d.name;} )
 123   }
 124   render() {
 125     let html = <div></div>;
 126     let self = this;
 127     return <div className="metricBarGroup"><h3>{this.props.title}</h3><div id={this.props.title + this.props.lp_id}></div></div>;
 128   }
 129 }
 130 MetricBarGroup.defaultProps = {
 131   ticks: {
 132     number: 2,
 133     type: '%'
 134   },
 135   valueName: 'utilization',
 136   title: '',
 137   data: []
 138 }
 139
 140
 141 export default MetricBarGroup;