feat(axis): add visibility to tick style (#374)

Add visibility property to `tickLineStyle` in `Theme`. (default: `false`)

BREAKING CHANGE: `theme.axes.tickLineStyle.visible` is now required (default base is false)

closes #330

Author: nickofthyme

src/utils/themes/dark_theme.ts

@@ -86,6 +86,7 @@ export const DARK_THEME: Theme = {
       padding: 1,
     },
     tickLineStyle: {
+      visible: true,
       stroke: '#444',
       strokeWidth: 1,
     },

src/utils/themes/light_theme.ts

@@ -85,6 +85,7 @@ export const LIGHT_THEME: Theme = {
       padding: 4,
     },
     tickLineStyle: {
+      visible: true,
       stroke: '#eaeaea',
       strokeWidth: 1,
     },

src/utils/themes/theme.ts

@@ -33,6 +33,9 @@ export interface StrokeStyle {
   /** The stroke width in pixel */
   strokeWidth: number;
 }
+
+export type TickStyle = StrokeStyle & Visible;
+
 export interface StrokeDashArray {
   /** The dash array for dashed strokes */
   dash: number[];
@@ -50,7 +53,7 @@ export interface AxisConfig {
   axisTitleStyle: TextStyle;
   axisLineStyle: StrokeStyle;
   tickLabelStyle: TextStyle;
-  tickLineStyle: StrokeStyle;
+  tickLineStyle: TickStyle;
   gridLineStyle: {
     horizontal: GridLineConfig;
     vertical: GridLineConfig;

stories/styling.tsx

@@ -262,6 +262,7 @@ storiesOf('Stylings', module)
           padding: number('tickLabelPadding', 1, {}, 'Tick Label'),
         },
         tickLineStyle: {
+          visible: boolean('showTicks', true, 'Tick Line'),
           stroke: color('tickLineColor', '#333', 'Tick Line'),
           strokeWidth: range('tickLineWidth', 0, 5, 1, 'Tick Line'),
         },