<%
add_gem_component_stylesheet("chart")
add_gem_component_stylesheet("table")
add_gem_component_stylesheet("details")
add_gem_component_stylesheet("heading")
add_gem_component_stylesheet("skip-link")
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
hide_heading ||= minimal
hide_legend ||= minimal
link ||= false
height ||= 400
padding ||= false
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
component_helper.add_class("gem-c-chart--padding") if padding
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 && !chart_heading
raise ArgumentError, "A chart heading must be provided for accessibility purposes."
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 && !hide_heading %>
<% 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"), class: "gem-c-chart__a11y-note-2" %>
<%= render "govuk_publishing_components/components/skip_link", {
text: t("components.chart.accessibility_link", chart_heading: chart_heading),
href: "##{table_id}"
} %>
<% end %>
<%= line_chart(chart_format_data, library: chart_library_options) %>
<% end %>
<% unless minimal %>
<% end %>
<% end %>
<% end %>