Add chart options for line appearance

alphagov · Nov 21, 2024 · e15480c · e15480c
1 parent c73450f
commit e15480c
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 32 deletions.
diff --git a/app/views/govuk_publishing_components/components/docs/chart.yml b/app/views/govuk_publishing_components/components/docs/chart.yml
@@ -132,6 +132,41 @@ examples:
             - 210
             - 670
             - 430
+  with_line_colours_and_styles:
+    description: Note that line styles and colours currently only work on line charts.
+    data:
+      chart_heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      chart_overview: This chart shows page views for January in different years.
+      line_colours:
+        - orange
+        - blue
+        - "#88AA11"
+      line_styles:
+        - solid
+        - dotted
+        - solid
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+      rows:
+        - label: January 2015
+          values:
+            - 110
+            - 119
+            - 105
+        - label: January 2016
+          values:
+            - 71
+            - 68
+            - 75
+        - label: January 2017
+          values:
+            - 21
+            - 42
+            - 18
   bar_chart:
     data:
       chart_heading: Hats owned

diff --git a/lib/govuk_publishing_components/presenters/chart_helper.rb b/lib/govuk_publishing_components/presenters/chart_helper.rb
@@ -14,6 +14,8 @@ def initialize(options)
         @text_position = "none" if @minimal
         @y_axis_view_window_min = 0
         @y_axis_view_window_min = "auto" if options[:y_axis_auto_adjust]
+        @line_colours = options[:line_colours]
+        @line_styles = options[:line_styles]
       end
 
       # config options are here: https://developers.google.com/chart/interactive/docs/gallery/linechart
@@ -27,6 +29,7 @@ def chart_options
           pointSize: @point_size,
           height: @height,
           tooltip: { isHtml: true },
+          series: series_options,
           hAxis: {
             textStyle: set_font_16,
             title: @h_axis_title,
@@ -71,6 +74,26 @@ def set_font_16
       def set_font_19
         { color: "#000", fontName: "GDS Transport", fontSize: "19", italic: false }
       end
+
+      def series_options
+        series = {}
+        if @line_colours
+          @line_colours.each_with_index do |item, index|
+            series[index] = {} unless series[index]
+            series[index][:color] = item
+          end
+        end
+
+        if @line_styles
+          @line_styles.each_with_index do |item, index|
+            style = [2, 2] if item == "dotted"
+            series[index] = {} unless series[index]
+            series[index][:lineDashStyle] = style
+          end
+        end
+
+        series
+      end
     end
   end
 end
diff --git a/spec/lib/govuk_publishing_components/components/chart_helper_spec.rb b/spec/lib/govuk_publishing_components/components/chart_helper_spec.rb
@@ -1,38 +1,44 @@
 RSpec.describe GovukPublishingComponents::Presenters::ChartHelper do
   describe "Chart component helper" do
-    required_params = {
-      h_axis_title: "Day",
-      v_axis_title: "Views",
-    }
-
-    expected = {
-      chartArea: { width: "80%", height: "60%" },
-      crosshair: { orientation: "vertical", trigger: "both", color: "#ccc" },
-      curveType: "none",
-      enableInteractivity: true,
-      legend: {
-        position: "top",
-        textStyle: { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false },
-      },
-      pointSize: 10,
-      height: 400,
-      tooltip: { isHtml: true },
-      hAxis: {
-        textStyle: { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false },
-        title: "Day",
-        titleTextStyle: { color: "#000", fontName: "GDS Transport", fontSize: "19", italic: false },
-        textPosition: nil,
-      },
-      vAxis: {
-        textStyle: { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false },
-        title: "Views",
-        titleTextStyle: { color: "#000", fontName: "GDS Transport", fontSize: "19", italic: false },
-        textPosition: nil,
-        viewWindow: {
-          min: 0,
+    required_params = {}
+    expected = {}
+
+    before(:each) do
+      required_params = {
+        h_axis_title: "Day",
+        v_axis_title: "Views",
+      }
+
+      expected = {
+        chartArea: { width: "80%", height: "60%" },
+        crosshair: { orientation: "vertical", trigger: "both", color: "#ccc" },
+        curveType: "none",
+        enableInteractivity: true,
+        legend: {
+          position: "top",
+          textStyle: { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false },
+        },
+        pointSize: 10,
+        height: 400,
+        tooltip: { isHtml: true },
+        series: {},
+        hAxis: {
+          textStyle: { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false },
+          title: "Day",
+          titleTextStyle: { color: "#000", fontName: "GDS Transport", fontSize: "19", italic: false },
+          textPosition: nil,
         },
-      },
-    }
+        vAxis: {
+          textStyle: { color: "#000", fontName: "GDS Transport", fontSize: "16", italic: false },
+          title: "Views",
+          titleTextStyle: { color: "#000", fontName: "GDS Transport", fontSize: "19", italic: false },
+          textPosition: nil,
+          viewWindow: {
+            min: 0,
+          },
+        },
+      }
+    end
 
     it "returns default chart options" do
       chart_helper = GovukPublishingComponents::Presenters::ChartHelper.new(required_params)
@@ -122,5 +128,19 @@
       data = chart_helper.chart_format_data
       expect(data).to eql(expected)
     end
+
+    it "returns expected options when line colours and styles are changed" do
+      required_params[:line_colours] = %w[red blue]
+      required_params[:line_styles] = %w[normal dotted normal]
+      expected[:series] = {
+        0 => { color: "red", lineDashStyle: nil },
+        1 => { color: "blue", lineDashStyle: [2, 2] },
+        2 => { lineDashStyle: nil },
+      }
+
+      chart_helper = GovukPublishingComponents::Presenters::ChartHelper.new(required_params)
+      options = chart_helper.chart_options
+      expect(options).to eql(expected)
+    end
   end
 end