From 803b2baeab76dfc6b83f67c9c18724d9abf93736 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Wed, 19 Aug 2015 12:09:03 +0200 Subject: [PATCH] Separate charts in different controllers. --- accountant/frontend/static/js/entries.js | 636 ++++++++---------- .../frontend/static/templates/entries.html | 8 +- 2 files changed, 305 insertions(+), 339 deletions(-) diff --git a/accountant/frontend/static/js/entries.js b/accountant/frontend/static/js/entries.js index 1aae133..fe7aab6 100644 --- a/accountant/frontend/static/js/entries.js +++ b/accountant/frontend/static/js/entries.js @@ -24,21 +24,298 @@ accountantApp ); }]) +.controller( + "CategoryChartController", [ + "$rootScope", "$scope", "$http", "$routeParams", + function($rootScope, $scope, $http, $routeParams) { + + var colors = Highcharts.getOptions().colors; + $scope.revenueColor = colors[2]; + $scope.expenseColor = colors[3]; + + // Configure pie chart for categories. + $scope.config = { + options: { + chart: { + type: 'pie', + animation: { + duration: 500 + } + }, + plotOptions: { + pie: { + startAngle: -90 + }, + series: { + allowPointSelect: 0 + } + }, + tooltip: { + valueDecimals: 2, + valueSuffix: '€' + } + }, + yAxis: { + title: { + text: "Categories" + } + }, + title: { + text: "Répartition dépenses/recettes" + }, + series: [{ + name: "Value", + data: [], + innerSize: '33%', + size: '60%', + dataLabels: { + formatter: function() { + return this.point.name; + }, + distance: -40 + } + }, { + name: "Value", + data: [], + innerSize: '66%', + size: '60%', + dataLabels: { + formatter: function() { + return this.point.name !== null && this.percentage >= 2.5 ? this.point.name : null; + }, + } + }] + }; + + $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.config = { + options: { + chart: { + zoomType: 'x' + }, + rangeSelector: { + buttons: [{ + type: 'month', + count: 1, + text: "1m" + }, { + type: "month", + count: 3, + text: "3m" + }, { + type: "month", + count: 6, + text: "6m" + }, { + type: "year", + count: 1, + text: "1y" + }, { + type: "all", + text: "All" + }], + selected: 0, + }, + navigator: { + enabled: true + }, + tooltip: { + crosshairs: true, + shared: true, + valueDecimals: 2, + valueSuffix: '€' + }, + scrollbar: { + liveRedraw: false + } + }, + series: [{ + type: "ohlc", + name: "Sold", + data: [], + dataGrouping : { + units : [[ + 'week', // unit name + [1] // allowed multiples + ], [ + 'month', + [1, 2, 3, 4, 6] + ]] + } + }], + title: { + text: "Sold evolution" + }, + xAxis: { + type: "datetime", + dateTimeLabelFormats: { + month: "%e. %b", + year: "%Y" + }, + minRange: 3600 * 1000 * 24 * 14, // 2 weeks + events: { + afterSetExtremes: $scope.setExtremes + }, + currentMin: moment.utc().startOf('month'), + currentMax: moment.utc().endOf('month') + }, + yAxis: { + plotLines: [{ + color: "orange", + width: 2, + value: 0.0 + }, { + color: "red", + width: 2, + value: 0.0 + }] + }, + useHighStocks: true + }; + + $scope.selectRange = function(begin, end) { + $scope.$emit("rangeSelectedEvent", {begin: begin, end: end}); + }; + + $scope.loadSolds = function() { + $scope.config.loading = true; + + $http.get("/api/solds", { + params: { + account: $routeParams.accountId, + } + }).success(function(data) { + $scope.config.series[0].data = []; + + angular.forEach(data, function(entry) { + $scope.config.series[0].data.push([ + moment.utc(entry.operation_date).valueOf(), + entry.open, entry.high, entry.low, entry.close + ]); + }); + + $scope.$emit("rangeSelectedEvent", { + begin: $scope.config.xAxis.currentMin, + end: $scope.config.xAxis.currentMax + }); + + $scope.config.loading = false; + }); + }; + + // Reload solds when an entry is saved. + $rootScope.$on("entrySavedEvent", function(e, entry) { + $scope.loadSolds(); + }); + + // Update authorized overdraft on account loading. + $rootScope.$on("accountLoadedEvent", function(e, account) { + $scope.config.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) { - // Range for entries. - $scope.begin = moment.utc().startOf('month'); - $scope.end = moment.utc().endOf('month'); - // Entry store and selection $scope.entries = []; - $scope.categories = []; - - $scope.account = null; - // Function to reset the new entry. $scope.addEntry = function() { if(!$scope.inserted) { @@ -48,291 +325,16 @@ accountantApp } }; - $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 = { - options: { - chart: { - type: 'pie', - animation: { - duration: 500 - } - }, - plotOptions: { - pie: { - startAngle: -90 - }, - series: { - allowPointSelect: 0 - } - }, - tooltip: { - valueDecimals: 2, - valueSuffix: '€' - } - }, - yAxis: { - title: { - text: "Categories" - } - }, - title: { - text: "Répartition dépenses/recettes" - }, - series: [{ - name: "Value", - data: [], - innerSize: '33%', - size: '60%', - dataLabels: { - formatter: function() { - return this.point.name; - }, - distance: -40 - } - }, { - name: "Value", - data: [], - innerSize: '66%', - size: '60%', - dataLabels: { - formatter: function() { - return this.point.name !== null && this.percentage >= 2.5 ? this.point.name : null; - }, - } - }] - }; - - // Configure chart for entries. - $scope.soldChartConfig = { - options: { - chart: { - zoomType: 'x' - }, - rangeSelector: { - buttons: [{ - type: 'month', - count: 1, - text: "1m" - }, { - type: "month", - count: 3, - text: "3m" - }, { - type: "month", - count: 6, - text: "6m" - }, { - type: "year", - count: 1, - text: "1y" - }, { - type: "all", - text: "All" - }], - selected: 0, - }, - navigator: { - enabled: true - }, - tooltip: { - crosshairs: true, - shared: true, - valueDecimals: 2, - valueSuffix: '€' - }, - scrollbar: { - liveRedraw: false - } - }, - series: [{ - type: "ohlc", - name: "Sold", - data: [], - dataGrouping : { - units : [[ - 'week', // unit name - [1] // allowed multiples - ], [ - 'month', - [1, 2, 3, 4, 6] - ]] - } - }], - title: { - text: "Sold evolution" - }, - xAxis: { - type: "datetime", - dateTimeLabelFormats: { - month: "%e. %b", - year: "%Y" - }, - minRange: 3600 * 1000 * 24 * 14, // 2 weeks - events: { - afterSetExtremes: $scope.setExtremes - }, - currentMin: $scope.begin, - currentMax: $scope.end - }, - yAxis: { - plotLines: [{ - color: "orange", - width: 2, - value: 0.0 - }, { - color: "red", - width: 2, - value: 0.0 - }] - }, - useHighStocks: true - }; - - // Load categories, mainly to populate the pie chart. - $scope.loadCategories = function() { - $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; - - $http.get("/api/solds", { - params: { - account: $scope.account.id, - } - }).success(function(data) { - var config = $scope.soldChartConfig; - - config.series[0].data = []; - - angular.forEach(data, function(entry) { - config.series[0].data.push([ - moment.utc(entry.operation_date).valueOf(), - entry.open, entry.high, entry.low, entry.close - ]); - }); - - $scope.soldChartConfig.loading = false; - - $scope.loadEntries(); - }); - }; - - /* - * Hook on account selected event to display account status. - */ - $rootScope.$on("accountSelectedEvent", function(event, args) { - $scope.getAccountStatus($routeParams.accountId); - }); - - $rootScope.$on("rangeSelectedEvent", function(event, args) { - $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; - - 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; - }); - // 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, - begin: $scope.begin.format('YYYY-MM-DD'), - end: $scope.end.format('YYYY-MM-DD') + account: $routeParams.accountId, + begin: begin.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."); - }); - } else { - promise = promise.then(function(data) { - notificationService.success("Entry #" + data.id + " saved."); + return data; }); } - promise = promise.then(function(data) { - $scope.getAccountStatus($routeParams.accountId); + return promise.then(function(data) { + notificationService.success("Entry #" + data.id + " saved."); + $scope.$emit("entrySavedEvent", data); + + return data; }); - - return promise; }; - $scope.removeEntry = function(entry) { - $scope.removingEntry = entry; - $("#remove_entry").modal({ - keyboard: false, - }); - }; - - $scope.hideRemoveEntryPopup = function() { - $scope.removingEntry = null; - $("#remove_entry").modal("hide"); - }; - - // 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." - }); + // Reload entries on range selection. + $rootScope.$on("rangeSelectedEvent", function(e, args) { + $scope.loadEntries(args.begin, args.end); }); - - $scope.closeModal = function(modalScope) { - // Close the modal dialog - if(modalScope && modalScope.dismiss) { - modalScope.dismiss(); - } - }; - - $scope.getAccountStatus($routeParams.accountId); }]); diff --git a/accountant/frontend/static/templates/entries.html b/accountant/frontend/static/templates/entries.html index ad5f12a..21baec0 100644 --- a/accountant/frontend/static/templates/entries.html +++ b/accountant/frontend/static/templates/entries.html @@ -19,10 +19,14 @@
- +
+ +
- +
+ +