feat(regions): Intent to ship regions.label

Implement regions.label Close #3319
naver · Aug 7, 2023 · e35d0d0 · e35d0d0
1 parent 9d45752
commit e35d0d0
Show file tree

Hide file tree

Showing 12 changed files with 403 additions and 27 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -3993,6 +3993,61 @@ d3.select(".chart_area")
 				]
 			}
 		},
+		RegionLabel: {
+			options: {
+				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: {
+					y2: {
+						show: true
+					}
+				},
+				regions: [
+					{
+						axis: "x",
+						start: 1,
+						end: 2,
+						class: "regions_class1",
+						label: {
+							text: "Regions 1",
+							color: "red"
+						}
+					},
+					{
+						axis: "y",
+						start: 100,
+						end: 300,
+						class: "regions_class2",
+						label: {
+							text: "Regions 2",
+							x: 50,
+							color: "blue"
+						}
+					},
+					{
+						axis: "y2",
+						start: 200,
+						end: 220,
+						class: "regions_class3",
+						label: {
+							text: "Regions 3",
+							y: 10
+						}
+					}
+				]
+			}
+		},
 		RegionWithTimeseries: {
 			options: {
 				data: {

diff --git a/src/ChartInternal/internals/region.ts b/src/ChartInternal/internals/region.ts
@@ -5,10 +5,10 @@
 import {select as d3Select} from "d3-selection"; // selection
 import {$REGION} from "../../config/classes";
 import {isValue, parseDate} from "../../module/util";
-import type {AxisType} from "../../../types/types";
+import type {AxisType, RegionsType} from "../../../types/types";
 
 export default {
-	initRegion() {
+	initRegion(): void {
 		const $$ = this;
 		const {$el} = $$;
 
@@ -38,7 +38,8 @@ export default {
 			.style("opacity", "0")
 			.remove();
 
-		const regionsEnter = regions.enter()
+		const regionsEnter = regions
+			.enter()
 			.append("g");
 
 		regionsEnter
@@ -48,19 +49,40 @@ export default {
 		region.list = regionsEnter
 			.merge(regions)
 			.attr("class", $$.classRegion.bind($$));
+
+		region.list.each(function(d) {
+			const g = d3Select(this);
+
+			if (g.select("text").size() === 0 && d.label?.text) {
+				d3Select(this).append("text")
+					.style("opacity", "0");
+			}
+		});
 	},
 
-	redrawRegion(withTransition) {
+	redrawRegion(withTransition: boolean) {
 		const $$ = this;
 		const {$el: {region}, $T} = $$;
 		let regions = region.list.select("rect");
+		let label = region.list.selectAll("text");
 
 		regions = $T(regions, withTransition)
 			.attr("x", $$.regionX.bind($$))
 			.attr("y", $$.regionY.bind($$))
 			.attr("width", $$.regionWidth.bind($$))
 			.attr("height", $$.regionHeight.bind($$));
 
+		label = $T(label, withTransition)
+			.attr("transform", d => {
+				const {x = 0, y = 0, rotated = false} = d.label ?? {};
+
+				return `translate(${$$.regionX.bind($$)(d) + x}, ${$$.regionY.bind($$)(d) + y})${rotated ? ` rotate(-90)` : ``}`;
+			})
+			.attr("text-anchor", d => (d.label?.rotated ? "end" : null))
+			.attr("dy", "1em")
+			.style("fill", d => d.label?.color ?? null)
+			.text(d => d.label?.text);
+
 		return [
 			regions
 				.style("fill-opacity", d => (isValue(d.opacity) ? d.opacity : null))
@@ -69,11 +91,12 @@ export default {
 					d3Select(this.parentNode)
 						.selectAll("rect:not([x])")
 						.remove();
-				})
+				}),
+			label.style("opacity", null)
 		];
 	},
 
-	getRegionXY(type: AxisType, d): number {
+	getRegionXY(type: AxisType, d: RegionsType): number {
 		const $$ = this;
 		const {config, scale} = $$;
 		const isRotated = config.axis_rotated;
@@ -99,15 +122,15 @@ export default {
 		return pos;
 	},
 
-	regionX(d): number {
+	regionX(d: RegionsType): number {
 		return this.getRegionXY("x", d);
 	},
 
-	regionY(d): number {
+	regionY(d: RegionsType): number {
 		return this.getRegionXY("y", d);
 	},
 
-	getRegionSize(type, d): number {
+	getRegionSize(type: "width" | "height", d: RegionsType): number {
 		const $$ = this;
 		const {config, scale, state} = $$;
 		const isRotated = config.axis_rotated;
@@ -134,15 +157,15 @@ export default {
 		return end < start ? 0 : end - start;
 	},
 
-	regionWidth(d): number {
+	regionWidth(d: RegionsType): number {
 		return this.getRegionSize("width", d);
 	},
 
-	regionHeight(d): number {
+	regionHeight(d: RegionsType): number {
 		return this.getRegionSize("height", d);
 	},
 
-	isRegionOnX(d): boolean {
+	isRegionOnX(d: RegionsType): boolean {
 		return !d.axis || d.axis === "x";
 	},
 };
diff --git a/src/config/Options/common/main.ts b/src/config/Options/common/main.ts
@@ -2,6 +2,8 @@
  * Copyright (c) 2017 ~ present NAVER Corp.
  * billboard.js project is licensed under the MIT license
  */
+import type {RegionsType} from "../../../../types/types";
+
 /**
  * main config options
  */
@@ -395,15 +397,23 @@ export default {
 	 * @memberof Options
 	 * @type {Array}
 	 * @default []
+	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Region.RegionLabel)
 	 * @example
 	 *  regions: [
 	 *    {
 	 *      axis: "x",
 	 *      start: 1,
 	 *      end: 4,
-	 *      class: "region-1-4"
+	 *      class: "region-1-4",
+	 *      label: {
+	 *      	text: "Region Text",
+	 *      	x: 5,  // position relative of the initial x coordinate
+	 *      	y: 5,  // position relative of the initial y coordinate
+	 *      	color: "red",  // color string
+	 *      	rotated: true  // make text to show in vertical or horizontal
+	 *      }
 	 *    }
 	 *  ]
 	 */
-	regions: <{axis?: string; start?: number; end?: number; class?: string;}[]> []
+	regions: <RegionsType[]> []
 };
diff --git a/src/config/Options/data/axis.ts b/src/config/Options/data/axis.ts
@@ -2,6 +2,8 @@
  * Copyright (c) 2017 ~ present NAVER Corp.
  * billboard.js project is licensed under the MIT license
  */
+import type {DataRegionsType} from "../../../../types/types";
+
 /**
  * Axis based chart data config options
  */
@@ -128,7 +130,7 @@ export default {
 	 *   }
 	 * }
 	 */
-	data_regions: <{start?: number; end?: number; style?: {dasharray: string;}}[]> {},
+	data_regions: <DataRegionsType> {},
 
 	/**
 	 * Set the stacking to be normalized

diff --git a/src/scss/billboard.scss b/src/scss/billboard.scss
@@ -136,8 +136,10 @@
 }
 /*-- Region --*/
 .bb-region {
-	fill: steelblue;
-	fill-opacity: .1;
+	rect {
+		fill: steelblue;
+		fill-opacity: .1;
+	}
 }
 
 /*-- Zoom region --*/

diff --git a/src/scss/theme/dark.scss b/src/scss/theme/dark.scss
@@ -162,8 +162,10 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
-    fill: steelblue;
-    fill-opacity: 0.5;
+    rect {
+        fill: steelblue;
+        fill-opacity: 0.5;
+    }    
 
     &.selected rect {
         fill: rgb(39, 201, 3);

diff --git a/src/scss/theme/datalab.scss b/src/scss/theme/datalab.scss
@@ -147,8 +147,10 @@ $text-font-size: 11px;
 
 /*-- Region --*/
 .bb-region {
-    fill: steelblue;
-    fill-opacity: 0.1;
+    rect {
+        fill: steelblue;
+        fill-opacity: 0.1;
+    }
 
     &.selected rect {
         fill: rgb(39, 201, 3);

diff --git a/src/scss/theme/graph.scss b/src/scss/theme/graph.scss
@@ -158,8 +158,10 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
-    fill: steelblue;
-    fill-opacity: 0.1;
+    rect {
+        fill: steelblue;
+        fill-opacity: 0.1;
+    }
 
     &.selected rect {
         fill: rgb(39, 201, 3);

diff --git a/src/scss/theme/insight.scss b/src/scss/theme/insight.scss
@@ -154,8 +154,10 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
-    fill: steelblue;
-    fill-opacity: 0.1;
+    rect {
+        fill: steelblue;
+        fill-opacity: 0.1;
+    }
 
     &.selected rect {
         fill: rgb(39, 201, 3);