test(axis_utils.test): add test for tickLabelPadding style prop or theme

elastic · Jul 3, 2019 · d8dd8f4 · d8dd8f4
1 parent 776239a
commit d8dd8f4
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/src/lib/axes/axis_utils.test.ts b/src/lib/axes/axis_utils.test.ts
@@ -1,6 +1,6 @@
 import { XDomain } from '../series/domains/x_domain';
 import { YDomain } from '../series/domains/y_domain';
-import { AxisSpec, DomainRange, Position } from '../series/specs';
+import { AxisSpec, DomainRange, Position, AxisStyle } from '../series/specs';
 import { LIGHT_THEME } from '../themes/light_theme';
 import { AxisId, getAxisId, getGroupId, GroupId } from '../utils/ids';
 import { ScaleType } from '../utils/scales/scales';
@@ -28,6 +28,7 @@ import {
   isVertical,
   isYDomain,
   mergeDomainsByGroupId,
+  getAxisTickLabelPadding,
 } from './axis_utils';
 import { CanvasTextBBoxCalculator } from './canvas_text_bbox_calculator';
 import { SvgTextBBoxCalculator } from './svg_text_bbox_calculator';
@@ -1283,4 +1284,13 @@ describe('Axis computational utils', () => {
 
     expect(JSON.stringify(negativeReducer)).toEqual(JSON.stringify(positiveReducer));
   });
+  test('should expect axisSpec.style.tickLabelPadding if specified', () => {
+    const axisSpecStyle: AxisStyle = {
+      tickLabelPadding: 2,
+    };
+
+    const axisConfigTickLabelPadding = 1;
+
+    expect(getAxisTickLabelPadding(axisConfigTickLabelPadding, axisSpecStyle)).toEqual(2);
+  });
 });
diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts
@@ -10,6 +10,7 @@ import {
   Rotation,
   TickFormatter,
   UpperBoundedDomain,
+  AxisStyle,
 } from '../series/specs';
 import { AxisConfig, Theme } from '../themes/theme';
 import { Dimensions, Margins } from '../utils/dimensions';
@@ -70,10 +71,7 @@ export function computeAxisTicksDimensions(
     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 tickLabelPadding = getAxisTickLabelPadding(axisConfig.tickLabelStyle.padding, axisSpec.style);
 
   const dimensions = computeTickDimensions(
     scale,
@@ -89,6 +87,13 @@ export function computeAxisTicksDimensions(
   };
 }
 
+export function getAxisTickLabelPadding(axisConfigTickLabelPadding: number, axisSpecStyle?: AxisStyle): number {
+  if (axisSpecStyle && axisSpecStyle.tickLabelPadding) {
+    return axisSpecStyle.tickLabelPadding;
+  }
+  return axisConfigTickLabelPadding;
+}
+
 export function isYDomain(position: Position, chartRotation: Rotation): boolean {
   const isStraightRotation = chartRotation === 0 || chartRotation === 180;
   if (isVertical(position)) {

diff --git a/src/lib/axes/canvas_text_bbox_calculator.ts b/src/lib/axes/canvas_text_bbox_calculator.ts
@@ -22,7 +22,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator {
       return none;
     }
 
-    // Avoid having negative padding that can obscure text
+    // Padding should be at least one to avoid browser measureText inconsistencies
     if (padding < 1) {
       padding = 1;
     }

diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts
@@ -219,12 +219,12 @@ export interface AxisSpec {
   /** If specified, it constrains the domain for these values */
   domain?: DomainRange;
   /** Object to hold custom styling */
-  style?: CustomStyle;
+  style?: AxisStyle;
 }
 
 export type TickFormatter = (value: any) => string;
 
-interface CustomStyle {
+export interface AxisStyle {
   /** Specifies the amount of padding on the tick label bounding box */
   tickLabelPadding?: number;
 }