From 3ffdb83f8a6503540468fa5a6005fa1f30973229 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 11 Oct 2024 11:55:57 +0100 Subject: [PATCH 01/12] Add chart component - copy of code from content-data-admin, with the following adjustments - added explicit `require "chartkick"` in template to prevent error - added template calls to include required stylesheets for chart, table and details component - modified output of keys to simply output key, previously was doing `key.to_formatted_s(:table_format)` expecting a date, to convert it into a slightly more human readable format, but this was erroring, so simply outputting the key, adjusted test to match - renamed class from `app-c-` to `gem-c-` - replaced instances of 14 font to 16, in line with Design System guidance - reordered some of the Sass so `@include` lines come at the end of declarations, to avoid Sass compilation warnings - modified test slightly to fit format of the gem tests --- Gemfile.lock | 2 + .../components/chart.js | 1 + .../components/_chart.scss | 97 +++++++++++ .../components/_chart.html.erb | 153 ++++++++++++++++++ .../components/docs/chart.yml | 109 +++++++++++++ config/locales/en.yml | 2 + govuk_publishing_components.gemspec | 1 + package.json | 2 + spec/components/chart_spec.rb | 79 +++++++++ .../app_helpers/asset_helper_spec.rb | 2 +- yarn.lock | 31 ++++ 11 files changed, 478 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/govuk_publishing_components/components/chart.js create mode 100644 app/assets/stylesheets/govuk_publishing_components/components/_chart.scss create mode 100644 app/views/govuk_publishing_components/components/_chart.html.erb create mode 100644 app/views/govuk_publishing_components/components/docs/chart.yml create mode 100644 spec/components/chart_spec.rb diff --git a/Gemfile.lock b/Gemfile.lock index e25748bf33..738915a32d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -2,6 +2,7 @@ PATH remote: . specs: govuk_publishing_components (44.3.0) + chartkick govuk_app_config govuk_personalisation (>= 0.7.0) kramdown @@ -103,6 +104,7 @@ GEM rack-test (>= 0.6.3) regexp_parser (>= 1.5, < 3.0) xpath (~> 3.2) + chartkick (5.1.0) coderay (1.1.3) concurrent-ruby (1.3.4) connection_pool (2.4.1) diff --git a/app/assets/javascripts/govuk_publishing_components/components/chart.js b/app/assets/javascripts/govuk_publishing_components/components/chart.js new file mode 100644 index 0000000000..3d6a6c49b1 --- /dev/null +++ b/app/assets/javascripts/govuk_publishing_components/components/chart.js @@ -0,0 +1 @@ +//= require chartkick diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss new file mode 100644 index 0000000000..cf953a49de --- /dev/null +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -0,0 +1,97 @@ +@import "govuk_publishing_components/individual_component_support"; + +.gem-c-chart__table-wrapper { + overflow: auto; +} + +.gem-c-chart__table { + max-height: 300px; + margin-top: govuk-spacing(3); + + @include govuk-media-query($from: mobile) { + max-height: 250px; + } + + .govuk-details__summary-text { + @include govuk-font(16); + } + + .govuk-table { + width: auto; + } + + .govuk-table .govuk-table__header { + border: none; + background-color: govuk-colour("white"); + text-align: center; + min-width: 4em; + @include govuk-font($size: 16, $weight: bold); + } + + .govuk-table .govuk-table__body .govuk-table__cell { + border-top: 1px solid #000000; + @include govuk-font(16); + } + + .govuk-table .govuk-table__cell { + border: 0; + text-align: center; + @include govuk-font(16); + } + + .govuk-table__header--stacked { + max-width: 15%; + } + + .govuk-table__header--stacked[scope="row"] { + max-width: 20%; + } +} + +.gem-c-chart__accessibility-message { + @include govuk-visually-hidden; +} + +// This breaks our BEM markup but is injected by the charting library and can't be avoided +// stylelint-disable selector-max-id +.gem-c-chart { + #chart-1, + #chart-2, + #chart-3, + #chart-4, + #chart-5, + #chart-6, + #chart-7 { + height: 250px; + } + + @include govuk-media-query($from: mobile) { + #chart-1, + #chart-2, + #chart-3, + #chart-4, + #chart-5, + #chart-6, + #chart-7 { + height: 250px; + } + } +} +// stylelint-enable selector-max-id + +// stylelint-disable declaration-no-important +.google-visualization-tooltip { + background-color: #000000 !important; + opacity: .95; + + span { + color: govuk-colour("white") !important; + font-family: nta, Arial, sans-serif !important; + font-size: 14px !important; + } + + .google-visualization-tooltip-square { + border-bottom: none !important; + } +} +// stylelint-enable declaration-no-important diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb new file mode 100644 index 0000000000..67d02cdaf2 --- /dev/null +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -0,0 +1,153 @@ +<% + add_gem_component_stylesheet("chart") + add_gem_component_stylesheet("table") + add_gem_component_stylesheet("details") + require "chartkick" + + chart_id ||= false + chart_label ||= "data" + chart_width ||= "90%" + table_id ||= false + table_direction ||= "horizontal" + from ||= false + to ||= false + percent_metric ||= false + rows ||= [] + keys ||= [] + + # http://strftime.org/ + Date::DATE_FORMATS[:table_format] = '%-d %b %Y' + + # https://developers.google.com/chart/interactive/docs/reference#dateformatter + chart_date_format = 'd MMM Y' + + if percent_metric + maximum_y = 100 + elsif rows.any? + row_maximums = rows.map { |row| row[:values].compact.max } + overall_maximum = row_maximums.max + + if overall_maximum == 0 + # set max value to 3 if data is all 0 avoid negative numbers on Y axis + maximum_y = 3 + elsif overall_maximum < 10 + # for low numbers let line hit top to avoid a fractional max value + maximum_y = overall_maximum + else + # for higher numbers give breathing space to line + maximum_y = overall_maximum * 1.3 + + if overall_maximum > 99999 + chart_width = "80%" + end + end + end + + Chartkick.options[:html] = '
' + # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart + chart_library_options = { + legend: 'none', + chartArea: { width: chart_width, height: '85%' }, + curveType: 'none', + tooltip: { showColorCode: true, isHtml: true, trigger: 'both'}, + crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' }, + hAxis: { + viewWindow: { min: from, max: to }, + textStyle: { color: '#000', fontName: 'nta', fontSize: '12' }, + format: chart_date_format + }, + vAxis: { + viewWindow: { min: 0, max: maximum_y }, + format: '#,###,###', + textStyle: { color: '#000', fontName: 'nta', fontSize: '12' } + }, + pointSize: 0, + series: { + 0 => { lineWidth: 2, color: '#2b8cc4' }, + 1 => { lineWidth: 2, lineDashStyle: [10, 2], color: '#454a4c' } + } + } + if rows.length > 0 && keys.length > 0 + chart_format_data = rows.map do |row| + { + name: row[:label], + linewidth: 10, + data: keys.zip(row[:values]) + } + end + end +%> +<% if rows.length > 0 && keys.length > 0 && chart_id && table_id %> + <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %> +
+
+ <%= render "govuk_publishing_components/components/govspeak" do %> +
+ The chart is a visual representation of the data available + in the table. +
+ <% end %> + <%= line_chart(chart_format_data, library: chart_library_options) %> +
+
+ <%= render( + "govuk_publishing_components/components/details", + title: t("components.chart.table_dropdown", metric_name: chart_label) + ) do %> +
+ + <% if table_direction == "horizontal" %> + + + + <% keys.each do |key| %> + + <% end %> + + + + <% rows.each do |row| %> + + + <% row[:values].each do |value| %> + + <% end %> + + <% end %> + + <% else %> + + + + <% rows.each do |row| %> + + <% end %> + + + + <% keys.each_with_index do |key, index| %> + + + <% rows.each do |row| %> + + <% end %> + + <% end %> + + <% end %> +
+ <%= key %> +
<%= row[:label] %> + <%= number_with_delimiter value %> +
+ <%= row[:label] %> +
+ <%= key %> + + <%= number_with_delimiter row[:values][index] %> +
+
+ <% end %> +
+
+<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml new file mode 100644 index 0000000000..161211124f --- /dev/null +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -0,0 +1,109 @@ +name: "Chart" +description: "The chart component presents a data chart and a tabular version of the same data" +part_of_admin_layout: true +body: | + This component takes a single set of data and presents it in a line graph and a table with one or more rows and lines. + At mobile width the two are presented sequentially, and on wider screens they are presented in tabs the user can switch + between. The chart relies chartkick and renders using javascript, so the table is provided as a fallback for a lack of javascript, + an accessible view on the data for screenreaders, and a simple view of the raw data for all users. + +accessibility_criteria: | + - Tabs must: + - have meaningful titles + - follow the link accessibility criteria + - Tab contents must + - have meaningful captions + - Charts must: + - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA + +shared_accessibility_criteria: + - link + +examples: + default: + data: + caption: 'Unique page views in February' + h_axis_title: "Day" + v_axis_title: "Views" + chart_id: 'pviews_chart' + table_id: 'pviews_table' + chart_title: 'Page views chart' + table_title: 'Page views table' + keys: + - "1st" + - "2nd" + - "3rd" + - "4th" + rows: + - label: "January 2015" + values: + - 5 + - 119 + - 74 + - 117 + + two rows of data: + data: + caption: 'Unique page views in February' + h_axis_title: "Day" + v_axis_title: "Views" + chart_id: 'second_pviews_chart' + table_id: 'second_pviews_table' + chart_title: 'Page views chart' + table_title: 'Page views table' + keys: + - "1st" + - "2nd" + - "3rd" + - "4th" + rows: + - label: "January 2015" + values: + - 5 + - 119 + - 74 + - 117 + - label: "January 2016" + values: + - 3 + - 8 + - 37 + - 82 + + horizontal table: + data: + caption: 'Unique page views in February' + table_direction: "horizontal" + h_axis_title: "Day" + v_axis_title: "Views" + chart_id: 'third_pviews_chart' + table_id: 'third_pviews_table' + chart_title: 'Page views chart' + table_title: 'Page views table' + 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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 3664b609bc..47b5c09a5f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -32,6 +32,8 @@ en: type: characters: characters words: words + chart: + table_dropdown: '%{metric_name} table' chat_entry: heading: Try GOV.UK Chat description: Sign up to GOV.UK’s experimental new AI tool and find answers to your business questions diff --git a/govuk_publishing_components.gemspec b/govuk_publishing_components.gemspec index 5ba588b936..946bc56d0c 100644 --- a/govuk_publishing_components.gemspec +++ b/govuk_publishing_components.gemspec @@ -16,6 +16,7 @@ Gem::Specification.new do |s| s.files = Dir["{node_modules/accessible-autocomplete,node_modules/govuk-frontend,node_modules/axe-core,node_modules/sortablejs,node_modules/govuk-single-consent,app,config,db,lib}/**/*", "LICENCE.md", "README.md"] + s.add_dependency "chartkick" s.add_dependency "govuk_app_config" s.add_dependency "govuk_personalisation", ">= 0.7.0" s.add_dependency "kramdown" diff --git a/package.json b/package.json index 2df588dca7..a26bc422c9 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "dependencies": { "accessible-autocomplete": "^3.0.1", "axe-core": "^4.10.0", + "chart.js": "^4.4.4", + "chartkick": "^5.0.1", "govuk-frontend": "5.7.0", "govuk-single-consent": "^3.0.9", "sortablejs": "^1.15.3" diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb new file mode 100644 index 0000000000..db8a68ed13 --- /dev/null +++ b/spec/components/chart_spec.rb @@ -0,0 +1,79 @@ +require "rails_helper" + +describe "Chart", type: :view do + def component_name + "chart" + end + + let(:data) do + { + caption: "Unique page views", + chart_label: "Page views chart", + table_label: "Page views table", + chart_id: "pviews_jan_chart", + table_id: "pviews_jan_table", + keys: (Date.new(2017, 12, 1)..Date.new(2017, 12, 12)).to_a, + rows: [ + { + label: "2017", + values: [5, nil, nil, 119, 74, 117, 50, 119, 61, 110, 12, 21, 121, 67], + }, + { + label: "2018", + values: [3, 8, 37, 435, 78, 4, 9, 61, 110, 12, 21, 121], + }, + ], + } + end + + it "does not render when no data is given" do + assert_empty render_component({}) + end + + it "does not render if keys are missing" do + data[:keys] = [] + assert_empty render_component(data) + end + + it "does not render if row data is missing" do + data[:rows] = [] + assert_empty render_component(data) + end + + it "does not render if tab data is missing" do + data[:chart_id] = false + assert_empty render_component(data) + data[:table_id] = false + assert_empty render_component(data) + end + + it "renders when given valid data" do + render_component(data) + assert_select ".gem-c-chart", 1 + end + + it "renders the correct table data horizontally" do + data[:table_direction] = "horizontal" + render_component(data) + assert_select ".govuk-table__body .govuk-table__header:nth-child(1)", text: "2017" + assert_select ".govuk-table__cell--numeric", 26 + assert_select ".govuk-table__header", 14 + assert_select "td:first", text: "5" + assert_select "td:last", text: "121" + end + + it "renders the correct table data vertically" do + data[:table_direction] = "vertical" + render_component(data) + assert_select ".govuk-table__body .govuk-table__header:nth-child(1)", text: "2017-12-01" + assert_select ".govuk-table__cell--numeric", 24 + assert_select ".govuk-table__header", 14 + assert_select "td:first", text: "5" + assert_select "td:last", text: "121" + end + + it "calls the chart library" do + render_component(data) + assert_select "script", text: /new Chartkick.["LineChart"]/ + end +end diff --git a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb index 3b5fd776bb..2f2440763a 100644 --- a/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb +++ b/spec/lib/govuk_publishing_components/app_helpers/asset_helper_spec.rb @@ -19,7 +19,7 @@ def request end it "detect the total number of stylesheet paths" do - expect(get_component_css_paths.count).to eql(79) + expect(get_component_css_paths.count).to eql(80) end it "initialize empty asset helper" do diff --git a/yarn.lock b/yarn.lock index 008034ae94..1ebc9190af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -71,6 +71,11 @@ wrap-ansi "^8.1.0" wrap-ansi-cjs "npm:wrap-ansi@^7.0.0" +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@nodelib/fs.scandir@2.1.4": version "2.1.4" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69" @@ -553,6 +558,27 @@ chalk@^4.0.0, chalk@^4.0.2: ansi-styles "^4.1.0" supports-color "^7.1.0" +chart.js@4, chart.js@^4.4.4: + version "4.4.4" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.4.tgz#b682d2e7249f7a0cbb1b1d31c840266ae9db64b7" + integrity sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA== + dependencies: + "@kurkle/color" "^0.3.0" + +chartjs-adapter-date-fns@>=3: + version "3.0.0" + resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5" + integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg== + +chartkick@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/chartkick/-/chartkick-5.0.1.tgz#f557ff8560f974343dc65c7fc34ce1e8326d8ee7" + integrity sha512-4F3tWI3eBQgnjCYZIZ+fHOaJuNyxeyhDE2Tm+voOWB19hDjSJceys/spzN52DOn8bWepNESGXvPVTGU1jeFsbA== + optionalDependencies: + chart.js "4" + chartjs-adapter-date-fns ">=3" + date-fns ">=2" + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -661,6 +687,11 @@ cssesc@^3.0.0: resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== +date-fns@>=2: + version "4.1.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14" + integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg== + debug@2.6.9, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" From b1a40ef6b69ebbb3d17d0d2261e86ef0a5e29887 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 11 Oct 2024 13:51:55 +0100 Subject: [PATCH 02/12] Add translation file entries --- config/locales/ar.yml | 2 ++ config/locales/az.yml | 2 ++ config/locales/be.yml | 2 ++ config/locales/bg.yml | 2 ++ config/locales/bn.yml | 2 ++ config/locales/cs.yml | 2 ++ config/locales/cy.yml | 2 ++ config/locales/da.yml | 2 ++ config/locales/de.yml | 2 ++ config/locales/dr.yml | 2 ++ config/locales/el.yml | 2 ++ config/locales/es-419.yml | 2 ++ config/locales/es.yml | 2 ++ config/locales/et.yml | 2 ++ config/locales/fa.yml | 2 ++ config/locales/fi.yml | 2 ++ config/locales/fr.yml | 2 ++ config/locales/gd.yml | 2 ++ config/locales/gu.yml | 2 ++ config/locales/he.yml | 2 ++ config/locales/hi.yml | 2 ++ config/locales/hr.yml | 2 ++ config/locales/hu.yml | 2 ++ config/locales/hy.yml | 2 ++ config/locales/id.yml | 2 ++ config/locales/is.yml | 2 ++ config/locales/it.yml | 2 ++ config/locales/ja.yml | 2 ++ config/locales/ka.yml | 2 ++ config/locales/kk.yml | 2 ++ config/locales/ko.yml | 2 ++ config/locales/lt.yml | 2 ++ config/locales/lv.yml | 2 ++ config/locales/ms.yml | 2 ++ config/locales/mt.yml | 2 ++ config/locales/nl.yml | 2 ++ config/locales/no.yml | 2 ++ config/locales/pa-pk.yml | 2 ++ config/locales/pa.yml | 2 ++ config/locales/pl.yml | 2 ++ config/locales/ps.yml | 2 ++ config/locales/pt.yml | 2 ++ config/locales/ro.yml | 2 ++ config/locales/ru.yml | 2 ++ config/locales/si.yml | 2 ++ config/locales/sk.yml | 2 ++ config/locales/sl.yml | 2 ++ config/locales/so.yml | 2 ++ config/locales/sq.yml | 2 ++ config/locales/sr.yml | 2 ++ config/locales/sv.yml | 2 ++ config/locales/sw.yml | 2 ++ config/locales/ta.yml | 2 ++ config/locales/th.yml | 2 ++ config/locales/tk.yml | 2 ++ config/locales/tr.yml | 2 ++ config/locales/uk.yml | 2 ++ config/locales/ur.yml | 2 ++ config/locales/uz.yml | 2 ++ config/locales/vi.yml | 2 ++ config/locales/zh-hk.yml | 2 ++ config/locales/zh-tw.yml | 2 ++ config/locales/zh.yml | 2 ++ 63 files changed, 126 insertions(+) diff --git a/config/locales/ar.yml b/config/locales/ar.yml index e78b8a8ef7..711d420ab5 100644 --- a/config/locales/ar.yml +++ b/config/locales/ar.yml @@ -36,6 +36,8 @@ ar: type: characters: أحرف words: كلمات + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/az.yml b/config/locales/az.yml index b68f147256..80022cad93 100644 --- a/config/locales/az.yml +++ b/config/locales/az.yml @@ -32,6 +32,8 @@ az: type: characters: simvol words: söz + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/be.yml b/config/locales/be.yml index 2632b72b5b..a8bc405c8f 100644 --- a/config/locales/be.yml +++ b/config/locales/be.yml @@ -34,6 +34,8 @@ be: type: characters: знакаў words: словаў + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/bg.yml b/config/locales/bg.yml index 0f97f59696..c8810dc6c1 100644 --- a/config/locales/bg.yml +++ b/config/locales/bg.yml @@ -32,6 +32,8 @@ bg: type: characters: символа words: думи + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/bn.yml b/config/locales/bn.yml index 0a4afc08d8..dc2bfbd68b 100644 --- a/config/locales/bn.yml +++ b/config/locales/bn.yml @@ -32,6 +32,8 @@ bn: type: characters: ক্যারেক্টার words: শব্দসমষ্টি + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/cs.yml b/config/locales/cs.yml index ffa5b375d0..c0b7126839 100644 --- a/config/locales/cs.yml +++ b/config/locales/cs.yml @@ -33,6 +33,8 @@ cs: type: characters: znaky words: slova + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/cy.yml b/config/locales/cy.yml index 27628c7920..f293b08c76 100644 --- a/config/locales/cy.yml +++ b/config/locales/cy.yml @@ -36,6 +36,8 @@ cy: type: characters: nodau words: geiriau + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/da.yml b/config/locales/da.yml index 7037d7c142..cbee227cf4 100644 --- a/config/locales/da.yml +++ b/config/locales/da.yml @@ -32,6 +32,8 @@ da: type: characters: Tegn words: ord + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/de.yml b/config/locales/de.yml index 5b8f77a022..974513290f 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -32,6 +32,8 @@ de: type: characters: Zeichen words: Wörter + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/dr.yml b/config/locales/dr.yml index 8cfd81268a..76dd793560 100644 --- a/config/locales/dr.yml +++ b/config/locales/dr.yml @@ -35,6 +35,8 @@ dr: type: characters: ارقام words: کلمات + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/el.yml b/config/locales/el.yml index aeb8c5a9b7..54b453460b 100644 --- a/config/locales/el.yml +++ b/config/locales/el.yml @@ -32,6 +32,8 @@ el: type: characters: χαρακτήρες words: λέξεις + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/es-419.yml b/config/locales/es-419.yml index b3ddbdf756..18b17d9d6a 100644 --- a/config/locales/es-419.yml +++ b/config/locales/es-419.yml @@ -32,6 +32,8 @@ es-419: type: characters: caracteres words: palabras + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/es.yml b/config/locales/es.yml index 219611586a..1d002d3e69 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -32,6 +32,8 @@ es: type: characters: caracteres words: palabras + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/et.yml b/config/locales/et.yml index ebbfbce631..a85b035e2e 100644 --- a/config/locales/et.yml +++ b/config/locales/et.yml @@ -32,6 +32,8 @@ et: type: characters: tähemärki words: sõnu + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/fa.yml b/config/locales/fa.yml index f762e5a215..f59a177cd5 100644 --- a/config/locales/fa.yml +++ b/config/locales/fa.yml @@ -32,6 +32,8 @@ fa: type: characters: کاراکتر words: کلمه + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/fi.yml b/config/locales/fi.yml index 92a075cc20..798e52e041 100644 --- a/config/locales/fi.yml +++ b/config/locales/fi.yml @@ -32,6 +32,8 @@ fi: type: characters: merkkejä words: sanoja + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 4f28f02e24..d37ec34c40 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -32,6 +32,8 @@ fr: type: characters: caractères words: mots + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/gd.yml b/config/locales/gd.yml index d7fc407d96..b34e19ed18 100644 --- a/config/locales/gd.yml +++ b/config/locales/gd.yml @@ -34,6 +34,8 @@ gd: type: characters: Figiúr words: Carachtar + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/gu.yml b/config/locales/gu.yml index 91c4ec5c3d..f11dfdb524 100644 --- a/config/locales/gu.yml +++ b/config/locales/gu.yml @@ -32,6 +32,8 @@ gu: type: characters: અક્ષરો words: શબ્દો + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/he.yml b/config/locales/he.yml index 678b070648..d341f88d89 100644 --- a/config/locales/he.yml +++ b/config/locales/he.yml @@ -32,6 +32,8 @@ he: type: characters: תווים words: מילים + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/hi.yml b/config/locales/hi.yml index d04e221209..41239e60f4 100644 --- a/config/locales/hi.yml +++ b/config/locales/hi.yml @@ -32,6 +32,8 @@ hi: type: characters: अक्षर words: शब्द + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/hr.yml b/config/locales/hr.yml index 7ac4ea22e7..01537aa98c 100644 --- a/config/locales/hr.yml +++ b/config/locales/hr.yml @@ -33,6 +33,8 @@ hr: type: characters: znakova words: riječi + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/hu.yml b/config/locales/hu.yml index aa9b3ddd34..e1973d40ab 100644 --- a/config/locales/hu.yml +++ b/config/locales/hu.yml @@ -32,6 +32,8 @@ hu: type: characters: karakterek words: szavak + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/hy.yml b/config/locales/hy.yml index 480f12fe97..9571a27180 100644 --- a/config/locales/hy.yml +++ b/config/locales/hy.yml @@ -34,6 +34,8 @@ hy: type: characters: նիշ words: բառ + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/id.yml b/config/locales/id.yml index e2ba950c01..e0fc4a5e3b 100644 --- a/config/locales/id.yml +++ b/config/locales/id.yml @@ -31,6 +31,8 @@ id: type: characters: karakter words: kata + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/is.yml b/config/locales/is.yml index 05118eeb2f..c3202bd1f7 100644 --- a/config/locales/is.yml +++ b/config/locales/is.yml @@ -32,6 +32,8 @@ is: type: characters: stafi words: orð + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/it.yml b/config/locales/it.yml index 60d48b3696..f90415b5f9 100644 --- a/config/locales/it.yml +++ b/config/locales/it.yml @@ -32,6 +32,8 @@ it: type: characters: caratteri words: parole + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ja.yml b/config/locales/ja.yml index 61d9aff6b8..f5541bd3f0 100644 --- a/config/locales/ja.yml +++ b/config/locales/ja.yml @@ -31,6 +31,8 @@ ja: type: characters: 文字 words: 単語 + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ka.yml b/config/locales/ka.yml index 9d9cb69f22..d5079f02cf 100644 --- a/config/locales/ka.yml +++ b/config/locales/ka.yml @@ -32,6 +32,8 @@ ka: type: characters: სიმბოლოები words: სიტყვები + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/kk.yml b/config/locales/kk.yml index f40c1a8cbf..e5577f315f 100644 --- a/config/locales/kk.yml +++ b/config/locales/kk.yml @@ -32,6 +32,8 @@ kk: type: characters: таңба words: сөз + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ko.yml b/config/locales/ko.yml index 31f1670f3c..aae3847aad 100644 --- a/config/locales/ko.yml +++ b/config/locales/ko.yml @@ -31,6 +31,8 @@ ko: type: characters: words: + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/lt.yml b/config/locales/lt.yml index 70ef90edf9..b1e2812b86 100644 --- a/config/locales/lt.yml +++ b/config/locales/lt.yml @@ -33,6 +33,8 @@ lt: type: characters: spaudos ženklų words: žodžių + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/lv.yml b/config/locales/lv.yml index d6976377c2..3d659b11d7 100644 --- a/config/locales/lv.yml +++ b/config/locales/lv.yml @@ -32,6 +32,8 @@ lv: type: characters: rakstzīmes words: vārdi + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ms.yml b/config/locales/ms.yml index 741e6d4c33..b9d84d865d 100644 --- a/config/locales/ms.yml +++ b/config/locales/ms.yml @@ -31,6 +31,8 @@ ms: type: characters: aksara words: perkataan + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/mt.yml b/config/locales/mt.yml index e82a2cfac9..3a2bfd8619 100644 --- a/config/locales/mt.yml +++ b/config/locales/mt.yml @@ -34,6 +34,8 @@ mt: type: characters: karattri words: kliem + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/nl.yml b/config/locales/nl.yml index 487d48dc72..901f50db48 100644 --- a/config/locales/nl.yml +++ b/config/locales/nl.yml @@ -32,6 +32,8 @@ nl: type: characters: karakters words: woorden + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/no.yml b/config/locales/no.yml index 0dbfce79f4..9fde4b8378 100644 --- a/config/locales/no.yml +++ b/config/locales/no.yml @@ -32,6 +32,8 @@ type: characters: tegn words: ord + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/pa-pk.yml b/config/locales/pa-pk.yml index 929d942017..9748bbde01 100644 --- a/config/locales/pa-pk.yml +++ b/config/locales/pa-pk.yml @@ -32,6 +32,8 @@ pa-pk: type: characters: کردار words: الفاظ + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/pa.yml b/config/locales/pa.yml index 8ccd73e6ab..4ef22b9e71 100644 --- a/config/locales/pa.yml +++ b/config/locales/pa.yml @@ -32,6 +32,8 @@ pa: type: characters: ਅੱਖਰ words: ਸ਼ਬਦ + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/pl.yml b/config/locales/pl.yml index 3197e32163..d60df6f23c 100644 --- a/config/locales/pl.yml +++ b/config/locales/pl.yml @@ -34,6 +34,8 @@ pl: type: characters: znaków words: słów + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ps.yml b/config/locales/ps.yml index 87dba21423..c30cf70a7b 100644 --- a/config/locales/ps.yml +++ b/config/locales/ps.yml @@ -32,6 +32,8 @@ ps: type: characters: کرکټرونه words: ټکي + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/pt.yml b/config/locales/pt.yml index 8956f6d193..28f8ebb260 100644 --- a/config/locales/pt.yml +++ b/config/locales/pt.yml @@ -32,6 +32,8 @@ pt: type: characters: carateres words: palavras + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ro.yml b/config/locales/ro.yml index a8ac9cda14..f5cef2bdd8 100644 --- a/config/locales/ro.yml +++ b/config/locales/ro.yml @@ -33,6 +33,8 @@ ro: type: characters: caractere words: cuvinte + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ru.yml b/config/locales/ru.yml index ac7f5f5cfc..c5cda81fce 100644 --- a/config/locales/ru.yml +++ b/config/locales/ru.yml @@ -34,6 +34,8 @@ ru: type: characters: символов words: слов + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/si.yml b/config/locales/si.yml index d136720f07..db54b9ea84 100644 --- a/config/locales/si.yml +++ b/config/locales/si.yml @@ -32,6 +32,8 @@ si: type: characters: අක්ෂර words: වචන + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/sk.yml b/config/locales/sk.yml index b3c16fa7e8..208ca8e547 100644 --- a/config/locales/sk.yml +++ b/config/locales/sk.yml @@ -33,6 +33,8 @@ sk: type: characters: znakov words: slov + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/sl.yml b/config/locales/sl.yml index 91ca360f7b..11c7d8fbf1 100644 --- a/config/locales/sl.yml +++ b/config/locales/sl.yml @@ -36,6 +36,8 @@ sl: type: characters: znaki words: besede + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/so.yml b/config/locales/so.yml index 239751f74e..3f467dd761 100644 --- a/config/locales/so.yml +++ b/config/locales/so.yml @@ -32,6 +32,8 @@ so: type: characters: dabeecadaha words: kalmadaha + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/sq.yml b/config/locales/sq.yml index 5378f3188e..f9a9ca9f48 100644 --- a/config/locales/sq.yml +++ b/config/locales/sq.yml @@ -32,6 +32,8 @@ sq: type: characters: karaktere words: fjalë + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/sr.yml b/config/locales/sr.yml index 8a0f9f43d8..22ee34ff99 100644 --- a/config/locales/sr.yml +++ b/config/locales/sr.yml @@ -33,6 +33,8 @@ sr: type: characters: znakova words: reči + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/sv.yml b/config/locales/sv.yml index 24532c0ac1..c1f15b472e 100644 --- a/config/locales/sv.yml +++ b/config/locales/sv.yml @@ -32,6 +32,8 @@ sv: type: characters: tecken words: ord + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/sw.yml b/config/locales/sw.yml index ee97d0c545..4476f91986 100644 --- a/config/locales/sw.yml +++ b/config/locales/sw.yml @@ -32,6 +32,8 @@ sw: type: characters: herufi words: maneno + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ta.yml b/config/locales/ta.yml index c6bee550ed..0cb78b6341 100644 --- a/config/locales/ta.yml +++ b/config/locales/ta.yml @@ -32,6 +32,8 @@ ta: type: characters: எழுத்துருக்கள் words: சொற்கள் + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/th.yml b/config/locales/th.yml index 05d739c8cf..2c0c912f3f 100644 --- a/config/locales/th.yml +++ b/config/locales/th.yml @@ -31,6 +31,8 @@ th: type: characters: ตัวอักษร words: คำ + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/tk.yml b/config/locales/tk.yml index f787b4fea4..cb40de9f0f 100644 --- a/config/locales/tk.yml +++ b/config/locales/tk.yml @@ -32,6 +32,8 @@ tk: type: characters: şekiller words: sözler + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/tr.yml b/config/locales/tr.yml index e4fb367b52..9945edb5d6 100644 --- a/config/locales/tr.yml +++ b/config/locales/tr.yml @@ -32,6 +32,8 @@ tr: type: characters: karakter words: kelime + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/uk.yml b/config/locales/uk.yml index 968c0caaff..0e45597a1d 100644 --- a/config/locales/uk.yml +++ b/config/locales/uk.yml @@ -34,6 +34,8 @@ uk: type: characters: символів words: слів + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/ur.yml b/config/locales/ur.yml index e185067f6a..ffb303f606 100644 --- a/config/locales/ur.yml +++ b/config/locales/ur.yml @@ -32,6 +32,8 @@ ur: type: characters: حروف words: الفاظ + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/uz.yml b/config/locales/uz.yml index fb0f3008b0..2d1ea9764e 100644 --- a/config/locales/uz.yml +++ b/config/locales/uz.yml @@ -32,6 +32,8 @@ uz: type: characters: белгилар words: сўзлар + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/vi.yml b/config/locales/vi.yml index 0c0bb11ebd..f9226978b4 100644 --- a/config/locales/vi.yml +++ b/config/locales/vi.yml @@ -31,6 +31,8 @@ vi: type: characters: ký tự words: từ + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/zh-hk.yml b/config/locales/zh-hk.yml index 21f9533c8b..2c33054b4c 100644 --- a/config/locales/zh-hk.yml +++ b/config/locales/zh-hk.yml @@ -31,6 +31,8 @@ zh-hk: type: characters: 字元 words: 字彙 + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/zh-tw.yml b/config/locales/zh-tw.yml index 18e3931ad8..ad8e166b28 100644 --- a/config/locales/zh-tw.yml +++ b/config/locales/zh-tw.yml @@ -31,6 +31,8 @@ zh-tw: type: characters: 字元 words: 字 + chart: + table_dropdown: chat_entry: description: heading: diff --git a/config/locales/zh.yml b/config/locales/zh.yml index f3e480e89d..1d1ab975ba 100644 --- a/config/locales/zh.yml +++ b/config/locales/zh.yml @@ -31,6 +31,8 @@ zh: type: characters: 字符 words: 单词 + chart: + table_dropdown: chat_entry: description: heading: From f7851ee7df089e1aeca65fa41cc2da37dbc8afc2 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 11 Oct 2024 15:20:43 +0100 Subject: [PATCH 03/12] Make example data more detailed --- .../components/docs/chart.yml | 70 +++++++++++++++++-- 1 file changed, 65 insertions(+), 5 deletions(-) diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml index 161211124f..006e2876c3 100644 --- a/app/views/govuk_publishing_components/components/docs/chart.yml +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -34,15 +34,45 @@ examples: - "2nd" - "3rd" - "4th" + - "5th" + - "6th" + - "7th" + - "8th" + - "9th" + - "10th" + - "11th" + - "12th" + - "13th" + - "14th" + - "15th" + - "16th" + - "17th" + - "18th" + - "19th" rows: - label: "January 2015" values: - 5 - 119 - 74 - - 117 + - 82 + - 27 + - 45 + - 11 + - 21 + - 67 + - 43 + - 74 + - 92 + - 91 + - 67 + - 55 + - 81 + - 103 + - 62 + - 40 - two rows of data: + multiple rows of data: data: caption: 'Unique page views in February' h_axis_title: "Day" @@ -56,19 +86,49 @@ examples: - "2nd" - "3rd" - "4th" + - "5th" + - "6th" + - "7th" + - "8th" + - "9th" + - "10th" rows: - label: "January 2015" values: - 5 - 119 - 74 - - 117 + - 82 + - 27 + - 45 + - 11 + - 21 + - 67 + - 43 - label: "January 2016" values: - - 3 + - 5 - 8 - 37 - - 82 + - 50 + - 43 + - 29 + - 67 + - 61 + - 14 + - 91 + - label: "January 2017" + values: + - 31 + - 81 + - 12 + - 15 + - 52 + - 61 + - 32 + - 27 + - 18 + - 34 horizontal table: data: From d6d6c8e53d4bf7f40c64db5ece87e5c2930a9aae Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 11 Oct 2024 16:03:12 +0100 Subject: [PATCH 04/12] Improve chart appearance - add and style axes labels and legends - remove some specific styles that were overriding normal table styles - simplify CSS, chart height appeared to be duplicated - increase point size - remove specifics for line colour and style, let the chart decide --- .../components/_chart.scss | 42 +------------------ .../components/_chart.html.erb | 28 ++++++++----- 2 files changed, 19 insertions(+), 51 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss index cf953a49de..c414cafaea 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -5,46 +5,18 @@ } .gem-c-chart__table { - max-height: 300px; margin-top: govuk-spacing(3); - @include govuk-media-query($from: mobile) { - max-height: 250px; - } - - .govuk-details__summary-text { - @include govuk-font(16); - } - .govuk-table { - width: auto; + margin: 0; } .govuk-table .govuk-table__header { - border: none; - background-color: govuk-colour("white"); text-align: center; - min-width: 4em; - @include govuk-font($size: 16, $weight: bold); - } - - .govuk-table .govuk-table__body .govuk-table__cell { - border-top: 1px solid #000000; - @include govuk-font(16); } .govuk-table .govuk-table__cell { - border: 0; text-align: center; - @include govuk-font(16); - } - - .govuk-table__header--stacked { - max-width: 15%; - } - - .govuk-table__header--stacked[scope="row"] { - max-width: 20%; } } @@ -55,16 +27,6 @@ // This breaks our BEM markup but is injected by the charting library and can't be avoided // stylelint-disable selector-max-id .gem-c-chart { - #chart-1, - #chart-2, - #chart-3, - #chart-4, - #chart-5, - #chart-6, - #chart-7 { - height: 250px; - } - @include govuk-media-query($from: mobile) { #chart-1, #chart-2, @@ -73,7 +35,7 @@ #chart-5, #chart-6, #chart-7 { - height: 250px; + height: 400px; } } } diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 67d02cdaf2..f1b97d4467 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -9,6 +9,9 @@ chart_width ||= "90%" table_id ||= false table_direction ||= "horizontal" + chart_title ||= nil + h_axis_title ||= nil + v_axis_title ||= nil from ||= false to ||= false percent_metric ||= false @@ -46,26 +49,29 @@ Chartkick.options[:html] = '
' # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart chart_library_options = { - legend: 'none', - chartArea: { width: chart_width, height: '85%' }, + title: chart_title, + legend: { + position: 'bottom', + textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' }, + }, + chartArea: { width: chart_width, height: '70%' }, curveType: 'none', tooltip: { showColorCode: true, isHtml: true, trigger: 'both'}, crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' }, + loading: "Loading...", hAxis: { viewWindow: { min: from, max: to }, - textStyle: { color: '#000', fontName: 'nta', fontSize: '12' }, - format: chart_date_format + textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' }, + format: chart_date_format, + title: h_axis_title }, vAxis: { viewWindow: { min: 0, max: maximum_y }, format: '#,###,###', - textStyle: { color: '#000', fontName: 'nta', fontSize: '12' } + textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' }, + title: v_axis_title }, - pointSize: 0, - series: { - 0 => { lineWidth: 2, color: '#2b8cc4' }, - 1 => { lineWidth: 2, lineDashStyle: [10, 2], color: '#454a4c' } - } + pointSize: 10, } if rows.length > 0 && keys.length > 0 chart_format_data = rows.map do |row| @@ -89,7 +95,7 @@ <% end %> <%= line_chart(chart_format_data, library: chart_library_options) %> -
+
<%= render( "govuk_publishing_components/components/details", title: t("components.chart.table_dropdown", metric_name: chart_label) From 73ca2509f91c05cd888a2cfad101b357d7378683 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Tue, 15 Oct 2024 15:02:22 +0100 Subject: [PATCH 05/12] Further improvements - clean up, reorder and remove redundant code - fix table vertical option - add heading element - minimise and simplify component options - add option for a chart overview description - add option to hide legend - remove unnecessary use of govspeak to wrap a visually hidden element - remove unneed styles - add tests, expand and clean up documentation --- .../components/_chart.scss | 17 -- .../components/_chart.html.erb | 105 ++++------ .../components/docs/chart.yml | 193 +++++++++--------- config/locales/en.yml | 2 +- spec/components/chart_spec.rb | 34 ++- 5 files changed, 166 insertions(+), 185 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss index c414cafaea..110bef2384 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -24,23 +24,6 @@ @include govuk-visually-hidden; } -// This breaks our BEM markup but is injected by the charting library and can't be avoided -// stylelint-disable selector-max-id -.gem-c-chart { - @include govuk-media-query($from: mobile) { - #chart-1, - #chart-2, - #chart-3, - #chart-4, - #chart-5, - #chart-6, - #chart-7 { - height: 400px; - } - } -} -// stylelint-enable selector-max-id - // stylelint-disable declaration-no-important .google-visualization-tooltip { background-color: #000000 !important; diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index f1b97d4467..0574d7fdec 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -2,77 +2,50 @@ add_gem_component_stylesheet("chart") add_gem_component_stylesheet("table") add_gem_component_stylesheet("details") - require "chartkick" + add_gem_component_stylesheet("heading") - chart_id ||= false - chart_label ||= "data" - chart_width ||= "90%" - table_id ||= false + chart_heading ||= nil + chart_heading_level ||= 2 table_direction ||= "horizontal" - chart_title ||= nil h_axis_title ||= nil v_axis_title ||= nil - from ||= false - to ||= false - percent_metric ||= false rows ||= [] keys ||= [] + chart_overview ||= nil + hide_legend ||= false - # http://strftime.org/ - Date::DATE_FORMATS[:table_format] = '%-d %b %Y' - - # https://developers.google.com/chart/interactive/docs/reference#dateformatter - chart_date_format = 'd MMM Y' - - if percent_metric - maximum_y = 100 - elsif rows.any? - row_maximums = rows.map { |row| row[:values].compact.max } - overall_maximum = row_maximums.max + chart_id = "chart-id-#{SecureRandom.hex(4)}" + table_id = "table-id-#{SecureRandom.hex(4)}" - if overall_maximum == 0 - # set max value to 3 if data is all 0 avoid negative numbers on Y axis - maximum_y = 3 - elsif overall_maximum < 10 - # for low numbers let line hit top to avoid a fractional max value - maximum_y = overall_maximum - else - # for higher numbers give breathing space to line - maximum_y = overall_maximum * 1.3 - - if overall_maximum > 99999 - chart_width = "80%" - end - end - end - - Chartkick.options[:html] = '
' + require "chartkick" + Chartkick.options[:html] = '
' # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart + font_16 = { color: '#000', fontName: 'GDS Transport', fontSize: '16', italic: false } + font_19 = { color: '#000', fontName: 'GDS Transport', fontSize: '19', italic: false } + legend = 'none' + legend = { position: 'top', textStyle: font_16 } unless hide_legend + chart_library_options = { - title: chart_title, - legend: { - position: 'bottom', - textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' }, - }, - chartArea: { width: chart_width, height: '70%' }, - curveType: 'none', + chartArea: { width: '80%', height: '60%' }, tooltip: { showColorCode: true, isHtml: true, trigger: 'both'}, crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' }, - loading: "Loading...", + legend: legend, + pointSize: 10, + height: 400, hAxis: { - viewWindow: { min: from, max: to }, - textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' }, - format: chart_date_format, - title: h_axis_title + textStyle: font_16, + format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter + title: h_axis_title, + titleTextStyle: font_19, }, vAxis: { - viewWindow: { min: 0, max: maximum_y }, format: '#,###,###', - textStyle: { color: '#000', fontName: 'GDS Transport', fontSize: '16' }, - title: v_axis_title + textStyle: font_16, + title: v_axis_title, + titleTextStyle: font_19, }, - pointSize: 10, } + if rows.length > 0 && keys.length > 0 chart_format_data = rows.map do |row| { @@ -83,22 +56,28 @@ end end %> -<% if rows.length > 0 && keys.length > 0 && chart_id && table_id %> +<% if rows.length > 0 && keys.length > 0 %> <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
+ <% if chart_heading %> + <%= render "govuk_publishing_components/components/heading", { + text: chart_heading, + heading_level: chart_heading_level, + margin_bottom: 2, + } %> + <% end %> +
- <%= render "govuk_publishing_components/components/govspeak" do %> -
- The chart is a visual representation of the data available - in the table. -
- <% end %> +
+ This chart is a visual representation of the data available in the table. + <%= content_tag :span, chart_overview, class: "gem-c-chart__overview" if chart_overview %> +
<%= line_chart(chart_format_data, library: chart_library_options) %>
+
- <%= render( - "govuk_publishing_components/components/details", - title: t("components.chart.table_dropdown", metric_name: chart_label) + <%= render("govuk_publishing_components/components/details", + title: t("components.chart.table_dropdown") ) do %>
diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml index 006e2876c3..e876f765a5 100644 --- a/app/views/govuk_publishing_components/components/docs/chart.yml +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -2,18 +2,15 @@ name: "Chart" description: "The chart component presents a data chart and a tabular version of the same data" part_of_admin_layout: true body: | - This component takes a single set of data and presents it in a line graph and a table with one or more rows and lines. - At mobile width the two are presented sequentially, and on wider screens they are presented in tabs the user can switch - between. The chart relies chartkick and renders using javascript, so the table is provided as a fallback for a lack of javascript, + This component takes a set of data and presents it as a line graph and a table with one or more rows and lines. + The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript, an accessible view on the data for screenreaders, and a simple view of the raw data for all users. + The `overview` option can be used to provide a explanation for screen reader users of what the graph shows. + accessibility_criteria: | - - Tabs must: - - have meaningful titles - - follow the link accessibility criteria - - Tab contents must - - have meaningful captions - - Charts must: + Charts must: + - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA shared_accessibility_criteria: @@ -22,78 +19,55 @@ shared_accessibility_criteria: examples: default: data: - caption: 'Unique page views in February' - h_axis_title: "Day" - v_axis_title: "Views" - chart_id: 'pviews_chart' - table_id: 'pviews_table' - chart_title: 'Page views chart' - table_title: 'Page views table' + chart_heading: Page views chart + h_axis_title: Day + v_axis_title: Views + overview: This chart shows page views for January 2015. + hide_legend: true keys: - - "1st" - - "2nd" - - "3rd" - - "4th" - - "5th" - - "6th" - - "7th" - - "8th" - - "9th" - - "10th" - - "11th" - - "12th" - - "13th" - - "14th" - - "15th" - - "16th" - - "17th" - - "18th" - - "19th" + - "2015-01-01" + - "2015-01-02" + - "2015-01-03" + - "2015-01-04" + - "2015-01-05" + - "2015-01-06" + - "2015-01-07" + - "2015-01-08" + - "2015-01-09" + - "2015-01-10" rows: - - label: "January 2015" + - label: January 2015 values: - - 5 - - 119 - - 74 - - 82 - - 27 - - 45 - - 11 - - 21 - - 67 - - 43 - - 74 - - 92 - - 91 - - 67 - - 55 - - 81 - - 103 - - 62 - - 40 + - 500 + - 1190 + - 740 + - 820 + - 270 + - 450 + - 110 + - 210 + - 670 + - 430 multiple rows of data: + description: Where more than one series is shown on a chart, do not hide the legend. data: - caption: 'Unique page views in February' - h_axis_title: "Day" - v_axis_title: "Views" - chart_id: 'second_pviews_chart' - table_id: 'second_pviews_table' - chart_title: 'Page views chart' - table_title: 'Page views table' + chart_heading: Page views chart + h_axis_title: Day + v_axis_title: Views keys: - - "1st" - - "2nd" - - "3rd" - - "4th" - - "5th" - - "6th" - - "7th" - - "8th" - - "9th" - - "10th" + - 1st + - 2nd + - 3rd + - 4th + - 5th + - 6th + - 7th + - 8th + - 9th + - 10th rows: - - label: "January 2015" + - label: January 2015 values: - 5 - 119 @@ -105,7 +79,7 @@ examples: - 21 - 67 - 43 - - label: "January 2016" + - label: January 2016 values: - 5 - 8 @@ -117,7 +91,7 @@ examples: - 61 - 14 - 91 - - label: "January 2017" + - label: January 2017 values: - 31 - 81 @@ -125,31 +99,62 @@ examples: - 15 - 52 - 61 - - 32 + - 143 - 27 - 18 - 34 - horizontal table: + vertical table: + description: Reorient the table to better suit the output of some data sets. + data: + chart_heading: Page views chart + table_direction: vertical + h_axis_title: Day + v_axis_title: Views + 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_a_different_heading_level: + description: Use a different heading level for the chart heading. It defaults to a H2. data: - caption: 'Unique page views in February' - table_direction: "horizontal" - h_axis_title: "Day" - v_axis_title: "Views" - chart_id: 'third_pviews_chart' - table_id: 'third_pviews_table' - chart_title: 'Page views chart' - table_title: 'Page views table' + chart_heading: Page views chart + chart_heading_level: 4 + h_axis_title: Day + v_axis_title: Views keys: - - "1st" - - "2nd" - - "3rd" - - "4th" - - "5th" - - "6th" - - "7th" + - 1st + - 2nd + - 3rd + - 4th + - 5th + - 6th + - 7th rows: - - label: "January 2015" + - label: January 2015 values: - 5 - 119 @@ -158,7 +163,7 @@ examples: - 33 - 89 - 79 - - label: "January 2016" + - label: January 2016 values: - 3 - 8 diff --git a/config/locales/en.yml b/config/locales/en.yml index 47b5c09a5f..317fa61ff2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -33,7 +33,7 @@ en: characters: characters words: words chart: - table_dropdown: '%{metric_name} table' + table_dropdown: Data table chat_entry: heading: Try GOV.UK Chat description: Sign up to GOV.UK’s experimental new AI tool and find answers to your business questions diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb index db8a68ed13..4511788308 100644 --- a/spec/components/chart_spec.rb +++ b/spec/components/chart_spec.rb @@ -7,11 +7,8 @@ def component_name let(:data) do { - caption: "Unique page views", chart_label: "Page views chart", table_label: "Page views table", - chart_id: "pviews_jan_chart", - table_id: "pviews_jan_table", keys: (Date.new(2017, 12, 1)..Date.new(2017, 12, 12)).to_a, rows: [ { @@ -40,13 +37,6 @@ def component_name assert_empty render_component(data) end - it "does not render if tab data is missing" do - data[:chart_id] = false - assert_empty render_component(data) - data[:table_id] = false - assert_empty render_component(data) - end - it "renders when given valid data" do render_component(data) assert_select ".gem-c-chart", 1 @@ -68,7 +58,9 @@ def component_name assert_select ".govuk-table__body .govuk-table__header:nth-child(1)", text: "2017-12-01" assert_select ".govuk-table__cell--numeric", 24 assert_select ".govuk-table__header", 14 + assert_select "td:first", text: "5" + assert_select ".govuk-table__body tr:nth-of-type(4) td:first", text: "119" assert_select "td:last", text: "121" end @@ -76,4 +68,26 @@ def component_name render_component(data) assert_select "script", text: /new Chartkick.["LineChart"]/ end + + it "displays a heading" do + data[:chart_heading] = "hello" + render_component(data) + + assert_select "h2.gem-c-heading", text: "hello" + end + + it "displays a heading with a custom heading level" do + data[:chart_heading] = "hello" + data[:chart_heading_level] = 4 + render_component(data) + + assert_select "h4.gem-c-heading", text: "hello" + end + + it "can include an overview" do + text = "This chart shows a gradual decline in the numbers of hedgehogs using social media since 2008." + data[:chart_overview] = text + render_component(data) + assert_select ".gem-c-chart__overview", text: + end end From c799893477b0f6c7f25d800af9551621b631bfff Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Tue, 15 Oct 2024 15:10:08 +0100 Subject: [PATCH 06/12] Remove chart.js - using Google charts instead - chart.js is the default and produces nice responsive canvas graphs but provides far fewer options for customising important things like the font size and style of axes --- package.json | 1 - yarn.lock | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index a26bc422c9..8ccb5b4870 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "dependencies": { "accessible-autocomplete": "^3.0.1", "axe-core": "^4.10.0", - "chart.js": "^4.4.4", "chartkick": "^5.0.1", "govuk-frontend": "5.7.0", "govuk-single-consent": "^3.0.9", diff --git a/yarn.lock b/yarn.lock index 1ebc9190af..e26ab82d93 100644 --- a/yarn.lock +++ b/yarn.lock @@ -558,7 +558,7 @@ chalk@^4.0.0, chalk@^4.0.2: ansi-styles "^4.1.0" supports-color "^7.1.0" -chart.js@4, chart.js@^4.4.4: +chart.js@4: version "4.4.4" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.4.tgz#b682d2e7249f7a0cbb1b1d31c840266ae9db64b7" integrity sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA== From 285605cf66d55684d71226c64ad6748a86f9f643 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 16 Oct 2024 09:14:47 +0100 Subject: [PATCH 07/12] Improve tooltip - tooltip now uses the HTML option, which for some reason means it's easier to dismiss on mobile by tapping elsewhere on the page - also improve the styling, both in terms of code and appearance --- .../components/_chart.scss | 24 ++++++++----------- .../components/_chart.html.erb | 2 +- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss index 110bef2384..ac1effddfb 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -24,19 +24,15 @@ @include govuk-visually-hidden; } -// stylelint-disable declaration-no-important -.google-visualization-tooltip { - background-color: #000000 !important; - opacity: .95; - - span { - color: govuk-colour("white") !important; - font-family: nta, Arial, sans-serif !important; - font-size: 14px !important; - } - - .google-visualization-tooltip-square { - border-bottom: none !important; +.gem-c-chart { + .google-visualization-tooltip { + background-color: govuk-colour("black"); + box-shadow: none; + border: 0; + + span { + color: govuk-colour("white"); + @include govuk-font($size: 16, $weight: bold); + } } } -// stylelint-enable declaration-no-important diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 0574d7fdec..157c061e35 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -27,11 +27,11 @@ chart_library_options = { chartArea: { width: '80%', height: '60%' }, - tooltip: { showColorCode: true, isHtml: true, trigger: 'both'}, crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' }, legend: legend, pointSize: 10, height: 400, + tooltip: { isHtml: true }, hAxis: { textStyle: font_16, format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter From 7688f209a9774c1eeff33e2f7efab006e852922c Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 16 Oct 2024 09:41:41 +0100 Subject: [PATCH 08/12] Improve text - move accessibility text into the YML file - clean up the doc file a little and mark component as experimental --- .../components/_chart.html.erb | 2 +- .../components/docs/chart.yml | 11 +++-------- config/locales/ar.yml | 1 + config/locales/az.yml | 1 + config/locales/be.yml | 1 + config/locales/bg.yml | 1 + config/locales/bn.yml | 1 + config/locales/cs.yml | 1 + config/locales/cy.yml | 1 + config/locales/da.yml | 1 + config/locales/de.yml | 1 + config/locales/dr.yml | 1 + config/locales/el.yml | 1 + config/locales/en.yml | 1 + config/locales/es-419.yml | 1 + config/locales/es.yml | 1 + config/locales/et.yml | 1 + config/locales/fa.yml | 1 + config/locales/fi.yml | 1 + config/locales/fr.yml | 1 + config/locales/gd.yml | 1 + config/locales/gu.yml | 1 + config/locales/he.yml | 1 + config/locales/hi.yml | 1 + config/locales/hr.yml | 1 + config/locales/hu.yml | 1 + config/locales/hy.yml | 1 + config/locales/id.yml | 1 + config/locales/is.yml | 1 + config/locales/it.yml | 1 + config/locales/ja.yml | 1 + config/locales/ka.yml | 1 + config/locales/kk.yml | 1 + config/locales/ko.yml | 1 + config/locales/lt.yml | 1 + config/locales/lv.yml | 1 + config/locales/ms.yml | 1 + config/locales/mt.yml | 1 + config/locales/nl.yml | 1 + config/locales/no.yml | 1 + config/locales/pa-pk.yml | 1 + config/locales/pa.yml | 1 + config/locales/pl.yml | 1 + config/locales/ps.yml | 1 + config/locales/pt.yml | 1 + config/locales/ro.yml | 1 + config/locales/ru.yml | 1 + config/locales/si.yml | 1 + config/locales/sk.yml | 1 + config/locales/sl.yml | 1 + config/locales/so.yml | 1 + config/locales/sq.yml | 1 + config/locales/sr.yml | 1 + config/locales/sv.yml | 1 + config/locales/sw.yml | 1 + config/locales/ta.yml | 1 + config/locales/th.yml | 1 + config/locales/tk.yml | 1 + config/locales/tr.yml | 1 + config/locales/uk.yml | 1 + config/locales/ur.yml | 1 + config/locales/uz.yml | 1 + config/locales/vi.yml | 1 + config/locales/zh-hk.yml | 1 + config/locales/zh-tw.yml | 1 + config/locales/zh.yml | 1 + 66 files changed, 68 insertions(+), 9 deletions(-) diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 157c061e35..26c5361ffc 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -69,7 +69,7 @@
- This chart is a visual representation of the data available in the table. + <%= t("components.chart.accessibility_html", table_id: table_id) %> <%= content_tag :span, chart_overview, class: "gem-c-chart__overview" if chart_overview %>
<%= line_chart(chart_format_data, library: chart_library_options) %> diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml index e876f765a5..c63e021ab0 100644 --- a/app/views/govuk_publishing_components/components/docs/chart.yml +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -1,21 +1,18 @@ -name: "Chart" -description: "The chart component presents a data chart and a tabular version of the same data" +name: Chart (experimental) +description: The chart component presents a data chart and a tabular version of the same data part_of_admin_layout: true body: | This component takes a set of data and presents it as a line graph and a table with one or more rows and lines. The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript, an accessible view on the data for screenreaders, and a simple view of the raw data for all users. - The `overview` option can be used to provide a explanation for screen reader users of what the graph shows. - + The `overview` option can be used to provide an explanation for screen reader users of what the graph shows. accessibility_criteria: | Charts must: - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA - shared_accessibility_criteria: - link - examples: default: data: @@ -48,7 +45,6 @@ examples: - 210 - 670 - 430 - multiple rows of data: description: Where more than one series is shown on a chart, do not hide the legend. data: @@ -103,7 +99,6 @@ examples: - 27 - 18 - 34 - vertical table: description: Reorient the table to better suit the output of some data sets. data: diff --git a/config/locales/ar.yml b/config/locales/ar.yml index 711d420ab5..151a4d03e9 100644 --- a/config/locales/ar.yml +++ b/config/locales/ar.yml @@ -37,6 +37,7 @@ ar: characters: أحرف words: كلمات chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/az.yml b/config/locales/az.yml index 80022cad93..9abf4c1491 100644 --- a/config/locales/az.yml +++ b/config/locales/az.yml @@ -33,6 +33,7 @@ az: characters: simvol words: söz chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/be.yml b/config/locales/be.yml index a8bc405c8f..7bf50fd004 100644 --- a/config/locales/be.yml +++ b/config/locales/be.yml @@ -35,6 +35,7 @@ be: characters: знакаў words: словаў chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/bg.yml b/config/locales/bg.yml index c8810dc6c1..6e579ab218 100644 --- a/config/locales/bg.yml +++ b/config/locales/bg.yml @@ -33,6 +33,7 @@ bg: characters: символа words: думи chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/bn.yml b/config/locales/bn.yml index dc2bfbd68b..34044764c2 100644 --- a/config/locales/bn.yml +++ b/config/locales/bn.yml @@ -33,6 +33,7 @@ bn: characters: ক্যারেক্টার words: শব্দসমষ্টি chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/cs.yml b/config/locales/cs.yml index c0b7126839..5097223856 100644 --- a/config/locales/cs.yml +++ b/config/locales/cs.yml @@ -34,6 +34,7 @@ cs: characters: znaky words: slova chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/cy.yml b/config/locales/cy.yml index f293b08c76..75c1f28b99 100644 --- a/config/locales/cy.yml +++ b/config/locales/cy.yml @@ -37,6 +37,7 @@ cy: characters: nodau words: geiriau chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/da.yml b/config/locales/da.yml index cbee227cf4..7aef6f2e1d 100644 --- a/config/locales/da.yml +++ b/config/locales/da.yml @@ -33,6 +33,7 @@ da: characters: Tegn words: ord chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/de.yml b/config/locales/de.yml index 974513290f..ce38fef147 100644 --- a/config/locales/de.yml +++ b/config/locales/de.yml @@ -33,6 +33,7 @@ de: characters: Zeichen words: Wörter chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/dr.yml b/config/locales/dr.yml index 76dd793560..a526390d3e 100644 --- a/config/locales/dr.yml +++ b/config/locales/dr.yml @@ -36,6 +36,7 @@ dr: characters: ارقام words: کلمات chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/el.yml b/config/locales/el.yml index 54b453460b..01ed8006c3 100644 --- a/config/locales/el.yml +++ b/config/locales/el.yml @@ -33,6 +33,7 @@ el: characters: χαρακτήρες words: λέξεις chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/en.yml b/config/locales/en.yml index 317fa61ff2..5dc2525e3e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -34,6 +34,7 @@ en: words: words chart: table_dropdown: Data table + accessibility_html: This chart is a visual representation of the data available in the table. chat_entry: heading: Try GOV.UK Chat description: Sign up to GOV.UK’s experimental new AI tool and find answers to your business questions diff --git a/config/locales/es-419.yml b/config/locales/es-419.yml index 18b17d9d6a..6dc3c3504d 100644 --- a/config/locales/es-419.yml +++ b/config/locales/es-419.yml @@ -33,6 +33,7 @@ es-419: characters: caracteres words: palabras chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/es.yml b/config/locales/es.yml index 1d002d3e69..822a4ba4c9 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -33,6 +33,7 @@ es: characters: caracteres words: palabras chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/et.yml b/config/locales/et.yml index a85b035e2e..6d6892b95b 100644 --- a/config/locales/et.yml +++ b/config/locales/et.yml @@ -33,6 +33,7 @@ et: characters: tähemärki words: sõnu chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/fa.yml b/config/locales/fa.yml index f59a177cd5..d378696c6b 100644 --- a/config/locales/fa.yml +++ b/config/locales/fa.yml @@ -33,6 +33,7 @@ fa: characters: کاراکتر words: کلمه chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/fi.yml b/config/locales/fi.yml index 798e52e041..e6aaa174b6 100644 --- a/config/locales/fi.yml +++ b/config/locales/fi.yml @@ -33,6 +33,7 @@ fi: characters: merkkejä words: sanoja chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/fr.yml b/config/locales/fr.yml index d37ec34c40..6d2f1ad2e6 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -33,6 +33,7 @@ fr: characters: caractères words: mots chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/gd.yml b/config/locales/gd.yml index b34e19ed18..e99cf73c27 100644 --- a/config/locales/gd.yml +++ b/config/locales/gd.yml @@ -35,6 +35,7 @@ gd: characters: Figiúr words: Carachtar chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/gu.yml b/config/locales/gu.yml index f11dfdb524..364af3ef80 100644 --- a/config/locales/gu.yml +++ b/config/locales/gu.yml @@ -33,6 +33,7 @@ gu: characters: અક્ષરો words: શબ્દો chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/he.yml b/config/locales/he.yml index d341f88d89..b3b967066c 100644 --- a/config/locales/he.yml +++ b/config/locales/he.yml @@ -33,6 +33,7 @@ he: characters: תווים words: מילים chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/hi.yml b/config/locales/hi.yml index 41239e60f4..5acf57b612 100644 --- a/config/locales/hi.yml +++ b/config/locales/hi.yml @@ -33,6 +33,7 @@ hi: characters: अक्षर words: शब्द chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/hr.yml b/config/locales/hr.yml index 01537aa98c..f738141c39 100644 --- a/config/locales/hr.yml +++ b/config/locales/hr.yml @@ -34,6 +34,7 @@ hr: characters: znakova words: riječi chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/hu.yml b/config/locales/hu.yml index e1973d40ab..0e08d8e4a8 100644 --- a/config/locales/hu.yml +++ b/config/locales/hu.yml @@ -33,6 +33,7 @@ hu: characters: karakterek words: szavak chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/hy.yml b/config/locales/hy.yml index 9571a27180..58cfe6da0f 100644 --- a/config/locales/hy.yml +++ b/config/locales/hy.yml @@ -35,6 +35,7 @@ hy: characters: նիշ words: բառ chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/id.yml b/config/locales/id.yml index e0fc4a5e3b..d1d7bf98f5 100644 --- a/config/locales/id.yml +++ b/config/locales/id.yml @@ -32,6 +32,7 @@ id: characters: karakter words: kata chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/is.yml b/config/locales/is.yml index c3202bd1f7..264fde27da 100644 --- a/config/locales/is.yml +++ b/config/locales/is.yml @@ -33,6 +33,7 @@ is: characters: stafi words: orð chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/it.yml b/config/locales/it.yml index f90415b5f9..4bbeba42dc 100644 --- a/config/locales/it.yml +++ b/config/locales/it.yml @@ -33,6 +33,7 @@ it: characters: caratteri words: parole chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ja.yml b/config/locales/ja.yml index f5541bd3f0..af53abed10 100644 --- a/config/locales/ja.yml +++ b/config/locales/ja.yml @@ -32,6 +32,7 @@ ja: characters: 文字 words: 単語 chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ka.yml b/config/locales/ka.yml index d5079f02cf..eb946974a8 100644 --- a/config/locales/ka.yml +++ b/config/locales/ka.yml @@ -33,6 +33,7 @@ ka: characters: სიმბოლოები words: სიტყვები chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/kk.yml b/config/locales/kk.yml index e5577f315f..e1aec6f918 100644 --- a/config/locales/kk.yml +++ b/config/locales/kk.yml @@ -33,6 +33,7 @@ kk: characters: таңба words: сөз chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ko.yml b/config/locales/ko.yml index aae3847aad..d81e94b817 100644 --- a/config/locales/ko.yml +++ b/config/locales/ko.yml @@ -32,6 +32,7 @@ ko: characters: words: chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/lt.yml b/config/locales/lt.yml index b1e2812b86..3d668af04d 100644 --- a/config/locales/lt.yml +++ b/config/locales/lt.yml @@ -34,6 +34,7 @@ lt: characters: spaudos ženklų words: žodžių chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/lv.yml b/config/locales/lv.yml index 3d659b11d7..b508b2d154 100644 --- a/config/locales/lv.yml +++ b/config/locales/lv.yml @@ -33,6 +33,7 @@ lv: characters: rakstzīmes words: vārdi chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ms.yml b/config/locales/ms.yml index b9d84d865d..00ea0f447a 100644 --- a/config/locales/ms.yml +++ b/config/locales/ms.yml @@ -32,6 +32,7 @@ ms: characters: aksara words: perkataan chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/mt.yml b/config/locales/mt.yml index 3a2bfd8619..0c9cd26c50 100644 --- a/config/locales/mt.yml +++ b/config/locales/mt.yml @@ -35,6 +35,7 @@ mt: characters: karattri words: kliem chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/nl.yml b/config/locales/nl.yml index 901f50db48..9cd9df6a50 100644 --- a/config/locales/nl.yml +++ b/config/locales/nl.yml @@ -33,6 +33,7 @@ nl: characters: karakters words: woorden chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/no.yml b/config/locales/no.yml index 9fde4b8378..1fbdbac955 100644 --- a/config/locales/no.yml +++ b/config/locales/no.yml @@ -33,6 +33,7 @@ characters: tegn words: ord chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/pa-pk.yml b/config/locales/pa-pk.yml index 9748bbde01..36581156df 100644 --- a/config/locales/pa-pk.yml +++ b/config/locales/pa-pk.yml @@ -33,6 +33,7 @@ pa-pk: characters: کردار words: الفاظ chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/pa.yml b/config/locales/pa.yml index 4ef22b9e71..a509106a79 100644 --- a/config/locales/pa.yml +++ b/config/locales/pa.yml @@ -33,6 +33,7 @@ pa: characters: ਅੱਖਰ words: ਸ਼ਬਦ chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/pl.yml b/config/locales/pl.yml index d60df6f23c..1fcc1e2e0d 100644 --- a/config/locales/pl.yml +++ b/config/locales/pl.yml @@ -35,6 +35,7 @@ pl: characters: znaków words: słów chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ps.yml b/config/locales/ps.yml index c30cf70a7b..737de936bb 100644 --- a/config/locales/ps.yml +++ b/config/locales/ps.yml @@ -33,6 +33,7 @@ ps: characters: کرکټرونه words: ټکي chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/pt.yml b/config/locales/pt.yml index 28f8ebb260..43e158fa3d 100644 --- a/config/locales/pt.yml +++ b/config/locales/pt.yml @@ -33,6 +33,7 @@ pt: characters: carateres words: palavras chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ro.yml b/config/locales/ro.yml index f5cef2bdd8..31ff8411e9 100644 --- a/config/locales/ro.yml +++ b/config/locales/ro.yml @@ -34,6 +34,7 @@ ro: characters: caractere words: cuvinte chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ru.yml b/config/locales/ru.yml index c5cda81fce..3b769f4df3 100644 --- a/config/locales/ru.yml +++ b/config/locales/ru.yml @@ -35,6 +35,7 @@ ru: characters: символов words: слов chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/si.yml b/config/locales/si.yml index db54b9ea84..a169674524 100644 --- a/config/locales/si.yml +++ b/config/locales/si.yml @@ -33,6 +33,7 @@ si: characters: අක්ෂර words: වචන chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/sk.yml b/config/locales/sk.yml index 208ca8e547..285e065c28 100644 --- a/config/locales/sk.yml +++ b/config/locales/sk.yml @@ -34,6 +34,7 @@ sk: characters: znakov words: slov chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/sl.yml b/config/locales/sl.yml index 11c7d8fbf1..479301a7fe 100644 --- a/config/locales/sl.yml +++ b/config/locales/sl.yml @@ -37,6 +37,7 @@ sl: characters: znaki words: besede chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/so.yml b/config/locales/so.yml index 3f467dd761..1faf725393 100644 --- a/config/locales/so.yml +++ b/config/locales/so.yml @@ -33,6 +33,7 @@ so: characters: dabeecadaha words: kalmadaha chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/sq.yml b/config/locales/sq.yml index f9a9ca9f48..10dbfe5f0f 100644 --- a/config/locales/sq.yml +++ b/config/locales/sq.yml @@ -33,6 +33,7 @@ sq: characters: karaktere words: fjalë chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/sr.yml b/config/locales/sr.yml index 22ee34ff99..ee0bdbd9ec 100644 --- a/config/locales/sr.yml +++ b/config/locales/sr.yml @@ -34,6 +34,7 @@ sr: characters: znakova words: reči chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/sv.yml b/config/locales/sv.yml index c1f15b472e..a7284b3fc3 100644 --- a/config/locales/sv.yml +++ b/config/locales/sv.yml @@ -33,6 +33,7 @@ sv: characters: tecken words: ord chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/sw.yml b/config/locales/sw.yml index 4476f91986..24a53ed00f 100644 --- a/config/locales/sw.yml +++ b/config/locales/sw.yml @@ -33,6 +33,7 @@ sw: characters: herufi words: maneno chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ta.yml b/config/locales/ta.yml index 0cb78b6341..dc2b68bf43 100644 --- a/config/locales/ta.yml +++ b/config/locales/ta.yml @@ -33,6 +33,7 @@ ta: characters: எழுத்துருக்கள் words: சொற்கள் chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/th.yml b/config/locales/th.yml index 2c0c912f3f..af1ccf1301 100644 --- a/config/locales/th.yml +++ b/config/locales/th.yml @@ -32,6 +32,7 @@ th: characters: ตัวอักษร words: คำ chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/tk.yml b/config/locales/tk.yml index cb40de9f0f..8dc6448f57 100644 --- a/config/locales/tk.yml +++ b/config/locales/tk.yml @@ -33,6 +33,7 @@ tk: characters: şekiller words: sözler chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/tr.yml b/config/locales/tr.yml index 9945edb5d6..66586139f0 100644 --- a/config/locales/tr.yml +++ b/config/locales/tr.yml @@ -33,6 +33,7 @@ tr: characters: karakter words: kelime chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/uk.yml b/config/locales/uk.yml index 0e45597a1d..4eb89be1a6 100644 --- a/config/locales/uk.yml +++ b/config/locales/uk.yml @@ -35,6 +35,7 @@ uk: characters: символів words: слів chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/ur.yml b/config/locales/ur.yml index ffb303f606..9b9b805375 100644 --- a/config/locales/ur.yml +++ b/config/locales/ur.yml @@ -33,6 +33,7 @@ ur: characters: حروف words: الفاظ chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/uz.yml b/config/locales/uz.yml index 2d1ea9764e..8175f59ca9 100644 --- a/config/locales/uz.yml +++ b/config/locales/uz.yml @@ -33,6 +33,7 @@ uz: characters: белгилар words: сўзлар chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/vi.yml b/config/locales/vi.yml index f9226978b4..f0d0dcdcb8 100644 --- a/config/locales/vi.yml +++ b/config/locales/vi.yml @@ -32,6 +32,7 @@ vi: characters: ký tự words: từ chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/zh-hk.yml b/config/locales/zh-hk.yml index 2c33054b4c..ec9ca4aae9 100644 --- a/config/locales/zh-hk.yml +++ b/config/locales/zh-hk.yml @@ -32,6 +32,7 @@ zh-hk: characters: 字元 words: 字彙 chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/zh-tw.yml b/config/locales/zh-tw.yml index ad8e166b28..d41dc1b2e2 100644 --- a/config/locales/zh-tw.yml +++ b/config/locales/zh-tw.yml @@ -32,6 +32,7 @@ zh-tw: characters: 字元 words: 字 chart: + accessibility_html: table_dropdown: chat_entry: description: diff --git a/config/locales/zh.yml b/config/locales/zh.yml index 1d1ab975ba..b4f8d77154 100644 --- a/config/locales/zh.yml +++ b/config/locales/zh.yml @@ -32,6 +32,7 @@ zh: characters: 字符 words: 单词 chart: + accessibility_html: table_dropdown: chat_entry: description: From f757f98dfda912eca64d2e480982d9b1fe094f4e Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 16 Oct 2024 13:23:28 +0100 Subject: [PATCH 09/12] Hide duplicate data table - Google charts automatically appends a tabular version of the graph data in a visually hidden element after the chart, but this is redundant and a bit confusing as we already have a table of the data displayed underneath the chart for all users - there seems to be no configuration option for controlling this automatic table so I've used some slightly cludgy CSS to display none it, thereby hiding it from all users including screen readers --- .../components/_chart.scss | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss index ac1effddfb..16d6c4aa73 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_chart.scss @@ -1,5 +1,24 @@ @import "govuk_publishing_components/individual_component_support"; +.gem-c-chart { + // slight hack to hide the table automatically added by the charts JS + // not needed as we already output the table manually in the component + svg + div:has(table) { + display: none; + } + + .google-visualization-tooltip { + background-color: govuk-colour("black"); + box-shadow: none; + border: 0; + + span { + color: govuk-colour("white"); + @include govuk-font($size: 16, $weight: bold); + } + } +} + .gem-c-chart__table-wrapper { overflow: auto; } @@ -23,16 +42,3 @@ .gem-c-chart__accessibility-message { @include govuk-visually-hidden; } - -.gem-c-chart { - .google-visualization-tooltip { - background-color: govuk-colour("black"); - box-shadow: none; - border: 0; - - span { - color: govuk-colour("white"); - @include govuk-font($size: 16, $weight: bold); - } - } -} From 0ab567b43b8f504499362c8594f37062e5e6988b Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 16 Oct 2024 13:46:12 +0100 Subject: [PATCH 10/12] Add options and helpers - adds the shared helper to control margin bottom - adds the component wrapper helper because I initially remembered it wrong and thought it did margin bottom but then remembered it was the shared helper that did that but actually having the component wrapper helper on this component is no bad thing - adds an option for a download link --- .../components/_chart.html.erb | 16 ++++- .../components/docs/chart.yml | 69 +++++++++++++++++++ spec/components/chart_spec.rb | 16 ++++- 3 files changed, 98 insertions(+), 3 deletions(-) diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 26c5361ffc..3cb33b6b15 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -13,10 +13,16 @@ keys ||= [] chart_overview ||= nil hide_legend ||= false + link ||= false chart_id = "chart-id-#{SecureRandom.hex(4)}" table_id = "table-id-#{SecureRandom.hex(4)}" + shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) + component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_class("gem-c-chart") + component_helper.add_class(shared_helper.get_margin_bottom) + require "chartkick" Chartkick.options[:html] = '
' # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart @@ -58,7 +64,7 @@ %> <% if rows.length > 0 && keys.length > 0 %> <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %> -
+ <%= tag.div(**component_helper.all_attributes) do %> <% if chart_heading %> <%= render "govuk_publishing_components/components/heading", { text: chart_heading, @@ -134,5 +140,11 @@
<% end %>
- + + <% if link %> +

+ <%= link_to "Download chart data", link, class: "govuk-link" %> +

+ <% end %> + <% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml index c63e021ab0..60d16bf081 100644 --- a/app/views/govuk_publishing_components/components/docs/chart.yml +++ b/app/views/govuk_publishing_components/components/docs/chart.yml @@ -13,6 +13,7 @@ accessibility_criteria: | - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA shared_accessibility_criteria: - link +uses_component_wrapper_helper: true examples: default: data: @@ -167,3 +168,71 @@ examples: - 118 - 85 - 80 + with_a_download_link: + description: Add a download link to the original data. Doesn't do anything clever, just creates a link to the URL passed. + data: + chart_heading: Page views chart + h_axis_title: Day + v_axis_title: Views + link: 'https://www.gov.uk' + 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: + chart_heading: Page views chart + h_axis_title: Day + v_axis_title: Views + margin_bottom: 9 + 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 diff --git a/spec/components/chart_spec.rb b/spec/components/chart_spec.rb index 4511788308..48427ef55e 100644 --- a/spec/components/chart_spec.rb +++ b/spec/components/chart_spec.rb @@ -39,7 +39,7 @@ def component_name it "renders when given valid data" do render_component(data) - assert_select ".gem-c-chart", 1 + assert_select '.gem-c-chart.govuk-\!-margin-bottom-3', 1 end it "renders the correct table data horizontally" do @@ -90,4 +90,18 @@ def component_name render_component(data) assert_select ".gem-c-chart__overview", text: end + + it "can include a download link" do + data[:link] = "https://www.gov.uk" + render_component(data) + + assert_select '.govuk-link[href="https://www.gov.uk"]', text: "Download chart data" + end + + it "can have a different bottom margin" do + data[:margin_bottom] = 0 + render_component(data) + + assert_select '.gem-c-chart.govuk-\!-margin-bottom-0' + end end From 061745cdae4643aa7bc3848599f9daa04ad94025 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 17 Oct 2024 10:50:07 +0100 Subject: [PATCH 11/12] Don't smooth graph lines - smoothing distorts the graph by implying that change between data points is smooth when it isn't --- app/views/govuk_publishing_components/components/_chart.html.erb | 1 + 1 file changed, 1 insertion(+) diff --git a/app/views/govuk_publishing_components/components/_chart.html.erb b/app/views/govuk_publishing_components/components/_chart.html.erb index 3cb33b6b15..a4d4aea814 100644 --- a/app/views/govuk_publishing_components/components/_chart.html.erb +++ b/app/views/govuk_publishing_components/components/_chart.html.erb @@ -34,6 +34,7 @@ chart_library_options = { chartArea: { width: '80%', height: '60%' }, crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' }, + curveType: 'none', legend: legend, pointSize: 10, height: 400, From 5645d4a4f5ae51a3fb34e05f87104e13c7394c38 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 17 Oct 2024 11:53:17 +0100 Subject: [PATCH 12/12] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8dd1f8ef28..8ff715b56f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* Add chart component ([PR #4301](https://github.com/alphagov/govuk_publishing_components/pull/4301)) * Add inverse option for organisation logo ([PR #4284](https://github.com/alphagov/govuk_publishing_components/pull/4284)) * New options for contents-list component ([PR #4305](https://github.com/alphagov/govuk_publishing_components/pull/4305))