added members mouseover info

layouts/eventtypes/terms.html

@@ -37,7 +37,7 @@
               {{ partial "term-summary.html" (dict "page" .Page "param_name" "eventtypes" "param_title" .Page.Title ) }}
             </div>
             <div id="{{ .Page.Title }}" class="flex justify-center pt1">
-            <br>
+              <br>
             </div>
             
         </div>

layouts/members/terms.html

@@ -34,7 +34,10 @@
             </div>
             
             <div class="flex pt1">
-              {{ partial "members-summary.html" .Page }}
+              {{ partial "members-summary.html" (dict "page" .Page "param_title" .Page.Title ) }}
+            </div>
+            <div id="{{ .Page.Title }}" class="flex justify-center pt1">
+              <br>
             </div>
             
         </div>

layouts/partials/members-summary.html

@@ -1,6 +1,7 @@
-{{ $key := .Title }}
-{{ $pages := where .Site.RegularPages "Type" "in" (slice "posts") }}
+{{ $key := .page.Title }}
+{{ $pages := where .page.Site.RegularPages "Type" "in" (slice "posts") }}
 {{ $count := len $pages }}
+{{ $param_title := .param_title }}
 
 {{ $totalWidth := 100.0 }}
 {{ $totalHeight := 50.0 }}
@@ -9,13 +10,22 @@
 
 {{ $color := "#357edd" }}
 
-<svg width="{{ $totalWidth }}%" height="{{ $totalHeight }}" 
-xmlns="http://www.w3.org/2000/svg">
+<script>
+function onyearover(year, key, count){
+document.getElementById( key ).innerHTML = year + ": " + count + " km";
+}
+
+function onyearout(key){
+document.getElementById( key ).innerHTML = "<br>";
+}
+</script>
+
+<svg width="{{ $totalWidth }}%" height="{{ $totalHeight }}" xmlns="http://www.w3.org/2000/svg">
   <rect height="100%" width="100%" opacity="0.1" fill="{{ $color }}"/>
 
   {{ $x := 0 }}
+  {{ $year := 0 }}
   {{ range sort ( $pages.GroupByDate "2006" ) "Key" }}
-
     {{ $maxDist := 0.00 }}
     {{ $maxCount := 0 }}
     {{ $dist := 0.00 }}
@@ -23,6 +33,7 @@ xmlns="http://www.w3.org/2000/svg">
 
     {{ range .Pages }}
       {{ $maxCount = add 1 $maxCount }}
+      {{ $year = dateFormat "2006" .Date  }}
 
       {{ $isMember := false }}
 
@@ -47,13 +58,13 @@ xmlns="http://www.w3.org/2000/svg">
       {{ else }}
       {{ $height = mul (float $totalHeight ) ( div (float $count ) ( float $maxCount ) )  }}
     {{ end }}
-    {{/*  {{ $maxDist }}  */}}
-    {{/*  {{ $dist }}  */}}
-    {{/*  {{ $x }}  */}}
-    {{/*  {{ $height }}  */}}
-    <rect opacity="0.2" height="{{ $height }}" y="{{ sub $totalHeight $height }}" x="{{ $x }}%" 
+    {{/* $maxDist */}}
+      {{/* $dist */}} 
+     {{/* $x */}} 
+      {{/* $height */}}  
+    <rect onmouseover="onyearover({{ $year }}, {{ $param_title }}, {{ math.Round $dist }} )" onmouseout="onyearout({{ $param_title }})"  opacity="0.2" height="{{ $height }}" y="{{ sub $totalHeight $height }}" x="{{ $x }}%" 
       width="{{ $width }}%"  fill="{{ $color }}" stroke-width="1.5" stroke="{{$color}}"/>
 
     {{ $x = add $x $width }}
   {{ end }}
-</svg>  
+</svg>  

layouts/partials/term-summary.html

@@ -22,6 +22,8 @@ document.getElementById( key ).innerHTML = "<br>";
 }
 </script>
 
+
+
 <svg width="{{ $totalWidth }}%" height="{{ $totalHeight }}" 
 xmlns="http://www.w3.org/2000/svg">
   <rect height="100%" width="100%" opacity="0.1" fill="{{ $color }}"/>