fix(legend): Fix resize for arc (#707)

Correct arcs transform when template legend is used Ref #705 Close #707
naver · Dec 17, 2018 · 89a3ece · 89a3ece
1 parent 87294dd
commit 89a3ece
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/spec/internals/legend-spec.js b/spec/internals/legend-spec.js
@@ -378,6 +378,27 @@ describe("LEGEND", () => {
 
 			chart.destroy();
 		});
+
+		it("set options data.type='pie'", () => {
+			args.data.type = "pie";
+		});
+
+		it("check for resizing for pie type", () => {
+			const newSize = {width: 300, height: 300};
+			const transform1 = chart.$.arc.attr("transform").split(",").map(util.parseNum);
+
+			chart.resize(newSize);
+
+			const transform2 = chart.$.arc.attr("transform").split(",").map(util.parseNum);
+
+			expect(transform1).to.not.be.deep.equal(transform2);
+
+			transform1.forEach((v, i) => {
+				expect(v).to.be.above(transform2[i]);
+			});
+
+			chart.destroy();
+		});
 	});
 
 	describe("when using custom points", () => {

diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -1051,8 +1051,7 @@ export default class ChartInternal {
 		$$.config.subchart_show &&
 			$$.transformContext(withTransition, transitions);
 
-		$$.legend &&
-			$$.transformLegend(withTransition);
+		$$.legend && $$.transformLegend(withTransition);
 	}
 
 	updateSvgSize() {

diff --git a/src/internals/legend.js b/src/internals/legend.js
@@ -38,9 +38,9 @@ extend(ChartInternal.prototype, {
 
 	/**
 	 * Update legend element
-	 * @param targetIds
-	 * @param options
-	 * @param transitions
+	 * @param {Array} targetIds ID's of target
+	 * @param {Object} options withTransform : Whether to use the transform property / withTransitionForTransform: Whether transition is used when using the transform property / withTransition : whether or not to transition.
+	 * @param {Object} transitions Return value of the generateTransitions
 	 * @private
 	 */
 	updateLegend(targetIds, options, transitions) {
@@ -52,6 +52,9 @@ extend(ChartInternal.prototype, {
 			withTransition: false
 		};
 
+		optionz.withTransition = getOption(optionz, "withTransition", true);
+		optionz.withTransitionForTransform = getOption(optionz, "withTransitionForTransform", true);
+
 		if (config.legend_contents_bindto && config.legend_contents_template) {
 			$$.updateLegendTemplate();
 		} else {
@@ -64,9 +67,12 @@ extend(ChartInternal.prototype, {
 
 		// Update size and scale
 		$$.updateSizes();
-		$$.updateScales(!optionz.withTransform);
+		$$.updateScales(!optionz.withTransition);
 		$$.updateSvgSize();
 
+		// Update g positions
+		$$.transformAll(optionz.withTransitionForTransform, transitions);
+
 		$$.legendHasRendered = true;
 	},
 
@@ -372,12 +378,11 @@ extend(ChartInternal.prototype, {
 
 	/**
 	 * Update the legend
-	 * @private
 	 * @param {Array} targetIds ID's of target
 	 * @param {Object} options withTransform : Whether to use the transform property / withTransitionForTransform: Whether transition is used when using the transform property / withTransition : whether or not to transition.
-	 * @param {Object} transitions Return value of the generateTransitions
+ 	 * @private
 	 */
-	updateLegendElement(targetIds, options, transitions) {
+	updateLegendElement(targetIds, options) {
 		const $$ = this;
 		const config = $$.config;
 		const paddingTop = 4;
@@ -402,8 +407,7 @@ extend(ChartInternal.prototype, {
 		const targetIdz = targetIds
 			.filter(id => !isDefined(config.data_names[id]) || config.data_names[id] !== null);
 
-		const withTransition = getOption(options, "withTransition", true);
-		const withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
+		const withTransition = options.withTransition;
 
 		const getTextBox = function(textElement, id) {
 			if (!$$.legendItemTextBox[id]) {
@@ -674,8 +678,5 @@ extend(ChartInternal.prototype, {
 		$$.updateLegendItemWidth(maxWidth);
 		$$.updateLegendItemHeight(maxHeight);
 		$$.updateLegendStep(step);
-
-		// Update g positions
-		$$.transformAll(withTransitionForTransform, transitions);
 	}
 });