Add a pie chart (with dummy data)

Co-Authored-By: Tom Sydney Kerckhove <[email protected]>
simonmichael · Jan 19, 2021 · 96e77a9 · 96e77a9
1 parent 540c659
commit 96e77a9
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 0 deletions.
diff --git a/hledger-web/Hledger/Web/Foundation.hs b/hledger-web/Hledger/Web/Foundation.hs
@@ -160,6 +160,7 @@ instance Yesod App where
       addScript $ StaticR js_jquery_cookie_js
       addScript $ StaticR js_jquery_hotkeys_js
       addScript $ StaticR js_jquery_flot_min_js
+      addScript $ StaticR js_jquery_flot_pie_min_js
       addScript $ StaticR js_jquery_flot_time_min_js
       addScript $ StaticR js_jquery_flot_tooltip_min_js
       toWidget [hamlet| \<!--[if lte IE 8]> <script type="text/javascript" src="@{StaticR js_excanvas_min_js}"></script> <![endif]--> |]

diff --git a/hledger-web/Hledger/Web/Handler/RegisterR.hs b/hledger-web/Hledger/Web/Handler/RegisterR.hs
@@ -110,6 +110,12 @@ registerChartHtml title percommoditytxnreports = $(hamletFile "templates/chart.h
    simpleMixedAmountQuantity = maybe 0 aquantity . listToMaybe . amounts
    shownull c = if null c then " " else c
 
+-- | Generate javascript/html for a mockup pie chart
+registerPieChartHtml :: HtmlUrl AppRoute
+registerPieChartHtml title = $(hamletFile "templates/piechart.hamlet")
+ where
+   charttitle = "Pie Chart" :: String
+
 dayToJsTimestamp :: Day -> Integer
 dayToJsTimestamp d =
   read (formatTime defaultTimeLocale "%s" t) * 1000 -- XXX read

diff --git a/hledger-web/templates/piechart.hamlet b/hledger-web/templates/piechart.hamlet
@@ -0,0 +1,23 @@
+<label #register-pie-chart-label style=""><br>
+<div #register-pie-chart style="height:150px; margin-bottom:1em; display:block;">
+<script type=text/javascript>
+ \$(document).ready(function() {
+   var $chartdiv = $('#register-pie-chart');
+   if ($chartdiv.is(':visible')) {
+     \$('#register-pie-chart-label').text('#{charttitle}');
+     var data =
+       [
+         { label: "Food", data: 5 },
+         { label: "Rent", data: 10 },
+         { label: "Internet", data: 85 }
+       ];
+     var options = {
+       series: {
+         pie: {
+           show: true
+         }
+       }
+     };
+     \$.plot($chartdiv, data, options);
+   }
+ });
diff --git a/hledger-web/templates/register.hamlet b/hledger-web/templates/register.hamlet
@@ -3,6 +3,7 @@
 
 <div .hidden-xs>
   ^{registerChartHtml balancelabel $ transactionsReportByCommodity items}
+  ^{registerPieChartHtml}
 
 <div.table-responsive>
   <table .table.table-striped.table-condensed>