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
elastic · Sep 19, 2019 · 265a6bb · 265a6bb
1 parent 53a0fe0
commit 265a6bb
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 1 deletion.
diff --git a/src/utils/themes/dark_theme.ts b/src/utils/themes/dark_theme.ts
@@ -86,6 +86,7 @@ export const DARK_THEME: Theme = {
       padding: 1,
     },
     tickLineStyle: {
+      visible: true,
       stroke: '#444',
       strokeWidth: 1,
     },

diff --git a/src/utils/themes/light_theme.ts b/src/utils/themes/light_theme.ts
@@ -85,6 +85,7 @@ export const LIGHT_THEME: Theme = {
       padding: 4,
     },
     tickLineStyle: {
+      visible: true,
       stroke: '#eaeaea',
       strokeWidth: 1,
     },

diff --git a/src/utils/themes/theme.ts b/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;

diff --git a/stories/styling.tsx b/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'),
         },