credger/public/ts/components/bucket.ts

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,
            multibar: {
              dispatch: {
                elementClick: (event) => {
                  API.register(ctrl.period, event.data.account)
                    .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>`;
                      };

                      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>`});
                    }, function error(response) { alert("error!"); });
                }
              }
            }
          }
        };

        ctrl.$onChanges = (changes) => {
          if (changes.period && changes.period.currentValue != undefined) {
            API.balance(ctrl.period, ctrl.categories, 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>
`
  });