Actually populate the pie chart

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

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/hledger-web/Hledger/Web/Handler/RegisterR.hs b/hledger-web/Hledger/Web/Handler/RegisterR.hs
@@ -8,7 +8,7 @@
 
 module Hledger.Web.Handler.RegisterR where
 
-import Data.List (intersperse, nub, partition)
+import Data.List (intersperse, nub, partition, sortOn)
 import qualified Data.Text as T
 import Text.Hamlet (hamletFile)
 
@@ -50,6 +50,12 @@ getRegisterR = do
         | isJust (inAccount qopts) = "Period Total"
         | otherwise                = "Total"
       transactionFrag = transactionFragment j
+      (chartQuery, depth) =
+          case (,) <$> inAccount qopts <*> inAccountQuery qopts of
+              Nothing -> (Any, 0)
+              Just ((an, _), aq) -> (aq, accountNameLevel an)
+      rspecWithQuery = rspec { rsQuery = (And [chartQuery, Depth $ depth + 1, m]) }
+      balancereport = balanceReport rspecWithQuery j
   defaultLayout $ do
     setTitle "register - hledger-web"
     $(widgetFile "register")
@@ -111,10 +117,15 @@ registerChartHtml title percommoditytxnreports = $(hamletFile "templates/chart.h
    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
+registerPieChartHtml :: BalanceReport -> HtmlUrl AppRoute
+registerPieChartHtml (items, _) = $(hamletFile "templates/piechart.hamlet")
+  where
+    charttitle = "Pie Chart" :: String
+    labelDataTuples =
+      reverse $
+      sortOn snd $
+      flip concatMap items $ \(accname, _, _, Mixed as) ->
+        flip map as $ \a -> (accname, aquantity a)
 
 dayToJsTimestamp :: Day -> Integer
 dayToJsTimestamp d =

diff --git a/hledger-web/templates/piechart.hamlet b/hledger-web/templates/piechart.hamlet
@@ -1,23 +1,40 @@
 <label #register-pie-chart-label style=""><br>
 <div #register-pie-chart style="height:150px; margin-bottom:1em; display:block;">
+<div #piehover>
 <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 }
+         $forall (label, dat) <- labelDataTuples
+           { label: "#{label}", data: #{dat} },
        ];
+     function legendFormatter(label, series) {
+       return Math.round(series.percent).toFixed(2) + '% ' + label;
+     };
      var options = {
        series: {
          pie: {
            show: true
          }
+       },
+       grid: {
+         hoverable: true
+       },
+       legend: {
+         show: true,
+         labelFormatter: legendFormatter
        }
      };
      \$.plot($chartdiv, data, options);
+     \$chartdiv.bind("plothover", function(event, pos, obj) {
+       if (!obj) {
+         return;
+       }
+       var percent = parseFloat(obj.series.percent).toFixed(2);
+       \$("#piehover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
+     });
    }
  });
diff --git a/hledger-web/templates/register.hamlet b/hledger-web/templates/register.hamlet
@@ -3,7 +3,7 @@
 
 <div .hidden-xs>
   ^{registerChartHtml balancelabel $ transactionsReportByCommodity items}
-  ^{registerPieChartHtml}
+  ^{registerPieChartHtml balancereport }
 
 <div.table-responsive>
   <table .table.table-striped.table-condensed>