Implement year-graph as SVG

year_graph.rb now does all the maths, template is just that.
RenderOnce class to genericise the render once behaviour of old year-graph.

_includes/footer.html

@@ -26,6 +26,6 @@
     </div>
   </div>
 
-{{ site.data.year_graph }}
+  {{ site.data.renderonce-year-graph }}
 
 </footer>

_includes/svg/year-graph.html

@@ -0,0 +1,16 @@
+<svg class="year-graph-svg"
+     width="{{ site.data.year-graph.width }}"
+     height="{{ site.data.year-graph.height }}"
+     viewBox="0 0 {{ site.data.year-graph.width }} {{ site.data.year-graph.height }}"
+     preserveAspectRatio="none"
+     xmlns="http://www.w3.</2000/svg">
+  {% for col in site.data.year-graph.graph %}
+  <a xlink:href="{{ col.year.url }}">
+    <rect class="decade-col-{{ col.year.decade }}"
+          x="{{ col.x }}"
+          y="{{ col.y }}"
+          width="{{ col.width }}"
+          height="{{ col.height }}" />
+  </a>
+  {% endfor %}
+</svg>

_plugins/hooks.rb

@@ -1,4 +1,8 @@
 Jekyll::Hooks.register :site, :pre_render do |site|
+  Jekyll.logger.info "Processing year graph..."
+  site.data['year-graph'] = NTHP::YearGraph.new(site)
+  site.data['renderonce-year-graph'] = NTHP::RenderOnce.new(site,
+    'svg/year-graph.html')
   Jekyll.logger.info "Rendering site..."
 end
 

_plugins/render_once.rb

@@ -0,0 +1,36 @@
+module NTHP
+  class RenderOnce
+    # Liquid object to render an include only the once, then use that cached
+    # version on subsequent usages. Sacrifices page variables for render speed.
+    def initialize(site, template)
+      @site = site
+      @template_path = File.join(site.source, '_includes', template)
+    end
+
+    def render
+      @render || render!
+    end
+
+    def render!
+      content = ''
+      f = File.open(@template_path, "r")
+      f.each_line do |line|
+        content += line
+      end
+
+      payload = @site.site_payload
+
+      info = {
+        filters:   [Jekyll::Filters],
+        registers: { :site => @site, :page => payload['page'] }
+      }
+
+      @render = @site.liquid_renderer.file(@template_path).parse(content).render!(payload, info)
+      return @render
+    end
+
+    def to_liquid
+      render
+    end
+  end
+end

_plugins/year_graph.rb

@@ -1,26 +1,56 @@
-module Jekyll
-  class YearGraphGenerator < Generator
-    priority :lowest
+module NTHP
+  class YearGraph
+    YEARGRAPH_WIDTH = 1400
+    YEARGRAPH_HEIGHT = 400
+    MIN_HEIGHT = 3
+    WIDTH_EXTRA = 0.6 # Prevent visible seams
 
-    def generate(site)
-      Jekyll.logger.info "Processing year graph..."
+    def initialize(site)
+      @site = site
+    end
+
+    def graph
+      @graph || graph!
+    end
+
+    def graph!
+      # Max number of shows
+      ns_max = @site.data['top_show_count']
+      # Number of years
+      ny = (@site.config['year_end'] - @site.config['year_start']) + 1
 
-      path = File.join(site.source, '_includes/fancy/year_graph.html')
+      # Width and height constants
+      w_c = YEARGRAPH_WIDTH
+      h_c = YEARGRAPH_HEIGHT - MIN_HEIGHT
 
-      content = ''
-      f = File.open(path, "r")
-      f.each_line do |line|
-        content += line
+      # Columns
+      cols = Array.new
+
+      @site.collections["years"].docs.each_with_index do |year, i|
+        ns = year.data['show_count']
+        w_i = 1/ny.to_f * w_c
+        h_i = (ns/ns_max.to_f * h_c) + MIN_HEIGHT
+        y = YEARGRAPH_HEIGHT - h_i
+        x = i/ny.to_f * YEARGRAPH_WIDTH
+        cols << {
+          'x' => x,
+          'y' => y,
+          'width' => w_i + WIDTH_EXTRA,
+          'height' => h_i,
+          'year' => year,
+        }
       end
 
-      payload = site.site_payload
+      @graph = cols
+      return @graph
+    end
 
-      info = {
-        filters:   [Jekyll::Filters],
-        registers: { :site => site, :page => payload['page'] }
+    def to_liquid
+      {
+        'width' => YEARGRAPH_WIDTH,
+        'height' => YEARGRAPH_HEIGHT,
+        'graph' => graph,
       }
-
-      site.data['year_graph'] = site.liquid_renderer.file(path).parse(content).render!(payload, info)
     end
   end
 end

_sass/_year-graph.sass

@@ -1,24 +1,32 @@
-// Year graph fancy element _includes/fancy/year_graph.html
+// Year graph svg element _includes/svg/year-graph.html
 
-.year-graph
-  @include grid-row
-  @include block
+@mixin decade-col-fill($i, $color)
+  .decade-col-#{$i}
+    fill: $color
+  $hover-color: lighten($color, 5%)
+  .decade-col-#{$i}:hover
+    fill: $hover-color
 
-  padding-top: 1rem
+.year-graph-svg
+  @include respond-down(mob-land)
+    // Just don't bother on mobile
+    display: none
 
-  background: darken($color-background, 3%)
+  height: 200px
+  width: 100%
 
-  .year-graph-bar
-    float: left
-    width: 1/(2017-1940)*100%
-    background: red
+  // Prevent seams and blurry edges
+  shape-rendering: crispEdges
 
-    a
-      display: block
-      width: 100%
-      @include no-underline
-      @include no-focus
+  // Colour generator for decade cols
+  $background-base: adjust-hue($color-decades-base, 220%)
+  $background-items: -3
 
-.site-footer .year-graph
-  margin-bottom: 0
-  background: none
+  @for $i from 194 through 201
+    $shift: (100% / $background-items) * (201-$i)
+    $shift-color: adjust-hue($background-base, $shift)
+
+    @include decade-col-fill($i, $shift-color)
+
+  a
+    @include no-focus