From cb0a0fafa5de0e2593906db5e53ad2a967bf6faa Mon Sep 17 00:00:00 2001
From: Simon Michael <simon@joyful.com>
Date: Sat, 28 Jun 2025 21:01:24 -0700
Subject: [PATCH] dev:web: chart.hamlet: reindent, simpler comment syntax

---
 hledger-web/templates/chart.hamlet | 226 +++++++++++++++--------------
 1 file changed, 115 insertions(+), 111 deletions(-)

diff --git a/hledger-web/templates/chart.hamlet b/hledger-web/templates/chart.hamlet
index 7beea6a26..1a949c87e 100644
--- a/hledger-web/templates/chart.hamlet
+++ b/hledger-web/templates/chart.hamlet
@@ -2,21 +2,21 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
 <label #register-chart-label style=""><br>
 <div #register-chart style="height:150px; margin-bottom:1em; display:block;">
 <script type=text/javascript>
- \$(document).ready(function() {
-   var $chartdiv = $('#register-chart');
-   if ($chartdiv.is(':visible')) {
-     \$('#register-chart-label').text('#{charttitle}');
-     var seriesData = [
+  \$(document).ready(function() {
+    var $chartdiv = $('#register-chart');
+    if ($chartdiv.is(':visible')) {
+      \$('#register-chart-label').text('#{charttitle}');
+      var seriesData = [
       $forall (c,items) <- percommoditytxnreports
-       /* we render each commodity using two series:
-        * one with extra data points added to show a stepped balance line */
-       {
+        // we render each commodity using two series:
+        // one with extra data points added to show a stepped balance line
+        {
         data: [
           $forall i <- reverse items
-           [
+            [
             #{dayToJsTimestamp $ triDate i},
             #{simpleMixedAmountQuantity $ triCommodityBalance c i}
-           ],
+            ],
         ],
         label: '#{shownull $ T.unpack c}',
         color: #{colorForCommodity c},
@@ -29,20 +29,19 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
         },
         clickable: false,
         hoverable: false,
-       },
-       /* and one with the original data, showing one clickable, hoverable point per transaction */
-       {
+        },
+        // and one with the original data, showing one clickable, hoverable point per transaction
+        {
         data: [
           $forall i <- reverse items
-           [
+            [
             #{dayToJsTimestamp $ triDate i},
             #{simpleMixedAmountQuantity $ triCommodityBalance c i},
             '#{showZeroCommodity $ triCommodityAmount c i}',
             '#{showZeroCommodity $ triCommodityBalance c i}',
             '#{concat $ intersperse "\\n" $ lines $ T.unpack $ showTransaction $ triOrigTransaction i}',
             #{tindex $ triOrigTransaction i}
-           ],
-          /* [] */
+            ],
         ],
         label: '',
         color: #{colorForCommodity c},
@@ -52,104 +51,109 @@ $# If $ is the first character in a line, it must be \-escaped to hide it from h
         points: {
           show: true,
         },
-       },
-     ]
-    //eslint-disable-next-line no-unused-vars
-    function registerChart($container, series) {
-      // https://github.com/flot/flot/blob/master/API.md
-      return $container.plot(
-        series,
-        { /* general chart options */
-          xaxis: {
-            mode: "time",
-            timeformat: "%Y/%m/%d",
-          },
-          selection: {
-            mode: "x"
-          },
-          legend: {
-            position: 'sw'
-          },
-          grid: {
-            markings: function () {
-              var now = Date.now();
-              return [
-                {
-                  xaxis: { to: now }, // past
-                  yaxis: { to: 0 },   // <0
-                  color: '#ffdddd',
-                },
-                {
-                  xaxis: { from: now }, // future
-                  yaxis: { from: 0 },   // >0
-                  color: '#e0e0e0',
-                },
-                {
-                  xaxis: { from: now }, // future
-                  yaxis: { to: 0 },     // <0
-                  color: '#e8c8c8',
-                },
-                {
-                  yaxis: { from: 0, to: 0 }, // =0
-                  color: '#bb0000',
-                  lineWidth:1
-                },
-              ];
-            },
-            hoverable: true,
-            autoHighlight: true,
-            clickable: true,
-          },
-          /* https://github.com/krzysu/flot.tooltip */
-          tooltip: true,
-          tooltipOpts: {
-            xDateFormat: "%Y/%m/%d",
-            content:
-              function(label, x, y, flotitem) {
-                var data = flotitem.series.data[flotitem.dataIndex];
-                return data[3]+" balance on %x after "+data[2]+" posted by transaction:<pre>"+data[4]+"</pre>";
+        },
+      ];
+      var plot = registerChart($chartdiv, seriesData);
+      plot.setSelection({ xaxis: { from: 500, to: 700 } });  // ?
+      \$chartdiv.bind("plotclick",    registerChartClick);
+      \$chartdiv.bind("plotselected", registerChartSelect);
+    };
+  });
+
+  //eslint-disable-next-line no-unused-vars
+  function registerChart($container, series) {
+    // https://github.com/flot/flot/blob/master/API.md
+    return $container.plot(
+      series,
+      {
+        xaxis: {
+          mode: "time",
+          timeformat: "%Y/%m/%d",
+        },
+        selection: {
+          mode: "x"
+        },
+        legend: {
+          position: 'sw'
+        },
+        grid: {
+          markings: function () {
+            var now = Date.now();
+            return [
+              {
+                xaxis: { to: now }, // past
+                yaxis: { to: 0 },   // <0
+                color: '#ffdddd',
               },
-            onHover: function(flotitem, $tooltipel) {
-              \$tooltipel.css('border-color',flotitem.series.color);
-            },
+              {
+                xaxis: { from: now }, // future
+                yaxis: { from: 0 },   // >0
+                color: '#e0e0e0',
+              },
+              {
+                xaxis: { from: now }, // future
+                yaxis: { to: 0 },     // <0
+                color: '#e8c8c8',
+              },
+              {
+                yaxis: { from: 0, to: 0 }, // =0
+                color: '#bb0000',
+                lineWidth:1
+              },
+            ];
           },
-        }
-      ).data("plot");
-    }
-    function registerChartClick(ev, pos, item) {
-      if (!item) {
-        return;
-      }
-      var targetselector = '#' + item.series.data[item.dataIndex][5];
-      var $target = $(targetselector);
-      if ($target.length) {
-        window.location.hash = targetselector;
-        \$('html, body').animate({
-          scrollTop: $target.offset().top
-        }, 1000);
+          hoverable: true,
+          autoHighlight: true,
+          clickable: true,
+        },
+        // https://github.com/krzysu/flot.tooltip
+        tooltip: true,
+        tooltipOpts: {
+          xDateFormat: "%Y/%m/%d",
+          content:
+            function(label, x, y, flotitem) {
+              var data = flotitem.series.data[flotitem.dataIndex];
+              return data[3]+" balance on %x after "+data[2]+" posted by transaction:<pre>"+data[4]+"</pre>";
+            },
+          onHover: function(flotitem, $tooltipel) {
+            \$tooltipel.css('border-color',flotitem.series.color);
+          },
+        },
       }
+    ).data("plot");
+  }
+
+  // Handle a click event on the chart.
+  function registerChartClick(ev, pos, item) {
+    if (!item) {
+      return;
     }
-    // Handle a selection (zoom) event on the chart.
+    var targetselector = '#' + item.series.data[item.dataIndex][5];
+    var $target = $(targetselector);
+    if ($target.length) {
+      window.location.hash = targetselector;
+      \$('html, body').animate({
+        scrollTop: $target.offset().top
+      }, 1000);
+    }
+  }
+
+  // Handle a selection (zoom) event on the chart.
+  function registerChartSelect(ev, ranges) {
+    console.log("selected", ranges.xaxis.from, ranges.xaxis.to);
+
     // This should pick good from/to dates based on the selected x-values, which is tricky to get right.
-    function registerChartSelect(ev, ranges) {
-      console.log("selected", ranges.xaxis.from, ranges.xaxis.to);
-      /* Round down for the 'from' day: */
-      var from = new Date(ranges.xaxis.from);
-      /* Round up for the 'to' day: */
-      var to = new Date(ranges.xaxis.to + (24 * 60 * 60 * 1000) - 1);
-      var range =
-        from.getFullYear() + "/" + (from.getMonth() + 1) + "/" + from.getDate() + "-" +
-        to.getFullYear()   + "/" + (to.getMonth() + 1)   + "/" + to.getDate();
-      var baselink = "@?{nodatelink}";
-      if (baselink.endsWith("?q")) {
-        document.location = baselink + "=date:" + range;
-      } else {
-        document.location = baselink + "%20date:" + range;
-      }
+    // Round down for the 'from' day:
+    var from = new Date(ranges.xaxis.from);
+    // Round up for the 'to' day:
+    var to = new Date(ranges.xaxis.to + (24 * 60 * 60 * 1000) - 1);
+    var range =
+      from.getFullYear() + "/" + (from.getMonth() + 1) + "/" + from.getDate() + "-" +
+      to.getFullYear()   + "/" + (to.getMonth() + 1)   + "/" + to.getDate();
+    var baselink = "@?{nodatelink}";
+    if (baselink.endsWith("?q")) {
+      document.location = baselink + "=date:" + range;
+    } else {
+      document.location = baselink + "%20date:" + range;
     }
-     var plot = registerChart($chartdiv, seriesData);
-     plot.setSelection({ xaxis: { from: 500, to: 700 } });
-     \$chartdiv.bind("plotclick", registerChartClick);
-     \$chartdiv.bind("plotselected", registerChartSelect);
-   };
- });
+  }