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

<div class="row-fluid">

  <div class="col-md-12 date">
    <h2>
      <button type="button" class="btn btn-primary"
	      data-ng-click="previous_period()">
	<span class="glyphicon glyphicon-chevron-left"></span>
      </button>
      <span>{{now | amDateFormat:'MMMM YYYY'}}</span>
      <button type="button" class="btn btn-primary"
	      data-ng-click="next_period()">
	<span class="glyphicon glyphicon-chevron-right"></span>
      </button>
    </h2>
    <h2 class="balance" data-ng-class="{'negative': balance.income_total - balance.expenses_total < 0, 'positive': balance.income_total - balance.expenses_total > 0}">
      Balance: {{( balance.income_total - balance.expenses_total ) | number:2}} €
    </h2>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
	<h3 class="panel-title">Expenses, total = {{balance.expenses_total | number:2}} €</h3>
      </div>
      <div class="panel-body">
	<nvd3-pie-chart
	   data="balance.expenses"
	   x="xFunction()"
	   y="yFunction()"
	   id="ExpensesPie"
	   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>
      </div>
      <div class="panel-footer">
	<table data-ng-table="tableParams" class="table">
	  <tr data-ng-repeat="account in balance.expenses"
	      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>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
	<h3 class="panel-title">Income, total = {{balance.income_total | number:2}} €</h3>
      </div>
      <div class="panel-body">
	<nvd3-pie-chart
	   data="balance.income"
	   x="xFunction()"
	   y="yFunction()"
	   id="incomePie"
	   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>
      </div>
      <div class="panel-footer">
	<table data-ng-table="tableParams" class="table">
	  <tr data-ng-repeat="account in balance.income"
	      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>
      </div>
    </div>
  </div>

</div>