feat(theme): add gridLineStyle to AxisConfig (#257)

Move gridLineStyle into the `Theme` interface through the `AxisConfig` interface.

BREAKING CHANGE: Added `GridLineStyle` to `Theme` (`theme.gridLineStyle.horizontal` and `theme.gridLineStyle.vertical`)

* add gridLineStyle to AxisConfig
* add chartTheme vs axisSpec
* add gridLineStyle for theme or spec
* merge gridLineConfig from theme with axisSpec
* add visible key to GridLineConfig
* specify theme styling per axis in story
* add gridLineStyle theme with horiz and vert

Fixes #237

src/components/react_canvas/grid.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Group, Line } from 'react-konva';
 import { AxisLinePosition } from '../../chart_types/xy_chart/utils/axis_utils';
-import { DEFAULT_GRID_LINE_CONFIG, GridLineConfig, mergeWithDefaultGridLineConfig } from '../../utils/themes/theme';
+import { GridLineConfig } from '../../utils/themes/theme';
 import { Dimensions } from '../../utils/dimensions';
 
 interface GridProps {
   chartDimensions: Dimensions;
   debug: boolean;
-  gridLineStyle: GridLineConfig | undefined;
+  gridLineStyle: GridLineConfig;
   linesPositions: AxisLinePosition[];
 }
 
@@ -18,9 +18,7 @@ export class Grid extends React.PureComponent<GridProps> {
   private renderGridLine = (linePosition: AxisLinePosition, i: number) => {
     const { gridLineStyle } = this.props;
 
-    const config = gridLineStyle ? mergeWithDefaultGridLineConfig(gridLineStyle) : DEFAULT_GRID_LINE_CONFIG;
-
-    return <Line {...config} key={`tick-${i}`} points={linePosition} />;
+    return <Line {...gridLineStyle} key={`tick-${i}`} points={linePosition} />;
   };
 
   private renderGrid = () => {

src/components/react_canvas/reactive_chart.tsx

@@ -2,7 +2,7 @@ import { inject, observer } from 'mobx-react';
 import React from 'react';
 import { Layer, Rect, Stage } from 'react-konva';
 import { isLineAnnotation, isRectAnnotation } from '../../chart_types/xy_chart/utils/specs';
-import { LineAnnotationStyle, RectAnnotationStyle } from '../../utils/themes/theme';
+import { LineAnnotationStyle, RectAnnotationStyle, mergeGridLineConfigs } from '../../utils/themes/theme';
 import { AnnotationId } from '../../utils/ids';
 import {
   AnnotationDimensions,
@@ -20,6 +20,7 @@ import { LineAnnotation } from './line_annotation';
 import { LineGeometries } from './line_geometries';
 import { RectAnnotation } from './rect_annotation';
 import { ContainerConfig } from 'konva';
+import { isVertical } from '../../chart_types/xy_chart/utils/axis_utils';
 
 interface ReactiveChartProps {
   chartStore?: ChartStore; // FIX until we find a better way on ts mobx
@@ -188,18 +189,24 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
   };
 
   renderGrids = () => {
-    const { axesGridLinesPositions, axesSpecs, chartDimensions, debug } = this.props.chartStore!;
+    const { axesGridLinesPositions, axesSpecs, chartDimensions, chartTheme, debug } = this.props.chartStore!;
 
     const gridComponents: JSX.Element[] = [];
     axesGridLinesPositions.forEach((axisGridLinesPositions, axisId) => {
       const axisSpec = axesSpecs.get(axisId);
+
       if (axisSpec && axisGridLinesPositions.length > 0) {
+        const themeConfig = isVertical(axisSpec.position)
+          ? chartTheme.axes.gridLineStyle.vertical
+          : chartTheme.axes.gridLineStyle.horizontal;
+        const axisSpecConfig = axisSpec.gridLineStyle;
+        const gridLineStyle = axisSpecConfig ? mergeGridLineConfigs(axisSpecConfig, themeConfig) : themeConfig;
         gridComponents.push(
           <Grid
             key={`axis-grid-${axisId}`}
             chartDimensions={chartDimensions}
             debug={debug}
-            gridLineStyle={axisSpec.gridLineStyle}
+            gridLineStyle={gridLineStyle}
             linesPositions={axisGridLinesPositions}
           />,
         );

src/utils/themes/dark_theme.ts

@@ -89,6 +89,22 @@ export const DARK_THEME: Theme = {
       stroke: '#444',
       strokeWidth: 1,
     },
+    gridLineStyle: {
+      horizontal: {
+        visible: true,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+      vertical: {
+        visible: true,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+    },
   },
   colors: {
     vizColors: palettes.echPaletteColorBlind.colors,

src/utils/themes/light_theme.ts

@@ -1,6 +1,5 @@
 import { palettes } from './colors';
 import { Theme } from './theme';
-
 import {
   DEFAULT_CHART_MARGINS,
   DEFAULT_CHART_PADDING,
@@ -89,6 +88,22 @@ export const LIGHT_THEME: Theme = {
       stroke: '#eaeaea',
       strokeWidth: 1,
     },
+    gridLineStyle: {
+      horizontal: {
+        visible: true,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+      vertical: {
+        visible: true,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+    },
   },
   colors: {
     vizColors: palettes.echPaletteColorBlind.colors,

src/utils/themes/theme.test.ts

@@ -5,11 +5,10 @@ import {
   AreaSeriesStyle,
   DEFAULT_ANNOTATION_LINE_STYLE,
   DEFAULT_ANNOTATION_RECT_STYLE,
-  DEFAULT_GRID_LINE_CONFIG,
   LineSeriesStyle,
   mergeWithDefaultAnnotationLine,
   mergeWithDefaultAnnotationRect,
-  mergeWithDefaultGridLineConfig,
+  mergeGridLineConfigs,
   mergeWithDefaultTheme,
   PartialTheme,
   Theme,
@@ -30,16 +29,21 @@ describe('Theme', () => {
     expect(DARK_THEME).toEqual(CLONED_DARK_THEME);
   });
 
-  describe('mergeWithDefaultGridLineConfig', () => {
+  describe('mergeGridLineConfigs', () => {
     it('should merge partial grid line configs', () => {
       const fullConfig = {
+        visible: true,
         stroke: 'foo',
         strokeWidth: 1,
         opacity: 0,
         dash: [0, 0],
       };
-      expect(mergeWithDefaultGridLineConfig(fullConfig)).toEqual(fullConfig);
-      expect(mergeWithDefaultGridLineConfig({})).toEqual(DEFAULT_GRID_LINE_CONFIG);
+      const partialConfig = { strokeWidth: 5 };
+      const themeConfig = LIGHT_THEME.axes.gridLineStyle.vertical;
+
+      expect(mergeGridLineConfigs(fullConfig, themeConfig)).toEqual(fullConfig);
+      expect(mergeGridLineConfigs({}, themeConfig)).toEqual(themeConfig);
+      expect(mergeGridLineConfigs(partialConfig, themeConfig)).toEqual({ ...themeConfig, ...partialConfig });
     });
   });
 

src/utils/themes/theme.ts

@@ -51,8 +51,13 @@ export interface AxisConfig {
   axisLineStyle: StrokeStyle;
   tickLabelStyle: TextStyle;
   tickLineStyle: StrokeStyle;
+  gridLineStyle: {
+    horizontal: GridLineConfig;
+    vertical: GridLineConfig;
+  };
 }
 export interface GridLineConfig {
+  visible?: boolean;
   stroke?: string;
   strokeWidth?: number;
   opacity?: number;
@@ -212,12 +217,6 @@ export interface LineAnnotationStyle {
 
 export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity;
 
-export const DEFAULT_GRID_LINE_CONFIG: GridLineConfig = {
-  stroke: '#EFEFEF',
-  strokeWidth: 1,
-  opacity: 1,
-};
-
 export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle = {
   line: {
     stroke: '#777',
@@ -240,13 +239,15 @@ export const DEFAULT_ANNOTATION_RECT_STYLE: RectAnnotationStyle = {
   fill: '#FFEEBC',
 };
 
-export function mergeWithDefaultGridLineConfig(config: GridLineConfig): GridLineConfig {
-  const strokeWidth = config.strokeWidth != null ? config.strokeWidth : DEFAULT_GRID_LINE_CONFIG.strokeWidth;
-  const opacity = config.opacity != null ? config.opacity : DEFAULT_GRID_LINE_CONFIG.opacity;
+export function mergeGridLineConfigs(axisSpecConfig: GridLineConfig, themeConfig: GridLineConfig): GridLineConfig {
+  const visible = axisSpecConfig.visible != null ? axisSpecConfig.visible : themeConfig.visible;
+  const strokeWidth = axisSpecConfig.strokeWidth != null ? axisSpecConfig.strokeWidth : themeConfig.strokeWidth;
+  const opacity = axisSpecConfig.opacity != null ? axisSpecConfig.opacity : themeConfig.opacity;
 
   return {
-    stroke: config.stroke || DEFAULT_GRID_LINE_CONFIG.stroke,
-    dash: config.dash || DEFAULT_GRID_LINE_CONFIG.dash,
+    visible,
+    stroke: axisSpecConfig.stroke || themeConfig.stroke,
+    dash: axisSpecConfig.dash || themeConfig.dash,
     strokeWidth,
     opacity,
   };

stories/grid.tsx

@@ -15,11 +15,11 @@ import {
   Settings,
 } from '../src/';
 
-function generateGridLineConfig(group: string): GridLineConfig {
+function generateGridLineConfig(group: string, gridColor: string = 'purple'): GridLineConfig {
   const groupId = `${group} axis`;
 
   return {
-    stroke: color(`${groupId} grid line stroke color`, 'purple', groupId),
+    stroke: color(`${groupId} grid line stroke color`, gridColor, groupId),
     strokeWidth: number(
       `${groupId} grid line stroke width`,
       1,
@@ -71,29 +71,37 @@ function generateGridLineConfig(group: string): GridLineConfig {
 
 storiesOf('Grids', module)
   .add('basic', () => {
-    const leftAxisGridLineConfig = generateGridLineConfig(Position.Left);
-    const rightAxisGridLineConfig = generateGridLineConfig(Position.Right);
-    const topAxisGridLineConfig = generateGridLineConfig(Position.Top);
-    const bottomAxisGridLineConfig = generateGridLineConfig(Position.Bottom);
-
+    const leftAxisGridLineConfig = generateGridLineConfig(Position.Left, 'lightblue');
+    const rightAxisGridLineConfig = generateGridLineConfig(Position.Right, 'red');
+    const topAxisGridLineConfig = generateGridLineConfig(Position.Top, 'teal');
+    const bottomAxisGridLineConfig = generateGridLineConfig(Position.Bottom, 'blue');
+    const toggleBottomAxisGridLineStyle = boolean('use axis gridLineStyle vertically', false, 'bottom axis');
+    const toggleHorizontalAxisGridLineStyle = boolean('use axis gridLineStyle horizontally', false, 'left axis');
+    const bottomAxisThemeGridLineConfig = generateGridLineConfig('Vertical Axis Theme', 'violet');
+    const leftAxisThemeGridLineConfig = generateGridLineConfig('Horizontal Axis Theme', 'hotpink');
+    const theme = {
+      axes: {
+        gridLineStyle: { vertical: leftAxisThemeGridLineConfig, horizontal: bottomAxisThemeGridLineConfig },
+      },
+    };
     return (
-      <Chart size={[500, 300]} className={'story-chart'}>
-        <Settings debug={boolean('debug', false)} />
+      <Chart className={'story-chart'}>
+        <Settings debug={boolean('debug', false)} theme={theme} />
         <Axis
           id={getAxisId('bottom')}
           position={Position.Bottom}
           title={'Bottom axis'}
           showOverlappingTicks={true}
           showGridLines={boolean('show bottom axis grid lines', false, 'bottom axis')}
-          gridLineStyle={bottomAxisGridLineConfig}
+          gridLineStyle={toggleBottomAxisGridLineStyle ? bottomAxisGridLineConfig : undefined}
         />
         <Axis
           id={getAxisId('left1')}
-          title={'Left axis 1'}
           position={Position.Left}
+          title={'Left axis 1'}
           tickFormat={(d) => Number(d).toFixed(2)}
           showGridLines={boolean('show left axis grid lines', false, 'left axis')}
-          gridLineStyle={leftAxisGridLineConfig}
+          gridLineStyle={toggleHorizontalAxisGridLineStyle ? leftAxisGridLineConfig : undefined}
         />
         <Axis
           id={getAxisId('top')}