From ac9d86ca39760459bdd0c80f64e4d6bc0a5f5bd1 Mon Sep 17 00:00:00 2001
From: Emma Cunningham <the.cunning.ham@gmail.com>
Date: Wed, 30 Jan 2019 10:27:02 -0800
Subject: [PATCH] Add opacity and dash to configurable grid line options

---
 src/lib/axes/axis_utils.ts |  2 ++
 src/lib/themes/theme.ts    |  3 +++
 src/stories/styling.tsx    | 20 ++++++++++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts
index eedafbf9b8..a207e9a0b9 100644
--- a/src/lib/axes/axis_utils.ts
+++ b/src/lib/axes/axis_utils.ts
@@ -313,6 +313,8 @@ export function mergeWithDefaultGridLineConfig(config: GridLineConfig): GridLine
   return {
     stroke: config.stroke || DEFAULT_GRID_LINE_CONFIG.stroke,
     strokeWidth: config.strokeWidth || DEFAULT_GRID_LINE_CONFIG.strokeWidth,
+    opacity: config.opacity || DEFAULT_GRID_LINE_CONFIG.opacity,
+    dash: config.dash || DEFAULT_GRID_LINE_CONFIG.dash,
   };
 }
 
diff --git a/src/lib/themes/theme.ts b/src/lib/themes/theme.ts
index 41abe206ce..ab1b13779f 100644
--- a/src/lib/themes/theme.ts
+++ b/src/lib/themes/theme.ts
@@ -25,6 +25,8 @@ export interface AxisConfig {
 export interface GridLineConfig {
   stroke?: string;
   strokeWidth?: number;
+  opacity?: number;
+  dash?: number[];
 }
 export interface ScalesConfig {
   ordinal: {
@@ -86,6 +88,7 @@ export interface PartialTheme {
 export const DEFAULT_GRID_LINE_CONFIG: GridLineConfig = {
   stroke: 'red',
   strokeWidth: 1,
+  opacity: 1,
 };
 
 export const DEFAULT_THEME: Theme = {
diff --git a/src/stories/styling.tsx b/src/stories/styling.tsx
index 7f040d064d..e47d641152 100644
--- a/src/stories/styling.tsx
+++ b/src/stories/styling.tsx
@@ -41,6 +41,26 @@ storiesOf('Stylings', module)
         max: 10,
         step: 1,
       }),
+      opacity: number('left axis grid line stroke opacity', 1, {
+        range: true,
+        min: 0,
+        max: 1,
+        step: 0.01,
+      }),
+      dash: [
+        number('left axis grid line dash length', 1, {
+          range: true,
+          min: 0,
+          max: 10,
+          step: 1,
+        }),
+        number('left axis grid line dash spacing', 1, {
+          range: true,
+          min: 0,
+          max: 10,
+          step: 1,
+        }),
+      ],
     };
 
     return (