victory-pie 11.2.0 → 11.4.2

package/es/components/helper-methods.js

@@ -0,0 +1,165 @@
+import _omit from "lodash/omit";
+import _isFunction from "lodash/isFunction";
+import _defaults from "lodash/defaults";
+import _assign from "lodash/assign"; /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 135, 180, 225, 315] }]*/
+
+import * as d3Shape from "d3-shape";
+
+import { Helpers, Data, Style } from "victory-core";
+
+export default {
+  degreesToRadians: function (degrees) {
+    return degrees * (Math.PI / 180);
+  },
+  checkForValidText: function (text) {
+    if (text === undefined || text === null) {
+      return text;
+    } else {
+      return "" + text;
+    }
+  },
+  getSliceStyle: function (datum, index, calculatedValues) {
+    var style = calculatedValues.style,
+        colors = calculatedValues.colors;
+
+    var fill = this.getColor(style, colors, index);
+    var dataStyles = _omit(datum, ["_x", "_y", "x", "y", "label"]);
+    return _defaults({}, dataStyles, { fill: fill }, style.data);
+  },
+  getBaseProps: function (props, fallbackProps) {
+    props = Helpers.modifyProps(props, fallbackProps, "pie");
+    var calculatedValues = this.getCalculatedValues(props);
+    var slices = calculatedValues.slices,
+        style = calculatedValues.style,
+        pathFunction = calculatedValues.pathFunction,
+        data = calculatedValues.data,
+        origin = calculatedValues.origin;
+
+    var childProps = {
+      parent: {
+        standalone: props.standalone, slices: slices, pathFunction: pathFunction,
+        width: props.width, height: props.height, style: style.parent
+      }
+    };
+
+    for (var index = 0, len = slices.length; index < len; index++) {
+      var slice = slices[index];
+      var datum = data[index];
+      var eventKey = datum.eventKey || index;
+      var dataProps = {
+        index: index, slice: slice, pathFunction: pathFunction, datum: datum, data: data, origin: origin,
+        style: this.getSliceStyle(datum, index, calculatedValues)
+      };
+
+      childProps[eventKey] = {
+        data: dataProps,
+        labels: this.getLabelProps(props, dataProps, calculatedValues)
+      };
+    }
+    return childProps;
+  },
+  getLabelProps: function (props, dataProps, calculatedValues) {
+    var index = dataProps.index,
+        datum = dataProps.datum,
+        data = dataProps.data,
+        slice = dataProps.slice;
+    var style = calculatedValues.style,
+        radius = calculatedValues.radius,
+        origin = calculatedValues.origin;
+
+    var labelStyle = Helpers.evaluateStyle(_assign({ padding: 0 }, style.labels), datum, props.active);
+    var labelRadius = Helpers.evaluateProp(props.labelRadius, datum);
+    var labelPosition = this.getLabelPosition(radius, labelRadius, labelStyle);
+    var position = labelPosition.centroid(slice);
+    var orientation = this.getLabelOrientation(slice);
+    return {
+      index: index, datum: datum, data: data, slice: slice, orientation: orientation,
+      style: labelStyle,
+      x: Math.round(position[0]) + origin.x,
+      y: Math.round(position[1]) + origin.y,
+      text: this.getLabelText(props, datum, index),
+      textAnchor: labelStyle.textAnchor || this.getTextAnchor(orientation),
+      verticalAnchor: labelStyle.verticalAnchor || this.getVerticalAnchor(orientation),
+      angle: labelStyle.angle
+    };
+  },
+  getCalculatedValues: function (props) {
+    var theme = props.theme,
+        colorScale = props.colorScale,
+        width = props.width,
+        height = props.height;
+
+    var styleObject = theme && theme.pie && theme.pie.style ? theme.pie.style : {};
+    var style = Helpers.getStyles(props.style, styleObject, "auto", "100%");
+    var colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
+    var padding = Helpers.getPadding(props);
+    var radius = this.getRadius(props, padding);
+    var offsetWidth = (radius + padding.left + (width - radius - padding.right)) / 2;
+    var offsetHeight = (radius + padding.top + (height - radius - padding.bottom)) / 2;
+    var origin = { x: offsetWidth, y: offsetHeight };
+    var data = Data.getData(props);
+    var slices = this.getSlices(props, data);
+    var pathFunction = d3Shape.arc().cornerRadius(props.cornerRadius).outerRadius(radius).innerRadius(props.innerRadius);
+    return { style: style, colors: colors, padding: padding, radius: radius, data: data, slices: slices, pathFunction: pathFunction, origin: origin };
+  },
+  getColor: function (style, colors, index) {
+    if (style && style.data && style.data.fill) {
+      return style.data.fill;
+    }
+    return colors && colors[index % colors.length];
+  },
+  getRadius: function (props, padding) {
+    return Math.min(props.width - padding.left - padding.right, props.height - padding.top - padding.bottom) / 2;
+  },
+  getLabelPosition: function (radius, labelRadius, style) {
+    var padding = style && style.padding || 0;
+    var arcRadius = labelRadius || radius + padding;
+    return d3Shape.arc().outerRadius(arcRadius).innerRadius(arcRadius);
+  },
+  getLabelOrientation: function (slice) {
+    var radiansToDegrees = function (radians) {
+      return radians * (180 / Math.PI);
+    };
+    var start = radiansToDegrees(slice.startAngle);
+    var end = radiansToDegrees(slice.endAngle);
+    var degree = start + (end - start) / 2;
+    if (degree < 45 || degree > 315) {
+      return "top";
+    } else if (degree >= 45 && degree < 135) {
+      return "right";
+    } else if (degree >= 135 && degree < 225) {
+      return "bottom";
+    } else {
+      return "left";
+    }
+  },
+  getTextAnchor: function (orientation) {
+    if (orientation === "top" || orientation === "bottom") {
+      return "middle";
+    }
+    return orientation === "right" ? "start" : "end";
+  },
+  getVerticalAnchor: function (orientation) {
+    if (orientation === "left" || orientation === "right") {
+      return "middle";
+    }
+    return orientation === "bottom" ? "start" : "end";
+  },
+  getLabelText: function (props, datum, index) {
+    var text = void 0;
+    if (datum.label) {
+      text = datum.label;
+    } else if (Array.isArray(props.labels)) {
+      text = props.labels[index];
+    } else {
+      text = _isFunction(props.labels) ? props.labels(datum) : datum.xName || datum._x;
+    }
+    return this.checkForValidText(text);
+  },
+  getSlices: function (props, data) {
+    var layoutFunction = d3Shape.pie().sort(null).startAngle(this.degreesToRadians(props.startAngle)).endAngle(this.degreesToRadians(props.endAngle)).padAngle(this.degreesToRadians(props.padAngle)).value(function (datum) {
+      return datum._y;
+    });
+    return layoutFunction(data);
+  }
+};

package/es/components/victory-pie.js

@@ -0,0 +1,140 @@
+import _partialRight from "lodash/partialRight";
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/*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, Slice, VictoryContainer, VictoryLabel, VictoryTheme } from "victory-core";
+import PieHelpers from "./helper-methods";
+
+var 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"]
+};
+
+var animationWhitelist = ["data", "endAngle", "height", "innerRadius", "cornerRadius", "padAngle", "padding", "colorScale", "startAngle", "style", "width"];
+
+var VictoryPie = function (_React$Component) {
+  _inherits(VictoryPie, _React$Component);
+
+  function VictoryPie() {
+    _classCallCheck(this, VictoryPie);
+
+    return _possibleConstructorReturn(this, (VictoryPie.__proto__ || Object.getPrototypeOf(VictoryPie)).apply(this, arguments));
+  }
+
+  _createClass(VictoryPie, [{
+    key: "shouldAnimate",
+
+
+    // Overridden in victory-native
+    value: function shouldAnimate() {
+      return Boolean(this.props.animate);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var role = this.constructor.role;
+
+      var props = Helpers.modifyProps(this.props, fallbackProps, role);
+      if (this.shouldAnimate()) {
+        return this.animateComponent(props, animationWhitelist);
+      }
+
+      var children = this.renderData(props);
+      return props.standalone ? this.renderContainer(props.containerComponent, children) : children;
+    }
+  }]);
+
+  return VictoryPie;
+}(React.Component);
+
+VictoryPie.displayName = "VictoryPie";
+VictoryPie.defaultTransitions = {
+  onExit: {
+    duration: 500,
+    before: function () {
+      return { _y: 0, label: " " };
+    }
+  },
+  onEnter: {
+    duration: 500,
+    before: function () {
+      return { _y: 0, label: " " };
+    },
+    after: function (datum) {
+      return { y_: datum._y, label: datum.label };
+    }
+  }
+};
+VictoryPie.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: CustomPropTypes.nonNegative,
+  data: PropTypes.array,
+  dataComponent: PropTypes.element,
+  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.func, CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]), PropTypes.string]),
+    eventHandlers: PropTypes.object
+  })),
+  groupComponent: PropTypes.element,
+  height: CustomPropTypes.nonNegative,
+  innerRadius: CustomPropTypes.nonNegative,
+  labelComponent: PropTypes.element,
+  labelRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
+  labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
+  name: PropTypes.string,
+  padAngle: CustomPropTypes.nonNegative,
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    top: PropTypes.number, bottom: PropTypes.number,
+    left: PropTypes.number, right: PropTypes.number
+  })]),
+  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)]),
+  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)])
+};
+VictoryPie.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: React.createElement(Slice, null),
+  labelComponent: React.createElement(VictoryLabel, null),
+  containerComponent: React.createElement(VictoryContainer, null),
+  groupComponent: React.createElement("g", null),
+  theme: VictoryTheme.grayscale
+};
+VictoryPie.getBaseProps = _partialRight(PieHelpers.getBaseProps.bind(PieHelpers), fallbackProps);
+VictoryPie.getData = Data.getData.bind(Data);
+VictoryPie.expectedComponents = ["dataComponent", "labelComponent", "groupComponent", "containerComponent"];
+
+
+export default addEvents(VictoryPie);

package/es/index.js

@@ -0,0 +1,2 @@
+import VictoryPie from "./components/victory-pie";
+export { VictoryPie };