skip: wip

netil · Jan 14, 2025 · fd28ab6 · fd28ab6
1 parent bf842d4
commit fd28ab6
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 46 deletions.
diff --git a/src/ChartInternal/internals/region.ts b/src/ChartInternal/internals/region.ts
@@ -99,11 +99,11 @@ export default {
 	},
 
 	regionX(d: RegionsType): number {
-		return this.getRegionStart("x", d);
+		return this.getRegionSize("x", d);
 	},
 
 	regionY(d: RegionsType): number {
-		return this.getRegionStart("y", d);
+		return this.getRegionSize("y", d);
 	},
 
 	regionWidth(d: RegionsType): number {
@@ -114,27 +114,37 @@ export default {
 		return this.getRegionSize("height", d);
 	},
 
-	getRegionStart(type: AxisType, d: RegionsType): number {
+	/**
+	 * Get Region size according start/end position
+	 * @param {string} type Type string
+	 * @param {ojbect} d Data object 
+	 * @returns {number}
+	 * @private
+	 */
+	getRegionSize(type: AxisType | "width" | "height", d: RegionsType): number {
 		const $$ = this;
-		const {config, scale} = $$;
+		const {config, scale, state} = $$;
 		const isRotated = config.axis_rotated;
-		const isX = type === "x";
-		let key = "start";
+		const isAxisType = /(x|y|y2)/.test(type);
+
+		const isType = isAxisType ? type === "x" : type === "width";
+		const start = !isAxisType && $$[isType ? "regionX" : "regionY"](d);
+		let key = isAxisType ? "start" : "end";
+		let pos = isAxisType ? 0 : state[type];
 		let currScale;
-		let pos = 0;
 
 		if (d.axis === "y" || d.axis === "y2") {
-			if (!isX) {
+			if (!isAxisType && !isType) {
+				key = "start";
+			} else if (isAxisType && !isType) {
 				key = "end";
 			}
 
-			if ((isX ? isRotated : !isRotated) && key in d) {
+			if ((isType ? isRotated : !isRotated) && key in d) {
 				currScale = scale[d.axis];
-				pos = currScale(d[key]);
 			}
-		} else if ((isX ? !isRotated : isRotated) && key in d) {
+		} else if ((isType ? !isRotated : isRotated) && key in d) {
 			currScale = scale.zoom || scale.x;
-			pos = currScale($$.axis.isTimeSeries() ? parseDate.call($$, d[key]) : +d[key]);
 		}
 
 		if (currScale) {
@@ -149,38 +159,7 @@ export default {
 			pos = currScale(pos);
 		}
 
-		return pos;
-	},
-
-	getRegionSize(type: AxisType | "width" | "height", d: RegionsType): number {
-		const $$ = this;
-		const {config, scale, state} = $$;
-		const isRotated = config.axis_rotated;
-		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 (!isAxisType && !isType) {
-				key = "start";
-			} else if (isAxisType && !isType) {
-				key = "end";
-			}
-
-			if ((isType ? isRotated : !isRotated) && key in d) {
-				currScale = scale[d.axis];
-				end = currScale(d[key]);
-			}
-		} 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;
+		return isAxisType ? pos : pos < start ? 0 : pos - start;
 	},
 
 	isRegionOnX(d: RegionsType): boolean {

diff --git a/test/internals/regions-spec.ts b/test/internals/regions-spec.ts
@@ -305,4 +305,80 @@ describe("REGIONS", function() {
 			expect(hasOverflow).to.be.false;
 		});
 	});
+
+	describe("category type", () => {
+		beforeAll(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 100, 150, 130, 200, 220, 190]
+					],
+					axes: {
+						data2: "y2"
+					},
+					type: "line",
+					colors: {
+						data1: "#ff0000"
+					}
+				},
+				axis: {
+					x: {
+						type: "category",
+						categories: [
+							"cat1",
+							"cat2",
+							"cat3",
+							"cat4",
+							"cat5",
+							"cat6"
+					  ]
+					},
+					y2: {
+					  show: true
+					}
+				},
+				regions: [
+					{
+					  axis: "x",
+					  start: "cat1",
+					  end: "cat2",
+					  class: "regions_class1",
+					  label: {
+						text: "Regions 1",
+						color: "red"
+					  }
+					},
+					{
+					  axis: "x",
+					  start: "cat4",
+					  end: "cat4",
+					  class: "regions_class4",
+					  label: {
+						text: "Regions 4",
+						color: "blue"
+					  }
+					}
+				]
+			};
+		});
+
+		it("should render regions correctly", () => {
+			const {region: {list}} = chart.internal.$el;
+			const {x} = chart.internal.scale;
+			const expected = [
+				{start: -0.5, end: 1.5},
+				{start: 2.5, end: 3.5}
+			];
+
+			list.select("rect").each(function(d, i) {
+				const {start, end} = expected[i];
+				const xPos = +this.getAttribute("x");
+				const width = +this.getAttribute("width");
+
+				expect(x(start)).to.be.equal(xPos);
+				expect(x(end)).to.be.equal(xPos + width);
+			});
+		});
+	});
 });
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?: number | Date;
-	end?: number | Date;
+	start?: string | number | Date;
+	end?: string | number | Date;
 	class?: string;
 	label?: {
 		text?: string;