feat(region): Enhance regions accept category range

netil · Jan 13, 2025 · bf842d4 · bf842d4
1 parent 477b823
commit bf842d4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git a/src/ChartInternal/internals/region.ts b/src/ChartInternal/internals/region.ts
@@ -98,7 +98,23 @@ export default {
 		];
 	},
 
-	getRegionXY(type: AxisType, d: RegionsType): number {
+	regionX(d: RegionsType): number {
+		return this.getRegionStart("x", d);
+	},
+
+	regionY(d: RegionsType): number {
+		return this.getRegionStart("y", d);
+	},
+
+	regionWidth(d: RegionsType): number {
+		return this.getRegionSize("width", d);
+	},
+
+	regionHeight(d: RegionsType): number {
+		return this.getRegionSize("height", d);
+	},
+
+	getRegionStart(type: AxisType, d: RegionsType): number {
 		const $$ = this;
 		const {config, scale} = $$;
 		const isRotated = config.axis_rotated;
@@ -118,55 +134,55 @@ export default {
 			}
 		} else if ((isX ? !isRotated : isRotated) && key in d) {
 			currScale = scale.zoom || scale.x;
-			pos = currScale($$.axis.isTimeSeries() ? parseDate.call($$, d[key]) : d[key]);
+			pos = currScale($$.axis.isTimeSeries() ? parseDate.call($$, d[key]) : +d[key]);
 		}
 
-		return pos;
-	},
+		if (currScale) {
+			pos = d[key];
 
-	regionX(d: RegionsType): number {
-		return this.getRegionXY("x", d);
-	},
+			if ($$.axis.isTimeSeries(d.axis)) {
+				pos = parseDate.call($$, pos);
+			} else if ($$.axis.isCategorized()) {
+				pos = config.axis_x_categories.indexOf(d[key]) + (key === "start" ? -0.5 : 0.5);
+			}
 
-	regionY(d: RegionsType): number {
-		return this.getRegionXY("y", d);
+			pos = currScale(pos);
+		}
+
+		return pos;
 	},
 
-	getRegionSize(type: "width" | "height", d: RegionsType): number {
+	getRegionSize(type: AxisType | "width" | "height", d: RegionsType): number {
 		const $$ = this;
 		const {config, scale, state} = $$;
 		const isRotated = config.axis_rotated;
-		const isWidth = type === "width";
-		const start = $$[isWidth ? "regionX" : "regionY"](d);
+		const isAxisType = /(x|y|y2)/.test(type);
+		const isType = isAxisType ? type === "x" : type === "width";
+		// const isWidth = type === "width";
+		const start = !isAxisType && $$[isType ? "regionX" : "regionY"](d);
 		let currScale;
 		let key = "end";
 		let end = state[type];
 
 		if (d.axis === "y" || d.axis === "y2") {
-			if (!isWidth) {
+			if (!isAxisType && !isType) {
 				key = "start";
+			} else if (isAxisType && !isType) {
+				key = "end";
 			}
 
-			if ((isWidth ? isRotated : !isRotated) && key in d) {
+			if ((isType ? isRotated : !isRotated) && key in d) {
 				currScale = scale[d.axis];
 				end = currScale(d[key]);
 			}
-		} else if ((isWidth ? !isRotated : isRotated) && key in d) {
+		} else if ((isType ? !isRotated : isRotated) && key in d) {
 			currScale = scale.zoom || scale.x;
 			end = currScale($$.axis.isTimeSeries() ? parseDate.call($$, d[key]) : d[key]);
 		}
 
 		return end < start ? 0 : end - start;
 	},
 
-	regionWidth(d: RegionsType): number {
-		return this.getRegionSize("width", d);
-	},
-
-	regionHeight(d: RegionsType): number {
-		return this.getRegionSize("height", d);
-	},
-
 	isRegionOnX(d: RegionsType): boolean {
 		return !d.axis || d.axis === "x";
 	}

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -417,8 +417,8 @@ export interface ChartOptions {
 
 export interface RegionOptions {
 	axis?: "x" | "y" | "y2";
-	start?: string | number | Date;
-	end?: string | number | Date;
+	start?: number | Date;
+	end?: number | Date;
 	class?: string;
 	label?: {
 		text?: string;