fix(axis): add axisTitleHeight to axis increments (#29)

emmacunningham · web-flow · commit e34f0ae0be38 · 2019-02-05T08:02:56.000-08:00
Previously, without the axisTitleHeight offset, multiple axes with the same position would overflow into each other with margins less than the title height. This PR fixes this and also adds a story to the axis group in storybook with multiple axes with the same position. fixes #26
diff --git a/src/lib/axes/axis_utils.ts b/src/lib/axes/axis_utils.ts
@@ -464,23 +464,24 @@ export function getAxisPosition(
 
   if (isVertical(position)) {
     if (position === Position.Left) {
-      leftIncrement = maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left;
+      leftIncrement = maxLabelBboxWidth + tickSize + tickPadding + chartMargins.left + axisTitleHeight;
       dimensions.left = maxLabelBboxWidth + cumLeftSum + chartMargins.left + axisTitleHeight;
     } else {
-      rightIncrement = maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right;
+      rightIncrement = maxLabelBboxWidth + tickSize + tickPadding + chartMargins.right + axisTitleHeight;
       dimensions.left = left + width + cumRightSum;
     }
     dimensions.width = maxLabelBboxWidth;
   } else {
     if (position === Position.Top) {
-      topIncrement = maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top;
+      topIncrement = maxLabelBboxHeight + tickSize + tickPadding + chartMargins.top + axisTitleHeight;
       dimensions.top = cumTopSum + chartMargins.top + axisTitleHeight;
     } else {
-      bottomIncrement = maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom;
+      bottomIncrement = maxLabelBboxHeight + tickSize + tickPadding + chartMargins.bottom + axisTitleHeight;
       dimensions.top = top + height + cumBottomSum;
     }
     dimensions.height = maxLabelBboxHeight;
   }
+
   return { dimensions, topIncrement, bottomIncrement, leftIncrement, rightIncrement };
 }
 
diff --git a/src/stories/axis.tsx b/src/stories/axis.tsx
@@ -13,8 +13,37 @@ import {
   ScaleType,
   Settings,
 } from '..';
+import { PartialTheme } from '../lib/themes/theme';
 import { LineSeries } from '../specs';
 
+function createThemeAction(title: string, min: number, max: number, value: number) {
+  return number(title, value, {
+    range: true,
+    min,
+    max,
+    step: 1,
+  }, 'theme');
+}
+
+function renderAxisWithOptions(position: Position, seriesGroup: string, show: boolean) {
+  const axisTitle = `${position} axis (${seriesGroup})`;
+
+  const showAxis = boolean(`show ${axisTitle} axis`, show, `${position} axes`);
+
+  if (!showAxis) {
+    return null;
+  }
+
+  const axisProps = {
+    id: getAxisId(axisTitle),
+    position,
+    title: axisTitle,
+    showOverlappingTicks: true,
+  };
+
+  return <Axis {...axisProps} />;
+}
+
 storiesOf('Axis', module)
   .add('basic', () => {
     return (
@@ -149,29 +178,37 @@ storiesOf('Axis', module)
       </Chart>
     );
   })
-  .add('with multi axis (TO FIX)', () => {
+  .add('with multi axis', () => {
+    const theme: PartialTheme = {
+      chart: {
+        margins: {
+          left: createThemeAction('margin left', 0, 50, 0),
+          right: createThemeAction('margin right', 0, 50, 0),
+          top: createThemeAction('margin top', 0, 50, 0),
+          bottom: createThemeAction('margin bottom', 0, 50, 0),
+        },
+        paddings: {
+          left: createThemeAction('padding left', 0, 50, 0),
+          right: createThemeAction('padding right', 0, 50, 0),
+          top: createThemeAction('padding top', 0, 50, 0),
+          bottom: createThemeAction('padding bottom', 0, 50, 0),
+        },
+      },
+    };
+
+    const seriesGroup1 = 'group1';
+    const seriesGroup2 = 'group2';
     return (
-      <Chart renderer="canvas" className={'story-chart'}>
-        <Settings showLegend={false} />
-        <Axis
-          id={getAxisId('bottom')}
-          position={Position.Bottom}
-          title={'Bottom axis'}
-          showOverlappingTicks={true}
-        />
-        <Axis
-          id={getAxisId('left1')}
-          title={'First left axis'}
-          position={Position.Left}
-          tickFormat={(d) => Number(d).toFixed(2)}
-        />
-        <Axis
-          id={getAxisId('left2')}
-          title={'Second left axis'}
-          groupId={getGroupId('group2')}
-          position={Position.Left}
-          tickFormat={(d) => Number(d).toFixed(2)}
-        />
+      <Chart renderer="canvas" size={[500, 300]} className={'story-chart'}>
+        <Settings showLegend={false} theme={theme} debug={boolean('debug', true)} />
+        {renderAxisWithOptions(Position.Top, seriesGroup1, false)}
+        {renderAxisWithOptions(Position.Top, seriesGroup2, true)}
+        {renderAxisWithOptions(Position.Left, seriesGroup1, false)}
+        {renderAxisWithOptions(Position.Left, seriesGroup2, true)}
+        {renderAxisWithOptions(Position.Bottom, seriesGroup1, false)}
+        {renderAxisWithOptions(Position.Bottom, seriesGroup2, true)}
+        {renderAxisWithOptions(Position.Right, seriesGroup1, false)}
+        {renderAxisWithOptions(Position.Right, seriesGroup2, true)}
         <BarSeries
           id={getSpecId('barseries1')}
           xScaleType={ScaleType.Linear}
@@ -180,15 +217,6 @@ storiesOf('Axis', module)
           yAccessors={['y']}
           data={[{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }, { x: 3, y: 4 }]}
         />
-        <BarSeries
-          id={getSpecId('barseries2')}
-          groupId={getGroupId('group2')}
-          xScaleType={ScaleType.Linear}
-          yScaleType={ScaleType.Linear}
-          xAccessor="x"
-          yAccessors={['y']}
-          data={[{ x: 0, y: 8 }, { x: 1, y: 7 }, { x: 2, y: 6 }, { x: 3, y: 5 }]}
-        />
       </Chart>
     );
   })
