Skip to content

Commit

Permalink
fix(Axis): Correct x axis height calculation for autorotated x axis t…
Browse files Browse the repository at this point in the history
…ick texts

The height of the rotated tick text was also added when the tick texts were
not rotated due to the autorotate being enabled.
The `maxtickSize.height` is now only added if the tick texts are actually
rotated or if multiline is enabled.

Fix #3584
Close #3585
  • Loading branch information
michkami authored and netil committed Jan 11, 2024
1 parent 1565eab commit d5b5d09
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
6 changes: 5 additions & 1 deletion src/ChartInternal/internals/size.axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,11 @@ export default {

const maxtickSize = $$.axis.getMaxTickSize(id);

if (maxtickSize.height > defaultHeight) {
const isXAxisTickRotated = config.axis_x_tick_rotate > 0 && (
!config.axis_x_tick_autorotate || $$.needToRotateXAxisTickTexts()
);

if ((config.axis_x_tick_multiline || isXAxisTickRotated) && maxtickSize.height > defaultHeight) {
h += maxtickSize.height - defaultHeight;
}

Expand Down
32 changes: 30 additions & 2 deletions test/internals/axis-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1349,7 +1349,21 @@ describe("AXIS", function() {
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 48, 0);
compare(0, 18.8125, 30, 0);
});

it("should not use the height of the longest tick text when ticks are not rotated", () => {
chart.$.main.selectAll(`.${$AXIS.axisX} g.tick`).each(function() {
const tick = d3Select(this);
const text = tick.select("text");
const tspan = text.select("tspan");

expect(text.attr("transform")).to.be.null;
expect(text.attr("y")).to.be.equal("9");
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 30, 0);
});

it("update args", () => {
Expand Down Expand Up @@ -1535,7 +1549,21 @@ describe("AXIS", function() {
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 55, 0);
compare(0, 18.8125, 30, 0);
});

it("should not use the height of the longest tick text when ticks are not rotated", () => {
chart.$.main.selectAll(`.${$AXIS.axisX} g.tick`).each(function() {
const tick = d3Select(this);
const text = tick.select("text");
const tspan = text.select("tspan");

expect(text.attr("transform")).to.be.null;
expect(text.attr("y")).to.be.equal("9");
expect(tspan.attr("dx")).to.be.equal("0");
});

compare(0, 18.8125, 30, 0);
});

it("update args", () => {
Expand Down

0 comments on commit d5b5d09

Please sign in to comment.