feat(axis): add tickLabelPadding prop

src/components/react_canvas/axis.tsx

@@ -29,7 +29,16 @@ export class Axis extends React.PureComponent<AxisProps> {
     return this.renderAxis();
   }
   renderTickLabel = (tick: AxisTick, i: number) => {
-    const { padding, ...labelStyle } = this.props.chartTheme.axes.tickLabelStyle;
+    /**
+     * padding is already computed through width
+     * and bbox_calculator using tickLabelPadding
+     * set padding to 0 to avoid conflict
+     */
+    const labelStyle = {
+      ...this.props.chartTheme.axes.tickLabelStyle,
+      padding: 0,
+    };
+
     const {
       axisSpec: { tickSize, tickPadding, position },
       axisTicksDimensions,
@@ -48,6 +57,7 @@ export class Axis extends React.PureComponent<AxisProps> {
     );
 
     const { maxLabelTextWidth, maxLabelTextHeight } = axisTicksDimensions;
+
     const centeredRectProps = centerRotationOrigin(axisTicksDimensions, {
       x: tickLabelProps.x,
       y: tickLabelProps.y,

src/lib/axes/axis_utils.test.ts

@@ -458,7 +458,7 @@ describe('Axis computational utils', () => {
   });
   test('should get max bbox dimensions for a tick in comparison to previous values', () => {
     const bboxCalculator = new CanvasTextBBoxCalculator();
-    const reducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0);
+    const reducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0, 1);
 
     const accWithGreaterValues = {
       maxLabelBboxWidth: 100,
@@ -1272,4 +1272,15 @@ describe('Axis computational utils', () => {
     expect(isBounded(lowerBounded)).toBe(true);
     expect(isBounded(upperBounded)).toBe(true);
   });
+  test('should not allow negative padding', () => {
+    const negativePadding = -2;
+    // value canvas_text_bbox_calculator changes negative values is 1
+    const positivePadding = 1;
+
+    const bboxCalculator = new CanvasTextBBoxCalculator();
+    const negativeReducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0, negativePadding);
+    const positiveReducer = getMaxBboxDimensions(bboxCalculator, 16, 'Arial', 0, positivePadding);
+
+    expect(JSON.stringify(negativeReducer)).toEqual(JSON.stringify(positiveReducer));
+  });
 });

src/lib/axes/axis_utils.ts

@@ -44,7 +44,7 @@ export interface TickLabelProps {
 /**
  * Compute the ticks values and identify max width and height of the labels
  * so we can compute the max space occupied by the axis component.
- * @param axisSpec tbe spec of the axis
+ * @param axisSpec the spec of the axis
  * @param xDomain the x domain associated
  * @param yDomain the y domain array
  * @param totalBarsInCluster the total number of grouped series
@@ -69,11 +69,18 @@ export function computeAxisTicksDimensions(
   if (!scale) {
     throw new Error(`Cannot compute scale for axis spec ${axisSpec.id}`);
   }
+
+  const tickLabelPadding =
+    axisSpec.style && axisSpec.style.tickLabelPadding
+      ? axisSpec.style.tickLabelPadding
+      : axisConfig.tickLabelStyle.padding;
+
   const dimensions = computeTickDimensions(
     scale,
     axisSpec.tickFormat,
     bboxCalculator,
     axisConfig,
+    tickLabelPadding,
     axisSpec.tickLabelRotation,
   );
 
@@ -133,6 +140,7 @@ export const getMaxBboxDimensions = (
   fontSize: number,
   fontFamily: string,
   tickLabelRotation: number,
+  tickLabelPadding: number,
 ) => (
   acc: { [key: string]: number },
   tickLabel: string,
@@ -142,7 +150,7 @@ export const getMaxBboxDimensions = (
   maxLabelTextWidth: number;
   maxLabelTextHeight: number;
 } => {
-  const bbox = bboxCalculator.compute(tickLabel, fontSize, fontFamily).getOrElse({
+  const bbox = bboxCalculator.compute(tickLabel, tickLabelPadding, fontSize, fontFamily).getOrElse({
     width: 0,
     height: 0,
   });
@@ -158,7 +166,6 @@ export const getMaxBboxDimensions = (
   const prevHeight = acc.maxLabelBboxHeight;
   const prevLabelWidth = acc.maxLabelTextWidth;
   const prevLabelHeight = acc.maxLabelTextHeight;
-
   return {
     maxLabelBboxWidth: prevWidth > width ? prevWidth : width,
     maxLabelBboxHeight: prevHeight > height ? prevHeight : height,
@@ -172,6 +179,7 @@ function computeTickDimensions(
   tickFormat: TickFormatter,
   bboxCalculator: BBoxCalculator,
   axisConfig: AxisConfig,
+  tickLabelPadding: number,
   tickLabelRotation: number = 0,
 ) {
   const tickValues = scale.ticks();
@@ -182,7 +190,7 @@ function computeTickDimensions(
   } = axisConfig;
 
   const { maxLabelBboxWidth, maxLabelBboxHeight, maxLabelTextWidth, maxLabelTextHeight } = tickLabels.reduce(
-    getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation),
+    getMaxBboxDimensions(bboxCalculator, fontSize, fontFamily, tickLabelRotation, tickLabelPadding),
     { maxLabelBboxWidth: 0, maxLabelBboxHeight: 0, maxLabelTextWidth: 0, maxLabelTextHeight: 0 },
   );
 

src/lib/axes/bbox_calculator.ts

@@ -6,6 +6,6 @@ export interface BBox {
 }
 
 export interface BBoxCalculator {
-  compute(text: string, fontSize?: number, fontFamily?: string): Option<BBox>;
+  compute(text: string, padding: number, fontSize?: number, fontFamily?: string): Option<BBox>;
   destroy(): void;
 }

src/lib/axes/canvas_text_bbox_calculator.test.ts

@@ -4,20 +4,20 @@ import { CanvasTextBBoxCalculator } from './canvas_text_bbox_calculator';
 describe('CanvasTextBBoxCalculator', () => {
   test('can create a canvas for computing text measurement values', () => {
     const canvasBboxCalculator = new CanvasTextBBoxCalculator();
-    const bbox = canvasBboxCalculator.compute('foo').getOrElse({
+    const bbox = canvasBboxCalculator.compute('foo', 0).getOrElse({
       width: 0,
       height: 0,
     });
     expect(Math.abs(bbox.width - 23.2)).toBeLessThanOrEqual(2);
     expect(bbox.height).toBe(16);
 
     canvasBboxCalculator.context = null;
-    expect(canvasBboxCalculator.compute('foo')).toBe(none);
+    expect(canvasBboxCalculator.compute('foo', 0)).toBe(none);
   });
   test('can compute near the same width for the same text independently of the scale factor', () => {
     let canvasBboxCalculator = new CanvasTextBBoxCalculator(undefined, 5);
 
-    let bbox = canvasBboxCalculator.compute('foo').getOrElse({
+    let bbox = canvasBboxCalculator.compute('foo', 0).getOrElse({
       width: 0,
       height: 0,
     });
@@ -26,7 +26,7 @@ describe('CanvasTextBBoxCalculator', () => {
 
     canvasBboxCalculator = new CanvasTextBBoxCalculator(undefined, 10);
 
-    bbox = canvasBboxCalculator.compute('foo').getOrElse({
+    bbox = canvasBboxCalculator.compute('foo', 0).getOrElse({
       width: 0,
       height: 0,
     });
@@ -35,7 +35,7 @@ describe('CanvasTextBBoxCalculator', () => {
 
     canvasBboxCalculator = new CanvasTextBBoxCalculator(undefined, 50);
 
-    bbox = canvasBboxCalculator.compute('foo').getOrElse({
+    bbox = canvasBboxCalculator.compute('foo', 0).getOrElse({
       width: 0,
       height: 0,
     });
@@ -44,7 +44,7 @@ describe('CanvasTextBBoxCalculator', () => {
 
     canvasBboxCalculator = new CanvasTextBBoxCalculator(undefined, 100);
 
-    bbox = canvasBboxCalculator.compute('foo').getOrElse({
+    bbox = canvasBboxCalculator.compute('foo', 0).getOrElse({
       width: 0,
       height: 0,
     });
@@ -53,7 +53,7 @@ describe('CanvasTextBBoxCalculator', () => {
 
     canvasBboxCalculator = new CanvasTextBBoxCalculator(undefined, 1000);
 
-    bbox = canvasBboxCalculator.compute('foo').getOrElse({
+    bbox = canvasBboxCalculator.compute('foo', 0).getOrElse({
       width: 0,
       height: 0,
     });

src/lib/axes/canvas_text_bbox_calculator.ts

@@ -17,11 +17,16 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator {
     this.attachedRoot.appendChild(this.offscreenCanvas);
     this.scaledFontSize = scaledFontSize;
   }
-  compute(text: string, fontSize = 16, fontFamily = 'Arial', padding: number = 1): Option<BBox> {
+  compute(text: string, padding: number, fontSize = 16, fontFamily = 'Arial'): Option<BBox> {
     if (!this.context) {
       return none;
     }
 
+    // Avoid having negative padding that can obscure text
+    if (padding < 1) {
+      padding = 1;
+    }
+
     // We scale the text up to get a more accurate computation of the width of the text
     // because `measureText` can vary a lot between browsers.
     const scalingFactor = this.scaledFontSize / fontSize;

src/lib/series/rendering.ts

@@ -207,6 +207,8 @@ export function renderBars(
   const barGeometries: BarGeometry[] = [];
 
   const bboxCalculator = new CanvasTextBBoxCalculator();
+  // default padding to 1 for now
+  const padding = 1;
   const fontSize = seriesStyle && seriesStyle.displayValue ? seriesStyle.displayValue.fontSize : undefined;
   const fontFamily = seriesStyle && seriesStyle.displayValue ? seriesStyle.displayValue.fontFamily : undefined;
 
@@ -253,10 +255,12 @@ export function renderBars(
           : undefined
         : formattedDisplayValue;
 
-    const computedDisplayValueWidth = bboxCalculator.compute(displayValueText || '', fontSize, fontFamily).getOrElse({
-      width: 0,
-      height: 0,
-    }).width;
+    const computedDisplayValueWidth = bboxCalculator
+      .compute(displayValueText || '', padding, fontSize, fontFamily)
+      .getOrElse({
+        width: 0,
+        height: 0,
+      }).width;
     const displayValueWidth =
       displayValueSettings && displayValueSettings.isValueContainedInElement ? width : computedDisplayValueWidth;
 

src/lib/series/specs.ts

@@ -218,10 +218,17 @@ export interface AxisSpec {
   title?: string;
   /** If specified, it constrains the domain for these values */
   domain?: DomainRange;
+  /** 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.

src/lib/themes/dark_theme.ts

@@ -92,7 +92,7 @@ export const DARK_THEME: Theme = {
       fontFamily: 'sans-serif',
       fontStyle: 'normal',
       fill: 'white',
-      padding: 0,
+      padding: 1,
     },
     tickLineStyle: {
       stroke: 'white',

src/lib/themes/light_theme.ts

@@ -92,7 +92,7 @@ export const LIGHT_THEME: Theme = {
       fontFamily: 'sans-serif',
       fontStyle: 'normal',
       fill: 'gray',
-      padding: 0,
+      padding: 1,
     },
     tickLineStyle: {
       stroke: 'gray',

stories/axis.tsx

@@ -54,15 +54,26 @@ function renderAxisWithOptions(position: Position, seriesGroup: string, show: bo
 
 storiesOf('Axis', module)
   .add('basic', () => {
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding', 0),
+    };
+
     return (
       <Chart className={'story-chart'}>
         <Settings debug={boolean('debug', false)} />
-        <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+        <Axis
+          id={getAxisId('bottom')}
+          position={Position.Bottom}
+          title={'Bottom axis'}
+          showOverlappingTicks={true}
+          style={customStyle}
+        />
         <Axis
           id={getAxisId('left2')}
           title={'Left axis'}
           position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}
+          style={customStyle}
         />
 
         <AreaSeries
@@ -77,6 +88,10 @@ storiesOf('Axis', module)
     );
   })
   .add('tick label rotation', () => {
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding', 0),
+    };
+
     return (
       <Chart className={'story-chart'}>
         <Axis
@@ -90,6 +105,7 @@ storiesOf('Axis', module)
             max: 90,
             step: 1,
           })}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('left')}
@@ -102,6 +118,7 @@ storiesOf('Axis', module)
             step: 1,
           })}
           tickFormat={(d) => Number(d).toFixed(2)}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('top')}
@@ -114,6 +131,7 @@ storiesOf('Axis', module)
             step: 1,
           })}
           tickFormat={(d) => Number(d).toFixed(2)}
+          style={customStyle}
         />
         <Axis
           id={getAxisId('right')}
@@ -126,6 +144,7 @@ storiesOf('Axis', module)
             step: 1,
           })}
           tickFormat={(d) => Number(d).toFixed(2)}
+          style={customStyle}
         />
         <AreaSeries
           id={getSpecId('lines')}
@@ -310,10 +329,20 @@ storiesOf('Axis', module)
   .add('w many tick labels', () => {
     const dg = new DataGenerator();
     const data = dg.generateSimpleSeries(31);
+    const customStyle = {
+      tickLabelPadding: number('Tick Label Padding', 0),
+    };
+
     return (
       <Chart className={'story-chart'}>
         <Settings debug={true} />
-        <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
+        <Axis
+          id={getAxisId('bottom')}
+          position={Position.Bottom}
+          title={'Bottom axis'}
+          showOverlappingTicks={true}
+          style={customStyle}
+        />
         <AreaSeries
           id={getSpecId('lines')}
           xScaleType={ScaleType.Linear}
@@ -345,7 +374,6 @@ storiesOf('Axis', module)
       min: number('xDomain min', 0),
       max: number('xDomain max', 3),
     };
-
     return (
       <Chart className={'story-chart'}>
         <Settings showLegend={false} xDomain={xDomain} />