From 1d915b5d44bd2b145321cb6164fa984fbcf7a464 Mon Sep 17 00:00:00 2001 From: netil Date: Thu, 29 Aug 2024 17:03:37 +0900 Subject: [PATCH] fix(size): Fix legend overflows with padding fit mode On getting legend's height, make to use internal legend height value when padding fit mode is used Ref #3872 --- src/ChartInternal/internals/legend.ts | 7 +-- src/ChartInternal/internals/size.ts | 2 +- test/internals/padding-spec.ts | 63 +++++++++++++++++++++++---- test/shape/arc-needle-spec.ts | 2 - 4 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/ChartInternal/internals/legend.ts b/src/ChartInternal/internals/legend.ts index 462c14778..afd57188e 100644 --- a/src/ChartInternal/internals/legend.ts +++ b/src/ChartInternal/internals/legend.ts @@ -294,14 +294,15 @@ export default { const $$ = this; const {current, isLegendRight, legendItemHeight, legendStep} = $$.state; const isFitPadding = $$.config.padding?.mode === "fit"; - - return $$.config.legend_show ? + const height = $$.config.legend_show ? ( isLegendRight ? current.height : ( - isFitPadding ? 10 : Math.max(20, legendItemHeight) + Math.max(isFitPadding ? 10 : 20, legendItemHeight) ) * (legendStep + 1) ) : 0; + + return height; }, /** diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts index 3f2d90de9..e9fd6bfd2 100644 --- a/src/ChartInternal/internals/size.ts +++ b/src/ChartInternal/internals/size.ts @@ -255,7 +255,7 @@ export default { padding += 1; } } - + // console.log(type, padding + (axisSize * axesLen) - gap) return padding + (axisSize * axesLen) - gap; }, diff --git a/test/internals/padding-spec.ts b/test/internals/padding-spec.ts index 8ce7c18af..6262c6589 100644 --- a/test/internals/padding-spec.ts +++ b/test/internals/padding-spec.ts @@ -437,7 +437,7 @@ describe("PADDING", () => { describe("non-rotated axis", () => { it("outer y axis with legend", () => { - deepEqual({top: 0, right: 2, bottom: 30, left: 40.59375}); + deepEqual({top: 0, right: 2, bottom: 37, left: 40.59375}); }); it("set options: y2.show=true", () => { @@ -445,7 +445,7 @@ describe("PADDING", () => { }); it("when y/y2 axes are displyed", () => { - deepEqual({top: 0, right: 40.59375, bottom: 30, left: 40.59375}); + deepEqual({top: 0, right: 40.59375, bottom: 37, left: 40.59375}); }); it("set options: axis.y.label", () => { @@ -456,7 +456,7 @@ describe("PADDING", () => { }); it("y axis with outer label text", () => { - deepEqual({top: 0, right: 40.59375, bottom: 30, left: 60.59375}); + deepEqual({top: 0, right: 40.59375, bottom: 37, left: 60.59375}); }); it("set options: axis.y2.label", () => { @@ -467,7 +467,7 @@ describe("PADDING", () => { }); it("y/y2 axes with outer label text", () => { - deepEqual({top: 0, right: 60.59375, bottom: 30, left: 60.59375}); + deepEqual({top: 0, right: 60.59375, bottom: 37, left: 60.59375}); }); it("set options: axis.y.inner=true", () => { @@ -475,7 +475,7 @@ describe("PADDING", () => { }); it("inner y axis with outer label text", () => { - deepEqual({top: 0, right: 60.59375, bottom: 30, left: 20}); + deepEqual({top: 0, right: 60.59375, bottom: 37, left: 20}); }); it("set options: axis.y2.inner=true", () => { @@ -483,7 +483,7 @@ describe("PADDING", () => { }); it("inner y2 axis with outer label text", () => { - deepEqual({top: 0, right: 22, bottom: 30, left: 20}); + deepEqual({top: 0, right: 22, bottom: 37, left: 20}); }); it("set options: axis.y.label = {}", () => { @@ -491,7 +491,7 @@ describe("PADDING", () => { }); it("inner y axis without outer label text", () => { - deepEqual({top: 0, right: 22, bottom: 30, left: 0}); + deepEqual({top: 0, right: 22, bottom: 37, left: 0}); }); it("set options: axis.y2.label = {}", () => { @@ -499,7 +499,7 @@ describe("PADDING", () => { }); it("inner y/y2 axes without outer label text", () => { - deepEqual({top: 0, right: 2, bottom: 30, left: 0}); + deepEqual({top: 0, right: 2, bottom: 37, left: 0}); }); it("set options: legend.show=false", () => { @@ -546,7 +546,7 @@ describe("PADDING", () => { }); it("when y is shown, y2 hidden and padding.right=0", () => { - deepEqual({top: 0, right: 2, bottom: 30, left: 28.359375}); + deepEqual({top: 0, right: 2, bottom: 37, left: 28.359375}); }); it("set options", () => { @@ -664,5 +664,50 @@ describe("PADDING", () => { deepEqual({top: 0, right: 2, bottom: 1, left: 16.125}); }); }); + + describe("pie", () => { + beforeAll(() => { + args = { + data: { + columns: [ + ["0:0", 97865], ["0:1", 54254], ["0:2", 331183], ["0:3", 82231], ["0:4", 20017], ["0:5", 56694], ["0:6", 14797], ["0:7", 44214], ["0:8", 54179], ["0:9", 136321], ["0:10", 1270], ["0:11", 707], ["0:12", 274], ["0:13", 5428], ["0:14", 5368], ["0:15", 187099] + ], + names: { + "0:0": "Protected dug well", + "0:1": "Unprotected dug well", + "0:2": "Borehole or tubewell", + "0:3": "Protected spring", + "0:4": "Unprotected spring", + "0:5": "Rainwater", + "0:6": "Surface water", + "0:7": "Piped into dwelling", + "0:8": "Piped into yard/plot", + "0:9": "Piped into public tap / standpipe / basin", + "0:10": "Bottled water", + "0:11": "Tanker truck", + "0:12": "Cart with small tank/drum", + "0:13": "Other", + "0:14": "Water kiosk", + "0:15": "None" + }, + type: "pie" + }, + size: { + width: 680, + height: 460 + }, + padding: { + mode: "fit" + } + } + }); + + it("should legend stay inside of the container", () => { + const {current: {height}} = chart.internal.state; + const rect = chart.$.legend.node().getBoundingClientRect(); + + expect(rect.y + rect.height <= height); + }); + }); }); }); diff --git a/test/shape/arc-needle-spec.ts b/test/shape/arc-needle-spec.ts index d60b88a83..41a0df96d 100644 --- a/test/shape/arc-needle-spec.ts +++ b/test/shape/arc-needle-spec.ts @@ -73,8 +73,6 @@ describe("SHAPE ARC: NEEDLE option", () => { const {$el: {arcs, needle}} = chart.internal; const rx = /M-5 20 A0 0 0 0 0 5 20 L2\.5 -168\.\d+ A1 1 0 0 0 -2\.5 -168\.\d+ L-5 20 Z/; -util.print.arg(args) -console.log(needle.attr("d")) expect(rx.test(needle.attr("d"))).to.be.true; expect(getDegree(needle.style("transform"))).to.equal(118.8); expect(needle.style("fill")).to.equal("red");