2820 Polyline segment label indicator

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

@@ -2,7 +2,7 @@ import React from "react";
 import { random, range } from "lodash";
 import { VictoryPie } from "victory-pie";
 import { VictoryTooltip } from "victory-tooltip";
-import { VictoryTheme, LineSegment } from "victory-core";
+import { VictoryTheme, LineSegment,PolyLineSegment } from "victory-core";
 
 interface VictoryPieDemoState {
   data: {
@@ -364,6 +364,50 @@ export default class VictoryPieDemo extends React.Component<
             labelIndicatorInnerOffset={45}
             labelIndicatorOuterOffset={15}
           />
+          <VictoryPie
+         style={{ parent: parentStyle }}
+        labelIndicator
+        radius={55}
+        innerRadius={20}
+        labelIndicatorType="polyLine"
+        labelIndicatorInnerOffset={5}
+        labelIndicatorOuterOffset={40}
+        labelIndicatorMiddleOffset={20}
+        labels={({ datum }) => `${datum.name}`}
+        data={[
+          { name: "Mark", y: 40 },
+          { name: "Robert", y: 12 },
+          { name: "Emily", y: 34 },
+          { name: "Marion", y: 23 },
+          { name: "Nicolas", y: 28 },
+          { name: "Karen", y: 18 },
+        ]}
+      />
+      <VictoryPie
+         style={{ parent: parentStyle }}
+        innerRadius={50}
+        labelIndicatorInnerOffset={5}
+        labelIndicatorOuterOffset={40}
+        labelIndicatorMiddleOffset={20}
+        radius={75}
+        labelIndicatorType={"polyLine"}
+        labelIndicator={
+          <PolyLineSegment
+            style={{
+              stroke: "red",
+              strokeWidth: 1,
+              strokeDasharray: 1,
+              fill: "none",
+            }}
+          />
+        }
+      />
+      <VictoryPie 
+   style={{ parent: parentStyle }}
+  labelIndicator 
+  labelIndicatorType ="polyLine"
+  labelIndicatorOuterOffset= {15}
+/>
         </div>
       </div>
     );

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

@@ -250,6 +250,32 @@ _default:_ `<VictoryLabel/>`
 />
 ```
 
+## labelIndicatorType
+
+`type: singleLine | polyLine`
+
+`singleLine` is used to draw single line label indicator and `polyLine` is set to draw
+polyline label indicator.
+
+_default:_ `singleLine`
+
+```playground
+<div>
+<VictoryPie 
+  data={sampleData}
+  labels={({ datum }) => datum.y} 
+  labelIndicator 
+/>
+<VictoryPie 
+  data={sampleData}
+  labels={({ datum }) => datum.y} 
+  labelIndicator 
+  labelIndicatorType ="polyLine"
+  labelIndicatorOuterOffset= {15}
+/>
+</div>
+```
+
 ## labelPlacement
 
 `type "parallel" || "perpendicular" || "vertical" || function`
@@ -523,7 +549,7 @@ y={(d) => d.value + d.error}
 
 `type: boolean || element`
 
-The `labelIndicator` prop defines the label indicator line between labels and the pie chart. If this prop is used as a boolean,then the default indicator will be displayed. To customize or pass your own styling `<LineSegment/>` can be passed to labelIndicator. LabelIndicator is functional only when labelPosition = "centroid". To adjust the labelIndicator length, `labelIndicatorInnerOffset` and `labelIndicatorOuterOffset` props can be used alongside labelIndicator. 
+The `labelIndicator` prop defines the label indicator line between labels and the pie chart. If this prop is used as a boolean,then the default indicator will be displayed. To customize or pass your own styling `<LineSegment/>` can be passed to labelIndicator. LabelIndicator is functional only when labelPosition = "centroid". To adjust the labelIndicator length, `labelIndicatorInnerOffset`,`labelIndicatorMiddleOffset` and `labelIndicatorOuterOffset` props can be used alongside labelIndicator. 
 
 ```playground
 <div>
@@ -541,6 +567,22 @@ The `labelIndicator` prop defines the label indicator line between labels and th
       labelIndicatorInnerOffset={10}
       labelIndicatorOuterOffset={5}
     />
+    <VictoryPie
+      data={sampleData}
+      labelIndicator
+      labelIndicatorType="polyLine"
+      labelIndicatorInnerOffset={10}
+      labelIndicatorMiddleOffset={10}
+      labelIndicatorOuterOffset={25}
+    />
+    <VictoryPie
+      data={sampleData}
+      labelIndicator={<PolyLineSegment style = {{stroke:"red", strokeDasharray:1,fill: "none",}}/>}
+      labelIndicatorType="polyLine"
+      labelIndicatorInnerOffset={10}
+      labelIndicatorMiddleOffset={10}
+      labelIndicatorOuterOffset={25}
+    />
 </div>
 ```
 ## labelIndicatorInnerOffset
@@ -557,18 +599,49 @@ The `labelIndicatorInnerOffset` prop defines the offset by which the indicator l
 />
 ```
 
+## labelIndicatorMiddleOffset
+
+`type: number`
+
+The `labelIndicatorMiddleOffset` prop defines the offset by which the polyLine indicator length outside pie chart is being drawn. Higher the number longer the length.
+
+```playground
+      <VictoryPie
+        data={sampleData}
+        labelIndicator
+        radius={55}
+        innerRadius={20}
+        labelIndicatorType="polyLine"
+        labelIndicatorInnerOffset={5}
+        labelIndicatorOuterOffset={40}
+        labelIndicatorMiddleOffset={20}
+      />
+```
+
 ## labelIndicatorOuterOffset
 
 `type: number`
 
-The `labelIndicatorOuterOffset` prop defines the offset by which the indicator length outside the pie chart is being drawn. Higher the number shorter the length.
+For labelIndicatorType `singleLine`, `labelIndicatorOuterOffset` prop defines the offset by which the indicator length outside the pie chart is being drawn. Higher the number shorter the length.
+
+For labelIndicatorType `polyLine`, `labelIndicatorOuterOffset` prop defines the offset by which the indicator length outside the pie chart is being drawn from the mid point to the label. Higher the number higher the length.
 
 ```playground
-<VictoryPie
-  data={sampleData}
-  labelIndicator
-  labelIndicatorOuterOffset={5}
-/>
+<div>
+    <VictoryPie
+      data={sampleData}
+      labelIndicator
+      labelIndicatorOuterOffset={5}
+    />
+    <VictoryPie
+      data={sampleData}
+      labelIndicator
+      radius={55}
+      innerRadius={20}
+      labelIndicatorType="polyLine"
+      labelIndicatorOuterOffset={40}
+    />
+</div>
 ```
 
 [animations guide]: /guides/animations

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

@@ -50,6 +50,12 @@ Used by `Arc`, `Area`, `Bar`, `Curve`, `Flyout`, `Point`, `Slice`, and `Voronoi`
 const Path = (props) => <path {...props} />;
 ```
 
+### PolyLine
+
+```jsx
+const PolyLine = (props) => <polyline vectorEffect="non-scaling-stroke" {...props} />;
+```
+
 ### Rect
 
 Used by `VictoryClipPath`, `Background`, `Border`, and `Candle`
@@ -161,6 +167,28 @@ The `LineSegment` component renders straight lines. This component is used to re
 - `y1` _number_ the y coordinate of the beginning of the line
 - `y2` _number_ the y coordinate of the end of the line
 
+### PolyLineSegment
+
+The `PolyLineSegment` component renders straight lines connecting several points. This component is used to render polyline label indicator[VictoryPie][]. [View the source]
+
+**Props**
+
+- `active` _boolean_ a flag signifying whether the component is active
+- `ariaLabel` _string or function_ a prop controlling the aria-label that will be applied to the rendered polyLineComponent. When this prop is given as a function it will be called with the rest of the props supplied to `PolyLineSegment`
+- `className` _string_ the class name that will be applied to the rendered element
+- `data` _array_ the entire dataset
+- `datum` _object_ the data point corresponding to this line
+- `events` _object_ events to attach to the rendered element
+- `id` _string or number_ an id to apply to the rendered component
+- `index` _number_ the index of this component within the dataset
+- `polyLineComponent` _element_ the rendered polyLine element _default_ `<PolyLine/>`
+- `role` _string_ the aria role to assign to the element
+- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements
+- `style` _object_ the styles to apply to the rendered element
+- `tabIndex` _number or function_ will be applied to the rendered polyLineComponent. When this prop is given as a function it will be called with the rest of the props supplied to `PolyLineSegment`
+- `transform` _string_ a transform that will be supplied to elements this component renders
+- `points` _number_ this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline.
+
 ### Background
 
 The `Background` component is used to render an SVG background on VictoryChart. `Background` will render a `<Circle>` for charts with `polar={true}` and a `<Rect>` element for all other charts. [View the source][background]

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

@@ -63,6 +63,9 @@ import {
   Point,
   PointPathHelpers,
   PointProps,
+  PolyLine,
+  PolyLineSegment,
+  PolyLineSegmentProps,
   Portal,
   PortalContext,
   PortalContextValue,
@@ -169,6 +172,8 @@ describe("victory-core", () => {
         "Path",
         "Point",
         "PointPathHelpers",
+        "PolyLine",
+        "PolyLineSegment",
         "Portal",
         "PortalContext",
         "Rect",

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

@@ -7,6 +7,8 @@ export * from "./line";
 export * from "./line-segment";
 export * from "./path";
 export * from "./point";
+export * from "./polyline";
+export * from "./polyline-segment";
 export * from "./rect";
 export * from "./text";
 export * from "./tspan";

packages/victory-core/src/victory-primitives/polyline-segment.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import * as Helpers from "../victory-util/helpers";
+import { assign } from "lodash";
+import { VictoryCommonPrimitiveProps } from "../victory-util/common-props";
+import { PolyLine } from "./polyline";
+
+export interface PolyLineSegmentProps extends VictoryCommonPrimitiveProps {
+  polylineComponent?: React.ReactElement;
+  points?: string;
+}
+
+const evaluateProps = (props) => {
+  /**
+   * Potential evaluated props are:
+   * `ariaLabel`
+   * `id`
+   * `style`
+   * `tabIndex`
+   */
+  const ariaLabel = Helpers.evaluateProp(props.ariaLabel, props);
+  const id = Helpers.evaluateProp(props.id, props);
+  const style = Helpers.evaluateStyle(
+    assign({ stroke: "black", fill: "none" }, props.style),
+    props,
+  );
+  const tabIndex = Helpers.evaluateProp(props.tabIndex, props);
+
+  return assign({}, props, { ariaLabel, id, style, tabIndex });
+};
+
+const defaultProps = {
+  polylineComponent: <PolyLine />,
+  role: "presentation",
+  shapeRendering: "auto",
+};
+
+export const PolyLineSegment = (initialProps: PolyLineSegmentProps) => {
+  const props = evaluateProps({ ...defaultProps, ...initialProps });
+
+  return React.cloneElement(props.polylineComponent!, {
+    ...props.events,
+    "aria-label": props.ariaLabel,
+    style: props.style,
+    tabIndex: props.tabIndex,
+    className: props.className,
+    role: props.role,
+    shapeRendering: props.shapeRendering,
+    points: props.points,
+    transform: props.transform,
+    clipPath: props.clipPath,
+  });
+};

packages/victory-core/src/victory-primitives/polyline.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { VictoryPrimitiveShapeProps } from "./types";
+
+export const PolyLine = (props: VictoryPrimitiveShapeProps) => {
+  return (
+    // @ts-expect-error FIXME: "id cannot be a number"
+    <polyline vectorEffect="non-scaling-stroke" {...props} />
+  );
+};