ledgerrb/public/app/js/templates/balance.tpl.html

<div layout="vertical" layout-padding>

  <div class="date">
    <h2>
      From {{from_date | date:'longDate'}} <span data-ng-if="to_date">to {{to_date | date:'longDate'}}</span>
    </h2>

    <div layout="horizontal" layout-align="end" layout-padding>
      <material-button data-ng-click="reset_offset()"
		       data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">Now</material-button>
      <material-button data-ng-click="before()"
		       data-ng-class="{'disabled': period_offset == 0}">prev</span></material-button>
      <material-button data-ng-click="after()"
		       data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">next</material-button>
    </div>
    <h2 class="balance" data-ng-class="{'negative': balance.buckets[1].total - balance.buckets[0].total < 0, 'positive': balance.buckets[1].total - balance.buckets[0].total > 0}">
      Balance: {{( balance.buckets[1].total - balance.buckets[0].total ) | number:2}} €
    </h2>
  </div>

  <div layout="horizontal" layout-padding>
    <div flex data-ng-repeat="bucket in balance.buckets">
      <material-toolbar class="material-theme-light">
	<h3>{{bucket.name}}, total = {{bucket.total | number:2}} €</h3>
      </material-toolbar>
      <material-content>
	<nvd3-pie-chart data="bucket.data"
			x="xFunction()"
			y="yFunction()"
			height="300"
			margin="{left:0,top:0,bottom:0,right:0}"
			color="color()"
			tooltips="true"
			tooltipcontent="toolTipContentFunction()"
			showLabels="true"
			labelType="value">
	  <svg></svg>
	</nvd3-pie-chart>
      </material-content>
      <material-content>
	<table data-ng-table="tableParams" class="table">
	  <tr data-ng-repeat="account in bucket.data"
	      data-ng-class="{'even': $even, 'odd': $odd}"
	      style="border-left:10px solid {{coloring_score( score_account( account.account ) )}};border-right:10px solid {{coloring_score( score_account( account.account ) )}}">
	    <td data-title="'Account'"
		style="border-bottom:1px solid {{coloring_score( score_account( account.account ) )}}">
	      {{account.account}}
	    </td>
	    <td data-title="'Amount'"
		style="text-align:right;border-bottom:1px solid {{coloring_score( score_account( account.account ) )}}">
	      {{account.amount | number:2}} €
	    </td>
	  </tr>
	</table>
      </material-content>
    </div>

  </div>
</div>