{{ $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 }}
{{/*  {{ $width := div $totalWidth  ( len ( $pages.GroupByDate "2006" ) ) }}  */}}
{{ $width := div $totalWidth  ( len ( $pages.GroupByDate "2006" ) ) }}

{{ $color := "#a8c7f0" }}
{{ $strokecolor := "#d3e3f8" }}

<script>
function onyearover(year, key, count){
  document.getElementById( key ).innerHTML = year + ": " + count;
}

function onyearout(key){
  document.getElementById( key ).innerHTML = "<div style='color: transparent'>:</div>";
}
</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 }}
    {{ $count := 0 }}

    {{ range .Pages }}
      {{ $maxCount = add 1 $maxCount }}
      {{ $year = dateFormat "2006" .Date  }}

      {{ $isMember := false }}

      {{ range .Params.members }}
        {{ if eq . $key }}
          {{ $isMember = true }}
          {{ $count = add 1 $count }}
        {{ end }}
      {{ end }}
    
      {{ with .Params.distance_km }}
        {{ $maxDist = add . $maxDist }}
        {{ if $isMember }}
          {{ $dist = add . $dist }}
        {{ end }}
      {{ end }}
    {{ end }}
    
    {{ $height := 0 }}
    {{ $height = mul (float $totalHeight ) ( div (float $count ) ( float $maxCount ) )  }}
    {{/* $maxDist */}}
      {{/* $dist */}} 
     {{/* $x */}} 
      {{/* $height */}}  
    <rect onmouseover="onyearover( {{ $year }}, {{ $param_title }}, {{ $count }} )" onmouseout="onyearout({{ $param_title }})"  opacity="0.2" height="{{ $height }}" y="{{ sub $totalHeight $height }}" x="{{ $x }}%" 
      width="{{ $width }}%"  fill="{{ $color }}" stroke-width="1.5" stroke="{{$strokecolor}}" class="dim"/>

    {{ $x = add $x $width }}
  {{ end }}
</svg>