feat(pie): fix angle padding

plouc · Dec 18, 2020 · 3baba4c · 3baba4c
1 parent cfc0cb6
commit 3baba4c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/arcs/src/useArcGenerator.ts b/packages/arcs/src/useArcGenerator.ts
@@ -2,12 +2,19 @@ import { useMemo } from 'react'
 import { arc as d3Arc } from 'd3-shape'
 import { ArcGenerator, Arc } from './types'
 
-export const useArcGenerator = ({ cornerRadius = 0 }: { cornerRadius: number }): ArcGenerator =>
+export const useArcGenerator = ({
+    cornerRadius = 0,
+    padAngle = 0,
+}: {
+    cornerRadius?: number
+    padAngle?: number
+}): ArcGenerator =>
     useMemo(
         () =>
             d3Arc<Arc>()
                 .innerRadius(arc => arc.innerRadius)
                 .outerRadius(arc => arc.outerRadius)
-                .cornerRadius(cornerRadius),
-        [cornerRadius]
+                .cornerRadius(cornerRadius)
+                .padAngle(padAngle),
+        [cornerRadius, padAngle]
     )
diff --git a/packages/pie/src/hooks.ts b/packages/pie/src/hooks.ts
@@ -228,7 +228,7 @@ export const usePie = <RawDatum>({
         activeOuterRadiusOffset,
     })
 
-    const arcGenerator = useArcGenerator({ cornerRadius })
+    const arcGenerator = useArcGenerator({ cornerRadius, padAngle: degreesToRadians(padAngle) })
 
     return { dataWithArc, arcGenerator, setActiveId }
 }
@@ -334,6 +334,7 @@ export const usePieFromBox = <RawDatum>({
 
     const arcGenerator = useArcGenerator({
         cornerRadius,
+        padAngle: degreesToRadians(padAngle),
     })
 
     return {