Add opacity and dash to configurable grid line options

elastic · Jan 30, 2019 · ac9d86c · ac9d86c
1 parent ba154de
commit ac9d86c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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 (