{{ $key := .page.Title }}
{{ $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 := "#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 = "<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" }}

    {{ $maxCount := 0 }}
    {{ $count := 0 }}

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

        {{ if eq (.Param $param_name ) $key }}
          {{ $isMember = true }}
          {{ $count = add 1 $count }}
        {{ end }}
    
    {{ end }}
    
    {{ $height := 0 }}
    {{ $height = mul (float $totalHeight ) ( div (float $count ) ( float $maxCount ) )  }}
    <rect onmouseover="onyearover({{ $year }}, {{ $param_title }}, {{ $count }} )" onmouseout="onyearout({{ $param_title }})"  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>