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: '='
        },
        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...");
            $graph.get($scope.item.namespace, $scope.item.collection, $scope.item.query, $scope.item.obj, $scope.item.seriesKey, $scope.item.dataKey, $scope.item.labelsKey, function (chart) {
                $scope.chart = chart;
                console.log(chart);
                graphBlockUI.stop();
            });
        }
    };
});