From 107ed1c093342ed30c8268dacc4d8c2b8137037c Mon Sep 17 00:00:00 2001
From: Gwenhael Le Moine <gwenhael.le.moine@gmail.com>
Date: Fri, 24 Nov 2017 16:49:24 +0100
Subject: [PATCH] simplify

---
 public/ts/components/bucket.ts    |  49 ++++++------
 public/ts/components/dashboard.ts | 124 ++++++++++++++----------------
 2 files changed, 83 insertions(+), 90 deletions(-)

diff --git a/public/ts/components/bucket.ts b/public/ts/components/bucket.ts
index e582b9c..2edf501 100644
--- a/public/ts/components/bucket.ts
+++ b/public/ts/components/bucket.ts
@@ -38,26 +38,27 @@ app.component('bucket',
                     .then(function success(response) {
                       let format_transaction = (transaction) => {
                         return `
-<tr>
-<td>${transaction.date}</td>
-<td>${transaction.payee}</td>
-<td style="text-align: right;">${transaction.amount} ${transaction.currency}</td>
-</tr>`;
+  <tr>
+    <td>${transaction.date}</td>
+    <td>${transaction.payee}</td>
+    <td style="text-align: right;">${transaction.amount} ${transaction.currency}</td>
+  </tr>`;
                       };
 
                       swal({
                         title: response.data.key,
-                        html: `<table style="width: 100%;">
-<thead>
-<tr>
-<td>Date</td><td>Payee</td><td>Amount</td>
-</tr>
-</thead>
-<tbody>
-${response.data.values.map(function(transaction) { return format_transaction(transaction); }).join("")}
-</tbody>
-<tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot>
-</table>`});
+                        html: `
+  <table style="width: 100%;">
+    <thead>
+      <tr>
+        <td>Date</td><td>Payee</td><td>Amount</td>
+      </tr>
+    </thead>
+    <tbody>
+      ${response.data.values.map(function(transaction) { return format_transaction(transaction); }).join("")}
+    </tbody>
+    <tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot>
+  </table>`});
                     }, function error(response) { alert("error!"); });
                 }
               }
@@ -87,15 +88,15 @@ ${response.data.values.map(function(transaction) { return format_transaction(tra
       }
     ],
 
-    template: `
-<div class="bucket">
-  <div class="content">
-    <div class="graph">
-      <nvd3 data="$ctrl.data"
-options="$ctrl.graph_options">
-</nvd3>
+  template: `
+  <div class="bucket">
+    <div class="content">
+      <div class="graph">
+        <nvd3 data="$ctrl.data"
+              options="$ctrl.graph_options">
+        </nvd3>
+      </div>
     </div>
   </div>
-</div>
 `
   });
diff --git a/public/ts/components/dashboard.ts b/public/ts/components/dashboard.ts
index 1fff779..82c137d 100644
--- a/public/ts/components/dashboard.ts
+++ b/public/ts/components/dashboard.ts
@@ -10,9 +10,8 @@ app.component('dashboard',
             .then((response) => {
               ctrl.periods = [];
 
-              let largest_cat = _(response.data).reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, []);
-
-              _.chain(largest_cat)
+              _.chain(response.data)
+                .reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, [])
                 .pluck('date')
                 .each((date) => {
                   _(response.data).each((cat) => {
@@ -33,71 +32,64 @@ app.component('dashboard',
                 });
               });
 
-              ctrl.graphiques = {
-                monthly_values: {
-                  options: {
-                    chart: {
-                      type: 'multiBarChart',
-                      height: 300,
-                      showControls: false,
-                      showLegend: true,
-                      showLabels: true,
-                      showValues: true,
-                      showYAxis: false,
+              ctrl.graphique = {
+                options: {
+                  chart: {
+                    type: 'multiBarChart',
+                    height: 300,
+                    showControls: false,
+                    showLegend: true,
+                    showLabels: true,
+                    showValues: true,
+                    showYAxis: false,
 
-                      x: (d) => { return d.x; },
-                      y: (d) => { return d.y; },
-                      valueFormat: (d) => { return `${d} €`; },
+                    x: (d) => { return d.x; },
+                    y: (d) => { return d.y; },
+                    valueFormat: (d) => { return `${d} €`; },
 
-                      xAxis: {
-                        tickFormat: (d) => {
-                          return `${d}${d == ctrl.period ? '*' : ''}`;
-                        }
-                      },
-                      stacked: false,
-                      duration: 500,
-                      reduceXTicks: false,
-                      rotateLabels: -67,
-                      labelSunbeamLayout: true,
-                      useInteractiveGuideline: true,
-                      multibar: {
-                        dispatch: {
-                          elementClick: (event) => {
-                            console.log('change period')
-                            console.log(ctrl.period)
-
-                            ctrl.period = event.data.x;
-
-                            console.log(ctrl.period)
-                          }
+                    xAxis: {
+                      tickFormat: (d) => {
+                        return `${d}${d == ctrl.period ? '*' : ''}`;
+                      }
+                    },
+                    stacked: false,
+                    duration: 500,
+                    reduceXTicks: false,
+                    rotateLabels: -67,
+                    labelSunbeamLayout: true,
+                    useInteractiveGuideline: true,
+                    multibar: {
+                      dispatch: {
+                        elementClick: function(event) {
+                          ctrl.period = event.data.x; // FIXME: doesn't trigger data-binding
                         }
                       }
                     }
-                  },
-                  data: _.chain(response.data)
-                    .keys()
-                    .reverse()
-                    .map((key) => {
-                      let multiplicator = (key == "Income") ? -1 : 1;
-                      return {
-                        key: key,
-                        values: _.chain(response.data[key]).map((value) => {
-                          let date = new Date(value.date);
-                          let period = date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1);
-                          ctrl.periods.push(period);
+                  }
+                },
+                data: _.chain(response.data)
+                  .keys()
+                  .reverse()
+                  .map((key) => {
+                    let multiplicator = (key == "Income") ? -1 : 1;
+                    return {
+                      key: key,
+                      values: _.chain(response.data[key]).map((value) => {
+                        let date = new Date(value.date);
+                        let period = date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1);
+                        ctrl.periods.push(period);
 
-                          return {
-                            key: key,
-                            x: period,
-                            y: parseInt(value.amount) * multiplicator
-                          };
-                        })
-                          .sortBy((item) => { return item.x; })
-                          .value()
-                      };
-                    })
-                    .value()
-                }
+                        return {
+                          key: key,
+                          x: period,
+                          y: parseInt(value.amount) * multiplicator
+                        };
+                      })
+                        .sortBy((item) => { return item.x; })
+                        .value()
+                    };
+                  })
+                  .value()
               };
 
               ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
@@ -124,9 +116,9 @@ app.component('dashboard',
         </select>
       </div>
       <div class="graph" style="width: 80%; float: left;">
-        <nvd3 data="$ctrl.graphiques.monthly_values.data"
-              options="$ctrl.graphiques.monthly_values.options">
-        </nvd3>
+        <nvd3 data="$ctrl.graphique.data"
+              options="$ctrl.graphique.options">
+        </nvd3>{{$ctrl.period}}
       </div>
     </div>
 
@@ -134,7 +126,7 @@ app.component('dashboard',
       <select ng:options="p as p | amDateFormat:'MMMM YYYY' for p  in $ctrl.periods" ng:model="$ctrl.period"></select>
     </h1>
 
-<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
+    <bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
   </div>
 `
   });