victory-pie - npm Package Compare versions

Comparing version 34.3.12 to 35.0.0

es/helper-methods.js

@@ -52,5 +52,4 @@ import _isNil from "lodash/isNil";
 var getCalculatedValues = function (props) {
-  var theme = props.theme,
-      colorScale = props.colorScale;
-  var styleObject = theme && theme.pie && theme.pie.style ? theme.pie.style : {};
+  var colorScale = props.colorScale;
+  var styleObject = Helpers.getDefaultStyles(props, "pie");
   var style = Helpers.getStyles(props.style, styleObject, "auto", "100%");
@@ -105,4 +104,4 @@ var colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
   var construct = {
-    startAngle: position === "startAngle" ? slice.endAngle : slice.startAngle,
-    endAngle: position === "endAngle" ? slice.startAngle : slice.endAngle
+    startAngle: position === "startAngle" ? slice.startAngle : slice.endAngle,
+    endAngle: position === "endAngle" ? slice.endAngle : slice.startAngle
   };
@@ -115,11 +114,9 @@
 
-var getLabelOrientation = function (slice) {
-  var radiansToDegrees = function (radians) {
-    return radians * (180 / Math.PI);
-  };
+var getLabelOrientation = function (degree, labelPlacement) {
+  if (labelPlacement === "perpendicular") {
+    return degree > 90 && degree < 270 ? "bottom" : "top";
+  } else if (labelPlacement === "parallel") {
+    return degree >= 0 && degree <= 180 ? "right" : "left";
+  }
 
-  var start = radiansToDegrees(slice.startAngle);
-  var end = radiansToDegrees(slice.endAngle);
-  var degree = start + (end - start) / 2;
-
   if (degree < 45 || degree > 315) {
@@ -152,2 +149,29 @@ return "top";
 
+var getBaseLabelAngle = function (slice, labelPosition, labelStyle) {
+  var baseAngle = 0;
+
+  if (labelPosition.angle !== undefined) {
+    baseAngle = labelStyle.angle;
+  } else if (labelPosition === "centroid") {
+    baseAngle = Helpers.radiansToDegrees((slice.startAngle + slice.endAngle) / 2);
+  } else {
+    baseAngle = labelPosition === "startAngle" ? Helpers.radiansToDegrees(slice.startAngle) : Helpers.radiansToDegrees(slice.endAngle);
+  }
+
+  var positiveAngle = baseAngle < 0 ? 360 - baseAngle : baseAngle;
+  return positiveAngle % 360;
+};
+
+var getLabelAngle = function (baseAngle, labelPlacement) {
+  if (labelPlacement === "vertical") {
+    return 0;
+  }
+
+  if (labelPlacement === "parallel") {
+    return baseAngle > 180 && baseAngle < 360 ? baseAngle + 90 : baseAngle - 90;
+  }
+
+  return baseAngle > 90 && baseAngle < 270 ? baseAngle - 180 : baseAngle;
+};
+
 var getLabelProps = function (text, dataProps, calculatedValues) {
@@ -157,3 +181,5 @@ var index = dataProps.index,
       data = dataProps.data,
-      slice = dataProps.slice;
+      slice = dataProps.slice,
+      labelComponent = dataProps.labelComponent,
+      theme = dataProps.theme;
   var style = calculatedValues.style,
@@ -169,3 +195,6 @@ defaultRadius = calculatedValues.defaultRadius,
     text: text
-  }, dataProps));
+  }, dataProps)) || "centroid";
+  var labelPlacement = Helpers.evaluateProp(calculatedValues.labelPlacement, _assign({
+    text: text
+  }, dataProps)) || "vertical";
 
@@ -182,4 +211,8 @@ var labelStyle = _assign({
   var position = getLabelPosition(labelArc, slice, labelPosition);
-  var orientation = getLabelOrientation(slice);
-  return {
+  var baseAngle = getBaseLabelAngle(slice, labelPosition, labelStyle);
+  var labelAngle = getLabelAngle(baseAngle, labelPlacement);
+  var orientation = getLabelOrientation(baseAngle, labelPlacement);
+  var textAnchor = labelStyle.textAnchor || getTextAnchor(orientation);
+  var verticalAnchor = labelStyle.verticalAnchor || getVerticalAnchor(orientation);
+  var labelProps = {
     width: width,
@@ -196,6 +229,13 @@ height: height,
     y: Math.round(position[1]) + origin.y,
-    textAnchor: labelStyle.textAnchor || getTextAnchor(orientation),
-    verticalAnchor: labelStyle.verticalAnchor || getVerticalAnchor(orientation),
-    angle: labelStyle.angle
+    textAnchor: textAnchor,
+    verticalAnchor: verticalAnchor,
+    angle: labelAngle
   };
+
+  if (!Helpers.isTooltip(labelComponent)) {
+    return labelProps;
+  }
+
+  var tooltipTheme = theme && theme.tooltip || {};
+  return _defaults({}, labelProps, Helpers.omit(tooltipTheme, ["style"]));
 };
@@ -259,3 +299,3 @@
       var evaluatedText = Helpers.evaluateProp(text, dataProps);
-      childProps[eventKey].labels = getLabelProps(evaluatedText, dataProps, calculatedValues);
+      childProps[eventKey].labels = getLabelProps(evaluatedText, _assign({}, props, dataProps), calculatedValues);
     }
@@ -262,0 +302,0 @@

es/index.d.ts

@@ -18,2 +18,3 @@ import * as React from "react";
 export type VictorySliceLabelPositionType = "startAngle" | "centroid" | "endAngle";
+export type VictorySliceLabelPlacementType = "vertical" | "parallel" | "perpendicular";
 export type VictorySliceTTargetType = "data" | "labels" | "parent";
@@ -57,2 +58,5 @@
   innerRadius?: NumberOrCallback;
+  labelPlacement?:
+    | VictorySliceLabelPlacementType
+    | ((props: SliceProps) => VictorySliceLabelPlacementType);
   labelPosition?:
@@ -59,0 +63,0 @@ | VictorySliceLabelPositionType

es/victory-pie.js

@@ -146,2 +146,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
     labelComponent: PropTypes.element,
+    labelPlacement: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(["parallel", "perpendicular", "vertical"])]),
     labelPosition: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf(["startAngle", "centroid", "endAngle"])]),
@@ -148,0 +149,0 @@ labelRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),

lib/helper-methods.js

@@ -69,6 +69,6 @@ "use strict";
 var getCalculatedValues = function (props) {
-  var theme = props.theme,
-      colorScale = props.colorScale;
-  var styleObject = theme && theme.pie && theme.pie.style ? theme.pie.style : {};
+  var colorScale = props.colorScale;
 
+  var styleObject = _victoryCore.Helpers.getDefaultStyles(props, "pie");
+
   var style = _victoryCore.Helpers.getStyles(props.style, styleObject, "auto", "100%");
@@ -128,4 +128,4 @@
   var construct = {
-    startAngle: position === "startAngle" ? slice.endAngle : slice.startAngle,
-    endAngle: position === "endAngle" ? slice.startAngle : slice.endAngle
+    startAngle: position === "startAngle" ? slice.startAngle : slice.endAngle,
+    endAngle: position === "endAngle" ? slice.endAngle : slice.startAngle
   };
@@ -136,11 +136,9 @@ var clonedArc = (0, _assign2.default)({}, slice, construct);
 
-var getLabelOrientation = function (slice) {
-  var radiansToDegrees = function (radians) {
-    return radians * (180 / Math.PI);
-  };
+var getLabelOrientation = function (degree, labelPlacement) {
+  if (labelPlacement === "perpendicular") {
+    return degree > 90 && degree < 270 ? "bottom" : "top";
+  } else if (labelPlacement === "parallel") {
+    return degree >= 0 && degree <= 180 ? "right" : "left";
+  }
 
-  var start = radiansToDegrees(slice.startAngle);
-  var end = radiansToDegrees(slice.endAngle);
-  var degree = start + (end - start) / 2;
-
   if (degree < 45 || degree > 315) {
@@ -173,2 +171,29 @@ return "top";
 
+var getBaseLabelAngle = function (slice, labelPosition, labelStyle) {
+  var baseAngle = 0;
+
+  if (labelPosition.angle !== undefined) {
+    baseAngle = labelStyle.angle;
+  } else if (labelPosition === "centroid") {
+    baseAngle = _victoryCore.Helpers.radiansToDegrees((slice.startAngle + slice.endAngle) / 2);
+  } else {
+    baseAngle = labelPosition === "startAngle" ? _victoryCore.Helpers.radiansToDegrees(slice.startAngle) : _victoryCore.Helpers.radiansToDegrees(slice.endAngle);
+  }
+
+  var positiveAngle = baseAngle < 0 ? 360 - baseAngle : baseAngle;
+  return positiveAngle % 360;
+};
+
+var getLabelAngle = function (baseAngle, labelPlacement) {
+  if (labelPlacement === "vertical") {
+    return 0;
+  }
+
+  if (labelPlacement === "parallel") {
+    return baseAngle > 180 && baseAngle < 360 ? baseAngle + 90 : baseAngle - 90;
+  }
+
+  return baseAngle > 90 && baseAngle < 270 ? baseAngle - 180 : baseAngle;
+};
+
 var getLabelProps = function (text, dataProps, calculatedValues) {
@@ -178,3 +203,5 @@ var index = dataProps.index,
       data = dataProps.data,
-      slice = dataProps.slice;
+      slice = dataProps.slice,
+      labelComponent = dataProps.labelComponent,
+      theme = dataProps.theme;
   var style = calculatedValues.style,
@@ -192,4 +219,6 @@ defaultRadius = calculatedValues.defaultRadius,
     text: text
-  }, dataProps));
-
+  }, dataProps)) || "centroid";
+  var labelPlacement = _victoryCore.Helpers.evaluateProp(calculatedValues.labelPlacement, (0, _assign2.default)({
+    text: text
+  }, dataProps)) || "vertical";
   var labelStyle = (0, _assign2.default)({
@@ -206,4 +235,8 @@ padding: 0
   var position = getLabelPosition(labelArc, slice, labelPosition);
-  var orientation = getLabelOrientation(slice);
-  return {
+  var baseAngle = getBaseLabelAngle(slice, labelPosition, labelStyle);
+  var labelAngle = getLabelAngle(baseAngle, labelPlacement);
+  var orientation = getLabelOrientation(baseAngle, labelPlacement);
+  var textAnchor = labelStyle.textAnchor || getTextAnchor(orientation);
+  var verticalAnchor = labelStyle.verticalAnchor || getVerticalAnchor(orientation);
+  var labelProps = {
     width: width,
@@ -220,6 +253,13 @@ height: height,
     y: Math.round(position[1]) + origin.y,
-    textAnchor: labelStyle.textAnchor || getTextAnchor(orientation),
-    verticalAnchor: labelStyle.verticalAnchor || getVerticalAnchor(orientation),
-    angle: labelStyle.angle
+    textAnchor: textAnchor,
+    verticalAnchor: verticalAnchor,
+    angle: labelAngle
   };
+
+  if (!_victoryCore.Helpers.isTooltip(labelComponent)) {
+    return labelProps;
+  }
+
+  var tooltipTheme = theme && theme.tooltip || {};
+  return (0, _defaults2.default)({}, labelProps, _victoryCore.Helpers.omit(tooltipTheme, ["style"]));
 };
@@ -283,3 +323,3 @@
 
-      childProps[eventKey].labels = getLabelProps(evaluatedText, dataProps, calculatedValues);
+      childProps[eventKey].labels = getLabelProps(evaluatedText, (0, _assign2.default)({}, props, dataProps), calculatedValues);
     }
@@ -286,0 +326,0 @@

lib/index.d.ts

@@ -18,2 +18,3 @@ import * as React from "react";
 export type VictorySliceLabelPositionType = "startAngle" | "centroid" | "endAngle";
+export type VictorySliceLabelPlacementType = "vertical" | "parallel" | "perpendicular";
 export type VictorySliceTTargetType = "data" | "labels" | "parent";
@@ -57,2 +58,5 @@
   innerRadius?: NumberOrCallback;
+  labelPlacement?:
+    | VictorySliceLabelPlacementType
+    | ((props: SliceProps) => VictorySliceLabelPlacementType);
   labelPosition?:
@@ -59,0 +63,0 @@ | VictorySliceLabelPositionType

lib/victory-pie.js

@@ -160,2 +160,3 @@ "use strict";
     labelComponent: _propTypes.default.element,
+    labelPlacement: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(["parallel", "perpendicular", "vertical"])]),
     labelPosition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(["startAngle", "centroid", "endAngle"])]),
@@ -162,0 +163,0 @@ labelRadius: _propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.func]),

package.json

 {
   "name": "victory-pie",
-  "version": "34.3.12",
+  "version": "35.0.0",
   "description": "Pie Component for Victory",
@@ -25,3 +25,3 @@ "keywords": [
     "prop-types": "^15.5.8",
-    "victory-core": "^34.3.12"
+    "victory-core": "^35.0.0"
   },
@@ -28,0 +28,0 @@ "scripts": {

src/helper-methods.js

@@ -1,2 +0,2 @@
-/*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 135, 180, 225, 315] }]*/
+/*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 45, 90, 135, 180, 225, 270, 315, 360] }]*/
 import { assign, defaults, isFunction, isPlainObject, isNil } from "lodash";
@@ -58,4 +58,4 @@ import * as d3Shape from "d3-shape";
 const getCalculatedValues = (props) => {
-  const { theme, colorScale } = props;
-  const styleObject = theme && theme.pie && theme.pie.style ? theme.pie.style : {};
+  const { colorScale } = props;
+  const styleObject = Helpers.getDefaultStyles(props, "pie");
   const style = Helpers.getStyles(props.style, styleObject, "auto", "100%");
@@ -100,4 +100,4 @@ const colors = Array.isArray(colorScale) ? colorScale : Style.getColorScale(colorScale);
   const construct = {
-    startAngle: position === "startAngle" ? slice.endAngle : slice.startAngle,
-    endAngle: position === "endAngle" ? slice.startAngle : slice.endAngle
+    startAngle: position === "startAngle" ? slice.startAngle : slice.endAngle,
+    endAngle: position === "endAngle" ? slice.endAngle : slice.startAngle
   };
@@ -108,9 +108,8 @@ const clonedArc = assign({}, slice, construct);
 
-const getLabelOrientation = (slice) => {
-  const radiansToDegrees = (radians) => {
-    return radians * (180 / Math.PI);
-  };
-  const start = radiansToDegrees(slice.startAngle);
-  const end = radiansToDegrees(slice.endAngle);
-  const degree = start + (end - start) / 2;
+const getLabelOrientation = (degree, labelPlacement) => {
+  if (labelPlacement === "perpendicular") {
+    return degree > 90 && degree < 270 ? "bottom" : "top";
+  } else if (labelPlacement === "parallel") {
+    return degree >= 0 && degree <= 180 ? "right" : "left";
+  }
   if (degree < 45 || degree > 315) {
@@ -141,4 +140,30 @@ return "top";
 
+const getBaseLabelAngle = (slice, labelPosition, labelStyle) => {
+  let baseAngle = 0;
+  if (labelPosition.angle !== undefined) {
+    baseAngle = labelStyle.angle;
+  } else if (labelPosition === "centroid") {
+    baseAngle = Helpers.radiansToDegrees((slice.startAngle + slice.endAngle) / 2);
+  } else {
+    baseAngle =
+      labelPosition === "startAngle"
+        ? Helpers.radiansToDegrees(slice.startAngle)
+        : Helpers.radiansToDegrees(slice.endAngle);
+  }
+  const positiveAngle = baseAngle < 0 ? 360 - baseAngle : baseAngle;
+  return positiveAngle % 360;
+};
+
+const getLabelAngle = (baseAngle, labelPlacement) => {
+  if (labelPlacement === "vertical") {
+    return 0;
+  }
+  if (labelPlacement === "parallel") {
+    return baseAngle > 180 && baseAngle < 360 ? baseAngle + 90 : baseAngle - 90;
+  }
+  return baseAngle > 90 && baseAngle < 270 ? baseAngle - 180 : baseAngle;
+};
+
 const getLabelProps = (text, dataProps, calculatedValues) => {
-  const { index, datum, data, slice } = dataProps;
+  const { index, datum, data, slice, labelComponent, theme } = dataProps;
   const { style, defaultRadius, origin, width, height } = calculatedValues;
@@ -149,6 +174,7 @@ const labelRadius = Helpers.evaluateProp(
   );
-  const labelPosition = Helpers.evaluateProp(
-    calculatedValues.labelPosition,
-    assign({ text }, dataProps)
-  );
+  const labelPosition =
+    Helpers.evaluateProp(calculatedValues.labelPosition, assign({ text }, dataProps)) || "centroid";
+  const labelPlacement =
+    Helpers.evaluateProp(calculatedValues.labelPlacement, assign({ text }, dataProps)) ||
+    "vertical";
   const labelStyle = assign({ padding: 0 }, style.labels);
@@ -161,4 +187,9 @@ const evaluatedStyle = Helpers.evaluateStyle(
   const position = getLabelPosition(labelArc, slice, labelPosition);
-  const orientation = getLabelOrientation(slice);
-  return {
+  const baseAngle = getBaseLabelAngle(slice, labelPosition, labelStyle);
+  const labelAngle = getLabelAngle(baseAngle, labelPlacement);
+  const orientation = getLabelOrientation(baseAngle, labelPlacement);
+  const textAnchor = labelStyle.textAnchor || getTextAnchor(orientation);
+  const verticalAnchor = labelStyle.verticalAnchor || getVerticalAnchor(orientation);
+
+  const labelProps = {
     width,
@@ -175,6 +206,12 @@ height,
     y: Math.round(position[1]) + origin.y,
-    textAnchor: labelStyle.textAnchor || getTextAnchor(orientation),
-    verticalAnchor: labelStyle.verticalAnchor || getVerticalAnchor(orientation),
-    angle: labelStyle.angle
+    textAnchor,
+    verticalAnchor,
+    angle: labelAngle
   };
+
+  if (!Helpers.isTooltip(labelComponent)) {
+    return labelProps;
+  }
+  const tooltipTheme = (theme && theme.tooltip) || {};
+  return defaults({}, labelProps, Helpers.omit(tooltipTheme, ["style"]));
 };
@@ -232,3 +269,7 @@
       const evaluatedText = Helpers.evaluateProp(text, dataProps);
-      childProps[eventKey].labels = getLabelProps(evaluatedText, dataProps, calculatedValues);
+      childProps[eventKey].labels = getLabelProps(
+        evaluatedText,
+        assign({}, props, dataProps),
+        calculatedValues
+      );
     }
@@ -235,0 +276,0 @@ return childProps;

src/index.d.ts

@@ -18,2 +18,3 @@ import * as React from "react";
 export type VictorySliceLabelPositionType = "startAngle" | "centroid" | "endAngle";
+export type VictorySliceLabelPlacementType = "vertical" | "parallel" | "perpendicular";
 export type VictorySliceTTargetType = "data" | "labels" | "parent";
@@ -57,2 +58,5 @@
   innerRadius?: NumberOrCallback;
+  labelPlacement?:
+    | VictorySliceLabelPlacementType
+    | ((props: SliceProps) => VictorySliceLabelPlacementType);
   labelPosition?:
@@ -59,0 +63,0 @@ | VictorySliceLabelPositionType

src/victory-pie.js

@@ -126,2 +126,6 @@ /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2] }]*/
     labelComponent: PropTypes.element,
+    labelPlacement: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.oneOf(["parallel", "perpendicular", "vertical"])
+    ]),
     labelPosition: PropTypes.oneOfType([
@@ -128,0 +132,0 @@ PropTypes.func,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1511758

increased by4.26%

Lines of code

9739

increased by3.44%

Dependency changes

• + Addedreact@17.0.2(transitive)

• + Addedvictory-core@35.11.4(transitive)

• - Removedvictory-core@34.3.12(transitive)

• Updatedvictory-core@^35.0.0