feat(resize): Intent to ship resize.auto='viewBox'

Implement auto resize based on viewBox attribute Fix #3893 Co-authored-by: netil <[email protected]>
naver · Oct 8, 2024 · db21387 · db21387
1 parent aa6f8ff
commit db21387
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 19 deletions.
diff --git a/demo/chart.js b/demo/chart.js
@@ -116,10 +116,12 @@ var billboardDemo = {
 		Object.keys(demos).forEach(function(key) {
 			html.push("<li><h4>" + key + "</h4>");
 
-			Object.keys(demos[key]).sort().forEach(function (v, i) {
-				i === 0 && html.push("<ul>");
-				html.push("<li><a href='#"+ [key, v].join(".") + "'>" + v + "</a></li>");
-			});
+			Object.keys(demos[key])
+				.sort(Intl.Collator().compare)
+				.forEach(function (v, i) {
+					i === 0 && html.push("<ul>");
+					html.push("<li><a href='#"+ [key, v].join(".") + "'>" + v + "</a></li>");
+				});
 
 			html.push("</ul></li>");
 		});

diff --git a/demo/demo.js b/demo/demo.js
@@ -5691,7 +5691,41 @@ d3.select(".chart_area")
 				},
 				clipPath: false
 			}
-		}
+		},
+		resizeViewBox: [
+			{
+				options: {
+					data: {
+						columns: [
+							["sample", 70, 200, 120, 400, 300, 250]
+						],
+						type: "bar"
+					},
+					resize: {
+						auto: "viewBox"
+					}
+				}
+			},
+			{
+				options: {
+					size: {
+						width: 480,
+						height: 240
+					},
+					data: {
+						columns: [
+							["data1", 70],
+							["data2", 170],
+							["data3", 120]
+						],
+						type: "pie"
+					},
+					resize: {
+						auto: "viewBox"
+					}
+				}
+			}
+		]
 	},
 	DonutChartOptions: {
 		DonutCornerRadius: {

diff --git a/src/ChartInternal/ChartInternal.ts b/src/ChartInternal/ChartInternal.ts
@@ -10,7 +10,7 @@ import {
 	utcFormat as d3UtcFormat,
 	utcParse as d3UtcParse
 } from "d3-time-format";
-import type {d3Selection} from "../../types/types";
+import type {d3Selection, d3Transition} from "../../types/types";
 import {$CIRCLE, $COMMON, $TEXT} from "../config/classes";
 import Options from "../config/Options/Options";
 import Store from "../config/Store/Store";
@@ -139,7 +139,8 @@ export default class ChartInternal {
 	 * @returns {d3Selection}
 	 * @private
 	 */
-	$T(selection: SVGElement | d3Selection, force?: boolean, name?: string): d3Selection {
+	$T(selection: SVGElement | d3Selection | d3Transition, force?: boolean,
+		name?: string): d3Selection {
 		const {config, state} = this;
 		const duration = config.transition_duration;
 		const subchart = config.subchart_show;
@@ -162,6 +163,7 @@ export default class ChartInternal {
 				state.rendered &&
 				!subchart;
 
+			// @ts-ignore
 			t = (transit ? t.transition(name).duration(duration) : t) as d3Selection;
 		}
 
@@ -791,7 +793,7 @@ export default class ChartInternal {
 
 		list.push(() => callFn(config.onresize, $$.api));
 
-		if (config.resize_auto) {
+		if (config.resize_auto === true) {
 			list.push(() => {
 				state.resizing = true;
 

diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts
@@ -132,11 +132,16 @@ export default {
 
 	updateSvgSize(): void {
 		const $$ = this;
-		const {state: {clip, current, hasAxis, width, height}, $el: {svg}} = $$;
+		const {config, state: {clip, current, hasAxis, width, height}, $el: {svg}} = $$;
 
-		svg
-			.attr("width", current.width)
-			.attr("height", current.height);
+		if (config.resize_auto === "viewBox") {
+			svg
+				.attr("viewBox", `0 0 ${current.width} ${current.height}`);
+		} else {
+			svg
+				.attr("width", current.width)
+				.attr("height", current.height);
+		}
 
 		if (hasAxis) {
 			const brush = svg.select(`.${$SUBCHART.brush} .overlay`);

diff --git a/src/config/Options/common/main.ts b/src/config/Options/common/main.ts
@@ -162,28 +162,36 @@ export default {
 	 * @memberof Options
 	 * @type {object}
 	 * @property {object} [resize] resize object
-	 * @property {boolean} [resize.auto=true] Set chart resize automatically on viewport changes.
+	 * @property {boolean|string} [resize.auto=true] Set chart resize automatically on viewport changes.
+	 * - **NOTE:** Available options
+	 *   - true: Enables automatic resize.
+	 *   - false: Disables automatic resize.
+	 *   - "viewBox": Enables automatic resize, and size will be fixed based on the viewbox.
 	 * @property {boolean|number} [resize.timer=true] Set resize timer option.
-	 * - **NOTE:**
+	 * - **NOTE:** Available options
 	 *   - The resize function will be called using:
 	 *     - true: `setTimeout()`
 	 *     - false: `requestIdleCallback()`
-	 *   - Given number(delay in ms) value, resize function will be triggered using `setTimer()` with given delay.
+	 *   - Given number(delay in ms) value, resize function will be triggered using `setTimeout()` with given delay.
+	 * @see [Demo](https://naver.github.io/billboard.js/demo/#ChartOptions.resizeViewBox)
 	 * @example
 	 *  resize: {
 	 *      auto: false,
 	 *
-	 *      // set resize function will be triggered using `setTimer()`
+	 *      // set resize based on viewBox value
+	 *      auto: "viewBox",
+	 *
+	 *      // set resize function will be triggered using `setTimeout()`
 	 *      timer: true,
 	 *
 	 *      // set resize function will be triggered using `requestIdleCallback()`
 	 *      timer: false,
 	 *
-	 *      // set resize function will be triggered using `setTimer()` with a delay of `100ms`.
+	 *      // set resize function will be triggered using `setTimeout()` with a delay of `100ms`.
 	 *      timer: 100
 	 *  }
 	 */
-	resize_auto: true,
+	resize_auto: <boolean | "viewBox">true,
 	resize_timer: true,
 
 	/**

diff --git a/test/internals/bb-spec.ts b/test/internals/bb-spec.ts
@@ -303,6 +303,24 @@ describe("Interface & initialization", () => {
 
 			expect(chart.$.chart.node().getBoundingClientRect().height).to.be.equal(height);
 		});
+
+		it("check if viewBox attribute set", () => {
+			chart = util.generate({
+				resize: {
+					auto: "viewBox"
+				},
+				data: {
+					columns: [
+						["data1", 300, 350, 300, 120, 100, 200],
+					],
+					type: "bar"
+				}
+			});
+
+			const {svg} = chart.$;
+
+			expect(svg.attr("viewBox")).to.be.equal("0 0 640 480");
+		});
 	});
 
 	describe("set defaults options", () => {

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -160,8 +160,12 @@ export interface ChartOptions {
 	resize?: {
 		/**
 		 * Indicate if the chart should automatically get resized when the window gets resized.
+		 * - **NOTE:** Available options
+		 *   - true: Enables automatic resize.
+		 *   - false: Disables automatic resize.
+		 *   - "viewBox": Enables automatic resize, and size will be fixed based on the viewbox.
 		 */
-		auto?: boolean;
+		auto?: boolean | "viewBox";
 
 		/**
 		 * Set resize timer option.