Show percentages on pie chart

Make graphs take up more room
Fix collapsed settings not having currency format
Closes #3

analyser.js

@@ -292,9 +292,13 @@ function shouldMerge(a, b) {
  */
 function drawCategoryPieChart(included, incoming) {
  var pieData = getCategoryTotals(included, incoming);
+ var total = 0;
+
+ $.each(pieData, function(_, amount) { total += amount; });
+
  var seriesData = [];
  $.each(pieData, function(category, amount) {
-  seriesData.push({ label: category + ' (' + Math.round(amount) + ')', data: amount });
+  seriesData.push({ label: category + ' (£' + amount.toCurrency() + ', ' + Math.floor(100 * amount / total) + '%)', data: amount });
  });
 
  seriesData.sort(function(a, b) { return b.data - a.data; });
@@ -361,7 +365,7 @@ function showSelectedMonths(start, end, incoming, outgoing, categoryFilter, expa
    lastEntry.Amount = Math.round(100 * (lastEntry.Amount + this.Amount)) / 100;
    $('#collapseHandle' + lastEntry.id).data('total', lastEntry.Amount);
 
-   !expanded[lastEntry.id] && tr.hide() && $('.amount', lastEntry.tr).text(lastEntry.Amount);
+   !expanded[lastEntry.id] && tr.hide() && $('.amount', lastEntry.tr).text(lastEntry.Amount.toCurrency());
 
    tr.addClass('collapsed hidden' + lastEntry.id);
   } else {
@@ -508,7 +512,7 @@ $(function() {
  });
 
  $('#expense').bind('plotclick', function(event, pos, item) {
-  setState({ categoryFilter: item.series.label.replace(/ \([0-9]+\)$/, '') }, ['expanded']);
+  setState({ categoryFilter: item.series.label.replace(/ \(.*$/, '') }, ['expanded']);
  });
 
  $.history.init(handleStateChange);

index.html

@@ -38,14 +38,14 @@
 
   <div class="left">
    <h2>Transaction History</h2>
-   <div id="history" style="width: 600px; height: 300px;" class="graph"></div>
+   <div id="history" style="width: 100%; height: 300px;" class="graph"></div>
    <div id="historytable" style="display: none;"><h3>Transactions for ??</h3><table><tr><th>Date</th><th>Type</th><th>Category</th><th>Description</th><th>Amount</th></tr></table></div>
   </div>
   <div class="right">
    <h2>Categories</h2>
-   <div id="expense" style="width: 600px; height: 300px;" class="graph"></div>
+   <div id="expense" style="width: 100%; height: 300px;" class="graph"></div>
    <h2>Expense Categories</h2>
-   <div id="cathistory" style="width: 600px; height: 600px;" class="graph"></div>
+   <div id="cathistory" style="width: 100%; height: 600px;" class="graph"></div>
   </div>
  </body>
 </html>