zettapi_client/lib/directives/graph/graph.dir.js

Admin panel and 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() {
  return {
    restrict: 'E',
    scope: {
      item: '=',
      namespace: '@',
      db: '@',
      driver: '@?',
      custom: '@?',
      noToggle: '@?',
      noPanel: '@?'
    },
    replace: false,
    templateUrl: 'directives/graph/graph.html',
    controller: function($scope, blockUI, $graph, chartTypes) {
      if (typeof $scope.driver === 'undefined') $scope.driver = 'mongo';
      var graphBlockUI = blockUI.instances.get('graphBlockUI');
      $scope.chart = {};

      initialize();

      $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();
      };

      function initialize() {
        graphBlockUI.start("A criar gráfico...");

        if (typeof $scope.custom === 'string') {
          $graph.custom($scope.driver, $scope.namespace, $scope.db, $scope.custom, finished);
        } else {
          $graph.get(
            $scope.driver,
            $scope.namespace,
            $scope.db,
            $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();
      }
    }
  };
});