feat(pie): memoize radial labels computation

plouc · Nov 4, 2020 · dbab51b · dbab51b
1 parent 2a8cded
commit dbab51b
Showing 1 changed file with 53 additions and 38 deletions.
diff --git a/packages/pie/src/hooks.js b/packages/pie/src/hooks.js
@@ -288,46 +288,61 @@ export const usePieRadialLabels = ({
     const getTextColor = useInheritedColor(textColor, theme)
     const getLinkColor = useInheritedColor(linkColor, theme)
 
-    return dataWithArc
-        .filter(datum => skipAngle === 0 || datum.arc.angleDeg > skipAngle)
-        .map(datum => {
-            const angle = absoluteAngleRadians(midAngle(datum.arc) - Math.PI / 2)
-            const positionA = positionFromAngle(angle, radius + linkOffset)
-            const positionB = positionFromAngle(angle, radius + linkOffset + linkDiagonalLength)
-
-            let positionC
-            let labelPosition
-            let textAlign
-
-            if (
-                absoluteAngleDegrees(radiansToDegrees(angle)) < 90 ||
-                absoluteAngleDegrees(radiansToDegrees(angle)) >= 270
-            ) {
-                positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y }
-                labelPosition = {
-                    x: positionB.x + linkHorizontalLength + textXOffset,
-                    y: positionB.y,
-                }
-                textAlign = 'left'
-            } else {
-                positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y }
-                labelPosition = {
-                    x: positionB.x - linkHorizontalLength - textXOffset,
-                    y: positionB.y,
+    return useMemo(() => {
+        if (!enable) return []
+
+        return dataWithArc
+            .filter(datum => skipAngle === 0 || datum.arc.angleDeg > skipAngle)
+            .map(datum => {
+                const angle = absoluteAngleRadians(midAngle(datum.arc) - Math.PI / 2)
+                const positionA = positionFromAngle(angle, radius + linkOffset)
+                const positionB = positionFromAngle(angle, radius + linkOffset + linkDiagonalLength)
+
+                let positionC
+                let labelPosition
+                let textAlign
+
+                if (
+                    absoluteAngleDegrees(radiansToDegrees(angle)) < 90 ||
+                    absoluteAngleDegrees(radiansToDegrees(angle)) >= 270
+                ) {
+                    positionC = { x: positionB.x + linkHorizontalLength, y: positionB.y }
+                    labelPosition = {
+                        x: positionB.x + linkHorizontalLength + textXOffset,
+                        y: positionB.y,
+                    }
+                    textAlign = 'left'
+                } else {
+                    positionC = { x: positionB.x - linkHorizontalLength, y: positionB.y }
+                    labelPosition = {
+                        x: positionB.x - linkHorizontalLength - textXOffset,
+                        y: positionB.y,
+                    }
+                    textAlign = 'right'
                 }
-                textAlign = 'right'
-            }
 
-            return {
-                text: getLabel(datum),
-                textColor: getTextColor(datum),
-                position: labelPosition,
-                align: textAlign,
-                line: [positionA, positionB, positionC],
-                linkColor: getLinkColor(datum),
-                datum,
-            }
-        })
+                return {
+                    text: getLabel(datum),
+                    textColor: getTextColor(datum),
+                    position: labelPosition,
+                    align: textAlign,
+                    line: [positionA, positionB, positionC],
+                    linkColor: getLinkColor(datum),
+                    datum,
+                }
+            })
+    }, [
+        dataWithArc,
+        skipAngle,
+        radius,
+        linkOffset,
+        linkDiagonalLength,
+        linkHorizontalLength,
+        textXOffset,
+        getLabel,
+        getTextColor,
+        getLinkColor,
+    ])
 }
 
 /**