zazu-app-bubble-chart/client/app.js

A bubble chart app for zazu dashboard engine

(function () {
    angular.module('zazu-app-bubble-chart', ['appProvider', 'nvd3ChartDirectives'])
        .directive('bubbleChart', bubbleChartDirective);

    bubbleChartDirective.$inject = ['appBaseUrlFactory', '$http', '$timeout', '$log'];
    function bubbleChartDirective(appBaseUrlFactory, $http, $timeout, $log) {
        return {
            restrict: 'AE',
            template: '<nvd3-scatter-chart margin="{left:50,top:50,bottom:50,right:50}" ng-if="data !== null" data="data" showlegend="true" showlabels="true" showDistX="true" showDistY="true" force-X="true" force-Y="true" interactive="true" x="xFunction()" y="yFunction()" size="sizeFunction()"><svg height="100%" width="100%"></svg> </nvd3-scatter-chart>',
            controller: ['$scope', function ($scope) {
                var appBaseUrl = appBaseUrlFactory.getBaseUrl($scope),
                    timeout;

                $http.get(appBaseUrl + '/config').then(function (config) {
                    var reloadInterval = config.data.reloadInterval * 1000;
                    if (!angular.isNumber(reloadInterval) || isNaN(reloadInterval) || 1000 >= reloadInterval) {
                        reloadInterval =  600000; // default to 10 minutes
                    }

                    function getData () {
                        $http.get(appBaseUrl + '/data').then(function (data) {
                            $scope.data = data.data;

                            $scope.data.forEach(function (operator) {
                                if (Array.isArray(operator.values)) {
                                    return;
                                }

                                operator.values.map(function (val) {
                                    val.size = val.size * 1000;

                                    return val;
                                });
                            })

                            timeout = $timeout(getData, reloadInterval);

                        }, function (err) {
                            $log.error(err);
                        });
                    }
                    getData.apply(this);

                }, function (err) {
                    $log.error(err);
                });

                $scope.$on('$destroy', function() {
                    $timeout.cancel(timeout);
                });
            }],
            link: function ($scope) {
                $scope.data = null;

                $scope.xFunction = xFunction;
                $scope.yFunction = yFunction;
                $scope.sizeFunction = sizeFunction;
                $scope.tooltipContent = tooltipContent;

                function xFunction () {
                    return function (data) {
                        return data.x;
                    };
                }

                function yFunction () {
                    return function (data) {
                        return data.y;
                    };
                }

                function sizeFunction () {
                    return function (data) {
                        return data.size;
                    };
                }

                function tooltipContent () {
                    return function (data) {
                        return data.toString();
                    };
                }
            }
        };
    }
}());