Skip to content

fix: fixed collision between Y axis title and axis ticks text #85

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

Open
deathsh0ot wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix: fixed collision between Y axis title and axis ticks text #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f1bb0d
fix: fixed collision between Y axis title and axis ticks text
deathsh0ot Oct 22, 2022
ee8d4ed
fix: updated the snapshots after fixing chart padding in vue which wa…
deathsh0ot Oct 22, 2022
88d248d
fix: collision resolved when using RTL as well
deathsh0ot Oct 24, 2022
d3a0792
fix: removed console logs
deathsh0ot Oct 24, 2022
5993d36
Merge branch 'master' into fix/axisTitle_tickTitle_collision
yassinedorbozgithub Oct 24, 2022
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
46 changes: 26 additions & 20 deletions packages/ez-core/src/utils/axis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,20 @@ export const getAxisTitleProps = (
position: Position,
dimensions: Dimensions,
padding: ChartPadding,
titleAlign: Anchor
titleAlign: Anchor,
maxTickWidth: Number
) => {
// sets the Y axis title position
if (position === Position.LEFT || position === Position.RIGHT) {
const x = 0;
const x =
position === Position.RIGHT
? maxTickWidth > 60
? 60
: +maxTickWidth / 2
: maxTickWidth > 60
? -60
: -maxTickWidth / 2;

const dy =
(position === Position.RIGHT ? padding.right : -padding.left) / 2;
let y = dimensions.height / 2;
Expand All @@ -55,7 +65,9 @@ export const getAxisTitleProps = (
transform: `translate(${x},${y}) rotate(-90)`,
dy,
};
} else {
}
// sets the X axis title position
else {
let x = dimensions.width / 2;
const y = 0;
const dy =
Expand Down Expand Up @@ -109,15 +121,10 @@ export const getGridLines = (
) => {
const isHorizontal = direction === Direction.HORIZONTAL;
const position = isHorizontal ? Position.BOTTOM : Position.LEFT;
return getAxis(
position,
scale,
dimensions,
{
tickCount,
tickSize: isHorizontal ? dimensions.height : dimensions.width
}
);
return getAxis(position, scale, dimensions, {
tickCount,
tickSize: isHorizontal ? dimensions.height : dimensions.width,
});
};

export const getAxisTickByCoordinate = (
Expand All @@ -136,13 +143,13 @@ const measureAxisLabels = (labels: SVGGraphicsElement[]) => {
};
}

const boundingBoxes = labels.map((l) => {
const boundingBoxes = labels.map(l => {
return typeof l.getBBox === 'function'
? l.getBBox()
: { width: 0, height: 0 };
});
const maxHeight = Math.max(...boundingBoxes.map((b) => b.height));
const maxWidth = Math.max(...boundingBoxes.map((b) => b.width));
const maxHeight = Math.max(...boundingBoxes.map(b => b.height));
const maxWidth = Math.max(...boundingBoxes.map(b => b.width));
return {
maxHeight,
maxWidth,
Expand All @@ -169,8 +176,7 @@ const calculateAxisTickRotation = (
) => {
const { maxHeight, maxWidth, labelCount } = measureAxisLabels(labels);
const measuredSize = labelCount * maxWidth;
const sign =
position === Position.TOP || position === Position.LEFT ? -1 : 1;
const sign = position === Position.TOP || position === Position.LEFT ? -1 : 1;

// The more the overlap, the more we rotate
let rotate: number;
Expand Down Expand Up @@ -201,20 +207,20 @@ export const getAxisLabelAttributes = (
rotation: number | 'auto',
reverse: boolean
) => {
const { rotate, maxHeight, anchor } = calculateAxisTickRotation(
const { rotate, maxHeight, maxWidth, anchor } = calculateAxisTickRotation(
scale,
elements,
position,
rotation,
reverse
);
const sign =
position === Position.TOP || position === Position.LEFT ? -1 : 1;
const sign = position === Position.TOP || position === Position.LEFT ? -1 : 1;
const offset = sign * Math.floor(maxHeight / 2);
const offsetTransform = isVerticalPosition(position)
? `translate(${offset}, 0)`
: `translate(0, ${offset})`;
return {
maxWidth,
textAnchor: anchor,
transform: `${offsetTransform} rotate(${rotate} 0 0)`,
};
Expand Down
15 changes: 15 additions & 0 deletions packages/ez-dev/jest/snapshots/components/scales/Axis.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ exports[`Axis renders axis with four ticks 1`] = `
y2="6"
>
</line>
<title>
10
</title>
<text
class="ez-axis-tick-text"
dy="0.6em"
Expand All @@ -41,6 +44,9 @@ exports[`Axis renders axis with four ticks 1`] = `
y2="6"
>
</line>
<title>
15
</title>
<text
class="ez-axis-tick-text"
dy="0.6em"
Expand All @@ -61,6 +67,9 @@ exports[`Axis renders axis with four ticks 1`] = `
y2="6"
>
</line>
<title>
20
</title>
<text
class="ez-axis-tick-text"
dy="0.6em"
Expand All @@ -81,6 +90,9 @@ exports[`Axis renders axis with four ticks 1`] = `
y2="6"
>
</line>
<title>
25
</title>
<text
class="ez-axis-tick-text"
dy="0.6em"
Expand All @@ -101,6 +113,9 @@ exports[`Axis renders axis with four ticks 1`] = `
y2="6"
>
</line>
<title>
30
</title>
<text
class="ez-axis-tick-text"
dy="0.6em"
Expand Down
Loading