<% add_gem_component_stylesheet("chart") add_gem_component_stylesheet("table") add_gem_component_stylesheet("details") add_gem_component_stylesheet("heading") chart_heading ||= nil chart_heading_level ||= 2 table_direction ||= "horizontal" h_axis_title ||= nil v_axis_title ||= nil rows ||= [] keys ||= [] chart_overview ||= nil minimal ||= false minimal_link ||= nil hide_legend ||= minimal link ||= false height ||= 400 chart_id = "chart-id-#{SecureRandom.hex(4)}" table_id = "table-id-#{SecureRandom.hex(4)}" @external_script ||= OpenStruct.new(loaded: 0) @external_script[:loaded] += 1 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) component_helper.add_class("gem-c-chart--minimal") if minimal 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 pointSize = 10 pointSize = 0 if minimal enableInteractivity = true enableInteractivity = false if minimal textPosition = nil textPosition = 'none' if minimal if minimal && !minimal_link raise ArgumentError, "Minimal version must include a link" end chart_library_options = { chartArea: { width: '80%', height: '60%' }, crosshair: { orientation: 'vertical', trigger: 'both', color: '#ccc' }, curveType: 'none', enableInteractivity: enableInteractivity, legend: legend, pointSize: pointSize, height: height, tooltip: { isHtml: true }, hAxis: { textStyle: font_16, format: 'd MMM Y', # https://developers.google.com/chart/interactive/docs/reference#dateformatter title: h_axis_title, titleTextStyle: font_19, textPosition: textPosition, }, vAxis: { format: '#,###,###', textStyle: font_16, title: v_axis_title, titleTextStyle: font_19, textPosition: textPosition, }, } 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 %> <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" if @external_script[:loaded] == 1 %> <%= tag.div(**component_helper.all_attributes) do %> <% if chart_heading && !minimal %> <%= render "govuk_publishing_components/components/heading", { text: chart_heading, heading_level: chart_heading_level, margin_bottom: 2, } %> <% end %> <% aria_attributes = { hidden: true } if minimal %> <%= content_tag :div, id: chart_id, class: "gem-c-chart__chart", aria: aria_attributes do %> <% unless minimal %>
<%= content_tag :div, chart_overview, class: "gem-c-chart__a11y-note-1" if chart_overview %> <%= content_tag :div, t("components.chart.accessibility_html", table_id: table_id), class: "gem-c-chart__a11y-note-2" %>
<% end %> <%= line_chart(chart_format_data, library: chart_library_options) %> <% end %> <% unless minimal %>
<%= render("govuk_publishing_components/components/details", title: t("components.chart.table_dropdown") ) 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 %>
<% if link %>

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

<% end %> <% end %> <% if minimal %> <%= link_to(minimal_link, class: "govuk-link gem-c-chart__minimal-link") do %> <%= chart_heading %> <% end %> <% end %> <% end %> <% end %>