govuk_publishing_components 44.7.1 → 44.8.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 +4 -22
- data/app/views/govuk_publishing_components/components/_chart.html.erb +66 -69
- data/app/views/govuk_publishing_components/components/docs/chart.yml +41 -5
- 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: 7ab52bdafde388508fc9320c5e80c082b4dbab054ab60e7a3a27d8d7316539db
|
|
4
|
+
data.tar.gz: d1c2e9378fe4c8003521eb0be88c66d3caf0b7507e1e98b3d2f8b5eff4239c00
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ff49d2a9bc4233fcb74948d545e6c4247de0df292305785991fdf821071fdc049abac6e97ee223e90c28aec5da7c80af090ea2a8fdc95f0793f83a09c5287657
|
|
7
|
+
data.tar.gz: 53c3f73e9ac564fd541d58631fded9652ebf49d81515aa339ee32a352311849e03be52b75ea7f1b6f14a6e48fcd7cd424cbfbae70fe80b865b5219195caddd7b
|
|
@@ -41,27 +41,9 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
.gem-c-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
width: 100%;
|
|
49
|
-
height: 100%;
|
|
50
|
-
|
|
51
|
-
&:focus {
|
|
52
|
-
background: transparent; // overrides govuk-link background, which obscures the graph
|
|
53
|
-
|
|
54
|
-
&::after {
|
|
55
|
-
content: "";
|
|
56
|
-
position: absolute;
|
|
57
|
-
top: 0;
|
|
58
|
-
left: 0;
|
|
59
|
-
width: 100%;
|
|
60
|
-
height: 100%;
|
|
61
|
-
border-top: solid 1px $govuk-focus-colour;
|
|
62
|
-
border-left: solid 3px $govuk-focus-colour;
|
|
63
|
-
border-right: solid 3px $govuk-focus-colour;
|
|
64
|
-
box-sizing: border-box;
|
|
65
|
-
}
|
|
44
|
+
.gem-c-chart--padding {
|
|
45
|
+
.gem-c-chart__header,
|
|
46
|
+
.gem-c-chart__footer {
|
|
47
|
+
padding: 0 govuk-spacing(4);
|
|
66
48
|
}
|
|
67
49
|
}
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
keys ||= []
|
|
14
14
|
chart_overview ||= nil
|
|
15
15
|
minimal ||= false
|
|
16
|
-
minimal_link ||= nil
|
|
17
16
|
hide_legend ||= minimal
|
|
18
17
|
link ||= false
|
|
19
18
|
height ||= 400
|
|
19
|
+
padding ||= false
|
|
20
20
|
|
|
21
21
|
chart_id = "chart-id-#{SecureRandom.hex(4)}"
|
|
22
22
|
table_id = "table-id-#{SecureRandom.hex(4)}"
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
component_helper.add_class("gem-c-chart")
|
|
29
29
|
component_helper.add_class(shared_helper.get_margin_bottom)
|
|
30
30
|
component_helper.add_class("gem-c-chart--minimal") if minimal
|
|
31
|
+
component_helper.add_class("gem-c-chart--padding") if padding
|
|
31
32
|
|
|
32
33
|
require "chartkick"
|
|
33
34
|
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>'
|
|
@@ -42,9 +43,6 @@
|
|
|
42
43
|
enableInteractivity = false if minimal
|
|
43
44
|
textPosition = nil
|
|
44
45
|
textPosition = 'none' if minimal
|
|
45
|
-
if minimal && !minimal_link
|
|
46
|
-
raise ArgumentError, "Minimal version must include a link"
|
|
47
|
-
end
|
|
48
46
|
|
|
49
47
|
chart_library_options = {
|
|
50
48
|
chartArea: { width: '80%', height: '60%' },
|
|
@@ -85,11 +83,13 @@
|
|
|
85
83
|
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %>
|
|
86
84
|
<%= tag.div(**component_helper.all_attributes) do %>
|
|
87
85
|
<% if chart_heading && !minimal %>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
<div class="gem-c-chart__header">
|
|
87
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
88
|
+
text: chart_heading,
|
|
89
|
+
heading_level: chart_heading_level,
|
|
90
|
+
margin_bottom: 2,
|
|
91
|
+
} %>
|
|
92
|
+
</div>
|
|
93
93
|
<% end %>
|
|
94
94
|
|
|
95
95
|
<% aria_attributes = { hidden: true } if minimal %>
|
|
@@ -105,76 +105,73 @@
|
|
|
105
105
|
<% end %>
|
|
106
106
|
|
|
107
107
|
<% unless minimal %>
|
|
108
|
-
<div class="gem-c-
|
|
109
|
-
<%=
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<
|
|
117
|
-
<td class="govuk-table__cell"></td>
|
|
118
|
-
<% keys.each do |key| %>
|
|
119
|
-
<th class="govuk-table__header" scope="col">
|
|
120
|
-
<%= key %>
|
|
121
|
-
</th>
|
|
122
|
-
<% end %>
|
|
123
|
-
</tr>
|
|
124
|
-
</thead>
|
|
125
|
-
<tbody class="govuk-table__body">
|
|
126
|
-
<% rows.each do |row| %>
|
|
108
|
+
<div class="gem-c-chart__footer">
|
|
109
|
+
<div class="gem-c-chart__table" id="<%= table_id %>">
|
|
110
|
+
<%= render("govuk_publishing_components/components/details",
|
|
111
|
+
title: t("components.chart.table_dropdown")
|
|
112
|
+
) do %>
|
|
113
|
+
<div tabindex="0" class="gem-c-chart__table-wrapper">
|
|
114
|
+
<table class="govuk-table">
|
|
115
|
+
<% if table_direction == "horizontal" %>
|
|
116
|
+
<thead class="govuk-table__head">
|
|
127
117
|
<tr class="govuk-table__row">
|
|
128
|
-
<
|
|
129
|
-
<%
|
|
130
|
-
<
|
|
131
|
-
<%=
|
|
132
|
-
</
|
|
118
|
+
<td class="govuk-table__cell"></td>
|
|
119
|
+
<% keys.each do |key| %>
|
|
120
|
+
<th class="govuk-table__header" scope="col">
|
|
121
|
+
<%= key %>
|
|
122
|
+
</th>
|
|
133
123
|
<% end %>
|
|
134
124
|
</tr>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
<% else %>
|
|
138
|
-
<thead class="govuk-table__head">
|
|
139
|
-
<tr class="govuk-table__row">
|
|
140
|
-
<td class="govuk-table__cell"></td>
|
|
125
|
+
</thead>
|
|
126
|
+
<tbody class="govuk-table__body">
|
|
141
127
|
<% rows.each do |row| %>
|
|
142
|
-
<
|
|
143
|
-
|
|
144
|
-
|
|
128
|
+
<tr class="govuk-table__row">
|
|
129
|
+
<th class="govuk-table__header" scope="row"><%= row[:label] %></th>
|
|
130
|
+
<% row[:values].each do |value| %>
|
|
131
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
132
|
+
<%= number_with_delimiter value %>
|
|
133
|
+
</td>
|
|
134
|
+
<% end %>
|
|
135
|
+
</tr>
|
|
145
136
|
<% end %>
|
|
146
|
-
</
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
<th class="govuk-table__header" scope="row">
|
|
152
|
-
<%= key %>
|
|
153
|
-
</th>
|
|
137
|
+
</tbody>
|
|
138
|
+
<% else %>
|
|
139
|
+
<thead class="govuk-table__head">
|
|
140
|
+
<tr class="govuk-table__row">
|
|
141
|
+
<td class="govuk-table__cell"></td>
|
|
154
142
|
<% rows.each do |row| %>
|
|
155
|
-
<
|
|
156
|
-
<%=
|
|
157
|
-
</
|
|
143
|
+
<th class="govuk-table__header govuk-table__header--stacked" scope="row">
|
|
144
|
+
<%= row[:label] %>
|
|
145
|
+
</th>
|
|
158
146
|
<% end %>
|
|
159
147
|
</tr>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
148
|
+
</thead>
|
|
149
|
+
<tbody class="govuk-table__body">
|
|
150
|
+
<% keys.each_with_index do |key, index| %>
|
|
151
|
+
<tr>
|
|
152
|
+
<th class="govuk-table__header" scope="row">
|
|
153
|
+
<%= key %>
|
|
154
|
+
</th>
|
|
155
|
+
<% rows.each do |row| %>
|
|
156
|
+
<td class="govuk-table__cell govuk-table__cell--numeric">
|
|
157
|
+
<%= number_with_delimiter row[:values][index] %>
|
|
158
|
+
</td>
|
|
159
|
+
<% end %>
|
|
160
|
+
</tr>
|
|
161
|
+
<% end %>
|
|
162
|
+
</tbody>
|
|
163
|
+
<% end %>
|
|
164
|
+
</table>
|
|
165
|
+
</div>
|
|
166
|
+
<% end %>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<% if link %>
|
|
170
|
+
<p class="govuk-body">
|
|
171
|
+
<%= link_to "Download chart data", link, class: "govuk-link" %>
|
|
172
|
+
</p>
|
|
165
173
|
<% end %>
|
|
166
174
|
</div>
|
|
167
|
-
|
|
168
|
-
<% if link %>
|
|
169
|
-
<p class="govuk-body">
|
|
170
|
-
<%= link_to "Download chart data", link, class: "govuk-link" %>
|
|
171
|
-
</p>
|
|
172
|
-
<% end %>
|
|
173
|
-
<% end %>
|
|
174
|
-
<% if minimal %>
|
|
175
|
-
<%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %>
|
|
176
|
-
<span class="govuk-visually-hidden"><%= chart_heading %></span>
|
|
177
|
-
<% end %>
|
|
178
175
|
<% end %>
|
|
179
176
|
<% end %>
|
|
180
177
|
<% end %>
|
|
@@ -206,6 +206,42 @@ examples:
|
|
|
206
206
|
- 118
|
|
207
207
|
- 85
|
|
208
208
|
- 80
|
|
209
|
+
with_padding:
|
|
210
|
+
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.
|
|
211
|
+
data:
|
|
212
|
+
chart_heading: Page views
|
|
213
|
+
h_axis_title: Day
|
|
214
|
+
v_axis_title: Views
|
|
215
|
+
padding: true
|
|
216
|
+
link: https://www.gov.uk
|
|
217
|
+
chart_overview: This is a graph of views per day
|
|
218
|
+
keys:
|
|
219
|
+
- 1st
|
|
220
|
+
- 2nd
|
|
221
|
+
- 3rd
|
|
222
|
+
- 4th
|
|
223
|
+
- 5th
|
|
224
|
+
- 6th
|
|
225
|
+
- 7th
|
|
226
|
+
rows:
|
|
227
|
+
- label: January 2015
|
|
228
|
+
values:
|
|
229
|
+
- 5
|
|
230
|
+
- 119
|
|
231
|
+
- 74
|
|
232
|
+
- 117
|
|
233
|
+
- 33
|
|
234
|
+
- 89
|
|
235
|
+
- 79
|
|
236
|
+
- label: January 2016
|
|
237
|
+
values:
|
|
238
|
+
- 3
|
|
239
|
+
- 8
|
|
240
|
+
- 37
|
|
241
|
+
- 82
|
|
242
|
+
- 118
|
|
243
|
+
- 85
|
|
244
|
+
- 80
|
|
209
245
|
with_margin_bottom:
|
|
210
246
|
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.
|
|
211
247
|
data:
|
|
@@ -243,10 +279,11 @@ examples:
|
|
|
243
279
|
- 80
|
|
244
280
|
minimal_version:
|
|
245
281
|
description: |
|
|
246
|
-
The minimal version presents a simplified version of the chart
|
|
282
|
+
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.
|
|
247
283
|
|
|
248
|
-
|
|
249
|
-
|
|
284
|
+
Specifically, minimal mode:
|
|
285
|
+
|
|
286
|
+
- hides the chart heading
|
|
250
287
|
- removes the legend and X and Y axis values
|
|
251
288
|
- removes the data table and link to the data (if supplied) beneath the chart
|
|
252
289
|
- removes the part of the visually hidden accessibility message that links to the table
|
|
@@ -257,7 +294,6 @@ examples:
|
|
|
257
294
|
h_axis_title: Day
|
|
258
295
|
v_axis_title: Views
|
|
259
296
|
minimal: true
|
|
260
|
-
minimal_link: "https://www.gov.uk"
|
|
261
297
|
chart_overview: This is a graph of views per day
|
|
262
298
|
keys:
|
|
263
299
|
- 1st
|
|
@@ -296,7 +332,6 @@ examples:
|
|
|
296
332
|
h_axis_title: Day
|
|
297
333
|
v_axis_title: Views
|
|
298
334
|
minimal: true
|
|
299
|
-
minimal_link: "https://www.gov.uk"
|
|
300
335
|
chart_overview: This is a graph of views per day
|
|
301
336
|
height: 200
|
|
302
337
|
keys:
|
|
@@ -326,3 +361,4 @@ examples:
|
|
|
326
361
|
- 118
|
|
327
362
|
- 85
|
|
328
363
|
- 80
|
|
364
|
+
|