Merge pull request #749 from ElliotJH/barcharts-htmlpub

Add support for Magna-Charta graphs in HTML Publications https://www.pivotaltracker.com/story/show/48461623 https://www.pivotaltracker.com/story/show/54702184
alphagov · Aug 12, 2013 · 9ea91cf · 9ea91cf
2 parents 8f1662b + f7d04b8
commit 9ea91cf
Show file tree

Hide file tree

Showing 8 changed files with 389 additions and 0 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -7,6 +7,7 @@
 //= require jquery_ujs
 //= require vendor/jquery/jquery-ui-1.10.2.custom
 //= require vendor/jquery/jquery.player.min
+//= require vendor/jquery/magna-charta.min
 //
 //= require govuk_toolkit
 //= require shared_mustache

diff --git a/app/assets/javascripts/application/convert-html-pub-charts.js b/app/assets/javascripts/application/convert-html-pub-charts.js
@@ -0,0 +1,5 @@
+$(function() {
+    $('.js-barchart-table').each(function() {
+        $.magnaCharta($(this));
+    })
+});
diff --git a/app/assets/javascripts/vendor/jquery/magna-charta.min.js b/app/assets/javascripts/vendor/jquery/magna-charta.min.js
diff --git a/app/assets/stylesheets/frontend/helpers/_magna-charta.scss b/app/assets/stylesheets/frontend/helpers/_magna-charta.scss
@@ -0,0 +1,287 @@
+/*
+ * magna-charta example stylesheet
+ * https://github.com/alphagov/magna-charta
+ *
+ * Author: Tim Paul
+ * Licensed under the MIT license.
+ */
+
+
+// DEFAULT CHART STYLES
+
+$label-width: 40%;          // Horizontal width taken up by the bar labels
+$label-align: right;        // Label alignment
+$base-unit: 16px;           // For font sizes and related spacing
+$compact-font-size: 12px;   // For the 'compact' bar style
+$bar-padding: 8px;          // The padding between the bar values and the edge of the bar
+$bar-spacing: 5px;          // The spacing around the bars
+$stack-spacing: 1px;        // For stacked bars, the spacing between each stack in a bar
+$caption-side: top;         // Caption alignment. Top or bottom.
+$key-width: 160px;           // Only used by IE. Other browsers get smallest width that fits content
+
+// CHART COLOUR SCHEME
+
+@import 'colours';          // Cabinet Office colour palette (feel free to choose your own)
+$chart-border: $white; // Chart border colour
+$key-border:   $white; // Key border colour
+$bar-colours: $light-blue,
+$turquoise,
+$green,
+$grass-green,
+$yellow,
+$orange,
+$red,
+$mellow-red;
+
+// HELPER MIXINS
+
+@mixin visually-hidden{
+    // Hides content visually, but not from screen readers
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    padding:0 !important;
+    border:0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
+}
+
+
+// CHART STYLES
+.mc-chart {
+    font-size: $base-unit;
+    display: table;
+    width: 100%;
+    border-spacing: 0 $bar-spacing;
+    border: 1px solid $chart-border;
+    padding: $base-unit 0;
+    position: relative;
+    margin-bottom: $base-unit;
+
+    // CAPTION STYLES
+    .mc-caption{
+        display: table-caption;
+        font-size: $base-unit;
+        text-align: center;
+        caption-side: $caption-side;
+        margin: $base-unit 0;
+    }
+
+    // KEY STYLES
+    .mc-thead {
+        background-color: #fff;
+        display: table-header-group;
+        padding: $bar-spacing;
+        border: 1px solid $key-border;
+        .mc-th{
+            display: none; // Hide all header cells first
+        }
+        .mc-key-header{
+            display: block; // Show the header cells that form part of the key
+            margin-bottom: $bar-spacing;
+            margin-left: 100%;
+            padding-left: $bar-spacing;
+            border-left: $base-unit solid;
+            text-align: left;
+            font-weight: normal;
+            width: 100%;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+        // Key colours
+        @for $i from 0 to length($bar-colours) {
+            .mc-key-#{$i+1} {
+                border-left-color: nth($bar-colours, $i+1);
+            }
+        }
+    }
+    // Right and left aligned keys
+    &.right-key .mc-thead,
+    &.left-key .mc-thead{
+        position: absolute;
+        top: 100px;
+        .mc-key-header{
+            margin-left: 0;
+        }
+    }
+    &.right-key .mc-thead{
+        right: 26px;
+    }
+    &.left-key .mc-thead{
+        left: 26px;
+    }
+    // Hidden keys
+    &.no-key .mc-thead{
+        display: none;
+    }
+
+    // BAR STYLES
+    .mc-tbody{
+        display: table-row-group;
+        .mc-tr{
+            display: table-row;
+            // Bars and bar labels
+            .mc-bar-cell,
+            .mc-key-cell{
+                padding-right: $bar-spacing;
+                margin-right: $stack-spacing;
+                box-sizing: border-box;
+                border: 0 solid;
+            }
+            // Bars
+            .mc-bar-cell {
+                display: block;
+                text-align: left;
+                padding: $bar-padding 0;
+                margin-bottom: 1px;
+                color: $white;
+                text-indent: $bar-padding;
+            }
+            // Bar colours
+            @for $i from 0 to length($bar-colours) {
+                .mc-bar-#{$i+1} {
+                    background-color: nth($bar-colours, $i + 1);
+                }
+            }
+            // Negative bars
+            .mc-bar-negative {
+                text-align: right;
+                padding-right: $bar-padding;
+            }
+            .mc-value-overflow {
+                text-indent: -99999px !important;
+            }
+            // Bar labels
+            .mc-key-cell {
+                width: $label-width;
+                text-indent: 26px;
+                text-align: $label-align;
+                display: table-cell;
+                vertical-align: middle;
+            }
+        }
+    }
+
+
+    // STACKED CHARTS
+    &.mc-stacked {
+        .mc-stacked-header{
+            display: none; // Hide the header for the totals column
+        }
+        .mc-th:nth-last-child(2){
+            margin-bottom: 0;
+        }
+        .mc-stacked-total{
+            padding: $bar-padding 0;
+            background-color: transparent !important;
+            color: $black;
+            display: inline-block;
+            text-indent: 5px;
+        }
+        .mc-tbody .mc-bar-cell{
+            display: inline-block;
+        }
+    }
+
+    // COMPACT CHARTS
+    &.compact{
+        .mc-td.mc-bar-cell{
+            font-size: $compact-font-size;
+            text-indent: 2px;
+            padding: 0;
+        }
+    }
+
+
+    // Charts with multiple columns get different coloured bars
+    $len: length($bar-colours);
+    @for $i from 0 to $len {
+        .mc-tr .mc-td.mc-bar-cell.mc-bar-#{$i+1} {
+            background-color: nth($bar-colours, $i + 1);
+        }
+        .mc-tr .mc-th.mc-key-#{$i+1} {
+            border-left-color: nth($bar-colours, $i+1);
+        }
+
+    }
+
+    .mc-td, .mc-th {
+        padding: 0;
+        padding-right: $bar-spacing;
+        margin-right: $stack-spacing;
+        border: 0 solid;
+        &.mc-bar-cell {
+            display: block;
+            background-color: #ebebeb; // Just for testing
+            text-align: left;
+            padding: $bar-padding 0;
+            margin-bottom: 1px;
+            color: $white;
+            text-indent: 4px;
+        }
+    }
+    .mc-bar-outdented {
+        span { color: #111; }
+    }
+    caption{
+        caption-side: $caption-side;
+    }
+    .mc-td.mc-key-cell {
+        width: $label-width;
+        text-indent: 26px;
+        text-align: $label-align;
+        display: table-cell;
+        vertical-align: middle;
+    }
+    // OUTDENTED BAR VALUES
+    &.mc-outdented{
+        .mc-tbody{
+            .mc-tr{
+                .mc-bar-cell{
+                    color: #111;
+                }
+                .mc-bar-negative {
+                    text-align: left;
+                }
+            }
+        }
+    }
+
+    &.mc-negative .mc-td.mc-key-cell {
+        padding-right: 25px;
+    }
+
+}
+
+
+.mc-outdented .mc-bar-cell.mc-bar-negative {
+    text-align: left;
+}
+
+// .mc-bar-cell.mc-bar-negative.mc-bar-indented {
+//   position: relative;
+//   span {
+//     position: absolute;
+//     right: 4px;
+//   }
+// }
+
+.mc-chart.mc-negative .mc-td.mc-key-cell {
+    padding-right: 25px;
+}
+.mc-toggle-link{
+    display: block;
+    margin-top: 30px;
+}
+
+
+// Hides the original table
+.visually-hidden,
+.visually-hidden caption{
+    @include visually-hidden;
+    // It's reapplied to captions because Firefox can't hide
+    // table captions unless it's applied directly to it. Go figure.
+
+}
diff --git a/app/assets/stylesheets/frontend/html-publication.scss b/app/assets/stylesheets/frontend/html-publication.scss
@@ -39,6 +39,9 @@
 
   // helpers shared with frontend and admin
   @import "../shared/helpers/_player-container.scss";
+
+  // Support for bar charts
+  @import "helpers/_magna-charta.scss";
 }
 
 

diff --git a/app/helpers/govspeak_helper.rb b/app/helpers/govspeak_helper.rb
@@ -85,6 +85,7 @@ def bare_govspeak_to_html(govspeak, images = [], options = {}, &block)
     # pre-processors
     govspeak = remove_extra_quotes_from_blockquotes(govspeak)
     govspeak = render_embedded_contacts(govspeak, options[:contact_heading_tag])
+    govspeak = set_classes_for_charts(govspeak)
 
     markup_to_nokogiri_doc(govspeak, images).tap do |nokogiri_doc|
       # post-processors
@@ -106,6 +107,27 @@ def render_embedded_contacts(govspeak, heading_tag)
     end
   end
 
+  def set_classes_for_charts(govspeak)
+    return govspeak if govspeak.blank?
+
+    govspeak.gsub(/{barchart(.*)/) do
+      stacked = '.mc-stacked' if $1.include? 'stacked'
+      compact = '.compact' if $1.include? 'compact'
+      negative = '.mc-negative' if $1.include? 'negative'
+
+      [
+       '{:',
+       '.js-barchart-table', 
+       stacked,
+       compact,
+       negative,
+       '.left-key', 
+       '.mc-auto-outdent',
+       '}'
+      ].join(' ')
+    end
+  end
+
   def replace_internal_admin_links_in(nokogiri_doc)
     nokogiri_doc.search('a').each do |anchor|
       next unless is_internal_admin_link?(uri = anchor['href'])