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

<div layout="vertical" layout-padding>

  <div class="date">
    <material-toolbar class="material-theme-light">
      <h2>
	From {{from_date | date:'longDate'}} <span data-ng-if="to_date">to {{to_date | date:'longDate'}}</span>
      </h2>
      <div layout="horizontal" layout-align="center center" layout-padding>
	<material-button class="material-theme-green"
			 data-ng-click="before()"
			 data-ng-class="{'disabled': period_offset == 0}">prev</span></material-button>
	<material-button class="material-theme-light-blue"
			 data-ng-click="reset_offset()"
			 data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">Now</material-button>
	<material-button class="material-theme-green"
			 data-ng-click="after()"
			 data-ng-class="{'disabled': period_offset == dates_salaries.length}">next</material-button>
      </div>
    </material-toolbar>
    <material-toolbar>
      <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].raw_total - balance.buckets[0].raw_total ) | number:2}} €
      </h2>
    </material-toolbar>
  </div>

  <div layout="vertical" layout-md="horizontal" layout-padding>
    <div flex data-ng-repeat="bucket in balance.buckets">
      <material-toolbar class="material-theme-light">
	<h3>{{bucket.categories}}, total = {{bucket.total | number:2}} €</h3>
	<material-slider discrete
			 min="0" max="10" step="1"
			 data-ng-model="bucket.score_threshold"
			 data-ng-change="select.score_higher_than( bucket, bucket.score_threshold ); filter_data()">
	</material-slider>
	<select multiple
		data-ng-model="bucket.accounts_selected"
		data-ng-options="account.account for account in bucket.raw_data | orderBy:'account'"
		data-ng-change="filter_data()">
	  <option value=''>...</option>
	</select>
      </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 class="table">
	  <thead>
	    <tr>
	      <th><material-buton data-ng-click="bucket.order_by( 'account' )">account</material-buton></th>
	      <th><material-buton data-ng-click="bucket.order_by( 'amount' )">amount</material-buton></th>
	      <th><material-buton data-ng-click="bucket.order_by( 'score' )">score</material-buton></th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr data-ng-repeat="account in bucket.data | orderBy:bucket.orderBy:bucket.orderDesc"
		data-ng-class="{'even': $even, 'odd': $odd}"
		style="border-left:10px solid {{coloring_score( account.score )}};border-right:10px solid {{coloring_score( account.score )}}">
	      <td style="border-bottom:1px solid {{coloring_score( account.score )}}">
		{{account.account}}
	      </td>
	      <td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
		{{account.amount | number:2}} €
	      </td>
	      <td style="text-align:right;border-bottom:1px solid {{coloring_score( account.score )}}">
		{{account.score}}
	      </td>
	    </tr>
	  </tbody>
	</table>
      </material-content>
    </div>

  </div>
</div>