fix(resize): Fix legend resize

Fix legend not resized properly during resize events Fix #2650
naver · Jun 8, 2022 · 7df949b · 7df949b
1 parent 26ee069
commit 7df949b
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 34 deletions.
diff --git a/src/ChartInternal/ChartInternal.ts b/src/ChartInternal/ChartInternal.ts
@@ -723,6 +723,13 @@ export default class ChartInternal {
 		if (config.resize_auto) {
 			list.push(() => {
 				state.resizing = true;
+
+				// https://github.com/naver/billboard.js/issues/2650
+				if (config.legend_show) {
+					$$.updateSizes();
+					$$.updateLegend();
+				}
+
 				$$.api.flush(false);
 			});
 		}

diff --git a/src/ChartInternal/internals/redraw.ts b/src/ChartInternal/internals/redraw.ts
@@ -26,7 +26,6 @@ export default {
 		$$.updateSizes(initializing);
 
 		// update legend and transform each g
-
 		if (wth.Legend && config.legend_show) {
 			options.withTransition = !!duration;
 			$$.updateLegend($$.mapToIds($$.data.targets), options, transitions);
@@ -246,7 +245,11 @@ export default {
 		$$.redraw(options, transitions);
 	},
 
-	redrawWithoutRescale() {
+	/**
+	 * Redraw without rescale
+	 * @private
+	 */
+	redrawWithoutRescale(): void {
 		this.redraw({
 			withY: false,
 			withDimension: false,

diff --git a/test/internals/bb-spec.ts b/test/internals/bb-spec.ts
@@ -10,10 +10,23 @@ import util from "../assets/util";
 import {$AXIS, $COMMON} from "../../src/config/classes";
 import Chart from "../../src/Chart/Chart";
 import {convertInputType, extend} from "../../src/module/util";
+import { interpolateSpectral } from "d3";
 
 describe("Interface & initialization", () => {
 	let chart;
 
+	function getWrapper(id) {
+		let container = document.getElementById(id);
+
+		if (!container) {
+			container = document.createElement("div");
+			container.id = id;
+			document.body.appendChild(container);
+		}
+
+		return container;
+	}
+
 	describe("Initialization", () => {
 		const checkElements = $ => {
 			const isD3Node = v => v && "node" in v || false;
@@ -240,34 +253,43 @@ describe("Interface & initialization", () => {
 		});
 
 		it("should be resizing all generated chart elements", function(done) {
-			this.timeout(5000);
-			container.innerHTML = '<div id="chartResize1"></div><div id="chartResize2"></div>';
-
+			this.timeout(6000);
 			const width = 300;
-			const args = {
-				data: {
-					columns: [
-						["data1", 30]
-					]
-				},
-				bindto: "#chartResize1"
-			};
+			const inst = [];
 
-			const chart1 = util.generate(args);
-			const chart2 = util.generate((args.bindto = "#chartResize2") && args);
+			before(() => {
+				container.innerHTML = '<div id="chartResize1"></div><div id="chartResize2"></div>';
+
+				const args = {
+					data: {
+						columns: [
+							["data1", 30]
+						]
+					},
+					transition: {
+						duration: 0
+					},
+					bindto: "#chartResize1"
+				};
+
+				inst.push(util.generate(args));
+				inst.push(util.generate((args.bindto = "#chartResize2") && args));
+			});
 
 			container.style.width = width + "px";
 
 			// run the resize handler
-			chart.internal.charts.forEach(c => {
+			inst.forEach(c => {
 				c.internal.resizeFunction();
 			});
 
 			setTimeout(() => {
-				expect(+chart1.internal.$el.svg.attr("width")).to.be.equal(width);
-				expect(+chart2.internal.$el.svg.attr("width")).to.be.equal(width);
+				inst.forEach(c => {
+					expect(+c.internal.$el.svg.attr("width")).to.be.equal(width);
+				});
+
 				done();
-			}, 200);
+			}, 500);
 		});
 
 		it("should set correct height value", () => {
@@ -624,24 +646,17 @@ describe("Interface & initialization", () => {
 
 	describe("resize options", () => {
 		const containerName = "container2";
+		const spy = sinon.spy();
 		let container;
 
 		beforeEach(() => {
-			container = document.getElementById(containerName);
-
-			if (!container) {
-				container = document.createElement("div");
-				container.id = containerName;
-				document.body.appendChild(container);
-			}
+			container = getWrapper(containerName);
 		});
 
 		it("check for the resize timer using requestIdleCallback()", done => {			
-			container.innerHTML = `<div id="chartTimerResize1" style="width:640px"></div>`;
-
-			let start = 0;
+			const width = 300;
 			const chart = util.generate({
-				bindto: "#chartTimerResize1",
+				bindto: `#${containerName}`,
 				data: {
 					columns: [
 						["data1", 30, 200, 100, 400],
@@ -652,18 +667,58 @@ describe("Interface & initialization", () => {
 					timer: false
 				},
 				onresized: function() {
-					expect(Date.now() - start).to.be.below(100);
+					expect(chart.$.chart.style("width")).to.be.equal(`${width}px`);
 					done();
 				}
 			});
 
-			const width = 300;
-
 			// resize chart holder
 			chart.$.chart.style("width", `${width}px`);
 
 			// trigger resize eventize 
-			start = Date.now();
+			window.dispatchEvent(new Event("resize"));
+		});
+	});
+
+	describe("resize legend", () => {
+		const containerName = "containerForLegend";
+		let container;
+
+		before(() => {
+			container = getWrapper(containerName);
+		});
+
+		it("should legend resized correctly?", function(done) {
+			container.innerHTML = `<div id="${containerName}"></div>`;
+
+			const chart = util.generate({
+				bindto: `#${containerName}`,
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400],
+						["data2", 500, 800, 500, 2000]
+					]
+				},
+				resize: {
+					timer: 100
+				},
+				transition: {
+					duration: 0
+				},
+				onresized: function() {
+					const {$: {legend}, internal} = chart;
+					const rect = legend.node().getBoundingClientRect();
+
+					expect(
+						util.parseNum(legend.attr("transform")) + rect.height
+					).to.be.below(internal.state.current.height);
+
+					done();
+				}
+			});
+
+			// resize chart holder
+			chart.$.chart.style("width", "100px");
 			window.dispatchEvent(new Event("resize"));
 		});
 	});