Skip to content

Commit

Permalink
#197 Add CSV export to donut and bar charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@nadouani
nadouani committed Nov 21, 2017
1 parent e856972 commit 10fb008
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 35 deletions.
3 changes: 2 additions & 1 deletion ui/app/scripts/directives/charts/c3Chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
scope: {
chart: '=',
resizeOn: '@',
error: '='
error: '=',
onSaveCsv: '&?'
},
templateUrl: 'views/directives/charts/c3.html',
link: function(scope, element) {
Expand Down
29 changes: 26 additions & 3 deletions ui/app/scripts/directives/dashboard/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
resizeOn: '@',
metadata: '='
},
template: '<c3 chart="chart" resize-on="{{resizeOn}}" error="error"></c3>',
template: '<c3 chart="chart" resize-on="{{resizeOn}}" error="error" on-save-csv="getCsv()"></c3>',
link: function(scope) {
scope.error = false;
scope.chart = {};
Expand Down Expand Up @@ -62,7 +62,10 @@
});

var i = 0;
_.each(rawData, function(value, key) {
var orderedDates = _.sortBy(_.keys(rawData));

_.each(orderedDates, function(key) {
var value = rawData[key];
data._date[i] = moment(key * 1).format('YYYY-MM-DD');

_.each(_.keys(value), function(item) {
Expand All @@ -75,10 +78,13 @@
scope.names = {};
scope.colors = {};

scope.data = data;
console.log('Bar data:', scope.data);

var chart = {
data: {
x: '_date',
json: data,
json: scope.data,
type: 'bar',
//names: scope.names || {},
//colors: scope.colors || {},
Expand Down Expand Up @@ -111,6 +117,23 @@
});
};

scope.getCsv = function() {
var dates = scope.data._date;
var keys = _.keys(scope.data);
var csv = [{data: keys.join(';')}];

var row = [];
for(var i=0; i<dates.length; i++) {
row = _.map(keys, function(key) {
return scope.data[key][i];
});

csv.push({data: row.join(';')});
}

return csv;
}

if (scope.autoload === true) {
scope.load();
}
Expand Down
58 changes: 36 additions & 22 deletions ui/app/scripts/directives/dashboard/donut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
resizeOn: '@',
metadata: '='
},
template: '<c3 chart="chart" resize-on="{{resizeOn}}" error="error"></c3>',
template: '<c3 chart="chart" resize-on="{{resizeOn}}" error="error" on-save-csv="getCsv()"></c3>',
link: function(scope) {
scope.error = false;
scope.chart = {};
Expand Down Expand Up @@ -48,7 +48,7 @@

var statConfig = {
query: query,
//objectType: scope.options.entity,

objectType: scope.entity.path,
field: scope.options.field,
sort: scope.options.sort ? [scope.options.sort] : '-_count',
Expand All @@ -60,35 +60,41 @@
StatSrv.getPromise(statConfig).then(
function(response) {
scope.error = false;
var keys = _.without(_.keys(response.data), 'count');
var columns = keys.map(function(key) {
return [key, response.data[key].count];
var data = {};
var total = response.data.count;

delete response.data.count;

_.each(response.data, function(val, key) {
data[key] = val.count;
});

scope.data = data;

scope.chart = {
data: {
columns: columns,
json: scope.data,
type: 'donut',
names: scope.options.names || {},
colors: scope.options.colors || {},
onclick: function(d) {
var criteria = [{ _type: scope.options.entity }, { _field: scope.options.field, _value: d.id }];

if (scope.options.query && scope.options.query !== '*') {
criteria.push(scope.options.query);
}

var searchQuery = {
_and: criteria
};

$state.go('app.search', {
q: Base64.encode(angular.toJson(searchQuery))
});
}
// onclick: function(d) {
// var criteria = [{ _type: scope.options.entity }, { _field: scope.options.field, _value: d.id }];
//
// if (scope.options.query && scope.options.query !== '*') {
// criteria.push(scope.options.query);
// }
//
// var searchQuery = {
// _and: criteria
// };
//
// $state.go('app.search', {
// q: Base64.encode(angular.toJson(searchQuery))
// });
// }
},
donut: {
title: 'Total: ' + response.data.count,
title: 'Total: ' + total,
label: {
format: function(value) {
return value;
Expand All @@ -104,6 +110,14 @@
);
};

scope.getCsv = function() {
var csv = [];
_.each(scope.data, function(val, key) {
csv.push({data: key + ';' + val});
});
return csv;
};

if (scope.autoload === true) {
scope.load();
}
Expand Down
16 changes: 12 additions & 4 deletions ui/app/scripts/directives/dashboard/line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
resizeOn: '@',
metadata: '='
},
template: '<c3 chart="chart" resize-on="{{resizeOn}}" error="error"></c3>',
template: '<c3 chart="chart" resize-on="{{resizeOn}}" error="error" on-save-csv="getCsv()"></c3>',
link: function(scope) {
scope.error = false;
scope.chart = {};
Expand Down Expand Up @@ -90,12 +90,16 @@
});
scope.groups = scope.options.stacked === true ? _.values(groups) : {};

scope.data = [
['date'].concat(labels)
].concat(columns);

console.log('Line data:', scope.data);

var chart = {
data: {
x: 'date',
columns: [
['date'].concat(labels)
].concat(columns),
columns: scope.data,
names: scope.names || {},
type: scope.type || 'bar',
types: scope.types || {},
Expand Down Expand Up @@ -133,6 +137,10 @@
});
};

scope.getCsv = function() {

};

if (scope.autoload === true) {
scope.load();
}
Expand Down
5 changes: 4 additions & 1 deletion ui/app/views/directives/charts/c3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ <h4 class="text-danger">
</div>
</div>
<div class="c3-content" ng-show="!error">
<div ng-show="chart" class="clearfix"><a class="pull-right btn btn-link" href ng-click="save()">Save as image</a></div>
<div ng-show="chart" class="clearfix">
<a class="pull-right ml-xs" href ng-csv="onSaveCsv"><i class="fa fa-file-text-o mr-xxxs"></i>Save as CSV</a>
<a class="pull-right" href ng-click="save()"><i class="fa fa-file-image-o mr-xxxs"></i>Save as image</a>
</div>
<div class="c3-chart" style="height:300px;">
<div styles="height:300px;" class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i><br>Loading...</div>
</div>
Expand Down
4 changes: 0 additions & 4 deletions ui/app/views/partials/dashboard/view.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,9 +112,5 @@ <h3 class="box-title">
dnd-dragstart="$vm.itemDragStarted(colIndex, row)">
</dashboard-item>
</div>



</div>
<pre>{{$vm.definition | json}}</pre>
</div>

0 comments on commit 10fb008

Please sign in to comment.