govuk_publishing_components 45.8.0 → 45.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|