diff --git a/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts b/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts index b652e2074..267d5f02f 100644 --- a/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts +++ b/packages/arcs/src/arc_link_labels/useArcLinkLabelsTransition.ts @@ -78,7 +78,7 @@ const useTransitionPhases = ({ 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 index bb1d1a16e..a6189c455 100644 --- a/packages/pie/src/Pie.tsx +++ b/packages/pie/src/Pie.tsx @@ -122,32 +122,12 @@ const InnerPie = ({ const boundDefs = bindDefs(defs, dataWithArc, fill) const layerById: Record = { - arcLinkLabels: null, arcs: null, + arcLinkLabels: null, arcLabels: null, legends: null, } - if (enableArcLinkLabels && layers.includes('arcLinkLabels')) { - layerById.arcLinkLabels = ( - > - 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 = ( @@ -169,6 +149,26 @@ const InnerPie = ({ ) } + if (enableArcLinkLabels && layers.includes('arcLinkLabels')) { + layerById.arcLinkLabels = ( + > + 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 = ( > diff --git a/packages/pie/src/props.ts b/packages/pie/src/props.ts index b0e6edd95..7fa42bd87 100644 --- 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,