victory-pie 36.8.2 → 36.8.3

package/src/victory-pie.tsx

@@ -0,0 +1,269 @@
+import React from "react";
+import {
+  addEvents,
+  Helpers,
+  Data,
+  LineSegment,
+  VictoryContainer,
+  VictoryLabel,
+  VictoryTheme,
+  UserProps,
+  ColorScalePropType,
+  EventPropTypeInterface,
+  NumberOrCallback,
+  OriginType,
+  SliceNumberOrCallback,
+  StringOrNumberOrCallback,
+  VictoryCommonProps,
+  VictoryLabelableProps,
+  VictoryMultiLabelableProps,
+  VictoryStyleInterface,
+  EventsMixinClass,
+  VictoryDatableProps,
+} from "victory-core";
+import { isNil } from "lodash";
+import { getBaseProps } from "./helper-methods";
+import {
+  Slice,
+  SliceProps,
+  VictorySliceTTargetType,
+  VictorySliceLabelPlacementType,
+  VictorySliceLabelPositionType,
+} from "./slice";
+
+export interface VictoryPieProps
+  extends Omit<VictoryCommonProps, "polar">,
+    VictoryDatableProps,
+    VictoryLabelableProps,
+    VictoryMultiLabelableProps {
+  colorScale?: ColorScalePropType;
+  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
+  endAngle?: number;
+  events?: EventPropTypeInterface<
+    VictorySliceTTargetType,
+    StringOrNumberOrCallback | string[] | number[]
+  >[];
+  eventKey?: StringOrNumberOrCallback;
+  innerRadius?: NumberOrCallback;
+  labelIndicator?: boolean | React.ReactElement;
+  labelIndicatorInnerOffset?: number;
+  labelIndicatorOuterOffset?: number;
+  labelPlacement?:
+    | VictorySliceLabelPlacementType
+    | ((props: SliceProps) => VictorySliceLabelPlacementType);
+  labelPosition?:
+    | VictorySliceLabelPositionType
+    | ((props: SliceProps) => VictorySliceLabelPositionType);
+
+  labelIndicatorComponent?: React.ReactElement;
+  labelRadius?: number | ((props: SliceProps) => number);
+  origin?: OriginType;
+  padAngle?: NumberOrCallback;
+  radius?: NumberOrCallback;
+  startAngle?: number;
+  style?: VictoryStyleInterface;
+}
+
+const fallbackProps = {
+  endAngle: 360,
+  height: 400,
+  innerRadius: 0,
+  cornerRadius: 0,
+  padAngle: 0,
+  padding: 30,
+  width: 400,
+  startAngle: 0,
+  colorScale: [
+    "#ffffff",
+    "#f0f0f0",
+    "#d9d9d9",
+    "#bdbdbd",
+    "#969696",
+    "#737373",
+    "#525252",
+    "#252525",
+    "#000000",
+  ],
+  labelPosition: "centroid",
+  labelIndicatorInnerOffset: 15,
+  labelIndicatorOuterOffset: 5,
+};
+
+const datumHasXandY = (datum) => {
+  return !isNil(datum._x) && !isNil(datum._y);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface VictoryPieBase extends EventsMixinClass<VictoryPieProps> {}
+
+class VictoryPieBase extends React.Component<VictoryPieProps> {
+  static animationWhitelist: (keyof VictoryPieProps)[] = [
+    "data",
+    "endAngle",
+    "height",
+    "innerRadius",
+    "cornerRadius",
+    "padAngle",
+    "padding",
+    "colorScale",
+    "startAngle",
+    "style",
+    "width",
+  ];
+
+  static displayName = "VictoryPie";
+
+  static role = "pie";
+
+  static defaultTransitions = {
+    onExit: {
+      duration: 500,
+      before: () => ({ _y: 0, label: " " }),
+    },
+    onEnter: {
+      duration: 500,
+      before: () => ({ _y: 0, label: " " }),
+      after: (datum) => ({
+        y_: datum._y,
+        label: datum.label,
+      }),
+    },
+  };
+
+  static defaultProps: VictoryPieProps = {
+    data: [
+      { x: "A", y: 1 },
+      { x: "B", y: 2 },
+      { x: "C", y: 3 },
+      { x: "D", y: 1 },
+      { x: "E", y: 2 },
+    ],
+    standalone: true,
+    dataComponent: <Slice />,
+    labelComponent: <VictoryLabel />,
+    containerComponent: <VictoryContainer />,
+    groupComponent: <g />,
+    sortOrder: "ascending",
+    theme: VictoryTheme.grayscale,
+  };
+
+  static getBaseProps = (props: VictoryPieProps) =>
+    getBaseProps(props, fallbackProps);
+  static getData = Data.getData;
+  static expectedComponents: (keyof VictoryPieProps)[] = [
+    "dataComponent",
+    "labelComponent",
+    "groupComponent",
+    "containerComponent",
+    "labelIndicatorComponent",
+  ];
+
+  // Overridden in victory-native
+  shouldAnimate() {
+    return Boolean(this.props.animate);
+  }
+
+  renderComponents(props: VictoryPieProps, shouldRenderDatum = datumHasXandY) {
+    const {
+      dataComponent,
+      labelComponent,
+      groupComponent,
+      labelIndicator,
+      labelPosition,
+    } = props;
+
+    if (!groupComponent) {
+      throw new Error("VictoryPie expects a groupComponent prop");
+    }
+
+    const showIndicator = labelIndicator && labelPosition === "centroid";
+
+    const children: React.ReactElement[] = [];
+
+    if (dataComponent) {
+      const dataComponents = this.dataKeys.reduce<React.ReactElement[]>(
+        (validDataComponents, _dataKey, index) => {
+          const dataProps = this.getComponentProps(
+            dataComponent,
+            "data",
+            index,
+          );
+          if (shouldRenderDatum((dataProps as any).datum)) {
+            validDataComponents.push(
+              React.cloneElement(dataComponent, dataProps),
+            );
+          }
+          return validDataComponents;
+        },
+        [],
+      );
+
+      children.push(...dataComponents);
+    }
+
+    if (labelComponent) {
+      const labelComponents = this.dataKeys
+        .map((_dataKey, index) => {
+          const labelProps = this.getComponentProps(
+            labelComponent,
+            "labels",
+            index,
+          );
+          if (
+            (labelProps as any).text !== undefined &&
+            (labelProps as any).text !== null
+          ) {
+            return React.cloneElement(labelComponent, labelProps);
+          }
+          return undefined;
+        })
+        .filter(
+          (comp: React.ReactElement | undefined): comp is React.ReactElement =>
+            comp !== undefined,
+        );
+
+      children.push(...labelComponents);
+    }
+
+    if (showIndicator && labelIndicator) {
+      let labelIndicatorComponent: React.ReactElement = <LineSegment />;
+
+      if (typeof labelIndicator === "object") {
+        // pass user provided react component
+        labelIndicatorComponent = labelIndicator;
+      }
+
+      const labelIndicatorComponents = this.dataKeys.map((_dataKey, index) => {
+        const labelIndicatorProps = this.getComponentProps(
+          labelIndicatorComponent,
+          "labelIndicators",
+          index,
+        );
+        return React.cloneElement(labelIndicatorComponent, labelIndicatorProps);
+      });
+
+      children.push(...labelIndicatorComponents);
+    }
+
+    return this.renderContainer(groupComponent, children);
+  }
+
+  render(): React.ReactElement {
+    const { animationWhitelist, role } = VictoryPie;
+    const props = Helpers.modifyProps(this.props, fallbackProps, role);
+
+    if (this.shouldAnimate()) {
+      return this.animateComponent(props, animationWhitelist);
+    }
+
+    const children = this.renderComponents(props);
+
+    const component = props.standalone
+      ? this.renderContainer(props.containerComponent, children)
+      : children;
+
+    return UserProps.withSafeUserProps(component, props);
+  }
+}
+
+export const VictoryPie = addEvents(VictoryPieBase);

package/src/index.d.ts

@@ -1,83 +0,0 @@
-import * as React from "react";
-import {
-  CategoryPropType,
-  ColorScalePropType,
-  DataGetterPropType,
-  EventPropTypeInterface,
-  StringOrCallback,
-  NumberOrCallback,
-  OriginType,
-  SliceNumberOrCallback,
-  StringOrNumberOrCallback,
-  VictoryCommonProps,
-  VictoryLabelableProps,
-  VictoryMultiLabelableProps,
-  VictoryStyleInterface,
-} from "victory-core";
-
-export type VictorySliceLabelPositionType =
-  | "startAngle"
-  | "centroid"
-  | "endAngle";
-export type VictorySliceLabelPlacementType =
-  | "vertical"
-  | "parallel"
-  | "perpendicular";
-export type VictorySliceTTargetType = "data" | "labels" | "parent";
-
-export interface SliceProps extends VictoryCommonProps {
-  ariaLabel?: StringOrCallback;
-  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
-  datum?: any;
-  innerRadius?: NumberOrCallback;
-  padAngle?: SliceNumberOrCallback<SliceProps, "padAngle">;
-  pathComponent?: React.ReactElement;
-  pathFunction?: (props: SliceProps) => string;
-  radius?: SliceNumberOrCallback<SliceProps, "radius">;
-  slice?: {
-    startAngle?: number;
-    endAngle?: number;
-    padAngle?: number;
-    data?: any[];
-  };
-  sliceEndAngle?: SliceNumberOrCallback<SliceProps, "sliceEndAngle">;
-  sliceStartAngle?: SliceNumberOrCallback<SliceProps, "sliceStartAngle">;
-  style?: VictoryStyleInterface;
-  tabIndex?: NumberOrCallback;
-}
-
-export class Slice extends React.Component<SliceProps, any> {}
-
-export interface VictoryPieProps
-  extends Omit<VictoryCommonProps, "polar">,
-    VictoryLabelableProps,
-    VictoryMultiLabelableProps {
-  categories?: CategoryPropType;
-  colorScale?: ColorScalePropType;
-  cornerRadius?: SliceNumberOrCallback<SliceProps, "cornerRadius">;
-  data?: any[];
-  dataComponent?: React.ReactElement;
-  endAngle?: number;
-  events?: EventPropTypeInterface<
-    VictorySliceTTargetType,
-    StringOrNumberOrCallback | string[] | number[]
-  >[];
-  eventKey?: StringOrNumberOrCallback;
-  innerRadius?: NumberOrCallback;
-  labelPlacement?:
-    | VictorySliceLabelPlacementType
-    | ((props: SliceProps) => VictorySliceLabelPlacementType);
-  labelPosition?:
-    | VictorySliceLabelPositionType
-    | ((props: SliceProps) => VictorySliceLabelPositionType);
-  labelRadius?: number | ((props: SliceProps) => number);
-  origin?: OriginType;
-  padAngle?: NumberOrCallback;
-  radius?: NumberOrCallback;
-  startAngle?: number;
-  style?: VictoryStyleInterface;
-  x?: DataGetterPropType;
-  y?: DataGetterPropType;
-}
-
-export class VictoryPie extends React.Component<VictoryPieProps, any> {}

package/src/index.js

@@ -1,2 +0,0 @@
-export { default as VictoryPie } from "./victory-pie";
-export { default as Slice } from "./slice";

package/src/victory-pie.js

@@ -1,268 +0,0 @@
-/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
-import React from "react";
-import PropTypes from "prop-types";
-import {
-  addEvents,
-  Helpers,
-  Data,
-  PropTypes as CustomPropTypes,
-  VictoryContainer,
-  VictoryLabel,
-  VictoryTheme,
-  UserProps,
-} from "victory-core";
-import Slice from "./slice";
-import { getBaseProps } from "./helper-methods";
-
-const fallbackProps = {
-  endAngle: 360,
-  height: 400,
-  innerRadius: 0,
-  cornerRadius: 0,
-  padAngle: 0,
-  padding: 30,
-  width: 400,
-  startAngle: 0,
-  colorScale: [
-    "#ffffff",
-    "#f0f0f0",
-    "#d9d9d9",
-    "#bdbdbd",
-    "#969696",
-    "#737373",
-    "#525252",
-    "#252525",
-    "#000000",
-  ],
-  labelPosition: "centroid",
-};
-
-class VictoryPie extends React.Component {
-  static animationWhitelist = [
-    "data",
-    "endAngle",
-    "height",
-    "innerRadius",
-    "cornerRadius",
-    "padAngle",
-    "padding",
-    "colorScale",
-    "startAngle",
-    "style",
-    "width",
-  ];
-
-  static displayName = "VictoryPie";
-
-  static role = "pie";
-
-  static defaultTransitions = {
-    onExit: {
-      duration: 500,
-      before: () => ({ _y: 0, label: " " }),
-    },
-    onEnter: {
-      duration: 500,
-      before: () => ({ _y: 0, label: " " }),
-      after: (datum) => ({
-        y_: datum._y,
-        label: datum.label,
-      }),
-    },
-  };
-
-  static propTypes = {
-    animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
-    colorScale: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.string),
-      PropTypes.oneOf([
-        "grayscale",
-        "qualitative",
-        "heatmap",
-        "warm",
-        "cool",
-        "red",
-        "green",
-        "blue",
-      ]),
-    ]),
-    containerComponent: PropTypes.element,
-    cornerRadius: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func,
-    ]),
-    data: PropTypes.array,
-    dataComponent: PropTypes.element,
-    disableInlineStyes: PropTypes.bool,
-    endAngle: PropTypes.number,
-    eventKey: PropTypes.oneOfType([
-      PropTypes.func,
-      CustomPropTypes.allOfType([
-        CustomPropTypes.integer,
-        CustomPropTypes.nonNegative,
-      ]),
-      PropTypes.string,
-    ]),
-    events: PropTypes.arrayOf(
-      PropTypes.shape({
-        target: PropTypes.oneOf(["data", "labels", "parent"]),
-        eventKey: PropTypes.oneOfType([
-          PropTypes.array,
-          PropTypes.func,
-          CustomPropTypes.allOfType([
-            CustomPropTypes.integer,
-            CustomPropTypes.nonNegative,
-          ]),
-          PropTypes.string,
-        ]),
-        eventHandlers: PropTypes.object,
-      }),
-    ),
-    externalEventMutations: PropTypes.arrayOf(
-      PropTypes.shape({
-        callback: PropTypes.func,
-        childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-        eventKey: PropTypes.oneOfType([
-          PropTypes.array,
-          CustomPropTypes.allOfType([
-            CustomPropTypes.integer,
-            CustomPropTypes.nonNegative,
-          ]),
-          PropTypes.string,
-        ]),
-        mutation: PropTypes.func,
-        target: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-      }),
-    ),
-    groupComponent: PropTypes.element,
-    height: CustomPropTypes.nonNegative,
-    innerRadius: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func,
-    ]),
-    labelComponent: PropTypes.element,
-    labelPlacement: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.oneOf(["parallel", "perpendicular", "vertical"]),
-    ]),
-    labelPosition: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.oneOf(["startAngle", "centroid", "endAngle"]),
-    ]),
-    labelRadius: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func,
-    ]),
-    labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
-    name: PropTypes.string,
-    origin: PropTypes.shape({
-      x: CustomPropTypes.nonNegative,
-      y: CustomPropTypes.nonNegative,
-    }),
-    padAngle: PropTypes.oneOfType([
-      CustomPropTypes.nonNegative,
-      PropTypes.func,
-    ]),
-    padding: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        top: PropTypes.number,
-        bottom: PropTypes.number,
-        left: PropTypes.number,
-        right: PropTypes.number,
-      }),
-    ]),
-    radius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
-    sharedEvents: PropTypes.shape({
-      events: PropTypes.array,
-      getEventState: PropTypes.func,
-    }),
-    sortKey: PropTypes.oneOfType([
-      PropTypes.func,
-      CustomPropTypes.allOfType([
-        CustomPropTypes.integer,
-        CustomPropTypes.nonNegative,
-      ]),
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    sortOrder: PropTypes.oneOf(["ascending", "descending"]),
-    standalone: PropTypes.bool,
-    startAngle: PropTypes.number,
-    style: PropTypes.shape({
-      parent: PropTypes.object,
-      data: PropTypes.object,
-      labels: PropTypes.object,
-    }),
-    theme: PropTypes.object,
-    width: CustomPropTypes.nonNegative,
-    x: PropTypes.oneOfType([
-      PropTypes.func,
-      CustomPropTypes.allOfType([
-        CustomPropTypes.integer,
-        CustomPropTypes.nonNegative,
-      ]),
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    y: PropTypes.oneOfType([
-      PropTypes.func,
-      CustomPropTypes.allOfType([
-        CustomPropTypes.integer,
-        CustomPropTypes.nonNegative,
-      ]),
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-  };
-
-  static defaultProps = {
-    data: [
-      { x: "A", y: 1 },
-      { x: "B", y: 2 },
-      { x: "C", y: 3 },
-      { x: "D", y: 1 },
-      { x: "E", y: 2 },
-    ],
-    standalone: true,
-    dataComponent: <Slice />,
-    labelComponent: <VictoryLabel />,
-    containerComponent: <VictoryContainer />,
-    groupComponent: <g />,
-    sortOrder: "ascending",
-    theme: VictoryTheme.grayscale,
-  };
-
-  static getBaseProps = (props) => getBaseProps(props, fallbackProps);
-  static getData = Data.getData;
-  static expectedComponents = [
-    "dataComponent",
-    "labelComponent",
-    "groupComponent",
-    "containerComponent",
-  ];
-
-  // Overridden in victory-native
-  shouldAnimate() {
-    return Boolean(this.props.animate);
-  }
-
-  render() {
-    const { animationWhitelist, role } = VictoryPie;
-    const props = Helpers.modifyProps(this.props, fallbackProps, role);
-
-    if (this.shouldAnimate()) {
-      return this.animateComponent(props, animationWhitelist);
-    }
-
-    const children = this.renderData(props);
-
-    const component = props.standalone
-      ? this.renderContainer(props.containerComponent, children)
-      : children;
-
-    return UserProps.withSafeUserProps(component, props);
-  }
-}
-
-export default addEvents(VictoryPie);