Separate charts in different controllers.

accountant/frontend/static/js/entries.js

@@ -25,45 +25,16 @@ accountantApp
 }])
 
 .controller(
-    "EntryController", [
+  "CategoryChartController", [
-        "$scope", "$http", "$rootScope", "$filter", "$routeParams", "notificationService", "Entries",
+    "$rootScope", "$scope", "$http", "$routeParams",
-        function($scope, $http, $rootScope, $filter, $routeParams, notificationService, Entries) {
+    function($rootScope, $scope, $http, $routeParams) {
-    // Range for entries.
-    $scope.begin = moment.utc().startOf('month');
-    $scope.end = moment.utc().endOf('month');
 
-    // Entry store and selection
+  var colors = Highcharts.getOptions().colors;
-    $scope.entries = [];
+  $scope.revenueColor = colors[2];
-
+  $scope.expenseColor = colors[3];
-    $scope.categories = [];
-
-    $scope.account = null;
-
-    // Function to reset the new entry.
-    $scope.addEntry = function() {
-      if(!$scope.inserted) {
-        $scope.inserted = new Entries();
-        $scope.inserted.account_id = $routeParams.accountId;
-        $scope.entries.splice(0, 0, $scope.inserted);
-      }
-    };
-
-    $scope.setExtremes = function(e) {
-        begin = moment.utc(e.min);
-        end = moment.utc(e.max);
-
-        $scope.selectRange(begin, end);
-    };
-
-    $scope.selectRange = function(begin, end) {
-        $scope.begin = begin;
-        $scope.end = end;
-
-        $scope.$emit("rangeSelectedEvent", {begin: begin, end: end});
-    };
 
   // Configure pie chart for categories.
-    $scope.categoriesChartConfig = {
+  $scope.config = {
     options: {
       chart: {
         type: 'pie',
@@ -116,8 +87,100 @@ accountantApp
     }]
   };
 
+  $scope.brightenColor = function(color) {
+    brightness = 0.2;
+
+    return Highcharts.Color(color).brighten(brightness).get()
+  };
+
+  // Load categories, mainly to populate the pie chart.
+  $scope.load = function(begin, end) {
+    $scope.config.loading = true;
+
+    $http.get("/api/categories", {
+      params: {
+        account: $routeParams.accountId,
+        begin: begin.format('YYYY-MM-DD'),
+        end: end.format('YYYY-MM-DD')
+      }
+    }).success(function(data) {
+      var expenses = [], revenues = [];
+
+      var expenseColor = $scope.brightenColor($scope.expenseColor);
+      var revenueColor = $scope.brightenColor($scope.revenueColor);
+
+      angular.forEach(angular.fromJson(data), function(category) {
+        expenses.push({
+          name: category.category,
+          y: -category.expenses,
+          color: expenseColor
+        });
+
+        revenues.push({
+          name: category.category,
+          y: category.revenues,
+          color: revenueColor
+        });
+      });
+
+      // Note: expenses and revenues must be in the same order than in series[0].
+      $scope.config.series[1].data = revenues.concat(expenses);
+
+      $scope.config.loading = false;
+    });
+  };
+
+  /*
+   * Get account status.
+   */
+  $scope.getAccountStatus = function(begin, end) {
+    $http.get("/api/accounts/" + $routeParams.accountId, {
+      params: {
+        begin: begin.format('YYYY-MM-DD'),
+        end: end.format('YYYY-MM-DD')
+      }
+    }).success(function(account) {
+      // Emit accountLoadedEvent.
+      $scope.$emit("accountLoadedEvent", account);
+
+      // Update pie chart subtitle with Balance.
+      $scope.config.subtitle = {
+        text: "Balance: " + account.balance
+      };
+
+      $scope.config.series[0].data = [{
+        name: "Revenues",
+        y: account.revenues,
+        color: $scope.revenueColor
+      }, {
+        name: "Expenses",
+        y: -account.expenses,
+        color: $scope.expenseColor,
+      }];
+    });
+  };
+
+  // Reload categories and account status on range selection.
+  $rootScope.$on("rangeSelectedEvent", function(e, args) {
+    $scope.load(args.begin, args.end);
+    $scope.getAccountStatus(args.begin, args.end);
+  });
+}])
+
+.controller(
+  "SoldChartController", [
+    "$rootScope", "$scope", "$http", "$routeParams",
+    function($rootScope, $scope, $http, $routeParams) {
+
+  $scope.setExtremes = function(e) {
+   begin = moment.utc(e.min);
+   end = moment.utc(e.max);
+
+   $scope.selectRange(begin, end);
+  };
+
   // Configure chart for entries.
-    $scope.soldChartConfig = {
+  $scope.config = {
     options: {
       chart: {
         zoomType: 'x'
@@ -185,8 +248,8 @@ accountantApp
       events: {
         afterSetExtremes: $scope.setExtremes
       },
-            currentMin: $scope.begin,
+      currentMin: moment.utc().startOf('month'),
-            currentMax: $scope.end
+      currentMax: moment.utc().endOf('month')
     },
     yAxis: {
       plotLines: [{
@@ -202,137 +265,76 @@ accountantApp
     useHighStocks: true
   };
 
-    // Load categories, mainly to populate the pie chart.
+  $scope.selectRange = function(begin, end) {
-    $scope.loadCategories = function() {
+    $scope.$emit("rangeSelectedEvent", {begin: begin, end: end});
-        $scope.categoriesChartConfig.loading = true;
-
-        $http.get("/api/categories", {
-            params: {
-                account: $scope.account.id,
-                begin: $scope.begin.format('YYYY-MM-DD'),
-                end: $scope.end.format('YYYY-MM-DD')
-            }
-        }).success(function(data) {
-            var expenses = [], revenues = [];
-            var colors = Highcharts.getOptions().colors;
-
-            var config = $scope.categoriesChartConfig;
-
-            angular.forEach(angular.fromJson(data), function(category) {
-                brightness = 0.2;
-
-                expenses.push({
-                    name: category.category,
-                    y: -category.expenses,
-                    color: Highcharts.Color(config.series[0].data[1].color).brighten(brightness).get()
-                });
-
-                revenues.push({
-                    name: category.category,
-                    y: category.revenues,
-                    color: Highcharts.Color(config.series[0].data[0].color).brighten(brightness).get()
-                });
-            });
-
-            // Note: expenses and revenues must be in the same order than in series[0].
-            config.series[1].data = revenues.concat(expenses);
-
-            $scope.categoriesChartConfig.loading = false;
-
-            $scope.loadSolds();
-        });
   };
 
   $scope.loadSolds = function() {
-        $scope.soldChartConfig.loading = true;
+    $scope.config.loading = true;
 
     $http.get("/api/solds", {
       params: {
-                account: $scope.account.id,
+        account: $routeParams.accountId,
       }
     }).success(function(data) {
-            var config = $scope.soldChartConfig;
+      $scope.config.series[0].data = [];
-
-            config.series[0].data = [];
 
       angular.forEach(data, function(entry) {
-                config.series[0].data.push([
+        $scope.config.series[0].data.push([
           moment.utc(entry.operation_date).valueOf(),
           entry.open, entry.high, entry.low, entry.close
         ]);
       });
 
-            $scope.soldChartConfig.loading = false;
+      $scope.$emit("rangeSelectedEvent", {
+        begin: $scope.config.xAxis.currentMin,
+        end: $scope.config.xAxis.currentMax
+      });
 
-            $scope.loadEntries();
+      $scope.config.loading = false;
     });
   };
 
-    /*
+  // Reload solds when an entry is saved.
-     * Hook on account selected event to display account status.
+  $rootScope.$on("entrySavedEvent", function(e, entry) {
-     */
+    $scope.loadSolds();
-    $rootScope.$on("accountSelectedEvent", function(event, args) {
-        $scope.getAccountStatus($routeParams.accountId);
   });
 
-    $rootScope.$on("rangeSelectedEvent", function(event, args) {
+  // Update authorized overdraft on account loading.
-        $scope.getAccountStatus($routeParams.accountId);
-    });
-
-    /*
-     * Get account status.
-     */
-    $scope.getAccountStatus = function(accountId) {
-        $scope.categoriesChartConfig.loading = true;
-
-        $http.get("/api/accounts/" + accountId, {
-            params: {
-                begin: $scope.begin.format('YYYY-MM-DD'),
-                end: $scope.end.format('YYYY-MM-DD')
-            }
-        }).success(function(account) {
-            $scope.account = account;
-            $scope.categoriesChartConfig.loading = false;
-
-            $scope.$emit("accountLoadedEvent", account);
-        });
-    };
-
-    $rootScope.$on("accountLoadedEvent", $scope.loadCategories);
-
   $rootScope.$on("accountLoadedEvent", function(e, account) {
-        var colors = Highcharts.getOptions().colors;
+    $scope.config.yAxis.plotLines[1].value = account.authorized_overdraft;
-
-        var config = $scope.categoriesChartConfig;
-
-        // Update pie chart subtitle with Balance.
-        config.subtitle = {
-            text: "Balance: " + account.balance
-        };
-
-        config.series[0].data = [{
-            name: "Revenues",
-            y: account.revenues,
-            color: colors[2]
-        }, {
-            name: "Expenses",
-            y: -account.expenses,
-            color: colors[3],
-        }];
-
-        $scope.soldChartConfig.yAxis.plotLines[1].value = account.authorized_overdraft;
   });
 
+  // Select beginning and end of month.
+  $scope.loadSolds();
+}])
+
+.controller(
+    "EntryController", [
+        "$scope", "$http", "$rootScope", "$filter", "$routeParams", "notificationService", "Entries",
+        function($scope, $http, $rootScope, $filter, $routeParams, notificationService, Entries) {
+    // Entry store and selection
+    $scope.entries = [];
+
+    // Function to reset the new entry.
+    $scope.addEntry = function() {
+      if(!$scope.inserted) {
+        $scope.inserted = new Entries();
+        $scope.inserted.account_id = $routeParams.accountId;
+        $scope.entries.splice(0, 0, $scope.inserted);
+      }
+    };
+
     // Function to load entries from server for a specific account and month.
-    $scope.loadEntries = function() {
+    $scope.loadEntries = function(begin, end) {
         // Clean up selected entry.
         $scope.selectedItem = null;
         $scope.savedItem = null;
 
         $scope.entries = Entries.query({
-            account: $scope.account.id,
+            account: $routeParams.accountId,
-            begin: $scope.begin.format('YYYY-MM-DD'),
+            begin: begin.format('YYYY-MM-DD'),
-            end: $scope.end.format('YYYY-MM-DD')
+            end: end.format('YYYY-MM-DD')
         }, function(data) {
             $scope.$emit("entriesLoadedEvent", {entries: data});
         });
@@ -369,7 +371,7 @@ accountantApp
     };
 
     /*
-     * Save an entry and emit entrySavedEvent, or entryCreatedEvent.
+     * Save an entry and emit entrySavedEvent.
      */
     $scope.saveEntry = function($data, $index) {
       // Check if $data is already a resource.
@@ -390,60 +392,20 @@ accountantApp
         promise = promise.then(function(data) {
           $scope.inserted = false;
 
-          notificationService.success("Entry #" + data.id + " created.");
+          return data;
         });
-      } else {
+      }
-        promise = promise.then(function(data) {
+
+      return promise.then(function(data) {
         notificationService.success("Entry #" + data.id + " saved.");
-        });
+        $scope.$emit("entrySavedEvent", data);
-      }
 
-      promise = promise.then(function(data) {
+        return data;
-        $scope.getAccountStatus($routeParams.accountId);
-      });
-
-      return promise;
-    };
-
-    $scope.removeEntry = function(entry) {
-        $scope.removingEntry = entry;
-        $("#remove_entry").modal({
-            keyboard: false,
       });
     };
 
-    $scope.hideRemoveEntryPopup = function() {
+    // Reload entries on range selection.
-        $scope.removingEntry = null;
+    $rootScope.$on("rangeSelectedEvent", function(e, args) {
-        $("#remove_entry").modal("hide");
+      $scope.loadEntries(args.begin, args.end);
-    };
-
-    // Removes an entry.
-    $scope.confirmRemoveEntry = function() {
-      // Cancel current editing.
-      if ($scope.removingEntry) {
-        $scope.removingEntry.$delete(function (result) {
-          // Send the "entry removed" event.
-          $scope.$emit("entryRemovedEvent", $scope.removingEntry);
-
-          $scope.hideRemoveEntryPopup();
     });
-      }
-    };
-
-    $rootScope.$on("entryRemovedEvent", function(e, entry) {
-        new PNotify({
-            type: "success",
-            title: "Delete",
-            text: "Entry #" + entry.id + " deleted."
-        });
-    });
-
-    $scope.closeModal = function(modalScope) {
-      // Close the modal dialog
-      if(modalScope && modalScope.dismiss) {
-        modalScope.dismiss();
-      }
-    };
-
-    $scope.getAccountStatus($routeParams.accountId);
 }]);

accountant/frontend/static/templates/entries.html

@@ -19,10 +19,14 @@
   <!-- Chart row -->
   <div class="row">
     <!-- Sold evolution chart placeholder -->
-    <highchart id="sold-chart" config="soldChartConfig" class="col-md-8"></highchart>
+    <div class="col-md-8" ng-controller="SoldChartController">
+      <highchart id="sold-chart" config="config"></highchart>
+    </div>
 
     <!-- Category piechart -->
-    <highchart id="categories-chart" config="categoriesChartConfig" class="col-md-4"></highchart>
+    <div class="col-md-4" ng-controller="CategoryChartController">
+      <highchart id="categories-chart" config="config"></highchart>
+    </div>
   </div>
 
   <div class="row">