govuk_publishing_components 45.8.0 → 45.9.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +0 -7
- data/app/views/govuk_publishing_components/components/_chart.html.erb +66 -68
- data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +26 -23
- data/app/views/govuk_publishing_components/components/docs/chart.yml +20 -48
- data/app/views/govuk_publishing_components/components/docs/layout_footer.yml +7 -0
- data/lib/govuk_publishing_components/presenters/chart_helper.rb +6 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 14c4af4e8ba4264803e67952e87624883f62f6f079fa8e2b0b24a7d989dc496c
|
|
4
|
+
data.tar.gz: 74a997044718a86a19b65b099a85f8e38f3e86d6416416917e8ea929742e8bb5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ae66caf2ec9b4ba8692fab56ebf482ca9a410818e48c8c0c6e82e832dd11d809370c9a9cf2f1e87ae9fc63e3df943cd47a54650abe4bffbe0b158f6614d0450d
|
|
7
|
+
data.tar.gz: f78eb8ed3333b259bdcbe86a7b24f7e7e762f6bd212085fcb9af9d9229147f9285d845142a1918dd748f90a8d87e3abbebad04c7709d78ae18273058dd44685e
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
minimal ||= false
|
|
15
15
|
hide_heading ||= minimal
|
|
16
16
|
link ||= false
|
|
17
|
-
padding ||= false
|
|
18
17
|
|
|
19
18
|
chart_id = "chart-id-#{SecureRandom.hex(4)}"
|
|
20
19
|
table_id = "table-id-#{SecureRandom.hex(4)}"
|
|
@@ -27,7 +26,6 @@
|
|
|
27
26
|
component_helper.add_class("gem-c-chart")
|
|
28
27
|
component_helper.add_class(shared_helper.get_margin_bottom)
|
|
29
28
|
component_helper.add_class("gem-c-chart--minimal") if minimal
|
|
30
|
-
component_helper.add_class("gem-c-chart--padding") if padding
|
|
31
29
|
|
|
32
30
|
require "chartkick"
|
|
33
31
|
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>'
|
|
@@ -40,12 +38,14 @@
|
|
|
40
38
|
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %>
|
|
41
39
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
42
40
|
<% if chart_heading && !hide_heading %>
|
|
43
|
-
<div class="
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
41
|
+
<div class="govuk-grid-row">
|
|
42
|
+
<div class="govuk-grid-column-two-thirds">
|
|
43
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
44
|
+
text: chart_heading,
|
|
45
|
+
heading_level: chart_heading_level,
|
|
46
|
+
margin_bottom: 2,
|
|
47
|
+
} %>
|
|
48
|
+
</div>
|
|
49
49
|
</div>
|
|
50
50
|
<% end %>
|
|
51
51
|
|
|
@@ -74,76 +74,74 @@
|
|
|
74
74
|
<% end %>
|
|
75
75
|
|
|
76
76
|
<% unless minimal %>
|
|
77
|
-
<div class="gem-c-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
<
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<
|
|
77
|
+
<div class="gem-c-chart__table" id="<%= table_id %>">
|
|
78
|
+
<%= render("govuk_publishing_components/components/details",
|
|
79
|
+
title: t("components.chart.table_dropdown")
|
|
80
|
+
) do %>
|
|
81
|
+
<div tabindex="0" class="gem-c-chart__table-wrapper">
|
|
82
|
+
<table class="govuk-table">
|
|
83
|
+
<caption class="govuk-visually-hidden" id="<%= "data-table-caption-#{SecureRandom.hex(4)}" %>">
|
|
84
|
+
<%= t("components.chart.accessibility_heading", chart_heading: chart_heading) %>
|
|
85
|
+
</caption>
|
|
86
|
+
<% if table_direction == "horizontal" %>
|
|
87
|
+
<thead class="govuk-table__head">
|
|
88
|
+
<tr class="govuk-table__row">
|
|
89
|
+
<td class="govuk-table__cell"></td>
|
|
90
|
+
<% keys.each do |key| %>
|
|
91
|
+
<th class="govuk-table__header" scope="col">
|
|
92
|
+
<%= key %>
|
|
93
|
+
</th>
|
|
94
|
+
<% end %>
|
|
95
|
+
</tr>
|
|
96
|
+
</thead>
|
|
97
|
+
<tbody class="govuk-table__body">
|
|
98
|
+
<% rows.each do |row| %>
|
|
89
99
|
<tr class="govuk-table__row">
|
|
90
|
-
<
|
|
91
|
-
<%
|
|
92
|
-
<
|
|
93
|
-
<%=
|
|
94
|
-
</
|
|
100
|
+
<th class="govuk-table__header" scope="row"><%= row[:label] %></th>
|
|
101
|
+
<% row[:values].each do |value| %>
|
|
102
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
103
|
+
<%= number_with_delimiter value %>
|
|
104
|
+
</td>
|
|
95
105
|
<% end %>
|
|
96
106
|
</tr>
|
|
97
|
-
|
|
98
|
-
|
|
107
|
+
<% end %>
|
|
108
|
+
</tbody>
|
|
109
|
+
<% else %>
|
|
110
|
+
<thead class="govuk-table__head">
|
|
111
|
+
<tr class="govuk-table__row">
|
|
112
|
+
<td class="govuk-table__cell"></td>
|
|
99
113
|
<% rows.each do |row| %>
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
104
|
-
<%= number_with_delimiter value %>
|
|
105
|
-
</td>
|
|
106
|
-
<% end %>
|
|
107
|
-
</tr>
|
|
114
|
+
<th class="govuk-table__header govuk-table__header--stacked" scope="row">
|
|
115
|
+
<%= row[:label] %>
|
|
116
|
+
</th>
|
|
108
117
|
<% end %>
|
|
109
|
-
</
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
118
|
+
</tr>
|
|
119
|
+
</thead>
|
|
120
|
+
<tbody class="govuk-table__body">
|
|
121
|
+
<% keys.each_with_index do |key, index| %>
|
|
122
|
+
<tr>
|
|
123
|
+
<th class="govuk-table__header" scope="row">
|
|
124
|
+
<%= key %>
|
|
125
|
+
</th>
|
|
114
126
|
<% rows.each do |row| %>
|
|
115
|
-
<
|
|
116
|
-
<%= row[:
|
|
117
|
-
</
|
|
127
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
128
|
+
<%= number_with_delimiter row[:values][index] %>
|
|
129
|
+
</td>
|
|
118
130
|
<% end %>
|
|
119
131
|
</tr>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<%= key %>
|
|
126
|
-
</th>
|
|
127
|
-
<% rows.each do |row| %>
|
|
128
|
-
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
129
|
-
<%= number_with_delimiter row[:values][index] %>
|
|
130
|
-
</td>
|
|
131
|
-
<% end %>
|
|
132
|
-
</tr>
|
|
133
|
-
<% end %>
|
|
134
|
-
</tbody>
|
|
135
|
-
<% end %>
|
|
136
|
-
</table>
|
|
137
|
-
</div>
|
|
138
|
-
<% end %>
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
<% if link %>
|
|
142
|
-
<p class="govuk-body">
|
|
143
|
-
<%= link_to "Download chart data", link, class: "govuk-link" %>
|
|
144
|
-
</p>
|
|
132
|
+
<% end %>
|
|
133
|
+
</tbody>
|
|
134
|
+
<% end %>
|
|
135
|
+
</table>
|
|
136
|
+
</div>
|
|
145
137
|
<% end %>
|
|
146
138
|
</div>
|
|
139
|
+
|
|
140
|
+
<% if link %>
|
|
141
|
+
<p class="govuk-body">
|
|
142
|
+
<%= link_to "Download chart data", link, class: "govuk-link" %>
|
|
143
|
+
</p>
|
|
144
|
+
<% end %>
|
|
147
145
|
<% end %>
|
|
148
146
|
<% end %>
|
|
149
147
|
<% end %>
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
meta ||= []
|
|
5
5
|
navigation ||= []
|
|
6
6
|
with_border ||= false
|
|
7
|
+
hide_licence ||= false
|
|
7
8
|
layout_footer_helper = GovukPublishingComponents::Presenters::LayoutFooterHelper.new(navigation, meta)
|
|
8
9
|
absolute_links_helper = GovukPublishingComponents::Presenters::AbsoluteLinksHelper.new()
|
|
9
10
|
|
|
@@ -95,29 +96,31 @@
|
|
|
95
96
|
<% end %>
|
|
96
97
|
</ul>
|
|
97
98
|
<% end %>
|
|
98
|
-
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
"
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
99
|
+
<% unless hide_licence %>
|
|
100
|
+
<svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
|
|
101
|
+
<path
|
|
102
|
+
fill="currentColor"
|
|
103
|
+
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
|
|
104
|
+
/>
|
|
105
|
+
</svg>
|
|
106
|
+
<% # this is to avoid having hardcoded data attributes in locale files %>
|
|
107
|
+
<span
|
|
108
|
+
class="govuk-footer__licence-description"
|
|
109
|
+
data-ga4-track-links-only
|
|
110
|
+
data-ga4-link="<%= {
|
|
111
|
+
"event_name": "navigation",
|
|
112
|
+
"section": "Licence",
|
|
113
|
+
"index_section": layout_footer_helper.ga4_ogl_link_index_section.to_s,
|
|
114
|
+
"index_link": "1",
|
|
115
|
+
"index_section_count": layout_footer_helper.ga4_index_section_count.to_s,
|
|
116
|
+
"text": "Open Government Licence v3.0",
|
|
117
|
+
"index_total": "1",
|
|
118
|
+
"type": "footer",
|
|
119
|
+
}.to_json %>"
|
|
120
|
+
>
|
|
121
|
+
<%= t("components.layout_footer.licence_html") %>
|
|
122
|
+
</span>
|
|
123
|
+
<% end %>
|
|
121
124
|
</div>
|
|
122
125
|
<% # this is to avoid having hardcoded data attributes in locale files %>
|
|
123
126
|
<div
|
|
@@ -18,7 +18,7 @@ uses_component_wrapper_helper: true
|
|
|
18
18
|
examples:
|
|
19
19
|
default:
|
|
20
20
|
data:
|
|
21
|
-
chart_heading:
|
|
21
|
+
chart_heading: Chart showing page views on the website in January 2015
|
|
22
22
|
h_axis_title: Day
|
|
23
23
|
v_axis_title: Views
|
|
24
24
|
chart_overview: This chart shows page views for January 2015.
|
|
@@ -208,12 +208,20 @@ examples:
|
|
|
208
208
|
- 1
|
|
209
209
|
- 2
|
|
210
210
|
format_axis_labels:
|
|
211
|
-
description:
|
|
211
|
+
description: |
|
|
212
|
+
Axis labels can be forced into date or currency format as shown.
|
|
213
|
+
|
|
214
|
+
'currency' will add a currency symbol (£) at the start of the labels.
|
|
215
|
+
|
|
216
|
+
'percent' will add a percent (%) to the end of the labels.
|
|
217
|
+
|
|
218
|
+
'date' will force a standard date format of `YYYY-MM-DD` to the labels, where they are in an undesirable date format. This can be useful if there are a lot of labels on the axes because the chart can do strange truncation sometimes.
|
|
212
219
|
data:
|
|
213
|
-
chart_heading:
|
|
220
|
+
chart_heading: Cost per day
|
|
214
221
|
h_axis_title: Day
|
|
215
|
-
v_axis_title:
|
|
216
|
-
chart_overview: This chart shows
|
|
222
|
+
v_axis_title: Cost
|
|
223
|
+
chart_overview: This chart shows cost per day.
|
|
224
|
+
v_axis_format: currency
|
|
217
225
|
h_axis_format: date
|
|
218
226
|
keys:
|
|
219
227
|
- 2024 Jan 1
|
|
@@ -223,14 +231,14 @@ examples:
|
|
|
223
231
|
- 2024 Jan 5
|
|
224
232
|
- 2024 Jan 6
|
|
225
233
|
rows:
|
|
226
|
-
- label:
|
|
234
|
+
- label: Cost
|
|
227
235
|
values:
|
|
228
|
-
-
|
|
229
|
-
-
|
|
230
|
-
-
|
|
231
|
-
-
|
|
232
|
-
-
|
|
233
|
-
-
|
|
236
|
+
- 14
|
|
237
|
+
- 29
|
|
238
|
+
- 45
|
|
239
|
+
- 63
|
|
240
|
+
- 54
|
|
241
|
+
- 22
|
|
234
242
|
vertical table:
|
|
235
243
|
description: Reorient the table to better suit the output of some data sets.
|
|
236
244
|
data:
|
|
@@ -410,42 +418,6 @@ examples:
|
|
|
410
418
|
- 118
|
|
411
419
|
- 85
|
|
412
420
|
- 80
|
|
413
|
-
with_padding:
|
|
414
|
-
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.
|
|
415
|
-
data:
|
|
416
|
-
chart_heading: Page views
|
|
417
|
-
h_axis_title: Day
|
|
418
|
-
v_axis_title: Views
|
|
419
|
-
padding: true
|
|
420
|
-
link: https://www.gov.uk
|
|
421
|
-
chart_overview: This is a graph of views per day
|
|
422
|
-
keys:
|
|
423
|
-
- 1st
|
|
424
|
-
- 2nd
|
|
425
|
-
- 3rd
|
|
426
|
-
- 4th
|
|
427
|
-
- 5th
|
|
428
|
-
- 6th
|
|
429
|
-
- 7th
|
|
430
|
-
rows:
|
|
431
|
-
- label: January 2015
|
|
432
|
-
values:
|
|
433
|
-
- 5
|
|
434
|
-
- 119
|
|
435
|
-
- 74
|
|
436
|
-
- 117
|
|
437
|
-
- 33
|
|
438
|
-
- 89
|
|
439
|
-
- 79
|
|
440
|
-
- label: January 2016
|
|
441
|
-
values:
|
|
442
|
-
- 3
|
|
443
|
-
- 8
|
|
444
|
-
- 37
|
|
445
|
-
- 82
|
|
446
|
-
- 118
|
|
447
|
-
- 85
|
|
448
|
-
- 80
|
|
449
421
|
with_margin_bottom:
|
|
450
422
|
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.
|
|
451
423
|
data:
|
|
@@ -169,3 +169,10 @@ examples:
|
|
|
169
169
|
text: Rhestr o Wasanaethau Cymraeg
|
|
170
170
|
- href: '/government/organisations/government-digital-service'
|
|
171
171
|
text: Government Digital Service
|
|
172
|
+
|
|
173
|
+
without_licence_details:
|
|
174
|
+
description: |
|
|
175
|
+
In some limited circumstances (for example, in backend-facing admin systems) it doesn't make
|
|
176
|
+
sense to show the licence information. This can be hidden by setting `hide_licence` to `true`.
|
|
177
|
+
data:
|
|
178
|
+
hide_licence: true
|
|
@@ -19,8 +19,14 @@ module GovukPublishingComponents
|
|
|
19
19
|
@y_axis_view_window_min = "auto" if options[:y_axis_auto_adjust]
|
|
20
20
|
@line_colours = options[:line_colours]
|
|
21
21
|
@line_styles = options[:line_styles]
|
|
22
|
+
|
|
22
23
|
@h_axis_format = "YYYY-MM-dd" if options[:h_axis_format] == "date"
|
|
24
|
+
@h_axis_format = "£#" if options[:h_axis_format] == "currency"
|
|
25
|
+
@h_axis_format = "#'\%'" if options[:h_axis_format] == "percent"
|
|
26
|
+
|
|
23
27
|
@v_axis_format = "YYYY-MM-dd" if options[:v_axis_format] == "date"
|
|
28
|
+
@v_axis_format = "£#" if options[:v_axis_format] == "currency"
|
|
29
|
+
@v_axis_format = "#'\%'" if options[:v_axis_format] == "percent"
|
|
24
30
|
end
|
|
25
31
|
|
|
26
32
|
# config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
|