hover for years

layouts/eventtypes/terms.html

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

layouts/locations/terms.html

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

layouts/partials/term-summary.html

@@ -2,18 +2,34 @@
 {{ $pages := where .page.Site.RegularPages "Type" "in" (slice "posts") }}
 {{ $count := len $pages }}
 {{ $param_name := .param_name }}
-
+{{ $param_title := .param_title }}
 {{ $totalWidth := 100.0 }}
 {{ $totalHeight := 50.0 }}
 {{ $width := div $totalWidth  ( len ( $pages.GroupByDate "2006" ) ) }}
 
-{{ $color := "#357edd" }}
+{{ $color := "#a8c7f0" }}
+{{ $strokecolor := "#d3e3f8" }}
+
+
+
+<script>
+function onyearover(year, key, count){
+// alert( year + key  + "!")
+document.getElementById( key ).innerHTML = year + ": " + count;
+}
+
+function onyearout(key){
+// alert( year + key  + "!")
+document.getElementById( key ).innerHTML = "";
+}
+</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" }}
 
     {{ $maxCount := 0 }}
@@ -21,7 +37,7 @@ xmlns="http://www.w3.org/2000/svg">
 
     {{ range .Pages }}
       {{ $maxCount = add 1 $maxCount }}
-
+        {{ $year = dateFormat "2006" .Date  }}
         {{ $isMember := false }}
 
         {{ if eq (.Param $param_name ) $key }}
@@ -33,11 +49,9 @@ xmlns="http://www.w3.org/2000/svg">
     
     {{ $height := 0 }}
     {{ $height = mul (float $totalHeight ) ( div (float $count ) ( float $maxCount ) )  }}
-    {{/*  {{ $dist }}  */}}
+    <rect onmouseover="onyearover({{ $year }}, {{ $param_title }}, {{ $count }} )" onmouseout="onyearout({{ $param_title }})"  height="{{ $height }}" y="{{ sub $totalHeight $height }}" x="{{ $x }}%" 
-    {{/*  {{ $x }}  */}}
+      width="{{ $width }}%"  fill="{{ $color }}" stroke-width="1.5" stroke="{{$strokecolor}}"
-    {{/*  {{ $height }}  */}}
+      class="dim"/>
-    <rect 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 }}

layouts/sports/terms.html

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