Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emmacunningham merged 2 commits into from
Feb 5, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa6ade5
fix(axis): add axisTitleHeight to axis increments
emmacunningham Feb 1, 2019
4607394
docs(axis): add multiple axis story for all positions
emmacunningham Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/lib/axes/axis_utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
}

Expand Down
90 changes: 59 additions & 31 deletions src/stories/axis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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}
Expand All @@ -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>
);
})
Expand Down