feat(polar): add multiple options related to angle, padding (#27)

* feat(polar): add polar_startingAngle option * docs(polar): add polar_startingAngle doc in option * docs(polar): add StartingAngle demo * feat(polar): add polar padding option * docs(polar): add doc for polar padding option * docs(polar): add demo for polar padding option * feat(polar): add polar padAngle option * docs(polar): add docs for polar padAngle option * docs(polar): add padAngle demo
cmpark0126 · Jan 5, 2022 · 7ac656c · 7ac656c
1 parent e478e79
commit 7ac656c
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -603,7 +603,7 @@ var demos = {
 			options: {
 				data: {
 					columns: [
-						["data1", 30],
+						["data1", 60],
 						["data2", 120],
 						["data3", 75]
 					],
@@ -4972,7 +4972,7 @@ d3.select(".chart_area")
 			options: {
 				data: {
 					columns: [
-						["data1", 30],
+						["data1", 60],
 						["data2", 120],
 						["data3", 75]
 					],
@@ -4993,7 +4993,7 @@ d3.select(".chart_area")
 			options: {
 				data: {
 					columns: [
-						["data1", 30],
+						["data1", 60],
 						["data2", 120],
 						["data3", 75]
 					],
@@ -5005,7 +5005,52 @@ d3.select(".chart_area")
 					}
 				}
 			}
-		}
+		},
+		Padding: {
+			options: {
+				data: {
+					columns: [
+						["data1", 60],
+						["data2", 120],
+						["data3", 75]
+					],
+					type: "polar",
+				},
+				polar: {
+					padding: 5
+				}
+			}
+		},
+		PadAngle: {
+			options: {
+				data: {
+					columns: [
+						["data1", 60],
+						["data2", 120],
+						["data3", 75]
+					],
+					type: "polar",
+				},
+				polar: {
+					padAngle: 0.1
+				}
+			}
+		},
+		StartingAngle: {
+			options: {
+				data: {
+					columns: [
+						["data1", 60],
+						["data2", 120],
+						["data3", 75]
+					],
+					type: "polar",
+				},
+				polar: {
+					startingAngle: 1
+				}
+			}
+		},
 	},
 	API: {
 		AxisLabel: {

diff --git a/src/ChartInternal/shape/polar.ts b/src/ChartInternal/shape/polar.ts
@@ -7,6 +7,12 @@ export default {
 	initPolar(): void {
 		const $$ = this;
 		const {config, state: {current}, $el} = $$;
+		const startingAngle = config.polar_startingAngle || 0;
+		// TODO: remove magic number
+		const padding = config.polar_padding;
+		const padAngle = (
+			padding ? padding * 0.01 : config.polar_padAngle
+		) || 0;
 		const depth = config.polar_level_depth;
 		const ceilDataMax = Math.ceil($$.getMinMaxData().max[0].value / depth) * depth;
 
@@ -25,7 +31,11 @@ export default {
 		current.dataMax = config.polar_size_max || ceilDataMax;
 		// Let each value be 1, thus every arc has same central angle
 		// To match central angle with specific data, change "1" to specific function.
-		$$.polarPie = d3Pie().value(1);
+		$$.polarPie = d3Pie()
+			.startAngle(startingAngle)
+			.endAngle(startingAngle + (2 * Math.PI))
+			.padAngle(padAngle)
+			.value(1);
 	},
 
 	getPolarSize(): [number, number] {
@@ -38,12 +48,15 @@ export default {
 
 	getPolarArc(d): string {
 		const $$ = this;
-		const {state: {current}} = $$;
+		const {config, state: {current}} = $$;
 		const [width, height] = $$.getPolarSize();
 		const radius = Math.min(width, height);
 
+		// TODO: remove magic number
+		const innerRadius = config.polar_padding * 0.4;
+
 		return d3Arc()
-			.innerRadius(0)
+			.innerRadius(innerRadius)
 			.outerRadius((d: any) => d.data.values.reduce((a, b) => a + b.value, 0) / current.dataMax * radius)(d) || "M 0 0";
 	},
 

diff --git a/src/config/Options/shape/polar.ts b/src/config/Options/shape/polar.ts
@@ -17,6 +17,9 @@ export default {
 	 * @property {Function} [polar.level.text.format] Set format function for the level value.<br>- Default value: `(x) => x % 1 === 0 ? x : x.toFixed(2)`
 	 * @property {boolean} [polar.level.text.show=true] Show or hide level text.
 	 * @property {number} [polar.size.max=undefined] Set the chart size. Same as setting the max value of the polar chart. If not given, it'll take the max value from the given data.
+	 * @property {number} [polar.padAngle=0] Set padding between polar arcs.
+	 * @property {number} [polar.padding=0] Sets the gap between polar arcs.
+	 * @property {number} [polar.startingAngle=0] Set starting angle where data draws.
 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.PolarChart)
 	 * @see [Demo: polar level](https://naver.github.io/billboard.js/demo/#PolarChartOptions.PolarLevel)
 	 * @see [Demo: polar size](https://naver.github.io/billboard.js/demo/#PolarChartOptions.PolarSize)
@@ -34,12 +37,18 @@ export default {
 	 *      },
 	 *      size: {
 	 *          max: 200
-	 *      }
+	 *      },
+	 *      padAngle: 0.1,
+	 *      padding: 0,
+	 *      startingAngle: 1
 	 *  }
 	 */
 	polar_level_depth: 3,
 	polar_level_show: true,
 	polar_level_text_format: (x: number) => (x % 1 === 0 ? x : x.toFixed(2)),
 	polar_level_text_show: true,
 	polar_size_max: <number|undefined> undefined,
+	polar_padAngle: 0,
+	polar_padding: 0,
+	polar_startingAngle: 0
 };
diff --git a/src/scss/billboard.scss b/src/scss/billboard.scss
@@ -303,7 +303,7 @@ text.bb-chart-arcs-gauge-title {
 	.bb-shapes {
 		path {
 			fill-opacity: .6;
-			stroke-width: .5px;
+			stroke-width: 1px;
 			stroke-opacity: .5;
 		}
 	}