add granularity control

credger.cr

@@ -46,6 +46,7 @@ get "/api/ledger/graph_values" do |env|
   env.response.content_type = "application/json"
 
   ledger.graph_values( env.params.query["period"],
+                       "--#{env.params.query["granularity"]}",
                        env.params.query["categories"].split(" ") ).to_json
 end
 

ledger.cr

@@ -59,13 +59,14 @@ class Ledger
   end
 
   def graph_values( period : String = "",
+                    granularity : String = "",
                     categories : Array(String) = ["Expenses"] ) : Hash( String, Array( NamedTuple( date: String, amount: String, currency: String ) ) )
     period = period == "" ? "" : "-p '#{period}'"
 
     result = {} of String => Array(NamedTuple(date: String, amount: String, currency: String))
     categories.map do |category|
       result[category] = CSV
-                         .parse( run( "-MAn --exchange '#{CURRENCY}' #{period}", "csv --no-revalued", category ) )
+                         .parse( run( "-MAn --exchange '#{CURRENCY}' #{period} #{granularity}", "csv --no-revalued", category ) )
                          .map do |row|
         { date: row[ 0 ],
           amount: row[ 5 ],

public/ts/components/dashboard.ts

@@ -3,6 +3,9 @@ app.component('dashboard',
     controller: ['$filter', 'API',
       function($filter, API) {
         let ctrl = this;
+        ctrl.granularity = "monthly";
+
+        let is_monthly = () => { return ctrl.granularity == "monthly"; };
 
         ctrl.compute_selected_accounts = () => {
           ctrl.graphed_accounts = _.chain(ctrl.main_accounts_depths)
@@ -25,7 +28,7 @@ app.component('dashboard',
         };
 
         ctrl.retrieve_graph_values = (categories) => {
-          API.graph_values("", categories.join(" "))
+          API.graph_values("", ctrl.granularity, categories.join(" "))
             .then((response) => {
               ctrl.periods = [];
 
@@ -75,12 +78,12 @@ app.component('dashboard',
                       tooltip: {
                         contentGenerator: function(e) {
                           let format_line = (serie) => {
-  return `
+                            return `
-  <tr>
+<tr>
-    <td style="background-color: ${serie.color}"> </td>
+<td style="background-color: ${serie.color}"> </td>
-    <td>${serie.key}</td>
+<td>${serie.key}</td>
-    <td style="text-align: right; font-weight: bold;">${serie.value}</td>
+<td style="text-align: right; font-weight: bold;">${serie.value}</td>
-  </tr>
+</tr>
 `;
                           };
 
@@ -90,19 +93,19 @@ app.component('dashboard',
                             return series.filter((s) => { return s.value != 0; });
                           };
 
-return `
+                          return `
 <h2>${e.value}</h2>
 <table>
-  <tbody>
+<tbody>
-    ${prepare_series(e.series).map((s) => { return format_line(s); }).join("")}
+${prepare_series(e.series).map((s) => { return format_line(s); }).join("")}
-  </tbody>
+</tbody>
-  <tfoot>
+<tfoot>
-    <tr>
+<tr>
-      <td> </td>
+<td> </td>
-      <td style="text-align: right; text-decoration: underline; font-weight: bold;">Total</td>
+<td style="text-align: right; text-decoration: underline; font-weight: bold;">Total</td>
-      <td style="text-align: right; font-weight: bold;">${e.series.reduce((memo, serie) => { return memo + serie.value; }, 0)}</td>
+<td style="text-align: right; font-weight: bold;">${e.series.reduce((memo, serie) => { return memo + serie.value; }, 0)}</td>
-    </tr>
+</tr>
-  </tfoot>
+</tfoot>
 </table>
 `;
                         }
@@ -119,7 +122,7 @@ return `
                       values: _.chain(response.data[key])
                         .map((value) => {
                           let date = new Date(value.date);
-                          let period = date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1);
+                          let period = is_monthly() ? date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1) : date.getFullYear();
                           ctrl.periods.push(period);
 
                           return {
@@ -164,10 +167,12 @@ return `
       }
     ],
 
-    template: `
+  template: `
   <div class="dashboard">
     <div class="global-graph" style="height: 450px;">
       <div class="accounts" style="width: 20%; height: 100%; float: left;">
+        <label><input type="radio" ng:model="$ctrl.granularity" value="monthly" name="monthly" ng:change="$ctrl.compute_selected_accounts()" />monthly</label>
+        <label><input type="radio" ng:model="$ctrl.granularity" value="yearly" name="yearly" ng:change="$ctrl.compute_selected_accounts()" />yearly</label>
         <ul>
           <li ng:repeat="account in $ctrl.main_accounts_depths">
             <label>{{account.name}} depth</label>
@@ -184,7 +189,7 @@ return `
     </div>
 
     <h1 style="text-align: center;">
-      <select ng:options="p as p | amDateFormat:'MMMM YYYY' for p  in $ctrl.periods" ng:model="$ctrl.period"></select>
+      <select ng:options="p as p for p in $ctrl.periods" ng:model="$ctrl.period"></select>
     </h1>
 
     <bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>

public/ts/services/API.ts

@@ -22,10 +22,11 @@ app.service('API',
         });
       };
 
-      API.graph_values = function(period, categories) {
+      API.graph_values = function(period, granularity, categories) {
         return $http.get('/api/ledger/graph_values', {
           params: {
             period: period,
+            granularity: granularity,
             categories: categories
           }
         });