From 27250b6fe13a42cd87a39748c28b134230303a93 Mon Sep 17 00:00:00 2001
From: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
Date: Thu, 23 Nov 2017 16:00:03 +0100
Subject: [PATCH] cut in 2 components

Signed-off-by: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
---
 public/app/ts/components/bucket.ts | 98 ++++++++++++++++++++++++++++++
 public/app/tsfmt.json              | 23 +++++++
 2 files changed, 121 insertions(+)
 create mode 100644 public/app/ts/components/bucket.ts
 create mode 100644 public/app/tsfmt.json

diff --git a/public/app/ts/components/bucket.ts b/public/app/ts/components/bucket.ts
new file mode 100644
index 00000000..d6a3962a
--- /dev/null
+++ b/public/app/ts/components/bucket.ts
@@ -0,0 +1,98 @@
+app.component('bucket',
+  {
+    bindings: {
+      categories: '<',
+      period: '<'
+    },
+    controller: ['$filter', 'API',
+      function($filter, API) {
+        let ctrl = this;
+        ctrl.depth = 99;
+
+        ctrl.graph_options = {
+          chart: {
+            type: 'multiBarHorizontalChart',
+            height: 600,
+            margin: {
+              top: 20,
+              right: 20,
+              bottom: 20,
+              left: 200
+            },
+            x: (d) => { return d.account; },
+            y: (d) => { return d.amount; },
+            valueFormat: (d) => { return `${d} €`; },
+            showYAxis: false,
+            showValues: true,
+            showLegend: true,
+            showControls: false,
+            showTooltipPercent: true,
+            duration: 500,
+            labelThreshold: 0.01,
+            labelSunbeamLayout: true,
+            labelsOutside: true
+          }
+        };
+
+        ctrl.$onChanges = (changes) => {
+          if (changes.period && changes.period.currentValue != undefined) {
+            API.balance({
+              period: ctrl.period,
+              categories: ctrl.categories,
+              depth: ctrl.depth
+            })
+              .then((response) => {
+                ctrl.raw_data = _(response.data)
+                  .sortBy((account) => { return account.amount; })
+                  .reverse();
+                ctrl.raw_total = _(response.data).reduce((memo, account) => { return memo + account.amount; }, 0);
+
+                ctrl.total_detailed = _.chain(ctrl.raw_data)
+                  .groupBy((account) => {
+                    return account.account.split(':')[0];
+                  })
+                  .each((category) => {
+                    category.total = _(category).reduce((memo, account) => {
+                      return memo + account.amount;
+                    }, 0);
+                  })
+                  .value();
+                ctrl.total_detailed = _.chain(ctrl.total_detailed)
+                  .keys()
+                  .map((key) => {
+                    return {
+                      account: key,
+                      amount: ctrl.total_detailed[key].total
+                    };
+                  })
+                  .value();
+
+                ctrl.graph_options.chart.height = 60 + (25 * ctrl.raw_data.length);
+
+                ctrl.data = ctrl.categories.split(' ').map((category) => {
+                  return {
+                    key: category,
+                    values: _(ctrl.raw_data).select((line) => { return line.account.match(`^${category}:.*`); })
+                  }
+                })
+              });
+          }
+        };
+      }
+    ],
+
+  template: `
+  <div class="bucket">
+    <div class="tollbar">
+      <span ng:repeat="account in $ctrl.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>
+    </div>
+    <div class="content">
+      <div class="graph">
+        <nvd3 data="$ctrl.data"
+              options="$ctrl.graph_options">
+        </nvd3>
+      </div>
+    </div>
+  </div>
+`
+  });
diff --git a/public/app/tsfmt.json b/public/app/tsfmt.json
new file mode 100644
index 00000000..bf8847c4
--- /dev/null
+++ b/public/app/tsfmt.json
@@ -0,0 +1,23 @@
+{
+    "baseIndentSize": 0,
+    "indentSize": 2,
+    "tabSize": 2,
+    "indentStyle": 2,
+    "newLineCharacter": "\n",
+    "convertTabsToSpaces": true,
+    "insertSpaceAfterCommaDelimiter": true,
+    "insertSpaceAfterSemicolonInForStatements": true,
+    "insertSpaceBeforeAndAfterBinaryOperators": true,
+    "insertSpaceAfterConstructor": false,
+    "insertSpaceAfterKeywordsInControlFlowStatements": true,
+    "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
+    "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
+    "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
+    "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
+    "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
+    "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
+    "insertSpaceAfterTypeAssertion": true,
+    "insertSpaceBeforeFunctionParenthesis": false,
+    "placeOpenBraceOnNewLineForFunctions": false,
+    "placeOpenBraceOnNewLineForControlBlocks": false,
+}