##// END OF EJS Templates
channelstream: separate element and basic pubsub
channelstream: separate element and basic pubsub

File last commit:

r28:e98235eb
r64:bcc182a6
Show More
c3js.js
127 lines | 5.3 KiB | application/javascript | JavascriptLexer
// # Copyright (C) 2010-2016 RhodeCode GmbH
// #
// # This program is free software: you can redistribute it and/or modify
// # it under the terms of the GNU Affero General Public License, version 3
// # (only), as published by the Free Software Foundation.
// #
// # This program is distributed in the hope that it will be useful,
// # but WITHOUT ANY WARRANTY; without even the implied warranty of
// # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// # GNU General Public License for more details.
// #
// # You should have received a copy of the GNU Affero General Public License
// # along with this program. If not, see <http://www.gnu.org/licenses/>.
// #
// # This program is dual-licensed. If you wish to learn more about the
// # AppEnlight Enterprise Edition, including its added features, Support
// # services, and proprietary license terms, please see
// # https://rhodecode.com/licenses/
// This code is inspired by https://github.com/jettro/c3-angular-sample/tree/master/js
// License is MIT
angular.module('appenlight.directives.c3chart', [])
.controller('ChartCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.chart = null;
this.showGraph = function () {
var config = angular.copy($scope.config);
var firstLoad = true;
config.bindto = "#" + $scope.domid;
var originalXTickCount = null;
if ($scope.data && $scope.config) {
if (!_.isEmpty($scope.data)) {
_.extend(config.data, angular.copy($scope.data));
}
console.log('ChartCtrl.showGraph', config);
config.onresized = function () {
if (this.currentWidth < 400){
$scope.chart.internal.config.axis_x_tick_culling_max = 3;
}
else if (this.currentWidth < 600){
$scope.chart.internal.config.axis_x_tick_culling_max = 5;
}
else{
$scope.chart.internal.config.axis_x_tick_culling_max = originalXTickCount;
}
$scope.chart.flush();
};
$scope.chart = c3.generate(config);
originalXTickCount = $scope.chart.internal.config.axis_x_tick_culling_max;
$scope.chart.internal.config.onresized.call($scope.chart.internal);
}
console.log('should update', $scope.update);
if ($scope.update) {
console.log('reload driven');
$scope.$watch('data', function () {
if (!firstLoad) {
console.log('data updated', $scope.data);
$scope.chart.load(angular.copy($scope.data), {unload: true});
if (typeof $scope.data.groups != 'undefined') {
console.log('add groups');
$scope.chart.groups($scope.data.groups);
}
if (typeof $scope.data.names != 'undefined') {
console.log('add names');
$scope.chart.data.names($scope.data.names);
}
$scope.chart.flush();
}
}, true);
}
$scope.$watch('config.regions', function (newValue, oldValue) {
if (newValue === oldValue) {
return
}
if (typeof $scope.config.regions != 'undefined') {
console.log('update regions', $scope.config.regions);
$scope.chart.regions($scope.config.regions);
}
});
firstLoad = false;
$scope.$watch('resizetrigger', function (newValue, oldValue) {
if (newValue !== oldValue) {
$timeout(function () {
$scope.chart.resize();
$scope.chart.internal.config.onresized.call($scope.chart.internal);
});
}
});
};
}])
.directive('c3chart', function ($timeout) {
var chartLinker = function (scope, element, attrs, chartCtrl) {
// Trick to wait for all rendering of the DOM to be finished.
// then we can tell c3js to "connect" to our dom node
$timeout(function () {
chartCtrl.showGraph()
});
scope.$on("$destroy", function () {
if (scope.chart !== null) {
scope.chart = scope.chart.destroy();
delete element;
delete scope.chart;
console.log('destroy called');
}
}
);
};
return {
"restrict": "E",
"controller": "ChartCtrl",
"scope": {
"domid": "@domid",
"config": "=config",
"data": "=data",
"resizetrigger": "=resizetrigger",
"update": "=update"
},
"template": "<div id='{{domid}}' class='chart'></div>",
"replace": true,
"link": chartLinker
}
});