Merge branch 'master' into next

package.json

@@ -107,7 +107,7 @@
 		"@eslint/js": "^9.12.0",
 		"@rollup/plugin-node-resolve": "^15.3.0",
 		"@rollup/plugin-replace": "^6.0.1",
-		"@rollup/plugin-typescript": "^12.1.0",
+		"@rollup/plugin-typescript": "^12.1.1",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^13.0.0",
 		"@semantic-release/exec": "^6.0.3",
@@ -118,9 +118,9 @@
 		"@testing-library/react": "^16.0.1",
 		"@types/d3": "^7.4.3",
 		"@types/sinon": "^17.0.3",
-		"@vitest/browser": "^2.1.2",
-		"@vitest/coverage-istanbul": "^2.1.2",
-		"@vitest/ui": "^2.1.2",
+		"@vitest/browser": "^2.1.3",
+		"@vitest/coverage-istanbul": "^2.1.3",
+		"@vitest/ui": "^2.1.3",
 		"better-docs": "^2.7.3",
 		"clean-webpack-plugin": "^4.0.0",
 		"cloc": "2.2.0-cloc",
@@ -137,26 +137,26 @@
 		"esbuild-loader": "^4.2.2",
 		"eslint": "^9.12.0",
 		"eslint-plugin-import": "^2.31.0",
-		"eslint-plugin-jsdoc": "^50.3.1",
+		"eslint-plugin-jsdoc": "^50.4.1",
 		"husky": "^9.1.6",
 		"jsdoc": "^4.0.3",
 		"lint-staged": "^15.2.10",
 		"mini-css-extract-plugin": "^2.9.1",
-		"playwright": "^1.47.2",
+		"playwright": "^1.48.0",
 		"regenerator-runtime": "^0.14.1",
 		"rollup": "^4.24.0",
 		"rollup-plugin-delete": "^2.1.0",
-		"sass": "^1.79.4",
+		"sass": "^1.79.5",
 		"sass-loader": "^16.0.2",
 		"semantic-release": "^24.1.2",
 		"simulant": "^0.2.2",
 		"sinon": "^19.0.2",
 		"string-replace-loader": "^3.1.0",
 		"style-loader": "^4.0.0",
-		"tslib": "^2.7.0",
-		"typescript": "^5.6.2",
-		"typescript-eslint": "^8.8.1",
-		"vitest": "^2.1.2",
+		"tslib": "^2.8.0",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.9.0",
+		"vitest": "^2.1.3",
 		"webpack": "^5.95.0",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-clean": "^1.2.5",

src/ChartInternal/Axis/AxisRendererHelper.ts

@@ -77,9 +77,11 @@ export default class AxisRendererHelper {
 			value => `translate(0,${value})`;
 
 		return (selection, scale) => {
-			selection.attr("transform", d => (
-				isValue(d) ? fn(Math.ceil(scale(d))) : null
-			));
+			selection.attr("transform", d => {
+				const x = scale(d);
+
+				return isValue(d) ? fn(Math.ceil(x)) : null;
+			});
 		};
 	}
 

src/ChartInternal/interactions/eventrect.ts

@@ -671,6 +671,7 @@ export default {
 	clickHandlerForMultipleXS(ctx): void {
 		const $$ = ctx;
 		const {config, state} = $$;
+		const pointSensitivity = config.point_sensitivity;
 		const targetsToShow = $$.filterTargetsToShow($$.data.targets);
 
 		if ($$.hasArcType(targetsToShow)) {
@@ -679,9 +680,9 @@ export default {
 
 		const mouse = getPointer(state.event, this);
 		const closest = $$.findClosestFromTargets(targetsToShow, mouse);
-		const sensitivity = config.point_sensitivity === "radius" ?
-			closest.r :
-			config.point_sensitivity;
+		const sensitivity = pointSensitivity === "radius" ? closest?.r : (
+			isFunction(pointSensitivity) ? closest && pointSensitivity(closest) : pointSensitivity
+		);
 
 		if (!closest) {
 			return;

src/ChartInternal/interactions/zoom.ts

@@ -23,7 +23,9 @@ export default {
 		$$.scale.zoom = null;
 
 		$$.generateZoom();
-		$$.initZoomBehaviour();
+
+		$$.config.zoom_type === "drag" &&
+			$$.initZoomBehaviour();
 	},
 
 	/**
@@ -72,6 +74,7 @@ export default {
 			const ratio = diffDomain($$.scale.x.orgDomain()) / diffDomain($$.getZoomDomain());
 			const extent = this.orgScaleExtent();
 
+			// https://d3js.org/d3-zoom#zoom_scaleExtent
 			this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
 
 			return this;
@@ -96,6 +99,11 @@ export default {
 				isRotated ? "rescaleY" : "rescaleX"
 			](org.xScale || scale.x);
 
+			// prevent drag zoom to be out of range
+			if (newScale.domain().some(v => /(Invalid Date|NaN)/.test(v.toString()))) {
+				return;
+			}
+
 			const domain = $$.trimXDomain(newScale.domain());
 			const rescale = config.zoom_rescale;
 
@@ -381,7 +389,7 @@ export default {
 						.attr("height", isRotated ? 0 : state.height);
 				}
 
-				start = getPointer(event, <SVGElement>this)[prop.index];
+				start = getPointer(event, this as SVGAElement)[prop.index];
 				end = start;
 
 				zoomRect
@@ -391,7 +399,7 @@ export default {
 				$$.onZoomStart(event);
 			})
 			.on("drag", function(event) {
-				end = getPointer(event, <SVGElement>this)[prop.index];
+				end = getPointer(event, this as SVGAElement)[prop.index];
 
 				zoomRect
 					.attr(prop.axis, Math.min(start, end))

src/ChartInternal/internals/legend.ts

@@ -462,7 +462,10 @@ export default {
 				.on(interaction.dblclick ? "dblclick" : "click",
 					interaction || isFunction(config.legend_item_onclick) ?
 						function(event, id) {
-							if (!callFn(config.legend_item_onclick, api, id)) {
+							if (
+								!callFn(config.legend_item_onclick, api, id,
+									!state.hiddenTargetIds.includes(id))
+							) {
 								const {altKey, target, type} = event;
 
 								if (type === "dblclick" || altKey) {
@@ -493,7 +496,10 @@ export default {
 			!isTouch && item
 				.on("mouseout", interaction || isFunction(config.legend_item_onout) ?
 					function(event, id) {
-						if (!callFn(config.legend_item_onout, api, id)) {
+						if (
+							!callFn(config.legend_item_onout, api, id,
+								!state.hiddenTargetIds.includes(id))
+						) {
 							d3Select(this).classed($FOCUS.legendItemFocused, false);
 
 							if (hasGauge) {
@@ -506,7 +512,10 @@ export default {
 					null)
 				.on("mouseover", interaction || isFunction(config.legend_item_onover) ?
 					function(event, id) {
-						if (!callFn(config.legend_item_onover, api, id)) {
+						if (
+							!callFn(config.legend_item_onover, api, id,
+								!state.hiddenTargetIds.includes(id))
+						) {
 							d3Select(this).classed($FOCUS.legendItemFocused, true);
 
 							if (hasGauge) {

src/config/Options/common/legend.ts

@@ -118,9 +118,12 @@ export default {
 	 *          }
 	 *
 	 *          // when set below callback, will disable corresponding default interactions
-	 *          onclick: function(id) { ... },
-	 *          onover: function(id) { ... },
-	 *          onout: function(id) { ... },
+	 *          onclick: function(id, visible) {
+	 *           	// toggle based on the data visibility
+	 *           	this[visible ? "hide" : "show"](id);
+	 *          },
+	 *          onover: function(id, visible) { ... },
+	 *          onout: function(id, visible) { ... },
 	 *
 	 *          // set tile's size
 	 *          tile: {

test/api/zoom-spec.ts

@@ -632,4 +632,81 @@ describe("API zoom", function() {
 			expect($$.scale.zoom).to.be.null;		  	
 		});
 	});
+
+	describe("zoom extent", () => {
+		beforeAll(() => {
+			chart = util.generate({
+				data: {
+					json: [
+						{"date":"2023-09-30 00:00:00","ek_house":0},
+						{"date":"2023-10-14 00:00:00","ek_house":0},
+						{"date":"2023-10-21 00:00:00","ek_house":0},
+						{"date":"2023-10-28 00:00:00","ek_house":0},
+						{"date":"2023-11-04 00:00:00","ek_house":0},
+					],
+					keys: {
+						x: "date",
+						value: ["ek_house"],
+					},
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%Y-%m-%d"
+						},
+					},
+					y: {
+						show: false
+					}
+				},
+				zoom: {
+					enabled: true
+				}
+			});
+		});
+
+		it("shouldn't throw error for timeseries x axis, when is given out of range.", () => new Promise(done => {
+			chart.zoom([1697701666380, 1697702008724]);
+
+			setTimeout(() => {
+				chart.$.circles.each(function() {
+					expect(this.getAttribute("cx") !== "NaN").to.be.true;
+				});
+
+				done(1);
+			}, 300);
+		}));
+
+		it("shouldn't throw error for indexed x axis, when is given out of range.", () => new Promise(done => {
+			chart = util.generate({
+				data: {
+					columns: [
+						["data2", 130, 100, 140, 200, 150, 50, 120, 100, 80, 90]
+					],
+				},
+				zoom: {
+					enabled: true
+				},
+				axis: {
+					y: {
+						show: false
+					}
+				}
+			});
+
+			chart.zoom([
+				4.908784864317814,
+				4.908812566017803
+			]);
+
+			setTimeout(() => {
+				chart.$.circles.each(function() {
+					expect(this.getAttribute("cx") !== "NaN").to.be.true;
+				});
+
+				done(1);
+			}, 300);
+		}));
+	});
 });

test/internals/bb-spec.ts

@@ -536,7 +536,7 @@ describe("Interface & initialization", () => {
 		}));
 
 		it("check lazy rendering on callbacks", () => new Promise(done => {
-			const el = <HTMLDivElement>document.body.querySelector("#chart");
+			const el = document.body.querySelector("#chart") as HTMLDivElement;
 
 			// hide to lazy render
 			el.style.display = "none";

test/internals/legend-spec.ts

@@ -815,7 +815,7 @@ describe("LEGEND", () => {
 		});
 
 		it("set options: legend.item.onclick", () => {
-			args.legend.item.onclick = () => {};
+			args.legend.item.onclick = sinon.spy(() => {});
 		});
 
 		it("should only 'click' event lister bound", () => {
@@ -826,14 +826,24 @@ describe("LEGEND", () => {
 
 				expect(item.on("mouseover mouseout")).to.be.undefined;
 				expect(item.on("click")).to.not.be.undefined;
-
 				expect(item.style("cursor")).to.be.equal("pointer");
+
+				id === "data1" && chart.hide(id);
+
+				fireEvent(item.node(), "click", {
+					clientX: 2,
+					clientY: 2
+				}, chart);
 			});
+
+			// given visible state argguments?
+			expect(args.legend.item.onclick.args)
+				.to.be.deep.equal(chart.data().map(({id}) => [id, id === "data1" ? false : true]));
 		});
 
 		it("set options: legend.item.onover", () => {
 			delete args.legend.item.onclick;
-			args.legend.item.onover = () => {};
+			args.legend.item.onover = sinon.spy(() => {});
 		});
 
 		it("should only 'mouseover' event lister bound", () => {
@@ -844,14 +854,24 @@ describe("LEGEND", () => {
 
 				expect(item.on("click mouseout")).to.be.undefined;
 				expect(item.on("mouseover")).to.not.be.undefined;
-
 				expect(item.style("cursor")).to.be.equal("pointer");
+
+				id === "data2" && chart.hide(id);
+
+				fireEvent(item.node(), "mouseover", {
+					clientX: 2,
+					clientY: 2
+				}, chart);
 			});
+
+			// given visible state argguments?
+			expect(args.legend.item.onover.args)
+				.to.be.deep.equal(chart.data().map(({id}) => [id, id === "data2" ? false : true]));
 		});
 
 		it("set options: legend.item.onout", () => {
 			delete args.legend.item.onover;
-			args.legend.item.onout = () => {};
+			args.legend.item.onout = sinon.spy(() => {});
 		});
 
 		it("should only 'mouseout' event lister bound", () => {
@@ -862,9 +882,19 @@ describe("LEGEND", () => {
 
 				expect(item.on("click mouseover")).to.be.undefined;
 				expect(item.on("mouseout")).to.not.be.undefined;
-
 				expect(item.style("cursor")).to.be.equal("pointer");
+
+				id === "data1" && chart.hide(id);
+
+				fireEvent(item.node(), "mouseout", {
+					clientX: 2,
+					clientY: 2
+				}, chart);
 			});
+
+			// given visible state argguments?
+			expect(args.legend.item.onout.args)
+				.to.be.deep.equal(chart.data().map(({id}) => [id, id === "data1" ? false : true]));
 		});
 
 		it("set options: legend.item.interaction.dblclik=true", () => {