refactor(axis_utils specs): create style object

rshen91 · rshen91 · commit 776239aa01ec · 2019-07-02T12:10:23.000-06:00
diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts
@@ -70,7 +70,10 @@ export function computeAxisTicksDimensions(
     throw new Error(`Cannot compute scale for axis spec ${axisSpec.id}`);
   }
 
-  const tickLabelPadding = axisSpec.tickLabelPadding || axisConfig.tickLabelStyle.padding;
+  const tickLabelPadding =
+    axisSpec.style && axisSpec.style.tickLabelPadding
+      ? axisSpec.style.tickLabelPadding
+      : axisConfig.tickLabelStyle.padding;
 
   const dimensions = computeTickDimensions(
     scale,
diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts
@@ -218,12 +218,17 @@ export interface AxisSpec {
   title?: string;
   /** If specified, it constrains the domain for these values */
   domain?: DomainRange;
-  /** Specifies the amount of padding on the tick label bounding box */
-  tickLabelPadding?: number;
+  /** Object to hold custom styling */
+  style?: CustomStyle;
 }
 
 export type TickFormatter = (value: any) => string;
 
+interface CustomStyle {
+  /** Specifies the amount of padding on the tick label bounding box */
+  tickLabelPadding?: number;
+}
+
 /**
  * The position of the axis relative to the chart.
  * A left or right positioned axis is a vertical axis.
diff --git a/stories/axis.tsx b/stories/axis.tsx
@@ -54,7 +54,10 @@ function renderAxisWithOptions(position: Position, seriesGroup: string, show: bo
 
 storiesOf('Axis', module)
   .add('basic', () => {
-    const tickLabelPadding = number('Tick Label Padding', 0);
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding', 0),
+    };
+
     return (
       <Chart className={'story-chart'}>
         <Settings debug={boolean('debug', false)} />
@@ -63,14 +66,14 @@ storiesOf('Axis', module)
           position={Position.Bottom}
           title={'Bottom axis'}
           showOverlappingTicks={true}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('left2')}
           title={'Left axis'}
           position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
 
         <AreaSeries
@@ -85,7 +88,10 @@ storiesOf('Axis', module)
     );
   })
   .add('tick label rotation', () => {
-    const tickLabelPadding = number('Axis Tick Label Padding', 0);
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding', 0),
+    };
+
     return (
       <Chart className={'story-chart'}>
         <Axis
@@ -99,7 +105,7 @@ storiesOf('Axis', module)
             max: 90,
             step: 1,
           })}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('left')}
@@ -112,7 +118,7 @@ storiesOf('Axis', module)
             step: 1,
           })}
           tickFormat={(d) => Number(d).toFixed(2)}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('top')}
@@ -125,7 +131,7 @@ storiesOf('Axis', module)
             step: 1,
           })}
           tickFormat={(d) => Number(d).toFixed(2)}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('right')}
@@ -138,7 +144,7 @@ storiesOf('Axis', module)
             step: 1,
           })}
           tickFormat={(d) => Number(d).toFixed(2)}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <AreaSeries
           id={getSpecId('lines')}
@@ -323,7 +329,10 @@ storiesOf('Axis', module)
   .add('w many tick labels', () => {
     const dg = new DataGenerator();
     const data = dg.generateSimpleSeries(31);
-    const tickLabelPadding = number('Axis Tick Label Padding', 0);
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding', 0),
+    };
+
     return (
       <Chart className={'story-chart'}>
         <Settings debug={true} />
@@ -332,7 +341,7 @@ storiesOf('Axis', module)
           position={Position.Bottom}
           title={'Bottom axis'}
           showOverlappingTicks={true}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <AreaSeries
           id={getSpecId('lines')}
diff --git a/stories/styling.tsx b/stories/styling.tsx
@@ -686,7 +686,9 @@ storiesOf('Stylings', module)
       },
     };
     const customTheme = mergeWithDefaultTheme(theme, LIGHT_THEME);
-    const tickLabelPadding = number('Tick Label Padding Axis Spec', 0);
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding Axis Spec', 0),
+    };
     return (
       <Chart className={'story-chart'}>
         <Settings theme={customTheme} debug={boolean('debug', true)} />
@@ -695,7 +697,7 @@ storiesOf('Stylings', module)
           position={Position.Bottom}
           title={'Bottom axis'}
           showOverlappingTicks={true}
-          tickLabelPadding={tickLabelPadding}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('left2')}
