fix(arcLinkLabels): fix arcLinkLabelsOffset for pie chart (#2369)

* Render arcLinkLabels layer after arcs Adjusting the `arcLinkLabelsOffset` prop does not currently appear to do anything because the arcs are rendered on top of the label links. Moving arcs to the first layer fixes this issue. * Include offset in useMemo dependency array * Reorganize layers
plouc · Jun 26, 2023 · 2250a31 · 2250a31 · vercel · Jun 26, 2023
1 parent 78d6d2a
commit 2250a31
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 23 deletions.
diff --git a/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts b/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts
@@ -78,7 +78,7 @@ const useTransitionPhases = <Datum extends DatumWithArcAndColor>({
                 opacity: 0,
             }),
         }),
-        [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor]
+        [diagonalLength, straightLength, textOffset, getLinkColor, getTextColor, offset]
     )
 
 const interpolateLink = (

diff --git a/packages/pie/src/Pie.tsx b/packages/pie/src/Pie.tsx
@@ -122,32 +122,12 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
     const boundDefs = bindDefs(defs, dataWithArc, fill)
 
     const layerById: Record<PieLayerId, ReactNode> = {
-        arcLinkLabels: null,
         arcs: null,
+        arcLinkLabels: null,
         arcLabels: null,
         legends: null,
     }
 
-    if (enableArcLinkLabels && layers.includes('arcLinkLabels')) {
-        layerById.arcLinkLabels = (
-            <ArcLinkLabelsLayer<ComputedDatum<RawDatum>>
-                key="arcLinkLabels"
-                center={[centerX, centerY]}
-                data={dataWithArc}
-                label={arcLinkLabel}
-                skipAngle={arcLinkLabelsSkipAngle}
-                offset={arcLinkLabelsOffset}
-                diagonalLength={arcLinkLabelsDiagonalLength}
-                straightLength={arcLinkLabelsStraightLength}
-                strokeWidth={arcLinkLabelsThickness}
-                textOffset={arcLinkLabelsTextOffset}
-                textColor={arcLinkLabelsTextColor}
-                linkColor={arcLinkLabelsColor}
-                component={arcLinkLabelComponent}
-            />
-        )
-    }
-
     if (layers.includes('arcs')) {
         layerById.arcs = (
             <Arcs<RawDatum>
@@ -169,6 +149,26 @@ const InnerPie = <RawDatum extends MayHaveLabel>({
         )
     }
 
+    if (enableArcLinkLabels && layers.includes('arcLinkLabels')) {
+        layerById.arcLinkLabels = (
+            <ArcLinkLabelsLayer<ComputedDatum<RawDatum>>
+                key="arcLinkLabels"
+                center={[centerX, centerY]}
+                data={dataWithArc}
+                label={arcLinkLabel}
+                skipAngle={arcLinkLabelsSkipAngle}
+                offset={arcLinkLabelsOffset}
+                diagonalLength={arcLinkLabelsDiagonalLength}
+                straightLength={arcLinkLabelsStraightLength}
+                strokeWidth={arcLinkLabelsThickness}
+                textOffset={arcLinkLabelsTextOffset}
+                textColor={arcLinkLabelsTextColor}
+                linkColor={arcLinkLabelsColor}
+                component={arcLinkLabelComponent}
+            />
+        )
+    }
+
     if (enableArcLabels && layers.includes('arcLabels')) {
         layerById.arcLabels = (
             <ArcLabelsLayer<ComputedDatum<RawDatum>>

diff --git a/packages/pie/src/props.ts b/packages/pie/src/props.ts
@@ -10,7 +10,7 @@ export const defaultProps = {
     padAngle: 0,
     cornerRadius: 0,
 
-    layers: ['arcLinkLabels', 'arcs', 'arcLabels', 'legends'],
+    layers: ['arcs', 'arcLinkLabels', 'arcLabels', 'legends'],
 
     // layout
     startAngle: 0,