fix(pie): distortion issues of hovered slices (#1771)

* fix(pie): distortion issues of hovered slices

* fix: hover delay

packages/core/src/components/graphs/pie.ts

@@ -1,4 +1,5 @@
 import { arc, interpolate, pie, select } from 'd3'
+import { delay } from 'lodash-es'
 import { convertValueToPercentage, getProperty } from '@/tools'
 import { pie as pieConfigs } from '@/configuration'
 import { Component } from '@/components/component'
@@ -25,6 +26,7 @@ function arcTween(a: any, arcFunc: any) {
 export class Pie extends Component {
 	type = 'pie'
 	renderType = RenderTypes.SVG
+	isRendering = false
 
 	// We need to store our arcs
 	// So that addEventListeners()
@@ -54,6 +56,8 @@ export class Pie extends Component {
 		const { groupMapsTo } = options.data
 		const { valueMapsTo } = options.pie
 
+		this.isRendering = true
+
 		// remove any slices that are valued at 0 because they dont need to be rendered and will create extra padding
 		const displayData = this.model.getDisplayData().filter((data: any) => data[valueMapsTo] > 0)
 
@@ -128,6 +132,10 @@ export class Pie extends Component {
 			.attrTween('d', function (a: any) {
 				return arcTween.bind(this)(a, self.arc)
 			})
+			.end()
+			.finally(() => {
+				self.isRendering = false
+			})
 
 		// Draw the slice labels
 		const { code: localeCode, number: numberFormatter } = getProperty(options, 'locale')
@@ -383,21 +391,23 @@ export class Pie extends Component {
 
 	addEventListeners() {
 		const self = this
+
 		this.parent
 			.selectAll('path.slice')
 			.on('mouseover', function (event: MouseEvent, datum: any) {
 				const hoveredElement = select(this)
-
-				hoveredElement
-					.classed('hovered', true)
-					.transition('pie_slice_mouseover')
-					.call((t: any) =>
-						self.services.transitions.setupTransition({
-							transition: t,
-							name: 'pie_slice_mouseover'
-						})
-					)
-					.attr('d', self.hoverArc)
+				if (!self.isRendering) {
+					hoveredElement
+						.classed('hovered', true)
+						.transition('pie_slice_mouseover')
+						.call((t: any) =>
+							self.services.transitions.setupTransition({
+								transition: t,
+								name: 'pie_slice_mouseover'
+							})
+						)
+						.attr('d', self.hoverArc)
+				}
 
 				// Dispatch mouse event
 				self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEOVER, {
@@ -445,16 +455,20 @@ export class Pie extends Component {
 			})
 			.on('mouseout', function (event: MouseEvent, datum: any) {
 				const hoveredElement = select(this)
-				hoveredElement
-					.classed('hovered', false)
-					.transition('pie_slice_mouseout')
-					.call((t: any) =>
-						self.services.transitions.setupTransition({
-							transition: t,
-							name: 'pie_slice_mouseout'
-						})
-					)
-					.attr('d', self.arc)
+				delay(() => {
+					if (!self.isRendering) {
+						hoveredElement
+							.classed('hovered', false)
+							.transition('pie_slice_mouseout')
+							.call((t: any) =>
+								self.services.transitions.setupTransition({
+									transition: t,
+									name: 'pie_slice_mouseout'
+								})
+							)
+							.attr('d', self.arc)
+					}
+				}, 100)
 
 				// Dispatch mouse event
 				self.services.events.dispatchEvent(Events.Pie.SLICE_MOUSEOUT, {

packages/core/src/configuration-non-customizable.ts

@@ -241,6 +241,9 @@ export const transitions = {
 	pie_slice_mouseover: {
 		duration: 100
 	},
+	pie_slice_mouseout: {
+		duration: 100
+	},
 	pie_chart_titles: {
 		duration: 375
 	},