govuk_publishing_components 44.7.1 → 44.8.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 +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
|
+
|