Skip to content

filter applied to graph #1414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lobamba wants to merge 1 commit into from
Closed

filter applied to graph #1414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions zeppelin-web/src/app/notebook/notebook-actionBar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,15 @@ <h3>
data-toggle="dropdown" id="revisionsDropdown">
<span class="caret"></span>
</button>
<span>
<button type="button" class="btn btn-default btn-xs"
ng-class="{'active' : noFilter()}"
ng-click="allParagraphFiltered(true)" tooltip-placement="bottom"
tooltip="click on graph to filter">
<i class="fa fa-filter"></i> {{filteredData}}
</button>
</span>

<ul class="dropdown-menu pull-right" aria-labelledby="revisionsDropdown">
<li ng-repeat="revision in noteRevisions | orderBy:'time':true" class="revision">
<a style="cursor:pointer">
Expand Down
35 changes: 35 additions & 0 deletions zeppelin-web/src/app/notebook/notebook.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,9 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
document.getElementById('note.checkpoint.message').value = '';
};

//contains the data filtered with value
$scope.filteredData = '';

$scope.$on('listRevisionHistory', function(event, data) {
console.log('We got the revisions %o', data);
$scope.noteRevisions = data.revisionList;
Expand All @@ -192,11 +195,43 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
_.forEach($scope.note.paragraphs, function(n, key) {
angular.element('#' + n.id + '_paragraphColumn_main').scope().runParagraph(n.text);
});

$scope.filteredData = '';
}
}
});
};

$scope.allParagraphFiltered = function(emit, refresh, columnName, nameOfFilteredData) {
_.forEach($scope.note.paragraphs, function(n, key) {
//default: the last paragraph have no data
if (n.result === undefined || n.result.type === 'TEXT') {
return;
}
var graphMode = angular.element('#' + n.id + '_paragraphColumn_main').scope().getGraphMode();
//remove filter by clicking the button filter
if (nameOfFilteredData === undefined) {
angular.element('#' + n.id + '_paragraphColumn_main').scope().setGraphMode(graphMode, true);
} else {
//console.log(n.config.graph.keys[0].name);
angular.element('#' + n.id + '_paragraphColumn_main').scope().setFilter(graphMode, emit, refresh, columnName,
nameOfFilteredData);
}
});
if (nameOfFilteredData !== undefined) {
$scope.filteredData = columnName + ': ' + nameOfFilteredData;
} else {
$scope.filteredData = '';
}
};

$scope.noFilter = function() {
if ($scope.filteredData === '' || $scope.filteredData === undefined) {
return false;
}
return true;
};

$scope.saveNote = function() {
if ($scope.note && $scope.note.paragraphs) {
_.forEach($scope.note.paragraphs, function(n, key) {
Expand Down
57 changes: 56 additions & 1 deletion zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -931,6 +931,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r

$scope.setGraphMode = function(type, emit, refresh) {
if (emit) {
$scope.loadTableData($scope.paragraph.result);
setNewMode(type);
} else {
clearUnknownColsFromGraphOption();
Expand Down Expand Up @@ -1053,6 +1054,38 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
return groupedThousandsWith3DigitsFormatter(d);
};

/**
* Function that allow to filter chart
*/
$scope.setFilter = function(type, emit, refresh, columnName, filteredValue) {
//reload is necessary the second time the user applies a filter
$scope.loadTableData($scope.paragraph.result);
var columnNameFinded = _.find($scope.paragraph.result.columnNames, function(o) {return o.name === columnName;});
//if the column name doesn't exist on the paragraph then return
if (columnNameFinded === undefined) {
return;
}
var result = $scope.paragraph.result;
var filteredMsgTable = [];
var filteredRows = [];
var k = 0;
for (var i = 0; i < result.msgTable.length; i++) {
for (var j = 0; j < result.msgTable[i].length; j++) {
if (result.msgTable[i][j].value === filteredValue) {
filteredMsgTable[k] = result.msgTable[i];
filteredRows[k] = result.rows[i];
k++;
break; //for the first time we filter one value
}
}
}
//if the paragraph doesn't contain the filter value but have the column name, "no data available"
//will be print at screen
result.msgTable = filteredMsgTable;
result.rows = filteredRows;
$scope.setGraphMode(type, emit, refresh);
};

var setD3Chart = function(type, data, refresh) {
if (!$scope.chart[type]) {
var chart = nv.models[type]();
Expand All @@ -1062,6 +1095,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
var d3g = [];
var xLabels;
var yLabels;
var index; //index of filtered value

if (type === 'scatterChart') {
var scatterData = setScatterChart(data, refresh);
Expand All @@ -1072,7 +1106,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r

$scope.chart[type].xAxis.tickFormat(function(d) {return xAxisTickFormat(d, xLabels);});
$scope.chart[type].yAxis.tickFormat(function(d) {return yAxisTickFormat(d, yLabels);});

$scope.chart[type].scatter.dispatch.on('elementClick', function(d) {
index = d.point.x;
$scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.scatter.xAxis.name, xLabels[index]);
});
// configure how the tooltip looks.
$scope.chart[type].tooltipContent(function(key, x, y, graph, data) {
var tooltipContent = '<h3>' + key + '</h3>';
Expand All @@ -1094,6 +1131,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r

$scope.chart[type].x(function(d) { return d.label;})
.y(function(d) { return d.value;});
$scope.chart[type].pie.dispatch.on('elementClick', function(d) {
$scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.keys[0].name, d.label);
});

if (d.length > 0) {
for (var i = 0; i < d[0].values.length ; i++) {
Expand All @@ -1108,6 +1148,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
d3g = pivotDataToD3ChartFormat(p, true, false, type).d3g;
$scope.chart[type].yAxis.axisLabelDistance(50);
$scope.chart[type].yAxis.tickFormat(function(d) {return yAxisTickFormat(d);});
//filter when clicked on graph
$scope.chart[type].multibar.dispatch.on('elementClick', function(d) {
$scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.keys[0].name, d.point.x);
});
} else if (type === 'lineChart' || type === 'stackedAreaChart' || type === 'lineWithFocusChart') {
var pivotdata = pivotDataToD3ChartFormat(p, false, true);
xLabels = pivotdata.xLabels;
Expand All @@ -1127,6 +1171,17 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
} else {
$scope.chart[type].forceY([]);
}
if (type === 'lineChart') {
$scope.chart[type].lines.dispatch.on('elementClick', function(d) {
index = d[0].pointIndex;
$scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.keys[0].name, xLabels[index]);
});
}
if (type === 'stackedAreaChart') {
$scope.chart[type].stacked.scatter.dispatch.on('elementClick', function(d) {
$scope.allParagraphFiltered(false, false, $scope.paragraph.config.graph.keys[0].name, xLabels[0]);
});
}
}
}

Expand Down