Reversed curved label

demo/js/components/victory-pie-demo.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-magic-numbers,react/no-multi-comp*/
 import { random, range } from "lodash";
 import React from "react";
-import { VictoryPie } from "victory-pie";
+import { VictoryPie, CurvedLabel } from "victory-pie";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryTheme, LineSegment } from "victory-core";
 
@@ -331,6 +331,43 @@ export default class App extends React.Component {
             labelIndicatorInnerOffset={35}
             labelIndicatorOuterOffset={4}
           />
+          <VictoryPie
+        style={{ ...parentStyle, labels: { fill: "magenta" } }}
+        radius={100}
+        labelPlacement="curved"
+        labels={({ datum }) => `${datum.l}`}
+        labelRadius={85}
+        startOffset={30}
+        data={[
+          { x: 1, y: 1, l: 0 },
+          { x: 2, y: 1, l: 45 },
+          { x: 3, y: 1, l: 90 },
+          { x: 4, y: 1, l: 135 },
+          { x: 5, y: 1, l: 180 },
+          { x: 6, y: 1, l: 225 },
+          { x: 7, y: 1, l: 270 },
+          { x: 8, y: 1, l: 315 },
+        ]}
+      />
+        <VictoryPie
+        style={{ ...parentStyle, labels: { fill: "magenta" } }}
+        radius={100}
+        labelPlacement="curved"
+        labels={({ datum }) => `${datum.l} deg`}
+        labelRadius={115}
+        startOffset={10}
+        curvedLabelComponent = {<CurvedLabel style={{ fill: "red" }}/>}
+        data={[
+          { x: 1, y: 1, l: 0 },
+          { x: 2, y: 1, l: 45 },
+          { x: 3, y: 1, l: 90 },
+          { x: 4, y: 1, l: 135 },
+          { x: 5, y: 1, l: 180 },
+          { x: 6, y: 1, l: 225 },
+          { x: 7, y: 1, l: 270 },
+          { x: 8, y: 1, l: 315 },
+        ]}
+      />
         </div>
       </div>
     );

demo/ts/components/victory-pie-demo.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { random, range } from "lodash";
-import { VictoryPie } from "victory-pie";
+import { VictoryPie, CurvedLabel } from "victory-pie";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryTheme, LineSegment } from "victory-core";
 
@@ -320,6 +320,43 @@ export default class VictoryPieDemo extends React.Component<
             labelIndicatorInnerOffset={45}
             labelIndicatorOuterOffset={15}
           />
+          <VictoryPie
+        style={{  parent: parentStyle, labels: { fill: "magenta" } }}
+        radius={100}
+        labelPlacement="curved"
+        labels={({ datum }) => `${datum.l}`}
+        labelRadius={85}
+        startOffset={30}
+        data={[
+          { x: 1, y: 1, l: 0 },
+          { x: 2, y: 1, l: 45 },
+          { x: 3, y: 1, l: 90 },
+          { x: 4, y: 1, l: 135 },
+          { x: 5, y: 1, l: 180 },
+          { x: 6, y: 1, l: 225 },
+          { x: 7, y: 1, l: 270 },
+          { x: 8, y: 1, l: 315 },
+        ]}
+      />
+        <VictoryPie
+        style={{  parent: parentStyle, labels: { fill: "magenta" } }}
+        radius={100}
+        labelPlacement="curved"
+        labels={({ datum }) => `${datum.l} deg`}
+        curvedLabelComponent={<CurvedLabel style={{ fill: "red" }}/>}
+        labelRadius={115}
+        startOffset={10}
+        data={[
+          { x: 1, y: 1, l: 0 },
+          { x: 2, y: 1, l: 45 },
+          { x: 3, y: 1, l: 90 },
+          { x: 4, y: 1, l: 135 },
+          { x: 5, y: 1, l: 180 },
+          { x: 6, y: 1, l: 225 },
+          { x: 7, y: 1, l: 270 },
+          { x: 8, y: 1, l: 315 },
+        ]}
+      />
         </div>
       </div>
     );

docs/src/content/docs/victory-pie.md

@@ -238,7 +238,10 @@ The `innerRadius` prop determines the number of pixels between the center of the
 
 `type: element`
 
-`VictoryPie` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)
+`VictoryPie` uses the standard `labelComponent` prop for standard labels. [Read about it here](/docs/common-props#labelcomponent)
+
+For curved labels use `curvedLabelComponent` prop with `labelPlacement="curved"`.
+[Read about it here](/docs/victory-pie#curvedLabelComponent)
 
 _default:_ `<VictoryLabel/>`
 
@@ -252,9 +255,11 @@ _default:_ `<VictoryLabel/>`
 
 ## labelPlacement
 
-`type "parallel" || "perpendicular" || "vertical" || function`
+`type "parallel" || "perpendicular" || "vertical" || "curved" || function`
+
+The `labelPlacement` prop specifies the angular placement of each label relative to the angle of its corresponding slice. This prop should be given as "parallel", "perpendicular", "vertical", "curved" or as a function that returns one of these values. When this prop is not given, the label will be placed vertically.
 
-The `labelPlacement` prop specifies the angular placement of each label relative to the angle of its corresponding slice. This prop should be given as "parallel", "perpendicular", "vertical", or as a function that returns one of these values. When this prop is not given, the label will be placed vertically.
+we need to use `curvedLabelComponent` prop.[Read about it here](/docs/victory-pie#curvedLabelComponent) to style and update accessibility related props when using `labelPlacement = "curved"`. We cannot use `VictoryLabel` for curved labels. 
 
 ```playground
 <VictoryPie
@@ -271,6 +276,16 @@ The `labelPlacement` prop specifies the angular placement of each label relative
 />
 ```
 
+```playground
+<VictoryPie
+  data={sampleData}
+  labels={({ datum }) => `y: ${datum.y}`}
+  labelPlacement={"curved"}
+  startOffset={30}
+  radius={120}
+  labelRadius={100}
+/>
+```
 ## labelPosition
 
 `type "startAngle" || "endAngle" || "centroid" || function`
@@ -571,6 +586,65 @@ The `labelIndicatorOuterOffset` prop defines the offset by which the indicator l
 />
 ```
 
+## curvedLabelComponent
+
+`type: element`
+
+The `curvedLabelComponent` prop is used to pass `<CurvedLabel/>` component to modify styles and accessibility parameters for curved labels.
+Currently it supports following props of `VictoryLabel`. 
+`active`,`capHeight`,`className`,`data`,`datum`,`desc`,`events`,`lineHeight`,`renderInPortal`,`style`,`tabIndex`,`text`,`textComponent`
+[Read about it here](/docs/docs/victory-label)
+
+```playground
+<VictoryPie
+  data={sampleData}
+  labels={({ datum }) => `${datum.l} deg`}
+  labelPlacement={"curved"}
+  startOffset={30}
+  radius={120}
+  labelRadius={100}
+  curvedLabelComponent={<CurvedLabel style={{ fill: "red" }}/>}
+  data={[
+          { x: 1, y: 1, l: 0 },
+          { x: 2, y: 1, l: 45 },
+          { x: 3, y: 1, l: 90 },
+          { x: 4, y: 1, l: 135 },
+          { x: 5, y: 1, l: 180 },
+          { x: 6, y: 1, l: 225 },
+          { x: 7, y: 1, l: 270 },
+          { x: 8, y: 1, l: 315 },
+        ]}
+/>
+```
+
+## startOffset
+
+`type: number`
+
+The `startOffset` prop is used along with `labelPlacement="curved"` type.
+The startOffset attribute defines an offset from the start of the path current text position along the path.This will help us to center the curved labels 
+
+```playground
+<VictoryPie
+  data={sampleData}
+  labels={({ datum }) => `${datum.l} deg`}
+  labelPlacement={"curved"}
+  startOffset={30}
+  radius={120}
+  labelRadius={100}
+  data={[
+          { x: 1, y: 1, l: 0 },
+          { x: 2, y: 1, l: 45 },
+          { x: 3, y: 1, l: 90 },
+          { x: 4, y: 1, l: 135 },
+          { x: 5, y: 1, l: 180 },
+          { x: 6, y: 1, l: 225 },
+          { x: 7, y: 1, l: 270 },
+          { x: 8, y: 1, l: 315 },
+        ]}
+/>
+```
+
 [animations guide]: /guides/animations
 [data accessors guide]: /guides/data-accessors
 [custom components guide]: /guides/custom-components

docs/src/content/docs/victory-primitives.md

@@ -83,6 +83,20 @@ Used by `VictoryLabel`
 const TSpan = (props) => <tspan {...props} />;
 ```
 
+### TextPath
+
+Used by `curvedLabelComponent` in VictoryPie.
+
+```jsx
+  const TextPath = (props) => {
+  const { children, href, startOffset, ...rest } = props;
+  return (
+    <textPath href={href} startOffset={startOffset}>
+      {children}
+    </text>
+  );
+```
+
 ## Simple Components
 
 ### Arc

packages/victory-core/src/exports.test.ts

@@ -87,6 +87,7 @@ import {
   TSpan,
   Text,
   TextAnchorType,
+  TextPath,
   TextProps,
   TextSize,
   TextSizeStyleInterface,
@@ -177,6 +178,7 @@ describe("victory-core", () => {
         "Style",
         "TSpan",
         "Text",
+        "TextPath",
         "TextSize",
         "Timer",
         "TimerContext",

packages/victory-core/src/victory-primitives/index.ts

@@ -9,6 +9,7 @@ export * from "./path";
 export * from "./point";
 export * from "./rect";
 export * from "./text";
+export * from "./text-path";
 export * from "./tspan";
 export * from "./types";
 export * from "./whisker";

packages/victory-core/src/victory-primitives/text-path.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { evaluateProp } from "../victory-util/helpers";
+import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
+
+export interface TextPathProps extends VictoryCommonPrimitiveProps {
+  children?: React.ReactNode;
+  href?: string;
+  startOffset?: number;
+}
+
+export const TextPath = (props: TextPathProps) => {
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars --
+   * origin conflicts with the SVG element's origin attribute
+   */
+  const { href, startOffset, children, id, tabIndex, origin, ...rest } = props;
+
+  const svgProps: React.SVGProps<SVGTextPathElement> = {
+    href: evaluateProp(href, props),
+    startOffset: evaluateProp(startOffset, props),
+    ...rest,
+  };
+
+  return <textPath {...svgProps}>{children}</textPath>;
+};