feat(polar): Intent to ship polar type

demo/chart.js

@@ -212,7 +212,7 @@ var billboardDemo = {
 
 		// UMD
 		code.data = code.data.join("")
-			.replace(/"(area|area-line-range|area-spline|area-spline-range|area-step|bar|bubble|candlestick|donut|gauge|line|pie|radar|scatter|spline|step|selection|subchart|zoom)(\(\))?",?/g, function(match, p1, p2, p3, offset, string) {
+			.replace(/"(area|area-line-range|area-spline|area-spline-range|area-step|bar|bubble|candlestick|donut|gauge|line|pie|polar|radar|scatter|spline|step|selection|subchart|zoom)(\(\))?",?/g, function(match, p1, p2, p3, offset, string) {
 				var module = camelize(p1);
 
 				code.esm.indexOf(module) === -1 &&

demo/demo.js

@@ -599,6 +599,23 @@ var demos = {
 				]
 			}
 		},
+		PolarChart: {
+			options: {
+				data: {
+					columns: [
+						["data1", 60],
+						["data2", 120],
+						["data3", 75]
+					],
+					type: "polar",
+				},
+				polar: {
+					level:{
+						depth: 4,
+					},
+				}
+			}
+		},
 		RadarChart: {
 			options: {
 				data: {
@@ -4947,6 +4964,92 @@ d3.select(".chart_area")
 			}
 		}
 	},
+	PolarChartOptions: {
+		PolarLevel: {
+			options: {
+				data: {
+					columns: [
+						["data1", 60],
+						["data2", 120],
+						["data3", 75]
+					],
+					type: "polar",
+				},
+				polar: {
+					level: {
+						depth: 4,
+						max: 150,
+						show: false,
+						text: {
+							format: function(x) { return x + "%"; }
+						}
+					},
+				}
+			}
+		},
+		PolarSize: {
+			options: {
+				data: {
+					columns: [
+						["data1", 60],
+						["data2", 120],
+						["data3", 75]
+					],
+					type: "polar",
+				},
+				polar: {
+					size: {
+						ratio: 0.7
+					}
+				}
+			}
+		},
+		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: {
 			options: {

demo/index.html

@@ -135,6 +135,7 @@ <h4>Supported chart types</h4>
                             <li><a href="#Chart.GaugeChart">Gauge</a></li>
                             <li><a href="#Chart.LineChart">Line</a></li>
                             <li><a href="#Chart.PieChart">Pie</a></li>
+                            <li><a href="#Chart.PolarChart">Polar</a></li>
                             <li><a href="#Chart.RadarChart">Radar</a></li>
                             <li><a href="#Chart.ScatterPlot">Scatter</a></li>
                             <li><a href="#Chart.SplineChart">Spline</a></li>

demo/types/types.js

@@ -13,6 +13,7 @@ const Types = {
         "spline",
         "step",
         "candlestick",
+        "polar",
         "radar",
         "gauge",
         "gauge-multi",

src/Chart/api/focus.ts

@@ -79,7 +79,7 @@ export default {
 		candidates.classed(CLASS.focused, false).classed(CLASS.defocused, true);
 
 		if ($$.hasArcType()) {
-			$$.unexpandArc(targetIds);
+			state.hasPolar ? $$.unexpandPolar(targetIds) : $$.unexpandArc(targetIds);
 
 			$$.hasType("gauge") &&
 				$$.undoMarkOverlapped($$, `.${CLASS.gaugeValue}`);
@@ -115,7 +115,10 @@ export default {
 		const candidates = $el.svg.selectAll($$.selectorTargets(targetIds)); // should be for all targets
 
 		candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false);
-		$$.hasArcType() && $$.unexpandArc(targetIds);
+
+		if ($$.hasArcType()) {
+			state.hasPolar ? $$.unexpandPolar(targetIds) : $$.unexpandArc(targetIds);
+		}
 
 		if (config.legend_show) {
 			$$.showLegend(targetIds.filter($$.isLegendToShow.bind($$)));

src/ChartInternal/ChartInternal.ts

@@ -181,6 +181,7 @@ export default class ChartInternal {
 
 		state.hasAxis = !$$.hasArcType();
 		state.hasRadar = !state.hasAxis && $$.hasType("radar");
+		state.hasPolar = !state.hasAxis && $$.hasType("polar");
 
 		// when 'padding=false' is set, disable axes and subchart. Because they are useless.
 		if (config.padding === false) {
@@ -499,7 +500,7 @@ export default class ChartInternal {
 	 */
 	initChartElements(): void {
 		const $$ = <any> this;
-		const {hasAxis, hasRadar} = $$.state;
+		const {hasAxis, hasRadar, hasPolar} = $$.state;
 		const types: string[] = [];
 
 		if (hasAxis) {
@@ -511,14 +512,16 @@ export default class ChartInternal {
 				}
 			});
 		} else {
-			if (!hasRadar) {
+			if (!hasRadar && !hasPolar) {
 				types.push("Arc", "Pie");
 			}
 
 			if ($$.hasType("gauge")) {
 				types.push("Gauge");
 			} else if (hasRadar) {
 				types.push("Radar");
+			} else if (hasPolar) {
+				types.push("Polar");
 			}
 		}
 
@@ -598,7 +601,7 @@ export default class ChartInternal {
 	 */
 	updateTargets(targets): void {
 		const $$ = <any> this;
-		const {hasAxis, hasRadar} = $$.state;
+		const {hasAxis, hasRadar, hasPolar} = $$.state;
 
 		// Text
 		$$.updateTargetsForText(targets);
@@ -618,11 +621,13 @@ export default class ChartInternal {
 			$$.updateTargetsForSubchart &&
 				$$.updateTargetsForSubchart(targets);
 		} else {
-			// Arc & Radar
+			// Arc & Radar & Polar
 			$$.hasArcType(targets) && (
 				hasRadar ?
 					$$.updateTargetsForRadar(targets.filter($$.isRadarType.bind($$))) :
-					$$.updateTargetsForArc(targets.filter($$.isArcType.bind($$)))
+					hasPolar ?
+						$$.updateTargetsForPolarArc(targets.filter($$.isPolarType.bind($$))) :
+						$$.updateTargetsForArc(targets.filter($$.isArcType.bind($$)))
 			);
 		}
 

src/ChartInternal/internals/format.ts

@@ -39,10 +39,13 @@ export default {
 	getDefaultValueFormat(): Function {
 		const $$ = this;
 		const hasArc = $$.hasArcType();
+		const {hasPolar} = $$.state;
 
-		return hasArc && !$$.hasType("gauge") ?
-			$$.defaultArcValueFormat :
-			$$.defaultValueFormat;
+		return hasPolar ?
+			$$.defaultPolarValueFormat :
+			hasArc && !$$.hasType("gauge") ?
+				$$.defaultArcValueFormat :
+				$$.defaultValueFormat;
 	},
 
 	defaultValueFormat(v): number|string {
@@ -53,6 +56,10 @@ export default {
 		return `${(ratio * 100).toFixed(1)}%`;
 	},
 
+	defaultPolarValueFormat(v): string {
+		return `${v}`;
+	},
+
 	dataLabelFormat(targetId: string): Function {
 		const $$ = this;
 		const dataLabels = $$.config.data_labels;

src/ChartInternal/internals/redraw.ts

@@ -85,6 +85,9 @@ export default {
 
 			// radar
 			$el.radar && $$.redrawRadar();
+
+			// polar
+			$el.polar && $$.redrawPolar();
 		}
 
 		// @TODO: Axis & Radar type

src/ChartInternal/internals/transform.ts

@@ -5,7 +5,7 @@
 import CLASS from "../../config/classes";
 import {asHalfPixel} from "../../module/util";
 
-type TranslateParam = "main" | "context" | "legend" | "x" | "y" | "y2" | "subX" | "arc" | "radar";
+type TranslateParam = "main" | "context" | "legend" | "x" | "y" | "y2" | "subX" | "arc" | "radar" | "polar";
 
 export default {
 	getTranslate(target: TranslateParam, index = 0): string {
@@ -44,6 +44,9 @@ export default {
 		} else if (target === "arc") {
 			x = state.arcWidth / 2;
 			y = state.arcHeight / 2;
+		} else if (target === "polar") {
+			x = state.arcWidth / 2;
+			y = state.arcHeight / 2;
 		} else if (target === "radar") {
 			const [width] = $$.getRadarSize();
 

src/ChartInternal/internals/type.ts

@@ -187,6 +187,10 @@ export default {
 		return this.isTypeOf(d, "donut");
 	},
 
+	isPolarType(d): boolean {
+		return this.isTypeOf(d, "polar");
+	},
+
 	isRadarType(d): boolean {
 		return this.isTypeOf(d, "radar");
 	},
@@ -195,6 +199,7 @@ export default {
 		return this.isPieType(d) ||
 			this.isDonutType(d) ||
 			this.isGaugeType(d) ||
+			this.isPolarType(d) ||
 			this.isRadarType(d);
 	},