diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 5a8387e4260..09010efb104 100644 --- 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 new file mode 100644 index 00000000000..d359123f1cd --- /dev/null +++ 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 new file mode 100644 index 00000000000..18f7eef7958 --- /dev/null +++ b/app/assets/javascripts/vendor/jquery/magna-charta.min.js @@ -0,0 +1,4 @@ +/*! Magna Charta - v3.0.0 - 2012-12-04 +* https://github.com/alphagov/magna-charta + */ +(function(e){var t=function(){this.init=function(t,n){var r={outOf:65,applyOnInit:!0,toggleText:"Toggle between chart and table",autoOutdent:!1,outdentAll:!1};this.options=e.extend({},r,n);var i=function(){var e,t=3,n=document.createElement("div"),r=n.getElementsByTagName("i");do n.innerHTML="";while(t<10&&r[0]);return t>4?t:e}();return this.ENABLED=!(i&&i<8),this.$table=t,this.$graph=e("
").attr("aria-hidden","true"),this.$graph.attr("class",this.$table.attr("class")).addClass("mc-chart"),this.options.stacked=this.$table.hasClass("mc-stacked"),this.options.negative=this.$table.hasClass("mc-negative"),this.options.multiple=!this.options.stacked&&(this.$table.hasClass("mc-multiple")||this.$table.find("tbody tr").first().find("td").length>2),this.options.autoOutdent=this.options.autoOutdent||this.$table.hasClass("mc-auto-outdent"),this.options.outdentAll=this.options.outdentAll||this.$table.hasClass("mc-outdented"),this.options.multiple&&this.$graph.addClass("mc-multiple"),this.options.hasCaption=!!this.$table.find("caption").length,this.ENABLED&&(this.apply(),this.options.applyOnInit||this.toggle()),this}};t.prototype.construct={},t.prototype.construct.thead=function(){var t=e("",{"class":"mc-thead"}),n=e("",{"class":"mc-tr"}),r="";return this.$table.find("th").each(function(t,n){r+='Numeric data can be shown as a simple bar chart. Grouped bars are used for multiple columns
++ | Department | Short Speeches | Long Speeches | + |--------------|----------------|---------------| + | Department 1 | 6 | 6 | + | Department 2 | 6 | 8 | + | Department 3 | 18 | 2 | + {barchart} ++
Stacked bars can be created. The final column is used to display the total.
++ | Department | Short Speeches | Long Speeches | Total | + |------------|----------------|---------------|-------| + | Dept 1 | 6 | 6 | 12 | + | Dept 2 | 6 | 8 | 14 | + | Dept 3 | 18 | 2 | 20 | + {barchart stacked} ++
Large graphs can be displayed compactly to save space.
++ | Department | Short Speeches | Long Speeches | + |--------------|----------------|---------------| + | Department 1 | 6 | 6 | + | Department 2 | 6 | 8 | + | Department 3 | 18 | 2 | + | Department 4 | 5 | 4 | + | Department 4 | 7 | 7 | + | Department 6 | 11 | 1 | + {barchart compact} ++
If you include negative values, you must indicate this.
++ | Department | Change in Number of Buildings | + |--------------|-------------------------------| + | Department 1 | -12 | + | Department 1 | 3 | + | Department 1 | -4 | + | Department 1 | 2 | + {barchart negative} ++
All effects can be combined.
+$CTA diff --git a/test/unit/helpers/govspeak_helper_test.rb b/test/unit/helpers/govspeak_helper_test.rb index 3e335a21ee7..45d2ec37d51 100644 --- a/test/unit/helpers/govspeak_helper_test.rb +++ b/test/unit/helpers/govspeak_helper_test.rb @@ -324,6 +324,28 @@ class GovspeakHelperTest < ActionView::TestCase end end + test 'will add a barchart class to a marked table' do + input = ' +|col| +|---| +|val| +{barchart} +' + html = govspeak_to_html(input) + assert_select_within_html html, "table.js-barchart-table" + end + + test 'will add a stacked, compact, negative barchart class to a marked table' do + input = ' +|col| +|---| +|val| +{barchart stacked compact negative} +' + html = govspeak_to_html(input) + assert_select_within_html html, "table.mc-stacked.js-barchart-table.mc-negative.compact" + end + private def internal_preview_host