Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust chart component options #4342

Merged
merged 3 commits into from
Oct 25, 2024
Merged

Adjust chart component options #4342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5916bbd
Remove link from minimal
andysellick Oct 25, 2024
810553d
Add padding option to chart
andysellick Oct 25, 2024
e5b481a
Update changelog
andysellick Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))

Expand Down
26 changes: 4 additions & 22 deletions app/assets/stylesheets/govuk_publishing_components/components/_chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
135 changes: 66 additions & 69 deletions app/views/govuk_publishing_components/components/_chart.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}"
Expand All @@ -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] = '<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>'
Expand All @@ -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%' },
Expand Down Expand Up @@ -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,
} %>
<div class="gem-c-chart__header">
<%= render "govuk_publishing_components/components/heading", {
text: chart_heading,
heading_level: chart_heading_level,
margin_bottom: 2,
} %>
</div>
<% end %>

<% aria_attributes = { hidden: true } if minimal %>
Expand All @@ -105,76 +105,73 @@
<% end %>

<% unless minimal %>
<div class="gem-c-chart__table" id="<%= table_id %>">
<%= 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">
<% if table_direction == "horizontal" %>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<td class="govuk-table__cell"></td>
<% keys.each do |key| %>
<th class="govuk-table__header" scope="col">
<%= key %>
</th>
<% end %>
</tr>
</thead>
<tbody class="govuk-table__body">
<% rows.each do |row| %>
<div class="gem-c-chart__footer">
<div class="gem-c-chart__table" id="<%= table_id %>">
<%= 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">
<% if table_direction == "horizontal" %>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row"><%= row[:label] %></th>
<% row[:values].each do |value| %>
<td class="govuk-table__cell govuk-table__cell--numeric">
<%= number_with_delimiter value %>
</td>
<td class="govuk-table__cell"></td>
<% keys.each do |key| %>
<th class="govuk-table__header" scope="col">
<%= key %>
</th>
<% end %>
</tr>
<% end %>
</tbody>
<% else %>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<td class="govuk-table__cell"></td>
</thead>
<tbody class="govuk-table__body">
<% rows.each do |row| %>
<th class="govuk-table__header govuk-table__header--stacked" scope="row">
<%= row[:label] %>
</th>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row"><%= row[:label] %></th>
<% row[:values].each do |value| %>
<td class="govuk-table__cell govuk-table__cell--numeric">
<%= number_with_delimiter value %>
</td>
<% end %>
</tr>
<% end %>
</tr>
</thead>
<tbody class="govuk-table__body">
<% keys.each_with_index do |key, index| %>
<tr>
<th class="govuk-table__header" scope="row">
<%= key %>
</th>
</tbody>
<% else %>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<td class="govuk-table__cell"></td>
<% rows.each do |row| %>
<td class="govuk-table__cell govuk-table__cell--numeric">
<%= number_with_delimiter row[:values][index] %>
</td>
<th class="govuk-table__header govuk-table__header--stacked" scope="row">
<%= row[:label] %>
</th>
<% end %>
</tr>
<% end %>
</tbody>
<% end %>
</table>
</div>
</thead>
<tbody class="govuk-table__body">
<% keys.each_with_index do |key, index| %>
<tr>
<th class="govuk-table__header" scope="row">
<%= key %>
</th>
<% rows.each do |row| %>
<td class="govuk-table__cell govuk-table__cell--numeric">
<%= number_with_delimiter row[:values][index] %>
</td>
<% end %>
</tr>
<% end %>
</tbody>
<% end %>
</table>
</div>
<% end %>
</div>

<% if link %>
<p class="govuk-body">
<%= link_to "Download chart data", link, class: "govuk-link" %>
</p>
<% end %>
</div>

<% if link %>
<p class="govuk-body">
<%= link_to "Download chart data", link, class: "govuk-link" %>
</p>
<% end %>
<% end %>
<% if minimal %>
<%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %>
<span class="govuk-visually-hidden"><%= chart_heading %></span>
<% end %>
<% end %>
<% end %>
<% end %>
46 changes: 41 additions & 5 deletions app/views/govuk_publishing_components/components/docs/chart.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -326,3 +361,4 @@ examples:
- 118
- 85
- 80

16 changes: 7 additions & 9 deletions spec/components/chart_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,29 +109,27 @@ 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
render_component(data)

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
Loading