zettapi_client/directives/graph/graph.dir.js

Client side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project

app.directive('zlGraph', function (zapiPath) {
    return {
        restrict: 'E',
        scope: {
            item: '=',
            custom: '@?'
        },
        replace: false,
        templateUrl: zapiPath + '/directives/graph/graph.html',
        controller: function ($scope, blockUI, $graph) {
            var chartTypes = [
                ['bar', 'doughnut', 'pie', 'horizontalBar'],
                ['line', 'radar'],
                ['bubble', 'polar-area']
            ];

            $scope.getNext = function () {
                var index = chartTypes[$scope.item.dimension].indexOf($scope.item.type) + 1;
                return chartTypes[$scope.item.dimension][index === chartTypes[$scope.item.dimension].length ? 0 : index];
            };

            $scope.toggle = function () {
                $scope.item.type = $scope.getNext();
            };

            $scope.chart = {};
            var graphBlockUI = blockUI.instances.get('graphBlockUI');
            graphBlockUI.start("A criar gráfico...");

            if (typeof $scope.custom === 'string') {
                var parts = $scope.custom.split('|');
                $graph.custom(parts[0], parts[1], finished);
            }
            else {
                $graph.get(
                    $scope.item.namespace,
                    $scope.item.collection,
                    $scope.item.query,
                    $scope.item.obj,
                    $scope.item.seriesKey,
                    $scope.item.dataKey,
                    $scope.item.labelsKey,
                    finished
                );
            }

            function finished(chart) {
                $scope.chart = chart;
                graphBlockUI.stop();
            }
        }
    };
});