in ambari-web/app/views/common/chart/linear_time.js [443:660]
draw: function(seriesData) {
var isPopup = this.get('isPopup');
var p = '';
if (isPopup) {
p = this.get('popupSuffix');
}
var palette = new Rickshaw.Color.Palette({ scheme: 'munin'});
this.dataShiftFix(seriesData);
// var palette = new Rickshaw.Color.Palette({
// scheme: this._paletteScheme
// });
var self = this;
var series_min_length = 100000000;
seriesData.forEach(function (series, index) {
var seriesColor = self.colorForSeries(series);
if (seriesColor == null) {
seriesColor = palette.color();
}
series.color = seriesColor;
series.stroke = 'rgba(0,0,0,0.3)';
if (isPopup) {
// calculate statistic data for popup legend
var avg = 0;
var min = Number.MAX_VALUE;
var max = Number.MIN_VALUE;
for (var i = 0; i < series.data.length; i++) {
avg += series.data[i]['y'];
if (series.data[i]['y'] < min) {
min = series.data[i]['y'];
}
else {
if (series.data[i]['y'] > max) {
max = series.data[i]['y'];
}
}
}
series.name = string_utils.pad(series.name, 30, ' ', 2) + string_utils.pad('min', 5, ' ', 3) + string_utils.pad(this.get('yAxisFormatter')(min), 12, ' ', 3) + string_utils.pad('avg', 5, ' ', 3) + string_utils.pad(this.get('yAxisFormatter')(avg/series.data.length), 12, ' ', 3) + string_utils.pad('max', 12, ' ', 3) + string_utils.pad(this.get('yAxisFormatter')(max), 5, ' ', 3);
}
if (series.data.length < series_min_length) {
series_min_length = series.data.length;
}
}.bind(this));
seriesData.forEach(function(series, index) {
if (series.data.length > series_min_length) {
series.data.length = series_min_length;
}
});
var chartId = "#" + this.id + "-chart" + p;
var chartOverlayId = "#" + this.id + "-container" + p;
var xaxisElementId = "#" + this.id + "-xaxis" + p;
var yaxisElementId = "#" + this.id + "-yaxis" + p;
var legendElementId = "#" + this.id + "-legend" + p;
var chartElement = document.querySelector(chartId);
var overlayElement = document.querySelector(chartOverlayId);
var xaxisElement = document.querySelector(xaxisElementId);
var yaxisElement = document.querySelector(yaxisElementId);
var legendElement = document.querySelector(legendElementId);
var strokeWidth = 1;
if (this.get('renderer') != 'area') {
strokeWidth = 2;
}
var height = 150;
var diff = 32;
if(this.get('inWidget')){
height = 105; // for widgets view
diff = 22;
}
var width = 400;
if (isPopup) {
height = 180;
width = 670;
} else {
// If not in popup, the width could vary.
// We determine width based on div's size.
var thisElement = this.get('element');
if (thisElement!=null) {
var calculatedWidth = $(thisElement).width();
if (calculatedWidth > diff) {
width = calculatedWidth - diff;
}
}
}
var _graph = new Rickshaw.Graph({
height: height,
width: width,
element: chartElement,
series: seriesData,
interpolation: 'step-after',
stroke: true,
renderer: this.get('renderer'),
strokeWidth: strokeWidth
});
if (this.get('renderer') === 'area') {
_graph.renderer.unstack = false;
}
xAxis = new Rickshaw.Graph.Axis.Time({
graph: _graph,
timeUnit: this.localeTimeUnit(this.get('timeUnitSeconds'))
});
var orientation = 'right';
if (isPopup) {
orientation = 'left';
}
yAxis = new Rickshaw.Graph.Axis.Y({
tickFormat: this.yAxisFormatter,
element: yaxisElement,
orientation: orientation,
graph: _graph
});
var legend = new Rickshaw.Graph.Legend({
graph: _graph,
element: legendElement
});
if (!isPopup) {
overlayElement.addEventListener('mousemove', function () {
$(xaxisElement).removeClass('hide');
$(legendElement).removeClass('hide');
$(chartElement).children("div").removeClass('hide');
});
overlayElement.addEventListener('mouseout', function () {
$(legendElement).addClass('hide');
});
_graph.onUpdate(function () {
$(legendElement).addClass('hide');
});
}
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: _graph,
legend: legend
});
var order = new Rickshaw.Graph.Behavior.Series.Order({
graph: _graph,
legend: legend
});
//show the graph when it's loaded
_graph.onUpdate(function(){
self.set('isReady', true);
});
_graph.render();
if (isPopup) {
var self = this;
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: _graph,
yFormatter:function (y) {
return self.yAxisFormatter(y);
},
xFormatter:function (x) {
return (new Date(x * 1000)).toLocaleTimeString();
},
formatter:function (series, x, y, formattedX, formattedY, d) {
return formattedY + '<br />' + formattedX;
}
});
}
if (isPopup) {
var self = this;
// In popup save selected metrics and show only them after data update
_graph.series.forEach(function(series, index) {
if (self.get('_seriesProperties') !== null && self.get('_seriesProperties')[index] !== null && self.get('_seriesProperties')[index] !== undefined ) {
if(self.get('_seriesProperties')[self.get('_seriesProperties').length - index - 1].length > 1) {
$('#'+self.get('id')+'-container'+self.get('popupSuffix')+' a.action:eq('+(self.get('_seriesProperties').length - index - 1)+')').parent('li').addClass('disabled');
series.disable();
}
}
});
//show the graph when it's loaded
_graph.onUpdate(function(){
self.set('isPopupReady', true);
});
_graph.update();
$('#'+self.get('id')+'-container'+self.get('popupSuffix')+' li.line').click(function() {
var series = [];
$('#'+self.get('id')+'-container'+self.get('popupSuffix')+' a.action').each(function(index, v) {
series[index] = v.parentNode.classList;
});
self.set('_seriesProperties', series);
});
this.set('_popupGraph', _graph);
}
else {
_graph.series.forEach(function(series, index) {
if (self.get('_seriesPropertiesWidget') !== null && self.get('_seriesPropertiesWidget')[index] !== null && self.get('_seriesPropertiesWidget')[index] !== undefined ) {
if(self.get('_seriesPropertiesWidget')[self.get('_seriesPropertiesWidget').length - index - 1].length > 1) {
$('#'+self.get('id')+'-container'+' a.action:eq('+(self.get('_seriesPropertiesWidget').length - index - 1)+')').parent('li').addClass('disabled');
series.disable();
}
}
});
_graph.update();
$('#'+self.get('id')+'-container'+' li.line').click(function() {
var series = [];
$('#'+self.get('id')+'-container'+' a.action').each(function(index, v) {
series[index] = v.parentNode.classList;
});
self.set('_seriesPropertiesWidget', series);
});
this.set('_graph', _graph);
}
},