feat(arc): Intent to ship arc.rangeText

Implement new arc.rangeText option, which can display a range in Arc shape. Ref naver#2120
netil · Feb 7, 2024 · dc2c112 · dc2c112
1 parent fbb8688
commit dc2c112
Show file tree

Hide file tree

Showing 13 changed files with 719 additions and 82 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -5528,6 +5528,57 @@ setTimeout(function() {
 				]
 			}
 		],
+		DonutRangeText: [{
+			options: {
+				title: {
+					text: "Range text in 'absolute' value"
+				},
+				data: {
+					columns: [
+						["data1", 30],
+						["data2", 120],
+						["data3", 50]
+					],
+					type: "donut"
+				},
+				arc: {
+					rangeText: {
+						values: [15, 50, 70, 110, 160, 195],
+						unit: "absolute",
+						format: function(v) {
+							return v === 50 ? "Fifty" : v;
+						}
+					}
+				}
+			}
+		}, {
+			options: {
+				title: {
+					text: "Range text in 'percent' value"
+				},
+				data: {
+					columns: [
+						["data1", 30],
+						["data2", 120],
+						["data3", 50]
+					],
+					type: "donut"
+				},
+				arc: {
+					rangeText: {
+						values: [15, 25, 40, 50, 63, 70, 80, 99],
+						unit: "%",
+						position: function(v) {
+						if (v === 25) {
+						  return {
+						    y: -30
+						  }
+						}
+					      }
+					}
+				}
+			}
+		}],
 		LabelRatio: {
 			options: {
 				data: {
@@ -5896,6 +5947,95 @@ setTimeout(function() {
 				}
 			},
 		],
+		GaugeRangeText: [{
+			options: {
+				title: {
+					text: "Range text in 'absolute' value"
+				},
+				size: {
+					height: 220
+				},
+				data: {
+					columns: [
+						["data1", 30],
+						["data2", 120],
+						["data3", 50]
+					],
+					type: "gauge"
+				},
+				arc: {
+					rangeText: {
+						values: [15, 50, 70, 110, 160, 195],
+						unit: "absolute"
+					}
+				},
+				gauge: {
+					label: {
+						format: function(value, ratio) { return value; },
+						extents: function() { return ""; }
+					}
+				},
+
+			}
+		}, {
+			options: {
+				title: {
+					text: "Range text in 'percent' value"
+				},
+				size: {
+					height: 220
+				},
+				data: {
+					columns: [
+						["data1", 30],
+						["data2", 120],
+						["data3", 50]
+					],
+					type: "gauge"
+				},
+				arc: {
+					rangeText: {
+						values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+						unit: "%"
+					}
+				},
+				gauge: {
+					label: {
+						extents: function() { return ""; }
+					}
+				}
+			}
+		},
+		{
+			options: {
+				title: {
+					text: "Fixed range text in 'percent' value"
+				},
+				size: {
+					height: 220
+				},
+				data: {
+					columns: [
+						["data1", 30],
+						["data2", 120],
+						["data3", 50]
+					],
+					type: "gauge"
+				},
+				arc: {
+					rangeText: {
+						values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
+						unit: "%",
+						fixed: true
+					}
+				},
+				gauge: {
+					label: {
+						extents: function() { return ""; }
+					}
+				}
+			}
+		}],
 		GaugeStackData: [
 			{
 				options: {

diff --git a/demo/simple-sidebar.css b/demo/simple-sidebar.css
@@ -329,6 +329,44 @@ div.row {
     text-decoration: underline;
 }
 
+#exportPreserveFontStyle svg {
+    font-family: 'Alfa Slab One';
+}
+
+#fitPadding_1 svg {
+    border: 1px dashed blue;
+    margin-bottom: 20px;
+}
+
+#fitPadding_2 svg {
+    border: 1px dashed red;
+}
+
+#donutNeedle_1 .bb-chart-arcs-title, #donutNeedle_2 .bb-chart-arcs-title {
+    font-size: 3em;
+    fill: blue;
+    transform: translateY(40px);
+}
+
+.dark #donutNeedle_1 .bb-chart-arcs-title, .dark #donutNeedle_2 .bb-chart-arcs-title {
+    fill: #828181;
+}
+
+#gaugeNeedle_1 .bb-chart-arcs-gauge-title tspan:first-child {
+    font-size: 0.3em;
+}
+
+#gaugeNeedle_1 .bb-chart-arcs-gauge-title {
+    transform: translateY(-80px);
+    font-size: 4em;
+}
+
+#gaugeNeedle_2 .bb-chart-arcs-gauge-title {
+    font-size: 3.5em;
+    fill: red;
+    transform: translateY(-20px);
+}
+
 /* Style For Region */
 #styleForRegion .bb-region-0 {fill:red;}
 #styleForRegion .bb-region.foo {fill:green;}
@@ -384,3 +422,8 @@ div.row {
 /* Background */
 .myBgClass { transform: scale(0.9) translate(15px, -10px); opacity: 0.1; }
 
+
+div[id$="_2"], div[id$="_3"], div[id$="_4"], div[id$="_5"] {
+    margin: 20px 0;
+    box-shadow: 0 -1px 0 #ccc;
+}
diff --git a/demo/tomorrow.css b/demo/tomorrow.css
@@ -34,6 +34,12 @@
   color: #8959a8;
 }
 
+g > text.bb-title {
+  font-size: 1.3em;
+  stroke-width: 2px;
+  font-weight: bold;
+}
+
 @media (min-width: 1200px) {
   .example-grid {
     display: grid;
@@ -80,6 +86,7 @@ pre code {
   line-height: 1.3;
   border: 1px solid #ccc;
   padding: 10px;
+  overscroll-behavior: contain;
 }
 
 code.html {
@@ -123,44 +130,6 @@ code.html {
   src: url(https://fonts.gstatic.com/s/alfaslabone/v17/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhe_escmA.woff2) format('woff2');
 }
 
-#exportPreserveFontStyle svg {
-  font-family: 'Alfa Slab One';
-}
-
-#fitPadding_1 svg {
-  border: 1px dashed blue;
-  margin-bottom: 20px;
-}
-
-#fitPadding_2 svg {
-  border: 1px dashed red;
-}
-
-#donutNeedle_1 .bb-chart-arcs-title, #donutNeedle_2 .bb-chart-arcs-title {
-  font-size: 3em;
-  fill: blue;
-  transform: translateY(40px);
-}
-
-.dark #donutNeedle_1 .bb-chart-arcs-title, .dark #donutNeedle_2 .bb-chart-arcs-title {
-  fill: #828181;
-}
-
-#gaugeNeedle_1 .bb-chart-arcs-gauge-title tspan:first-child {
-  font-size: 0.3em;
-}
-
-#gaugeNeedle_1 .bb-chart-arcs-gauge-title {
-    transform: translateY(-80px);
-    font-size: 4em;
-}
-
- #gaugeNeedle_2 .bb-chart-arcs-gauge-title {
-  font-size: 3.5em;
-  fill: red;
-  transform: translateY(-20px);
-}
-
 body.dark {
   background-color: #000;
   color: #d4d4d4;
@@ -187,3 +156,4 @@ body.dark {
 .dark .code .button.clipboard:hover {
   color: #fff;
 }
+
diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
@@ -628,8 +628,9 @@ export default {
 			const reducer = (p, c) => p + Math.abs(c.value);
 
 			fn = (t1: IData | IDataRow, t2: IData | IDataRow) => {
-				const t1Sum = "values" in t1 ? t1.values.reduce(reducer, 0) : t1.value;
-				const t2Sum = "values" in t2 ? t2.values.reduce(reducer, 0) : t2.value;
+				const sum = v => v.values?.reduce(reducer, 0) ?? v.value ?? v;
+				const t1Sum = sum(t1);
+				const t2Sum = sum(t2);
 
 				return isReversed ?
 					(orderAsc ? t1Sum - t2Sum : t2Sum - t1Sum) :
@@ -965,7 +966,7 @@ export default {
 					// otherwise, based on the rendered angle value
 				} else {
 					const gaugeArcLength = config.gauge_fullCircle ?
-						$$.getArcLength() : $$.getGaugeStartAngle() * -2;
+						$$.getArcLength() : $$.getStartingAngle() * -2;
 					const arcLength = $$.hasType("gauge") ? gaugeArcLength : Math.PI * 2;
 
 					ratio = (d.endAngle - d.startAngle) / arcLength;

diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts
@@ -395,6 +395,17 @@ export default {
 			state.arcWidth = state.width - (isLegendRight ? currLegend.width + 10 : 0) - textWidth;
 			state.arcHeight = state.height - (isLegendRight && !hasGauge ? 0 : 10);
 
+			if (config.arc_rangeText_values?.length) {
+				if (hasGauge) {
+					state.arcWidth -= 25;
+					state.arcHeight -= 10;
+					state.margin.left += 10;
+				} else {
+					state.arcHeight -= 20;
+					state.margin.top += 10;
+				}
+			}
+
 			if (hasGauge && !config.gauge_fullCircle) {
 				state.arcHeight += state.height - $$.getPaddingBottomForGauge();
 			}

diff --git a/src/ChartInternal/internals/transform.ts b/src/ChartInternal/internals/transform.ts
@@ -44,6 +44,10 @@ export default {
 		} else if (target === "arc") {
 			x = state.arcWidth / 2;
 			y = state.arcHeight / 2;
+
+			if (config.arc_rangeText_values?.length) {
+				y += 5 + ($$.hasType("gauge") && config.title_text ? 10 : 0);
+			}
 		} else if (target === "polar") {
 			x = state.arcWidth / 2;
 			y = state.arcHeight / 2;