Further improvements

- clean up, reorder and remove redundant code
- fix table vertical option
- add heading element
- minimise and simplify component options
- add option for a chart overview description
- add option to hide legend
- remove unnecessary use of govspeak to wrap a visually hidden element
- remove unneed styles
- add tests, expand and clean up documentation

app/assets/stylesheets/govuk_publishing_components/components/_chart.scss

@@ -24,23 +24,6 @@
   @include govuk-visually-hidden;
 }
 
-// This breaks our BEM markup but is injected by the charting library and can't be avoided
-// stylelint-disable selector-max-id
-.gem-c-chart {
-  @include govuk-media-query($from: mobile) {
-    #chart-1,
-    #chart-2,
-    #chart-3,
-    #chart-4,
-    #chart-5,
-    #chart-6,
-    #chart-7 {
-      height: 400px;
-    }
-  }
-}
-// stylelint-enable selector-max-id
-
 // stylelint-disable declaration-no-important
 .google-visualization-tooltip {
   background-color: #000000 !important;

app/views/govuk_publishing_components/components/_chart.html.erb

@@ -2,77 +2,50 @@
   add_gem_component_stylesheet("chart")
   add_gem_component_stylesheet("table")
   add_gem_component_stylesheet("details")
-  require "chartkick"
+  add_gem_component_stylesheet("heading")
 
-  chart_id ||= false
-  chart_label ||= "data"
-  chart_width ||= "90%"
-  table_id ||= false
+  chart_heading ||= nil
+  chart_heading_level ||= 2
   table_direction ||= "horizontal"
-  chart_title ||= nil
   h_axis_title ||= nil
   v_axis_title ||= nil
-  from ||= false
-  to ||= false
-  percent_metric ||= false
   rows ||= []
   keys ||= []
+  chart_overview ||= nil
+  hide_legend ||= false
 
-  # http://strftime.org/
-  Date::DATE_FORMATS[:table_format] = '%-d %b %Y'
-
-  # https://developers.google.com/chart/interactive/docs/reference#dateformatter
-  chart_date_format = 'd MMM Y'
-
-  if percent_metric
-    maximum_y = 100
-  elsif rows.any?
-    row_maximums = rows.map { |row| row[:values].compact.max }
-    overall_maximum = row_maximums.max
+  chart_id = "chart-id-#{SecureRandom.hex(4)}"
+  table_id = "table-id-#{SecureRandom.hex(4)}"
 
-    if overall_maximum == 0
-      # set max value to 3 if data is all 0 avoid negative numbers on Y axis
-      maximum_y = 3
-    elsif overall_maximum < 10
-      # for low numbers let line hit top to avoid a fractional max value
-      maximum_y = overall_maximum
-    else
-      # for higher numbers give breathing space to line
-      maximum_y = overall_maximum * 1.3
-
-      if overall_maximum > 99999
-        chart_width = "80%"
-      end
-    end
-  end
-
-  Chartkick.options[:html] = '<div id="%{id}"><noscript><p>Our charts are built using javascript but all the data is also available in the table.</p></noscript></div>'
+  require "chartkick"
+  Chartkick.options[:html] = '<div id="%{id}"><noscript><p class="govuk-body">Our charts are built using JavaScript but all the data is also available in the table below.</p></noscript></div>'
   # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
+  font_16 = { color: '#000', fontName: 'GDS Transport', fontSize: '16', italic: false }
+  font_19 = { color: '#000', fontName: 'GDS Transport', fontSize: '19', italic: false }
+  legend = 'none'
+  legend = { position: 'top', textStyle: font_16 } unless hide_legend
+
   chart_library_options = {
-    title: chart_title,
-    legend: {
-      position: 'bottom',
-      textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' },
-    },
-    chartArea: { width: chart_width, height: '70%' },
-    curveType: 'none',
+    chartArea: { width: '80%', height: '60%' },
     tooltip: { showColorCode: true, isHtml: true, trigger: 'both'},
     crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' },
-    loading: "Loading...",
+    legend: legend,
+    pointSize: 10,
+    height: 400,
     hAxis: {
-      viewWindow: { min: from, max: to },
-      textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' },
-      format: chart_date_format,
-      title: h_axis_title
+      textStyle: font_16,
+      format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter
+      title: h_axis_title,
+      titleTextStyle: font_19,
     },
     vAxis: {
-      viewWindow: { min: 0, max: maximum_y },
       format: '#,###,###',
-      textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' },
-      title: v_axis_title
+      textStyle: font_16,
+      title: v_axis_title,
+      titleTextStyle: font_19,
     },
-    pointSize: 10,
   }
+
   if rows.length > 0 && keys.length > 0
     chart_format_data = rows.map do |row|
       {
@@ -83,22 +56,28 @@
     end
   end
 %>
-<% if rows.length > 0 && keys.length > 0 && chart_id && table_id %>
+<% if rows.length > 0 && keys.length > 0 %>
   <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
   <div class="gem-c-chart">
+    <% if chart_heading %>
+      <%= render "govuk_publishing_components/components/heading", {
+        text: chart_heading,
+        heading_level: chart_heading_level,
+        margin_bottom: 2,
+      } %>
+    <% end %>
+
     <div class="gem-c-chart__chart" id="<%= chart_id %>">
-      <%= render "govuk_publishing_components/components/govspeak" do %>
-        <div class="gem-c-chart__accessibility-message">
-          The chart is a visual representation of the data available
-          in the <a href="#<%= table_id %>">table</a>.
-        </div>
-      <% end %>
+      <div class="gem-c-chart__accessibility-message">
+        This chart is a visual representation of the data available in the <a href="#<%= table_id %>">table</a>.
+        <%= content_tag :span, chart_overview, class: "gem-c-chart__overview" if chart_overview %>
+      </div>
       <%= line_chart(chart_format_data, library: chart_library_options) %>
     </div>
+
     <div class="gem-c-chart__table" id="<%= table_id %>">
-      <%= render(
-        "govuk_publishing_components/components/details",
-        title: t("components.chart.table_dropdown", metric_name: chart_label)
+      <%= render("govuk_publishing_components/components/details",
+        title: t("components.chart.table_dropdown")
       ) do %>
         <div tabindex="0" class="gem-c-chart__table-wrapper">
           <table class="govuk-table">