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

rshen91 · rshen91 · commit d8dd8f472f89 · 2019-07-03T08:57:20.000-06:00
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;
 }

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export class CanvasTextBBoxCalculator implements BBoxCalculator {`
`22`	`22`	`return none;`
`23`	`23`	`}`
`24`	`24`
`25`		`- // Avoid having negative padding that can obscure text`
	`25`	`+ // Padding should be at least one to avoid browser measureText inconsistencies`
`26`	`26`	`if (padding < 1) {`
`27`	`27`	`padding = 1;`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -219,12 +219,12 @@ export interface AxisSpec {`
`219`	`219`	`/** If specified, it constrains the domain for these values */`
`220`	`220`	`domain?: DomainRange;`
`221`	`221`	`/** Object to hold custom styling */`
`222`		`- style?: CustomStyle;`
	`222`	`+ style?: AxisStyle;`
`223`	`223`	`}`
`224`	`224`
`225`	`225`	`export type TickFormatter = (value: any) => string;`
`226`	`226`
`227`		`-interface CustomStyle {`
	`227`	`+export interface AxisStyle {`
`228`	`228`	`/** Specifies the amount of padding on the tick label bounding box */`
`229`	`229`	`tickLabelPadding?: number;`
`230`	`230`	`}`