Skip to content

N
nexpie-grafana-theme
Commit 91eaef48 by Zachary Tong
Options

Cleanup, comments

parent 5947a7b0
Showing with 23 additions and 56 deletions
panels/parallelcoordinates/module.js
angular.module('kibana.parallelcoordinates', []) angular.module('kibana.parallelcoordinates', [])
.controller('parallelcoordinates', function ($scope, eventBus) { .controller('parallelcoordinates', function ($scope, eventBus) {
console.log("controller");
$scope.activeDocs = []; $scope.activeDocs = [];
...@@ -149,8 +148,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -149,8 +148,6 @@ angular.module('kibana.parallelcoordinates', [])
restrict: 'A', restrict: 'A',
link: function (scope, elem, attrs) { link: function (scope, elem, attrs) {
console.log("directive");
scope.initializing = false; scope.initializing = false;
...@@ -159,7 +156,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -159,7 +156,6 @@ angular.module('kibana.parallelcoordinates', [])
*/ */
scope.init_or_render = function() { scope.init_or_render = function() {
if (typeof scope.svg === 'undefined') { if (typeof scope.svg === 'undefined') {
console.log("init");
//prevent duplicate initialization steps, if render is called again //prevent duplicate initialization steps, if render is called again
//before the svg is setup //before the svg is setup
...@@ -167,7 +163,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -167,7 +163,6 @@ angular.module('kibana.parallelcoordinates', [])
init_panel(); init_panel();
} }
} else { } else {
console.log("render");
render_panel(); render_panel();
} }
}; };
...@@ -177,7 +172,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -177,7 +172,6 @@ angular.module('kibana.parallelcoordinates', [])
* Receive render events * Receive render events
*/ */
scope.$on('render', function () { scope.$on('render', function () {
console.log("on render");
scope.init_or_render(); scope.init_or_render();
}); });
...@@ -185,15 +179,10 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -185,15 +179,10 @@ angular.module('kibana.parallelcoordinates', [])
* On window resize, re-render the panel * On window resize, re-render the panel
*/ */
angular.element(window).bind('resize', function () { angular.element(window).bind('resize', function () {
console.log("on resize");
scope.init_or_render(); scope.init_or_render();
}); });
/** /**
* Load the various panel-specific scripts then initialize * Load the various panel-specific scripts then initialize
* the svg and set appropriate D3 settings * the svg and set appropriate D3 settings
...@@ -205,9 +194,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -205,9 +194,6 @@ angular.module('kibana.parallelcoordinates', [])
scope.h = $(elem[0]).height() - scope.m[0] - scope.m[2]; scope.h = $(elem[0]).height() - scope.m[0] - scope.m[2];
console.log("init");
console.log("fields", scope.panel.fields);
scope.initializing = true; scope.initializing = true;
// Using LABjs, wait until all scripts are loaded before rendering panel // Using LABjs, wait until all scripts are loaded before rendering panel
var scripts = $LAB.script("common/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000)); var scripts = $LAB.script("common/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000));
...@@ -232,11 +218,7 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -232,11 +218,7 @@ angular.module('kibana.parallelcoordinates', [])
scope.foreground = scope.svg.append("svg:g") scope.foreground = scope.svg.append("svg:g")
.attr("class", "foreground"); .attr("class", "foreground");
scope.initializing = false; scope.initializing = false;
console.log("init done");
render_panel(); render_panel();
}); });
...@@ -248,11 +230,12 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -248,11 +230,12 @@ angular.module('kibana.parallelcoordinates', [])
return scope.line(scope.panel.fields.map(function(p) { return [scope.x(p), scope.y[p](d[p])]; })); return scope.line(scope.panel.fields.map(function(p) { return [scope.x(p), scope.y[p](d[p])]; }));
} }
// Handles a brush event, toggling the display of foreground lines. // Handles a brush event, toggling the display of foreground lines.
function brush() { function brush() {
var actives = scope.panel.fields.filter(function(p) { return !scope.y[p].brush.empty(); }), var actives = scope.panel.fields.filter(function(p) { return !scope.y[p].brush.empty(); }),
extents = actives.map(function(p) { return scope.y[p].brush.extent(); }); extents = actives.map(function(p) { return scope.y[p].brush.extent(); });
//.fade class hides the "inactive" lines, helps speed up rendering significantly
scope.foregroundLines.classed("fade", function(d) { scope.foregroundLines.classed("fade", function(d) {
return !actives.every(function(p, i) { return !actives.every(function(p, i) {
var inside = extents[i][0] <= d[p] && d[p] <= extents[i][1]; var inside = extents[i][0] <= d[p] && d[p] <= extents[i][1];
...@@ -260,6 +243,8 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -260,6 +243,8 @@ angular.module('kibana.parallelcoordinates', [])
}); });
}); });
//activeDocs contains the actual doc records for selected lines.
//will be broadcast out to the table
var activeDocs = _.filter(scope.data, function(v) { var activeDocs = _.filter(scope.data, function(v) {
return actives.every(function(p,i) { return actives.every(function(p,i) {
var inside = extents[i][0] <= v[p] && v[p] <= extents[i][1]; var inside = extents[i][0] <= v[p] && v[p] <= extents[i][1];
...@@ -267,20 +252,18 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -267,20 +252,18 @@ angular.module('kibana.parallelcoordinates', [])
}); });
}) })
scope.$apply(function() { scope.$apply(function() {
scope.activeDocs = activeDocs; scope.activeDocs = activeDocs;
}); });
} }
//Drag functions are used for dragging the axis aroud
function dragstart(d) { function dragstart(d) {
scope.i = scope.panel.fields.indexOf(d); scope.i = scope.panel.fields.indexOf(d);
console.log("dragstart", d, scope.i)
} }
function drag(d) { function drag(d) {
console.log("drag", d, scope.i)
scope.x.range()[scope.i] = d3.event.x; scope.x.range()[scope.i] = d3.event.x;
scope.panel.fields.sort(function(a, b) { return scope.x(a) - scope.x(b); }); scope.panel.fields.sort(function(a, b) { return scope.x(a) - scope.x(b); });
scope.foregroundLines.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); scope.foregroundLines.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
...@@ -291,7 +274,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -291,7 +274,6 @@ angular.module('kibana.parallelcoordinates', [])
} }
function dragend(d) { function dragend(d) {
console.log("dragend", d)
scope.x.domain(scope.panel.fields).rangePoints([0, scope.w]); scope.x.domain(scope.panel.fields).rangePoints([0, scope.w]);
var t = d3.transition().duration(500); var t = d3.transition().duration(500);
t.selectAll(".trait").attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); t.selectAll(".trait").attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
...@@ -309,9 +291,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -309,9 +291,6 @@ angular.module('kibana.parallelcoordinates', [])
*/ */
function render_panel() { function render_panel() {
console.log("render_panel");
scope.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, scope.w]); scope.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, scope.w]);
scope.y = {}; scope.y = {};
...@@ -328,15 +307,13 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -328,15 +307,13 @@ angular.module('kibana.parallelcoordinates', [])
scope.panel.fields.forEach(function(d) { scope.panel.fields.forEach(function(d) {
//If it is a string, setup an ordinal scale.
//Otherwise, use a linear scale for numbers
if (_.isString(scope.data[0][d])) { if (_.isString(scope.data[0][d])) {
var value = function(v) { var value = function(v) { return v[d]; };
return v[d];
};
var values = _.map(_.uniq(scope.data, value),value); var values = _.map(_.uniq(scope.data, value),value);
scope.y[d] = d3.scale.ordinal() scope.y[d] = d3.scale.ordinal()
.domain(values) .domain(values)
.rangeBands([scope.h, 0]); .rangeBands([scope.h, 0]);
...@@ -354,7 +331,7 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -354,7 +331,7 @@ angular.module('kibana.parallelcoordinates', [])
}); });
//pull out the actively selected columns for rendering the axis/lines
var activeData = _.map(scope.data, function(d) { var activeData = _.map(scope.data, function(d) {
var t = {}; var t = {};
_.each(scope.panel.fields, function(f) { _.each(scope.panel.fields, function(f) {
...@@ -364,6 +341,7 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -364,6 +341,7 @@ angular.module('kibana.parallelcoordinates', [])
}); });
//Lines
scope.foregroundLines = scope.foreground scope.foregroundLines = scope.foreground
.selectAll(".foregroundlines") .selectAll(".foregroundlines")
.data(activeData, function(d, i){ .data(activeData, function(d, i){
...@@ -373,7 +351,6 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -373,7 +351,6 @@ angular.module('kibana.parallelcoordinates', [])
}); });
return id; return id;
}); });
scope.foregroundLines scope.foregroundLines
.enter().append("svg:path") .enter().append("svg:path")
.attr("d", path) .attr("d", path)
...@@ -381,28 +358,24 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -381,28 +358,24 @@ angular.module('kibana.parallelcoordinates', [])
.attr("style", function(d) { .attr("style", function(d) {
return "stroke:" + scope.colors(d.phpmemory) + ";"; return "stroke:" + scope.colors(d.phpmemory) + ";";
}); });
scope.foregroundLines.exit().remove(); scope.foregroundLines.exit().remove();
//Axis group
scope.traits = scope.svg.selectAll(".trait") scope.traits = scope.svg.selectAll(".trait")
.data(scope.panel.fields, String); .data(scope.panel.fields, String);
scope.traits scope.traits
.enter().append("svg:g") .enter().append("svg:g")
.attr("class", "trait") .attr("class", "trait")
.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); .attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
scope.traits
.exit().remove();
//brushes used to select lines
scope.brushes = scope.svg.selectAll(".brush") scope.brushes = scope.svg.selectAll(".brush")
.data(scope.panel.fields, String); .data(scope.panel.fields, String);
scope.brushes scope.brushes
.enter() .enter()
.append("svg:g") .append("svg:g")
...@@ -416,16 +389,22 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -416,16 +389,22 @@ angular.module('kibana.parallelcoordinates', [])
.attr("x", -8) .attr("x", -8)
.attr("width", 16); .attr("width", 16);
//this section is repeated because enter() only works on "new" data, but we always need to
//update the brushes if things change. This just calls the brushing function, so it doesn't
//affect currently active rects
scope.brushes scope.brushes
.each(function(d) { .each(function(d) {
d3.select(this) d3.select(this)
.call(scope.y[d].brush) .call(scope.y[d].brush)
.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); .attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; });
}); });
scope.brushes
.exit().remove();
//vertical axis and labels
scope.axisLines = scope.svg.selectAll(".axis") scope.axisLines = scope.svg.selectAll(".axis")
.data(scope.panel.fields, String); .data(scope.panel.fields, String);
scope.axisLines scope.axisLines
.enter() .enter()
.append("svg:g") .append("svg:g")
...@@ -444,24 +423,12 @@ angular.module('kibana.parallelcoordinates', []) ...@@ -444,24 +423,12 @@ angular.module('kibana.parallelcoordinates', [])
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("y", -9) .attr("y", -9)
.text(String); .text(String);
scope.brushes
.exit().remove();
scope.axisLines scope.axisLines
.exit().remove(); .exit().remove();
scope.traits //Simulate a dragend in case there is new data and we need to rearrange
.exit().remove();
dragend(); dragend();
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment