diff --git a/CHANGELOG.md b/CHANGELOG.md index 786b4c1dd4..a3f7210de2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## 44.7.1 +* Adjust chart component options ([PR #4342](https://github.com/alphagov/govuk_publishing_components/pull/4342)) * Fix incorrect underline styles on share links ([PR #4337](https://github.com/alphagov/govuk_publishing_components/pull/4337)) * Set default font for component guide ([PR #4330](https://github.com/alphagov/govuk_publishing_components/pull/4330)) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss index 29ebcda790..f8b2a2b78e 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -41,27 +41,9 @@ } } -.gem-c-chart__minimal-link { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &:focus { - background: transparent; // overrides govuk-link background, which obscures the graph - - &::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-top: solid 1px $govuk-focus-colour; - border-left: solid 3px $govuk-focus-colour; - border-right: solid 3px $govuk-focus-colour; - box-sizing: border-box; - } +.gem-c-chart--padding { + .gem-c-chart__header, + .gem-c-chart__footer { + padding: 0 govuk-spacing(4); } } diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 468f7eff09..42c03725e7 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -13,10 +13,10 @@ keys ||= [] chart_overview ||= nil minimal ||= false - minimal_link ||= nil hide_legend ||= minimal link ||= false height ||= 400 + padding ||= false chart_id = "chart-id-#{SecureRandom.hex(4)}" table_id = "table-id-#{SecureRandom.hex(4)}" @@ -28,6 +28,7 @@ component_helper.add_class("gem-c-chart") component_helper.add_class(shared_helper.get_margin_bottom) component_helper.add_class("gem-c-chart--minimal") if minimal + component_helper.add_class("gem-c-chart--padding") if padding require "chartkick" Chartkick.options[:html] = '
' @@ -42,9 +43,6 @@ enableInteractivity = false if minimal textPosition = nil textPosition = 'none' if minimal - if minimal && !minimal_link - raise ArgumentError, "Minimal version must include a link" - end chart_library_options = { chartArea: { width: '80%', height: '60%' }, @@ -85,11 +83,13 @@ <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %> <%= tag.div(**component_helper.all_attributes) do %> <% if chart_heading && !minimal %> - <%= render "govuk_publishing_components/components/heading", { - text: chart_heading, - heading_level: chart_heading_level, - margin_bottom: 2, - } %> +
+ <%= render "govuk_publishing_components/components/heading", { + text: chart_heading, + heading_level: chart_heading_level, + margin_bottom: 2, + } %> +
<% end %> <% aria_attributes = { hidden: true } if minimal %> @@ -105,76 +105,73 @@ <% end %> <% unless minimal %> -
- <%= render("govuk_publishing_components/components/details", - title: t("components.chart.table_dropdown") - ) do %> -
- - <% if table_direction == "horizontal" %> - - - - <% keys.each do |key| %> - - <% end %> - - - - <% rows.each do |row| %> +
+
+ <%= render("govuk_publishing_components/components/details", + title: t("components.chart.table_dropdown") + ) do %> +
+
- <%= key %> -
+ <% if table_direction == "horizontal" %> + - - <% row[:values].each do |value| %> - + + <% keys.each do |key| %> + <% end %> - <% end %> - - <% else %> - - - + + <% rows.each do |row| %> - + + + <% row[:values].each do |value| %> + + <% end %> + <% end %> - - - - <% keys.each_with_index do |key, index| %> - - + + <% else %> + + + <% rows.each do |row| %> - + <% end %> - <% end %> - - <% end %> -
<%= row[:label] %> - <%= number_with_delimiter value %> - + <%= key %> +
- <%= row[:label] %> -
<%= row[:label] %> + <%= number_with_delimiter value %> +
- <%= key %> -
- <%= number_with_delimiter row[:values][index] %> - + <%= row[:label] %> +
-
+ + + <% keys.each_with_index do |key, index| %> + + + <%= key %> + + <% rows.each do |row| %> + + <%= number_with_delimiter row[:values][index] %> + + <% end %> + + <% end %> + + <% end %> + +
+ <% end %> + + + <% if link %> +

+ <%= link_to "Download chart data", link, class: "govuk-link" %> +

<% end %> - - <% if link %> -

- <%= link_to "Download chart data", link, class: "govuk-link" %> -

- <% end %> - <% end %> - <% if minimal %> - <%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %> - <%= chart_heading %> - <% end %> <% end %> <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml index f34b4d601b..6ee5d6096b 100644 --- a/app/views/govuk_publishing_components/components/docs/chart.yml +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -206,6 +206,42 @@ examples: - 118 - 85 - 80 + with_padding: + description: Moves the heading and items beneath the chart inwards. Useful where the chart is contained in an element where these items would otherwise touch the sides. + data: + chart_heading: Page views + h_axis_title: Day + v_axis_title: Views + padding: true + link: https://www.gov.uk + chart_overview: This is a graph of views per day + keys: + - 1st + - 2nd + - 3rd + - 4th + - 5th + - 6th + - 7th + rows: + - label: January 2015 + values: + - 5 + - 119 + - 74 + - 117 + - 33 + - 89 + - 79 + - label: January 2016 + values: + - 3 + - 8 + - 37 + - 82 + - 118 + - 85 + - 80 with_margin_bottom: description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a bottom margin of 15px. data: @@ -243,10 +279,11 @@ examples: - 80 minimal_version: description: | - The minimal version presents a simplified version of the chart and should only be used where the user is then directed to a more detailed view of the data. Specifically, minimal mode: + The minimal version presents a simplified version of the chart. This should only be used where there is not enough space to display a full chart, and the user is then given an option to see more information about the chart, for example by including a link next to the chart component. This must be part of the page, as this is not provided by the component itself. - - turns the chart into a link that should point to a page with a full version of the chart with all data - - hides the chart heading, but uses the text as the text for the link + Specifically, minimal mode: + + - hides the chart heading - removes the legend and X and Y axis values - removes the data table and link to the data (if supplied) beneath the chart - removes the part of the visually hidden accessibility message that links to the table @@ -257,7 +294,6 @@ examples: h_axis_title: Day v_axis_title: Views minimal: true - minimal_link: "https://www.gov.uk" chart_overview: This is a graph of views per day keys: - 1st @@ -296,7 +332,6 @@ examples: h_axis_title: Day v_axis_title: Views minimal: true - minimal_link: "https://www.gov.uk" chart_overview: This is a graph of views per day height: 200 keys: @@ -326,3 +361,4 @@ examples: - 118 - 85 - 80 + diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb index edca2521b2..9c7c1963a5 100644 --- a/spec/components/chart_spec.rb +++ b/spec/components/chart_spec.rb @@ -109,24 +109,15 @@ def component_name it "renders a minimal version" do data[:minimal] = true data[:link] = "https://should.not.be.shown" - data[:minimal_link] = "https://www.gov.uk" data[:chart_overview] = "This is a chart showing a rise in sea levels in the last ten years" render_component(data) assert_select ".gem-c-chart.gem-c-chart--minimal" assert_select ".gem-c-chart__chart[aria-hidden='true']" assert_select '.gem-c-chart .govuk-link[href="https://should.not.be.shown"]', false - assert_select '.gem-c-chart .gem-c-chart__minimal-link[href="https://www.gov.uk"]' assert_select ".gem-c-chart__chart .govuk-visually-hidden", false end - it "does not render a minimal version if a link is not supplied" do - data[:minimal] = true - expect { - render_component(data) - }.to raise_error("Minimal version must include a link") - end - it "only calls an external script once" do render_component(data) data[:classes] = "" # need to 'reset' this otherwise it carries from the first component and breaks shared_helper @@ -134,4 +125,11 @@ def component_name assert_select 'script[src="https://www.gstatic.com/charts/loader.js"]', count: 1 end + + it "renders a padded version" do + data[:padding] = true + render_component(data) + + assert_select ".gem-c-chart.gem-c-chart--padding" + end end