4 * Copyright 2016 RIFT.IO Inc
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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
19 import React from 'react';
20 import ReactDOM from 'react-dom';
22 import './metricBarGroup.scss';
24 class MetricBarGroup extends React.Component {
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;
36 this.x = d3.scale.ordinal()
37 .rangeRoundBands([0, this.width], .1);
39 this.y = d3.scale.linear()
40 .range([this.height, 0]);
42 this.xAxis = d3.svg.axis()
46 this.yAxis = d3.svg.axis()
49 .ticks(props.ticks.number, props.ticks.type);
52 let el = document.querySelector('#' + this.props.title + this.props.lp_id);
53 this.svg = d3.select(el)
57 let totalWidth = this.width + this.margin.left + this.margin.right;
58 let totalHeight = this.height + this.margin.top + this.margin.bottom;
60 .attr("viewBox", "-10 0 " + totalWidth + " " + totalHeight + "")
61 .attr("preserveAspectRatio", "xMidYMid meet")
62 .style("overflow","visible")
64 .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
67 .attr("class", "y axis")
70 .attr("class", "x axis")
71 .attr("transform", "translate(-1," + this.height + ")")
73 this.drawBars(this.props);
77 componentWillReceiveProps(props) {
80 drawBars = (props) => {
81 let DATA = props.data.sort(function(a,b){
82 return (a.id > b.id) ? -1 : 1;
84 this.x.domain(DATA.map(function(d, i) { return d.id }));
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');
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) + ")"
102 .classed('metriclabel', true)
103 .style("text-anchor", "end")
104 .attr('transform', 'rotate(-75)')
105 .text(function(d) { return d.name;} )
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]); });
116 .attr("transform", function(d){
117 return "translate("+ (parseInt(self.x(d.id)) + (self.x.rangeBand() / 2) + 10) +"," + (parseInt(self.height) + 10) + ")"
120 .style("text-anchor", "end")
121 .attr('transform', 'rotate(-75)')
122 .text(function(d) { return d.name;} )
125 let html = <div></div>;
127 return <div className="metricBarGroup"><h3>{this.props.title}</h3><div id={this.props.title + this.props.lp_id}></div></div>;
130 MetricBarGroup.defaultProps = {
135 valueName: 'utilization',
141 export default MetricBarGroup;