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

<div class="row-fluid">

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

      <div class="pull-right">
	<button class="btn btn-default" data-ng-click="reset_offset()">Aujourd'hui</button>
	<div class="btn-group">
	  <button class="btn btn-default"
		  data-ng-click="before()"
		  data-ng-class="{'disabled': period_offset == 0}"><span class="glyphicon glyphicon-chevron-left"></span></button>
	  <button class="btn btn-default"
		  data-ng-click="after()"
		  data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}"><span class="glyphicon glyphicon-chevron-right"></span></button>
	</div>
      </div>
    </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>