refactor(polar): refactor redraw method for polar chart (#33)

* docs(polar): fix demo typo

* fix(polar): function config update on polar

* skip: follow lint

* test(polar): add size option test

* test(polar): enhance test cases

demo/demo.js

@@ -613,9 +613,6 @@ var demos = {
 					level:{
 						depth: 4,
 					},
-					size:{
-						max: 200,
-					}
 				}
 			}
 		},

src/ChartInternal/shape/polar.ts

@@ -90,11 +90,8 @@ export default {
 		const translate = $$.getTranslate("polar");
 		const hasInteraction = config.interaction_enabled;
 
-		if (translate) {
-			polar.attr("transform", translate);
-
-			$$.updatePolarLevel();
-		}
+		polar.attr("transform", translate);
+		$$.updatePolarLevel();
 
 		let mainArc = polar.arcs
 			.selectAll(`.${CLASS.arcs}`)
@@ -113,7 +110,6 @@ export default {
 		hasInteraction && $$.bindPolarEvent(mainArc);
 	},
 
-
 	updatePolarLevel(): void {
 		const $$ = this;
 		const {config, state, $el: {polar}} = $$;
@@ -137,7 +133,11 @@ export default {
 			.attr("class", (_d, i) => `${CLASS.level} ${CLASS.level}-${i}`);
 
 		// cx, cy, translate: Set center as origin (0,0) so that it can share same center with arcs
-		levelEnter.append("circle")
+		levelEnter.append("circle");
+
+		levelEnter
+			.merge(level)
+			.selectAll("circle")
 			.style("visibility", config.polar_level_show ? null : "hidden")
 			.attr("cx", 0)
 			.attr("cy", 0)
@@ -146,13 +146,13 @@ export default {
 		if (config.polar_level_text_show) {
 			levelEnter.append("text")
 				.style("text-anchor", "middle")
-				.attr("dy", "0.5rem")
-				.attr("transform", d => `translate(0, ${-levelRatio[d]})`)
 				.text(d => levelTextFormat(state.current.dataMax / levelData.length * (d + 1)));
-		}
 
-		levelEnter
-			.merge(level);
+			levelEnter
+				.merge(level)
+				.selectAll("text")
+				.attr("dy", d => -levelRatio[d] + 5);
+		}
 	},
 
 	bindPolarEvent(polar): void {

test/shape/polar-spec.ts

@@ -71,16 +71,35 @@ describe("SHAPE POLAR", () => {
 			});
 		});
 
+		it("check for size options", () => {
+			const polars = chart.$.main.select(`.${CLASS.chartPolars}`);
+			const level = polars.select(`.${CLASS.levels}`);
+			const arc = polars.select(`.${CLASS.chartPolarArcs}`);
+
+			const old = [polars, level, arc].map(v => util.getBBox(v));
+
+			// when
+			chart.config("polar.size.ratio", 0.7, true);
+
+			[polars, level, arc].forEach((v, i) => {
+				const resized = util.getBBox(v);
+
+				expect(old[i].width).to.be.above(resized.width);
+				expect(old[i].height).to.be.above(resized.height);
+			});
+		});
+
 		it("check for resize", () => {
 			const polars = chart.$.main.select(`.${CLASS.chartPolars}`);
 			const level = polars.select(`.${CLASS.levels}`);
+			const arc = polars.select(`.${CLASS.chartPolarArcs}`);
 
-			const old = [polars, level].map(v => util.getBBox(v));
+			const old = [polars, level, arc].map(v => util.getBBox(v));
 
 			// when
 			chart.resize({width: 200, height: 200});
 
-			[polars, level].forEach((v, i) => {
+			[polars, level, arc].forEach((v, i) => {
 				const resized = util.getBBox(v);
 
 				expect(old[i].width).to.be.above(resized.width);