fix(axis_title): remove whitespace with empty axis title (#226)

The whitespace left from an undefined title is removed from the computation of the axis dimension, removing the unnecessary whitespace occupied by an empty title label

fix #225

src/components/react_canvas/axis.tsx

@@ -91,9 +91,13 @@ export class Axis extends React.PureComponent<AxisProps> {
     return <Line key={`tick-${i}`} points={lineProps} {...tickLineStyle} />;
   }
   private renderAxis = () => {
-    const { ticks, axisPosition } = this.props;
+    const { ticks, axisPosition, debug } = this.props;
     return (
       <Group x={axisPosition.left} y={axisPosition.top}>
+        {debug && (
+            <Rect x={0} y={0} width={axisPosition.width} height={axisPosition.height} fill={'blue'} />
+          )
+        }
         <Group key="lines">{this.renderAxisLine()}</Group>
         <Group key="tick-lines">{ticks.map(this.renderTickLine)}</Group>
         <Group key="ticks">

src/lib/axes/axis_utils.test.ts

@@ -103,6 +103,37 @@ describe('Axis computational utils', () => {
     },
   };
 
+  const verticalAxisSpecWTitle: AxisSpec = {
+    id: getAxisId('axis_1'),
+    groupId: getGroupId('group_1'),
+    title: 'v axis',
+    hide: false,
+    showOverlappingTicks: false,
+    showOverlappingLabels: false,
+    position: Position.Left,
+    tickSize: 10,
+    tickPadding: 10,
+    tickFormat: (value: any) => {
+      return `${value}`;
+    },
+    showGridLines: true,
+  };
+
+  // const horizontalAxisSpecWTitle: AxisSpec = {
+  //   id: getAxisId('axis_2'),
+  //   groupId: getGroupId('group_1'),
+  //   title: 'h axis',
+  //   hide: false,
+  //   showOverlappingTicks: false,
+  //   showOverlappingLabels: false,
+  //   position: Position.Top,
+  //   tickSize: 10,
+  //   tickPadding: 10,
+  //   tickFormat: (value: any) => {
+  //     return `${value}`;
+  //   },
+  // };
+
   const xDomain: XDomain = {
     type: 'xDomain',
     scaleType: ScaleType.Linear,
@@ -689,6 +720,56 @@ describe('Axis computational utils', () => {
     expect(horizontalAxisGridLinePositions).toEqual([10, 0, 10, 200]);
   });
 
+  test('should compute axis ticks positions with title', () => {
+    const chartRotation = 0;
+    const showLegend = false;
+
+    // validate assumptions for test
+    expect(verticalAxisSpec.id).toEqual(verticalAxisSpecWTitle.id);
+
+    const axisSpecs = new Map();
+    axisSpecs.set(verticalAxisSpecWTitle.id, verticalAxisSpecWTitle);
+
+    const axisDims = new Map();
+    axisDims.set(verticalAxisSpecWTitle.id, axis1Dims);
+
+    let axisTicksPosition = getAxisTicksPositions(
+      chartDim,
+      LIGHT_THEME,
+      chartRotation,
+      showLegend,
+      axisSpecs,
+      axisDims,
+      xDomain,
+      [yDomain],
+      1,
+    );
+
+    let left = 12 + 5 + 10 + 10; // font size + title padding + chart margin left + label width
+    expect(axisTicksPosition.axisPositions.get(verticalAxisSpecWTitle.id))
+      .toEqual({ top: 0, left, width: 10, height: 100 });
+
+    axisSpecs.set(verticalAxisSpec.id, verticalAxisSpec);
+
+    axisDims.set(verticalAxisSpec.id, axis1Dims);
+
+    axisTicksPosition = getAxisTicksPositions(
+      chartDim,
+      LIGHT_THEME,
+      chartRotation,
+      showLegend,
+      axisSpecs,
+      axisDims,
+      xDomain,
+      [yDomain],
+      1,
+    );
+
+    left = 0 + 10 + 10; // no title + chart margin left + label width
+    expect(axisTicksPosition.axisPositions.get(verticalAxisSpecWTitle.id))
+      .toEqual({ top: 0, left: 20, width: 10, height: 100 });
+  });
+
   test('should compute left axis position', () => {
     const axisTitleHeight = 10;
     const cumTopSum = 10;

src/lib/axes/axis_utils.ts

@@ -581,7 +581,8 @@ export function getAxisTicksPositions(
     }
 
     const { fontSize, padding } = chartTheme.axes.axisTitleStyle;
-    const axisTitleHeight = fontSize + padding;
+
+    const axisTitleHeight = axisSpec.title !== undefined ? fontSize + padding : 0;
 
     const axisPosition = getAxisPosition(
       chartDimensions,

src/lib/utils/__snapshots__/dimensions.test.ts.snap

@@ -11,7 +11,7 @@ Object {
 
 exports[`Computed chart dimensions should be padded by a bottom axis 1`] = `
 Object {
-  "height": 10,
+  "height": 30,
   "left": 20,
   "top": 20,
   "width": 60,
@@ -21,9 +21,9 @@ Object {
 exports[`Computed chart dimensions should be padded by a left axis 1`] = `
 Object {
   "height": 60,
-  "left": 70,
+  "left": 50,
   "top": 20,
-  "width": 10,
+  "width": 30,
 }
 `;
 
@@ -32,15 +32,15 @@ Object {
   "height": 60,
   "left": 20,
   "top": 20,
-  "width": 10,
+  "width": 30,
 }
 `;
 
 exports[`Computed chart dimensions should be padded by a top axis 1`] = `
 Object {
-  "height": 10,
+  "height": 30,
   "left": 20,
-  "top": 70,
+  "top": 50,
   "width": 60,
 }
 `;

src/lib/utils/dimensions.ts

@@ -51,23 +51,24 @@ export function computeChartDimensions(
     if (!axisSpec || axisSpec.hide) {
       return;
     }
-    const { position, tickSize, tickPadding } = axisSpec;
+    const { position, tickSize, tickPadding, title } = axisSpec;
+    const titleHeight = title !== undefined ? axisTitleHeight : 0;
     switch (position) {
       case Position.Top:
         hTopAxisSpecHeight +=
-          maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + axisTitleHeight;
+          maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + titleHeight;
         break;
       case Position.Bottom:
         hBottomAxisSpecHeight +=
-          maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + axisTitleHeight;
+          maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + titleHeight;
         break;
       case Position.Left:
         vLeftAxisSpecWidth +=
-          maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + axisTitleHeight;
+          maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + titleHeight;
         break;
       case Position.Right:
         vRightAxisSpecWidth +=
-          maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + axisTitleHeight;
+          maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + titleHeight;
         break;
     }
   });

stories/styling.tsx

@@ -105,6 +105,10 @@ storiesOf('Stylings', module)
         barsPadding: range('bar padding', 0, 1, 0.1, undefined, 0.01),
       },
     };
+    const withLeftTitle = boolean('left axis with title', true);
+    const withBottomTitle = boolean('bottom axis with title', true);
+    const withRightTitle = boolean('right axis with title', true);
+    const withTopTitle = boolean('top axis with title', true);
     const customTheme = mergeWithDefaultTheme(theme, LIGHT_THEME);
     return (
       <Chart className={'story-chart'}>
@@ -117,27 +121,27 @@ storiesOf('Stylings', module)
         <Axis
           id={getAxisId('bottom')}
           position={Position.Bottom}
-          title={'Bottom axis'}
+          title={withBottomTitle ? 'Bottom axis' : undefined}
           showOverlappingTicks={true}
           showGridLines={boolean('show bottom axis grid lines', false)}
         />
         <Axis
           id={getAxisId('left2')}
-          title={'Left axis'}
+          title={withLeftTitle ? 'Left axis' : undefined}
           position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}
           showGridLines={boolean('show left axis grid lines', false)}
         />
         <Axis
           id={getAxisId('top')}
           position={Position.Top}
-          title={'Top axis'}
+          title={withTopTitle ? 'Top axis' : undefined}
           showOverlappingTicks={true}
           showGridLines={boolean('show top axis grid lines', false)}
         />
         <Axis
           id={getAxisId('right')}
-          title={'Right axis'}
+          title={withRightTitle ? 'Right axis' : undefined}
           position={Position.Right}
           tickFormat={(d) => Number(d).toFixed(2)}
           showGridLines={boolean('show right axis grid lines', false)}