From ccc1eafa693d4ceff10721d976b38ff0f71eb76e Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Fri, 24 May 2013 09:13:13 -0700 Subject: [PATCH] Added percentage stacking mode to histogram --- common/lib/panels/jquery.flot.stack.js | 128 +++++++++++++++++++++++++ panels/histogram/editor.html | 1 + panels/histogram/module.js | 14 ++- 3 files changed, 140 insertions(+), 3 deletions(-) diff --git a/common/lib/panels/jquery.flot.stack.js b/common/lib/panels/jquery.flot.stack.js index 79081b04919..bbeb0f71010 100644 --- a/common/lib/panels/jquery.flot.stack.js +++ b/common/lib/panels/jquery.flot.stack.js @@ -186,3 +186,131 @@ charts or filled areas). version: '1.2' }); })(jQuery); + +(function ($) { + var options = { + series: { + stackpercent: null + } // or number/string + }; + + function init(plot) { + + // will be built up dynamically as a hash from x-value, or y-value if horizontal + var stackBases = {}; + var processed = false; + var stackSums = {}; + + //set percentage for stacked chart + function processRawData(plot, series, data, datapoints) { + console.log(plot) + if (!processed) { + processed = true; + stackSums = getStackSums(plot.getData()); + } + if (series.stackpercent == true) { + var num = data.length; + series.percents = []; + var key_idx = 0; + var value_idx = 1; + if (series.bars && series.bars.horizontal && series.bars.horizontal === true) { + key_idx = 1; + value_idx = 0; + } + for (var j = 0; j < num; j++) { + var sum = stackSums[data[j][key_idx] + ""]; + if (sum > 0) { + series.percents.push(data[j][value_idx] * 100 / sum); + } else { + series.percents.push(0); + } + } + } + } + + //calculate summary + function getStackSums(_data) { + var data_len = _data.length; + var sums = {}; + if (data_len > 0) { + //caculate summary + for (var i = 0; i < data_len; i++) { + if (_data[i].stackpercent) { + var key_idx = 0; + var value_idx = 1; + if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) { + key_idx = 1; + value_idx = 0; + } + var num = _data[i].data.length; + for (var j = 0; j < num; j++) { + var value = 0; + if (_data[i].data[j][1] != null) { + value = _data[i].data[j][value_idx]; + } + if (sums[_data[i].data[j][key_idx] + ""]) { + sums[_data[i].data[j][key_idx] + ""] += value; + } else { + sums[_data[i].data[j][key_idx] + ""] = value; + } + + } + } + } + } + return sums; + } + + function stackData(plot, s, datapoints) { + if (!s.stackpercent) return; + if (!processed) { + stackSums = getStackSums(plot.getData()); + } + var newPoints = []; + + + var key_idx = 0; + var value_idx = 1; + if (s.bars && s.bars.horizontal && s.bars.horizontal === true) { + key_idx = 1; + value_idx = 0; + } + + for (var i = 0; i < datapoints.points.length; i += 3) { + // note that the values need to be turned into absolute y-values. + // in other words, if you were to stack (x, y1), (x, y2), and (x, y3), + // (each from different series, which is where stackBases comes in), + // you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2) + // generally, (x, thisValue + (base up to this point), + (base up to this point)) + if (!stackBases[datapoints.points[i + key_idx]]) { + stackBases[datapoints.points[i + key_idx]] = 0; + } + newPoints[i + key_idx] = datapoints.points[i + key_idx]; + newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]]; + newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]]; + stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx]; + // change points to percentage values + // you may need to set yaxis:{ max = 100 } + if ( stackSums[newPoints[i+key_idx]+""] > 0 ){ + newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""]; + newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""]; + } else { + newPoints[i + value_idx] = 0; + newPoints[i + 2] = 0; + } + } + + datapoints.points = newPoints; + } + + plot.hooks.processRawData.push(processRawData); + plot.hooks.processDatapoints.push(stackData); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'stackpercent', + version: '0.1' + }); +})(jQuery); diff --git a/panels/histogram/editor.html b/panels/histogram/editor.html index 37da0ca6af5..dd3c2a43544 100644 --- a/panels/histogram/editor.html +++ b/panels/histogram/editor.html @@ -52,6 +52,7 @@
+
diff --git a/panels/histogram/module.js b/panels/histogram/module.js index fde3cf8e947..d91c0de992d 100644 --- a/panels/histogram/module.js +++ b/panels/histogram/module.js @@ -64,6 +64,7 @@ angular.module('kibana.histogram', []) legend : true, 'x-axis' : true, 'y-axis' : true, + percentage : false } _.defaults($scope.panel,_d) @@ -290,7 +291,8 @@ angular.module('kibana.histogram', []) scope.plot = $.plot(elem, scope.data, { legend: { show: false }, series: { - stack: stack, + stackpercent: scope.panel.stack ? scope.panel.percentage : false, + stack: scope.panel.percentage ? null : stack, lines: { show: scope.panel.lines, fill: scope.panel.fill/10, @@ -301,7 +303,12 @@ angular.module('kibana.histogram', []) points: { show: scope.panel.points, fill: 1, fillColor: false, radius: 5}, shadowSize: 1 }, - yaxis: { show: scope.panel['y-axis'], min: 0, color: "#c8c8c8" }, + yaxis: { + show: scope.panel['y-axis'], + min: 0, + max: scope.panel.percentage && scope.panel.stack ? 100 : null, + color: "#c8c8c8" + }, xaxis: { timezone: scope.panel.timezone, show: scope.panel['x-axis'], @@ -367,7 +374,8 @@ angular.module('kibana.histogram', []) elem.bind("plothover", function (event, pos, item) { if (item) { tt(pos.pageX, pos.pageY, - "
"+ + "
"+ item.datapoint[1].toFixed(0) + " @ " + moment(item.datapoint[0]).format('MM/DD HH:mm:ss')); } else {