v.0.30

nikolainp · Oct 26, 2023 · 6b59fd2 · 6b59fd2
1 parent 99a5057
commit 6b59fd2
Showing 1 changed file with 44 additions and 2 deletions.
diff --git a/toGraphTemplate.go b/toGraphTemplate.go
@@ -7,13 +7,37 @@ const graphTemplate = `
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <style>
+        .dropdown {
+          position: relative;
+          display: inline-block;
+        }
+        
+        .dropdown-content {
+          display: none;
+          position: absolute;
+          background-color: #f9f9f9;
+          min-width: 160px;
+          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+          padding: 12px 16px;
+          z-index: 1;
+        }
+        
+        .dropdown:hover .dropdown-content {
+          display: block;
+        }
+    </style>
+
     <title>{{.Title}}</title>
 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type='text/javascript'>
       google.charts.load('current', {'packages':['annotationchart']});
       google.charts.setOnLoadCallback(drawChart);
 
+      let chart;
+
       function drawChart() {
         var data = new google.visualization.DataTable();
         data.addColumn('date', 'Date');
@@ -32,19 +56,37 @@ const graphTemplate = `
 			{{- end}}
         ]);
 
-        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
+        chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
 
         var options = {
           displayAnnotations: true
         };
 
         chart.draw(data, options);
       }
+
+      function onChangeColumn(element) {
+        if (element.checked) {
+            chart.showDataColumns(element.value)
+        } else {
+            chart.hideDataColumns(element.value)
+        }
+      }
     </script>
   </head>
 
   <body>
-    <div id='chart_div' style='width: 100%; height: 100%;'></div>
+    <div class="dropdown" style='height: 30px;'>
+      <span>My page</span>
+      <div class="dropdown-content">
+        {{range $i, $column := .Columns -}}
+          <input type="checkbox" name="{{$column}}" value="{{$i}}" onchange="onChangeColumn(this)" checked>
+            <label for="{{$column}}">{{$column}}</label><br>
+        {{end}}
+      </div>
+    </div>
+
+    <div id='chart_div' style='width: 100%; height: calc(100% - 30px);'></div>
   </body>
 </html>
 `