victory-bar
Advanced tools
Comparing version 30.5.1 to 30.6.0
259
es/bar.js
@@ -0,1 +1,2 @@ | ||
import _isNil from "lodash/isNil"; | ||
import _isFunction from "lodash/isFunction"; | ||
@@ -5,10 +6,2 @@ import _isPlainObject from "lodash/isPlainObject"; | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } | ||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -33,3 +26,3 @@ | ||
import { Helpers, Path, CommonProps } from "victory-core"; | ||
import * as d3Shape from "d3-shape"; | ||
import { getVerticalBarPath, getHorizontalBarPath, getVerticalPolarBarPath, getCustomBarPath } from "./path-helper-methods"; | ||
@@ -48,193 +41,9 @@ var Bar = | ||
_createClass(Bar, [{ | ||
key: "getPosition", | ||
value: function getPosition(props, width) { | ||
var x = props.x, | ||
y = props.y, | ||
y0 = props.y0, | ||
horizontal = props.horizontal; | ||
var alignment = props.alignment || "middle"; | ||
var size = alignment === "middle" ? width / 2 : width; | ||
var sign = horizontal ? -1 : 1; | ||
return { | ||
x0: alignment === "start" ? x : x - sign * size, | ||
x1: alignment === "end" ? x : x + sign * size, | ||
y0: y0, | ||
y1: y | ||
}; | ||
} | ||
}, { | ||
key: "getVerticalBarPath", | ||
value: function getVerticalBarPath(props, width, cornerRadius) { | ||
var _getPosition = this.getPosition(props, width), | ||
x0 = _getPosition.x0, | ||
x1 = _getPosition.x1, | ||
y0 = _getPosition.y0, | ||
y1 = _getPosition.y1; | ||
var sign = y0 > y1 ? 1 : -1; | ||
var direction = sign > 0 ? "0 0 1" : "0 0 0"; | ||
var topArc = "".concat(cornerRadius.top, " ").concat(cornerRadius.top, " ").concat(direction); | ||
var bottomArc = "".concat(cornerRadius.bottom, " ").concat(cornerRadius.bottom, " ").concat(direction); | ||
return "M ".concat(x0 + cornerRadius.bottom, ", ").concat(y0, "\n A ").concat(bottomArc, ", ").concat(x0, ", ").concat(y0 - sign * cornerRadius.bottom, "\n L ").concat(x0, ", ").concat(y1 + sign * cornerRadius.top, "\n A ").concat(topArc, ", ").concat(x0 + cornerRadius.top, ", ").concat(y1, "\n L ").concat(x1 - cornerRadius.top, ", ").concat(y1, "\n A ").concat(topArc, ", ").concat(x1, ", ").concat(y1 + sign * cornerRadius.top, "\n L ").concat(x1, ", ").concat(y0 - sign * cornerRadius.bottom, "\n A ").concat(bottomArc, ", ").concat(x1 - cornerRadius.bottom, ", ").concat(y0, "\n z"); | ||
} | ||
}, { | ||
key: "getHorizontalBarPath", | ||
value: function getHorizontalBarPath(props, width, cornerRadius) { | ||
var _getPosition2 = this.getPosition(props, width), | ||
x0 = _getPosition2.x0, | ||
x1 = _getPosition2.x1, | ||
y0 = _getPosition2.y0, | ||
y1 = _getPosition2.y1; | ||
var sign = y1 > y0 ? 1 : -1; | ||
var direction = sign > 0 ? "0 0 1" : "0 0 0"; | ||
var topArc = "".concat(cornerRadius.top, " ").concat(cornerRadius.top, " ").concat(direction); | ||
var bottomArc = "".concat(cornerRadius.bottom, " ").concat(cornerRadius.bottom, " ").concat(direction); | ||
return "M ".concat(y0, ", ").concat(x1 + sign * cornerRadius.bottom, "\n A ").concat(bottomArc, ", ").concat(y0 + cornerRadius.bottom, ", ").concat(x1, "\n L ").concat(y1 - sign * cornerRadius.top, ", ").concat(x1, "\n A ").concat(topArc, ", ").concat(y1, ", ").concat(x1 + cornerRadius.top, "\n L ").concat(y1, ", ").concat(x0 - cornerRadius.top, "\n A ").concat(topArc, ", ").concat(y1 - sign * cornerRadius.top, ", ").concat(x0, "\n L ").concat(y0 + cornerRadius.bottom, ", ").concat(x0, "\n A ").concat(bottomArc, ", ").concat(y0, ", ").concat(x0 - sign * cornerRadius.bottom, "\n z"); | ||
} | ||
}, { | ||
key: "getCustomBarPath", | ||
value: function getCustomBarPath(props, width) { | ||
var getPath = props.getPath; | ||
var propsWithCalculatedValues = _objectSpread({}, props, this.getPosition(props, width)); | ||
return getPath(propsWithCalculatedValues); | ||
} | ||
}, { | ||
key: "transformAngle", | ||
value: function transformAngle(angle) { | ||
return -1 * angle + Math.PI / 2; | ||
} | ||
}, { | ||
key: "getAngularWidth", | ||
value: function getAngularWidth(props, width) { | ||
var scale = props.scale; | ||
var range = scale.y.range(); | ||
var r = Math.max.apply(Math, _toConsumableArray(range)); | ||
var angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
return width / (2 * Math.PI * r) * angularRange; | ||
} | ||
}, { | ||
key: "getAngle", | ||
value: function getAngle(props, index) { | ||
var data = props.data, | ||
scale = props.scale; | ||
var x = data[index]._x1 === undefined ? "_x" : "_x1"; | ||
return scale.x(data[index][x]); | ||
} | ||
}, { | ||
key: "getStartAngle", | ||
value: function getStartAngle(props, index) { | ||
var data = props.data, | ||
scale = props.scale, | ||
alignment = props.alignment; | ||
var currentAngle = this.getAngle(props, index); | ||
var angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
var previousAngle = index === 0 ? this.getAngle(props, data.length - 1) - Math.PI * 2 : this.getAngle(props, index - 1); | ||
if (index === 0 && angularRange < 2 * Math.PI) { | ||
return scale.x.range()[0]; | ||
} else if (alignment === "start" || alignment === "end") { | ||
return alignment === "start" ? previousAngle : currentAngle; | ||
} else { | ||
return (currentAngle + previousAngle) / 2; | ||
} | ||
} | ||
}, { | ||
key: "getEndAngle", | ||
value: function getEndAngle(props, index) { | ||
var data = props.data, | ||
scale = props.scale, | ||
alignment = props.alignment; | ||
var currentAngle = this.getAngle(props, index); | ||
var angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
var lastAngle = scale.x.range()[1] === 2 * Math.PI ? this.getAngle(props, 0) + Math.PI * 2 : scale.x.range()[1]; | ||
var nextAngle = index === data.length - 1 ? this.getAngle(props, 0) + Math.PI * 2 : this.getAngle(props, index + 1); | ||
if (index === data.length - 1 && angularRange < 2 * Math.PI) { | ||
return lastAngle; | ||
} else if (alignment === "start" || alignment === "end") { | ||
return alignment === "start" ? currentAngle : nextAngle; | ||
} else { | ||
return (currentAngle + nextAngle) / 2; | ||
} | ||
} | ||
}, { | ||
key: "getCustomVerticalPolarBarPath", | ||
value: function getCustomVerticalPolarBarPath(getPath, props) { | ||
return getPath(props); | ||
} | ||
}, { | ||
key: "getVerticalPolarBarPath", | ||
value: function getVerticalPolarBarPath(props, cornerRadius) { | ||
// eslint-disable-line max-statements | ||
var datum = props.datum, | ||
scale = props.scale, | ||
index = props.index, | ||
alignment = props.alignment; | ||
var style = Helpers.evaluateStyle(props.style, datum, props.active); | ||
var r1 = scale.y(datum._y0 || 0); | ||
var r2 = scale.y(datum._y1 !== undefined ? datum._y1 : datum._y); | ||
var currentAngle = scale.x(datum._x1 !== undefined ? datum._x1 : datum._x); | ||
var start; | ||
var end; | ||
if (style.width) { | ||
var width = this.getAngularWidth(props, style.width); | ||
var size = alignment === "middle" ? width / 2 : width; | ||
start = alignment === "start" ? currentAngle : currentAngle - size; | ||
end = alignment === "end" ? currentAngle : currentAngle + size; | ||
} else { | ||
start = this.getStartAngle(props, index); | ||
end = this.getEndAngle(props, index); | ||
} | ||
start = this.transformAngle(start); | ||
end = this.transformAngle(end); | ||
if (props.getPath) { | ||
var options = { | ||
startAngle: start, | ||
endAngle: end, | ||
r1: r1, | ||
r2: r2, | ||
cornerRadius: cornerRadius | ||
}; | ||
var propsWithCalculatedValues = _objectSpread({}, props, options); | ||
return this.getCustomVerticalPolarBarPath(props.getPath, propsWithCalculatedValues); | ||
} | ||
var getPath = function (edge) { | ||
var pathFunction = d3Shape.arc().innerRadius(r1).outerRadius(r2).startAngle(start).endAngle(end).cornerRadius(cornerRadius[edge]); | ||
var path = pathFunction(); | ||
var moves = path.match(/[A-Z]/g); | ||
var middle = moves.indexOf("L"); | ||
var coords = path.split(/[A-Z]/).slice(1); | ||
var subMoves = edge === "top" ? moves.slice(0, middle) : moves.slice(middle); | ||
var subCoords = edge === "top" ? coords.slice(0, middle) : coords.slice(middle); | ||
return subMoves.map(function (m, i) { | ||
return { | ||
command: m, | ||
coords: subCoords[i].split(",") | ||
}; | ||
}); | ||
}; | ||
var moves = getPath("top").concat(getPath("bottom")); | ||
return moves.reduce(function (memo, move) { | ||
memo += "".concat(move.command, " ").concat(move.coords.join()); | ||
return memo; | ||
}, ""); | ||
} | ||
}, { | ||
key: "getBarPath", | ||
value: function getBarPath(props, width, cornerRadius) { | ||
if (props.getPath) { | ||
return this.getCustomBarPath(props, width); | ||
return getCustomBarPath(props, width); | ||
} | ||
return props.horizontal ? this.getHorizontalBarPath(props, width, cornerRadius) : this.getVerticalBarPath(props, width, cornerRadius); | ||
return props.horizontal ? getHorizontalBarPath(props, width, cornerRadius) : getVerticalBarPath(props, width, cornerRadius); | ||
} | ||
@@ -245,3 +54,3 @@ }, { | ||
// TODO Radial bars | ||
return this.getVerticalPolarBarPath(props, cornerRadius); | ||
return getVerticalPolarBarPath(props, cornerRadius); | ||
} | ||
@@ -254,2 +63,3 @@ }, { | ||
data = props.data, | ||
datum = props.datum, | ||
barWidth = props.barWidth, | ||
@@ -259,3 +69,3 @@ defaultBarWidth = props.defaultBarWidth; | ||
if (barWidth) { | ||
return _isFunction(barWidth) ? Helpers.evaluateProp(barWidth, active) : barWidth; | ||
return _isFunction(barWidth) ? Helpers.evaluateProp(barWidth, datum, active) : barWidth; | ||
} else if (style.width) { | ||
@@ -273,2 +83,29 @@ return style.width; | ||
}, { | ||
key: "getCornerRadiusFromObject", | ||
value: function getCornerRadiusFromObject(props) { | ||
var cornerRadius = props.cornerRadius, | ||
datum = props.datum, | ||
active = props.active; | ||
var realCornerRadius = { | ||
topLeft: 0, | ||
topRight: 0, | ||
bottomLeft: 0, | ||
bottomRight: 0 | ||
}; | ||
var updateCornerRadius = function (corner, fallback) { | ||
if (!_isNil(cornerRadius[corner])) { | ||
realCornerRadius[corner] = Helpers.evaluateProp(cornerRadius[corner], datum, active); | ||
} else if (!_isNil(cornerRadius[fallback])) { | ||
realCornerRadius[corner] = Helpers.evaluateProp(cornerRadius[fallback], datum, active); | ||
} | ||
}; | ||
updateCornerRadius("topLeft", "top"); | ||
updateCornerRadius("topRight", "top"); | ||
updateCornerRadius("bottomLeft", "bottom"); | ||
updateCornerRadius("bottomRight", "right"); | ||
return realCornerRadius; | ||
} | ||
}, { | ||
key: "getCornerRadius", | ||
@@ -279,8 +116,20 @@ value: function getCornerRadius(props) { | ||
active = props.active; | ||
var top = _isPlainObject(cornerRadius) ? cornerRadius.top : cornerRadius || 0; | ||
var bottom = _isPlainObject(cornerRadius) ? cornerRadius.bottom : 0; | ||
return { | ||
top: Helpers.evaluateProp(top, datum, active), | ||
bottom: Helpers.evaluateProp(bottom, datum, active) | ||
var realCornerRadius = { | ||
topLeft: 0, | ||
topRight: 0, | ||
bottomLeft: 0, | ||
bottomRight: 0 | ||
}; | ||
if (!cornerRadius) { | ||
return realCornerRadius; | ||
} | ||
if (_isPlainObject(cornerRadius)) { | ||
return this.getCornerRadiusFromObject(props); | ||
} | ||
realCornerRadius.topLeft = Helpers.evaluateProp(cornerRadius, datum, active); | ||
realCornerRadius.topRight = Helpers.evaluateProp(cornerRadius, datum, active); | ||
return realCornerRadius; | ||
} | ||
@@ -338,3 +187,7 @@ }, { | ||
top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
})]), | ||
@@ -341,0 +194,0 @@ datum: PropTypes.object, |
export { default as VictoryBar } from "./victory-bar"; | ||
export { default as Bar } from "./bar"; | ||
export { default as Bar } from "./bar"; | ||
export { getVerticalBarPath, getHorizontalBarPath, getVerticalPolarBarPath } from "./path-helper-methods"; |
@@ -149,3 +149,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
})]), | ||
@@ -152,0 +156,0 @@ getPath: PropTypes.func, |
264
lib/bar.js
@@ -8,2 +8,4 @@ "use strict"; | ||
var _isNil2 = _interopRequireDefault(require("lodash/isNil")); | ||
var _isFunction2 = _interopRequireDefault(require("lodash/isFunction")); | ||
@@ -21,16 +23,6 @@ | ||
var d3Shape = _interopRequireWildcard(require("d3-shape")); | ||
var _pathHelperMethods = require("./path-helper-methods"); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } | ||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } | ||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
@@ -64,195 +56,9 @@ | ||
_createClass(Bar, [{ | ||
key: "getPosition", | ||
value: function getPosition(props, width) { | ||
var x = props.x, | ||
y = props.y, | ||
y0 = props.y0, | ||
horizontal = props.horizontal; | ||
var alignment = props.alignment || "middle"; | ||
var size = alignment === "middle" ? width / 2 : width; | ||
var sign = horizontal ? -1 : 1; | ||
return { | ||
x0: alignment === "start" ? x : x - sign * size, | ||
x1: alignment === "end" ? x : x + sign * size, | ||
y0: y0, | ||
y1: y | ||
}; | ||
} | ||
}, { | ||
key: "getVerticalBarPath", | ||
value: function getVerticalBarPath(props, width, cornerRadius) { | ||
var _getPosition = this.getPosition(props, width), | ||
x0 = _getPosition.x0, | ||
x1 = _getPosition.x1, | ||
y0 = _getPosition.y0, | ||
y1 = _getPosition.y1; | ||
var sign = y0 > y1 ? 1 : -1; | ||
var direction = sign > 0 ? "0 0 1" : "0 0 0"; | ||
var topArc = "".concat(cornerRadius.top, " ").concat(cornerRadius.top, " ").concat(direction); | ||
var bottomArc = "".concat(cornerRadius.bottom, " ").concat(cornerRadius.bottom, " ").concat(direction); | ||
return "M ".concat(x0 + cornerRadius.bottom, ", ").concat(y0, "\n A ").concat(bottomArc, ", ").concat(x0, ", ").concat(y0 - sign * cornerRadius.bottom, "\n L ").concat(x0, ", ").concat(y1 + sign * cornerRadius.top, "\n A ").concat(topArc, ", ").concat(x0 + cornerRadius.top, ", ").concat(y1, "\n L ").concat(x1 - cornerRadius.top, ", ").concat(y1, "\n A ").concat(topArc, ", ").concat(x1, ", ").concat(y1 + sign * cornerRadius.top, "\n L ").concat(x1, ", ").concat(y0 - sign * cornerRadius.bottom, "\n A ").concat(bottomArc, ", ").concat(x1 - cornerRadius.bottom, ", ").concat(y0, "\n z"); | ||
} | ||
}, { | ||
key: "getHorizontalBarPath", | ||
value: function getHorizontalBarPath(props, width, cornerRadius) { | ||
var _getPosition2 = this.getPosition(props, width), | ||
x0 = _getPosition2.x0, | ||
x1 = _getPosition2.x1, | ||
y0 = _getPosition2.y0, | ||
y1 = _getPosition2.y1; | ||
var sign = y1 > y0 ? 1 : -1; | ||
var direction = sign > 0 ? "0 0 1" : "0 0 0"; | ||
var topArc = "".concat(cornerRadius.top, " ").concat(cornerRadius.top, " ").concat(direction); | ||
var bottomArc = "".concat(cornerRadius.bottom, " ").concat(cornerRadius.bottom, " ").concat(direction); | ||
return "M ".concat(y0, ", ").concat(x1 + sign * cornerRadius.bottom, "\n A ").concat(bottomArc, ", ").concat(y0 + cornerRadius.bottom, ", ").concat(x1, "\n L ").concat(y1 - sign * cornerRadius.top, ", ").concat(x1, "\n A ").concat(topArc, ", ").concat(y1, ", ").concat(x1 + cornerRadius.top, "\n L ").concat(y1, ", ").concat(x0 - cornerRadius.top, "\n A ").concat(topArc, ", ").concat(y1 - sign * cornerRadius.top, ", ").concat(x0, "\n L ").concat(y0 + cornerRadius.bottom, ", ").concat(x0, "\n A ").concat(bottomArc, ", ").concat(y0, ", ").concat(x0 - sign * cornerRadius.bottom, "\n z"); | ||
} | ||
}, { | ||
key: "getCustomBarPath", | ||
value: function getCustomBarPath(props, width) { | ||
var getPath = props.getPath; | ||
var propsWithCalculatedValues = _objectSpread({}, props, this.getPosition(props, width)); | ||
return getPath(propsWithCalculatedValues); | ||
} | ||
}, { | ||
key: "transformAngle", | ||
value: function transformAngle(angle) { | ||
return -1 * angle + Math.PI / 2; | ||
} | ||
}, { | ||
key: "getAngularWidth", | ||
value: function getAngularWidth(props, width) { | ||
var scale = props.scale; | ||
var range = scale.y.range(); | ||
var r = Math.max.apply(Math, _toConsumableArray(range)); | ||
var angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
return width / (2 * Math.PI * r) * angularRange; | ||
} | ||
}, { | ||
key: "getAngle", | ||
value: function getAngle(props, index) { | ||
var data = props.data, | ||
scale = props.scale; | ||
var x = data[index]._x1 === undefined ? "_x" : "_x1"; | ||
return scale.x(data[index][x]); | ||
} | ||
}, { | ||
key: "getStartAngle", | ||
value: function getStartAngle(props, index) { | ||
var data = props.data, | ||
scale = props.scale, | ||
alignment = props.alignment; | ||
var currentAngle = this.getAngle(props, index); | ||
var angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
var previousAngle = index === 0 ? this.getAngle(props, data.length - 1) - Math.PI * 2 : this.getAngle(props, index - 1); | ||
if (index === 0 && angularRange < 2 * Math.PI) { | ||
return scale.x.range()[0]; | ||
} else if (alignment === "start" || alignment === "end") { | ||
return alignment === "start" ? previousAngle : currentAngle; | ||
} else { | ||
return (currentAngle + previousAngle) / 2; | ||
} | ||
} | ||
}, { | ||
key: "getEndAngle", | ||
value: function getEndAngle(props, index) { | ||
var data = props.data, | ||
scale = props.scale, | ||
alignment = props.alignment; | ||
var currentAngle = this.getAngle(props, index); | ||
var angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
var lastAngle = scale.x.range()[1] === 2 * Math.PI ? this.getAngle(props, 0) + Math.PI * 2 : scale.x.range()[1]; | ||
var nextAngle = index === data.length - 1 ? this.getAngle(props, 0) + Math.PI * 2 : this.getAngle(props, index + 1); | ||
if (index === data.length - 1 && angularRange < 2 * Math.PI) { | ||
return lastAngle; | ||
} else if (alignment === "start" || alignment === "end") { | ||
return alignment === "start" ? currentAngle : nextAngle; | ||
} else { | ||
return (currentAngle + nextAngle) / 2; | ||
} | ||
} | ||
}, { | ||
key: "getCustomVerticalPolarBarPath", | ||
value: function getCustomVerticalPolarBarPath(getPath, props) { | ||
return getPath(props); | ||
} | ||
}, { | ||
key: "getVerticalPolarBarPath", | ||
value: function getVerticalPolarBarPath(props, cornerRadius) { | ||
// eslint-disable-line max-statements | ||
var datum = props.datum, | ||
scale = props.scale, | ||
index = props.index, | ||
alignment = props.alignment; | ||
var style = _victoryCore.Helpers.evaluateStyle(props.style, datum, props.active); | ||
var r1 = scale.y(datum._y0 || 0); | ||
var r2 = scale.y(datum._y1 !== undefined ? datum._y1 : datum._y); | ||
var currentAngle = scale.x(datum._x1 !== undefined ? datum._x1 : datum._x); | ||
var start; | ||
var end; | ||
if (style.width) { | ||
var width = this.getAngularWidth(props, style.width); | ||
var size = alignment === "middle" ? width / 2 : width; | ||
start = alignment === "start" ? currentAngle : currentAngle - size; | ||
end = alignment === "end" ? currentAngle : currentAngle + size; | ||
} else { | ||
start = this.getStartAngle(props, index); | ||
end = this.getEndAngle(props, index); | ||
} | ||
start = this.transformAngle(start); | ||
end = this.transformAngle(end); | ||
if (props.getPath) { | ||
var options = { | ||
startAngle: start, | ||
endAngle: end, | ||
r1: r1, | ||
r2: r2, | ||
cornerRadius: cornerRadius | ||
}; | ||
var propsWithCalculatedValues = _objectSpread({}, props, options); | ||
return this.getCustomVerticalPolarBarPath(props.getPath, propsWithCalculatedValues); | ||
} | ||
var getPath = function (edge) { | ||
var pathFunction = d3Shape.arc().innerRadius(r1).outerRadius(r2).startAngle(start).endAngle(end).cornerRadius(cornerRadius[edge]); | ||
var path = pathFunction(); | ||
var moves = path.match(/[A-Z]/g); | ||
var middle = moves.indexOf("L"); | ||
var coords = path.split(/[A-Z]/).slice(1); | ||
var subMoves = edge === "top" ? moves.slice(0, middle) : moves.slice(middle); | ||
var subCoords = edge === "top" ? coords.slice(0, middle) : coords.slice(middle); | ||
return subMoves.map(function (m, i) { | ||
return { | ||
command: m, | ||
coords: subCoords[i].split(",") | ||
}; | ||
}); | ||
}; | ||
var moves = getPath("top").concat(getPath("bottom")); | ||
return moves.reduce(function (memo, move) { | ||
memo += "".concat(move.command, " ").concat(move.coords.join()); | ||
return memo; | ||
}, ""); | ||
} | ||
}, { | ||
key: "getBarPath", | ||
value: function getBarPath(props, width, cornerRadius) { | ||
if (props.getPath) { | ||
return this.getCustomBarPath(props, width); | ||
return (0, _pathHelperMethods.getCustomBarPath)(props, width); | ||
} | ||
return props.horizontal ? this.getHorizontalBarPath(props, width, cornerRadius) : this.getVerticalBarPath(props, width, cornerRadius); | ||
return props.horizontal ? (0, _pathHelperMethods.getHorizontalBarPath)(props, width, cornerRadius) : (0, _pathHelperMethods.getVerticalBarPath)(props, width, cornerRadius); | ||
} | ||
@@ -263,3 +69,3 @@ }, { | ||
// TODO Radial bars | ||
return this.getVerticalPolarBarPath(props, cornerRadius); | ||
return (0, _pathHelperMethods.getVerticalPolarBarPath)(props, cornerRadius); | ||
} | ||
@@ -272,2 +78,3 @@ }, { | ||
data = props.data, | ||
datum = props.datum, | ||
barWidth = props.barWidth, | ||
@@ -277,3 +84,3 @@ defaultBarWidth = props.defaultBarWidth; | ||
if (barWidth) { | ||
return (0, _isFunction2.default)(barWidth) ? _victoryCore.Helpers.evaluateProp(barWidth, active) : barWidth; | ||
return (0, _isFunction2.default)(barWidth) ? _victoryCore.Helpers.evaluateProp(barWidth, datum, active) : barWidth; | ||
} else if (style.width) { | ||
@@ -291,2 +98,29 @@ return style.width; | ||
}, { | ||
key: "getCornerRadiusFromObject", | ||
value: function getCornerRadiusFromObject(props) { | ||
var cornerRadius = props.cornerRadius, | ||
datum = props.datum, | ||
active = props.active; | ||
var realCornerRadius = { | ||
topLeft: 0, | ||
topRight: 0, | ||
bottomLeft: 0, | ||
bottomRight: 0 | ||
}; | ||
var updateCornerRadius = function (corner, fallback) { | ||
if (!(0, _isNil2.default)(cornerRadius[corner])) { | ||
realCornerRadius[corner] = _victoryCore.Helpers.evaluateProp(cornerRadius[corner], datum, active); | ||
} else if (!(0, _isNil2.default)(cornerRadius[fallback])) { | ||
realCornerRadius[corner] = _victoryCore.Helpers.evaluateProp(cornerRadius[fallback], datum, active); | ||
} | ||
}; | ||
updateCornerRadius("topLeft", "top"); | ||
updateCornerRadius("topRight", "top"); | ||
updateCornerRadius("bottomLeft", "bottom"); | ||
updateCornerRadius("bottomRight", "right"); | ||
return realCornerRadius; | ||
} | ||
}, { | ||
key: "getCornerRadius", | ||
@@ -297,8 +131,20 @@ value: function getCornerRadius(props) { | ||
active = props.active; | ||
var top = (0, _isPlainObject2.default)(cornerRadius) ? cornerRadius.top : cornerRadius || 0; | ||
var bottom = (0, _isPlainObject2.default)(cornerRadius) ? cornerRadius.bottom : 0; | ||
return { | ||
top: _victoryCore.Helpers.evaluateProp(top, datum, active), | ||
bottom: _victoryCore.Helpers.evaluateProp(bottom, datum, active) | ||
var realCornerRadius = { | ||
topLeft: 0, | ||
topRight: 0, | ||
bottomLeft: 0, | ||
bottomRight: 0 | ||
}; | ||
if (!cornerRadius) { | ||
return realCornerRadius; | ||
} | ||
if ((0, _isPlainObject2.default)(cornerRadius)) { | ||
return this.getCornerRadiusFromObject(props); | ||
} | ||
realCornerRadius.topLeft = _victoryCore.Helpers.evaluateProp(cornerRadius, datum, active); | ||
realCornerRadius.topRight = _victoryCore.Helpers.evaluateProp(cornerRadius, datum, active); | ||
return realCornerRadius; | ||
} | ||
@@ -359,3 +205,7 @@ }, { | ||
top: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottom: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]) | ||
topLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
topRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottom: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottomLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottomRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]) | ||
})]), | ||
@@ -362,0 +212,0 @@ datum: _propTypes.default.object, |
@@ -18,2 +18,20 @@ "use strict"; | ||
}); | ||
Object.defineProperty(exports, "getVerticalBarPath", { | ||
enumerable: true, | ||
get: function () { | ||
return _pathHelperMethods.getVerticalBarPath; | ||
} | ||
}); | ||
Object.defineProperty(exports, "getHorizontalBarPath", { | ||
enumerable: true, | ||
get: function () { | ||
return _pathHelperMethods.getHorizontalBarPath; | ||
} | ||
}); | ||
Object.defineProperty(exports, "getVerticalPolarBarPath", { | ||
enumerable: true, | ||
get: function () { | ||
return _pathHelperMethods.getVerticalPolarBarPath; | ||
} | ||
}); | ||
@@ -24,2 +42,4 @@ var _victoryBar = _interopRequireDefault(require("./victory-bar")); | ||
var _pathHelperMethods = require("./path-helper-methods"); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -164,3 +164,7 @@ "use strict"; | ||
top: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottom: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]) | ||
topLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
topRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottom: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottomLeft: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]), | ||
bottomRight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]) | ||
})]), | ||
@@ -167,0 +171,0 @@ getPath: _propTypes.default.func, |
{ | ||
"name": "victory-bar", | ||
"version": "30.5.1", | ||
"version": "30.6.0", | ||
"description": "Bar Component for Victory", | ||
@@ -28,5 +28,5 @@ "keywords": [ | ||
"scripts": { | ||
"version": "nps build-libs && nps build-dists" | ||
"temp-version": "webpack --bail --config ../../config/webpack/webpack.config.js --colors" | ||
}, | ||
"sideEffects": false | ||
} |
218
src/bar.js
import React from "react"; | ||
import PropTypes from "prop-types"; | ||
import { Helpers, Path, CommonProps } from "victory-core"; | ||
import { assign, isPlainObject, isFunction } from "lodash"; | ||
import * as d3Shape from "d3-shape"; | ||
import { assign, isPlainObject, isFunction, isNil } from "lodash"; | ||
import { | ||
getVerticalBarPath, | ||
getHorizontalBarPath, | ||
getVerticalPolarBarPath, | ||
getCustomBarPath | ||
} from "./path-helper-methods"; | ||
export default class Bar extends React.Component { | ||
@@ -22,3 +28,7 @@ | ||
top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
}) | ||
@@ -41,166 +51,9 @@ ]), | ||
getPosition(props, width) { | ||
const { x, y, y0, horizontal } = props; | ||
const alignment = props.alignment || "middle"; | ||
const size = alignment === "middle" ? width / 2 : width; | ||
const sign = horizontal ? -1 : 1; | ||
return { | ||
x0: alignment === "start" ? x : x - (sign * size), | ||
x1: alignment === "end" ? x : x + (sign * size), | ||
y0, | ||
y1: y | ||
}; | ||
} | ||
getVerticalBarPath(props, width, cornerRadius) { | ||
const { x0, x1, y0, y1 } = this.getPosition(props, width); | ||
const sign = y0 > y1 ? 1 : -1; | ||
const direction = sign > 0 ? "0 0 1" : "0 0 0"; | ||
const topArc = `${cornerRadius.top} ${cornerRadius.top} ${direction}`; | ||
const bottomArc = `${cornerRadius.bottom} ${cornerRadius.bottom} ${direction}`; | ||
return `M ${x0 + cornerRadius.bottom}, ${y0} | ||
A ${bottomArc}, ${x0}, ${y0 - sign * cornerRadius.bottom} | ||
L ${x0}, ${y1 + sign * cornerRadius.top} | ||
A ${topArc}, ${x0 + cornerRadius.top}, ${y1} | ||
L ${x1 - cornerRadius.top}, ${y1} | ||
A ${topArc}, ${x1}, ${y1 + sign * cornerRadius.top} | ||
L ${x1}, ${y0 - sign * cornerRadius.bottom} | ||
A ${bottomArc}, ${x1 - cornerRadius.bottom}, ${y0} | ||
z`; | ||
} | ||
getHorizontalBarPath(props, width, cornerRadius) { | ||
const { x0, x1, y0, y1 } = this.getPosition(props, width); | ||
const sign = y1 > y0 ? 1 : -1; | ||
const direction = sign > 0 ? "0 0 1" : "0 0 0"; | ||
const topArc = `${cornerRadius.top} ${cornerRadius.top} ${direction}`; | ||
const bottomArc = `${cornerRadius.bottom} ${cornerRadius.bottom} ${direction}`; | ||
return `M ${y0}, ${x1 + sign * cornerRadius.bottom} | ||
A ${bottomArc}, ${y0 + cornerRadius.bottom}, ${x1} | ||
L ${y1 - sign * cornerRadius.top}, ${x1} | ||
A ${topArc}, ${y1}, ${x1 + cornerRadius.top} | ||
L ${y1}, ${x0 - cornerRadius.top} | ||
A ${topArc}, ${y1 - sign * cornerRadius.top}, ${x0} | ||
L ${y0 + cornerRadius.bottom}, ${x0 } | ||
A ${bottomArc}, ${y0}, ${x0 - sign * cornerRadius.bottom} | ||
z`; | ||
} | ||
getCustomBarPath(props, width) { | ||
const { getPath } = props; | ||
const propsWithCalculatedValues = { ...props, ...this.getPosition(props, width) }; | ||
return getPath(propsWithCalculatedValues); | ||
} | ||
transformAngle(angle) { | ||
return -1 * angle + (Math.PI / 2); | ||
} | ||
getAngularWidth(props, width) { | ||
const { scale } = props; | ||
const range = scale.y.range(); | ||
const r = Math.max(...range); | ||
const angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
return (width / (2 * Math.PI * r)) * angularRange; | ||
} | ||
getAngle(props, index) { | ||
const { data, scale } = props; | ||
const x = data[index]._x1 === undefined ? "_x" : "_x1"; | ||
return scale.x(data[index][x]); | ||
} | ||
getStartAngle(props, index) { | ||
const { data, scale, alignment } = props; | ||
const currentAngle = this.getAngle(props, index); | ||
const angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
const previousAngle = index === 0 ? | ||
this.getAngle(props, data.length - 1) - (Math.PI * 2) : | ||
this.getAngle(props, index - 1); | ||
if (index === 0 && angularRange < (2 * Math.PI)) { | ||
return scale.x.range()[0]; | ||
} else if (alignment === "start" || alignment === "end") { | ||
return alignment === "start" ? previousAngle : currentAngle; | ||
} else { | ||
return (currentAngle + previousAngle) / 2; | ||
} | ||
} | ||
getEndAngle(props, index) { | ||
const { data, scale, alignment } = props; | ||
const currentAngle = this.getAngle(props, index); | ||
const angularRange = Math.abs(scale.x.range()[1] - scale.x.range()[0]); | ||
const lastAngle = scale.x.range()[1] === (2 * Math.PI) ? | ||
this.getAngle(props, 0) + (Math.PI * 2) : scale.x.range()[1]; | ||
const nextAngle = index === data.length - 1 ? | ||
this.getAngle(props, 0) + (Math.PI * 2) : this.getAngle(props, index + 1); | ||
if (index === data.length - 1 && angularRange < (2 * Math.PI)) { | ||
return lastAngle; | ||
} else if (alignment === "start" || alignment === "end") { | ||
return alignment === "start" ? currentAngle : nextAngle; | ||
} else { | ||
return (currentAngle + nextAngle) / 2; | ||
} | ||
} | ||
getCustomVerticalPolarBarPath(getPath, props) { | ||
return getPath(props); | ||
} | ||
getVerticalPolarBarPath(props, cornerRadius) { // eslint-disable-line max-statements | ||
const { datum, scale, index, alignment } = props; | ||
const style = Helpers.evaluateStyle(props.style, datum, props.active); | ||
const r1 = scale.y(datum._y0 || 0); | ||
const r2 = scale.y(datum._y1 !== undefined ? datum._y1 : datum._y); | ||
const currentAngle = scale.x(datum._x1 !== undefined ? datum._x1 : datum._x); | ||
let start; | ||
let end; | ||
if (style.width) { | ||
const width = this.getAngularWidth(props, style.width); | ||
const size = alignment === "middle" ? width / 2 : width; | ||
start = alignment === "start" ? currentAngle : currentAngle - size; | ||
end = alignment === "end" ? currentAngle : currentAngle + size; | ||
} else { | ||
start = this.getStartAngle(props, index); | ||
end = this.getEndAngle(props, index); | ||
} | ||
start = this.transformAngle(start); | ||
end = this.transformAngle(end); | ||
if (props.getPath) { | ||
const options = { startAngle: start, endAngle: end, r1, r2, cornerRadius }; | ||
const propsWithCalculatedValues = { ...props, ...options }; | ||
return this.getCustomVerticalPolarBarPath(props.getPath, propsWithCalculatedValues); | ||
} | ||
const getPath = (edge) => { | ||
const pathFunction = d3Shape.arc() | ||
.innerRadius(r1) | ||
.outerRadius(r2) | ||
.startAngle(start) | ||
.endAngle(end) | ||
.cornerRadius(cornerRadius[edge]); | ||
const path = pathFunction(); | ||
const moves = path.match(/[A-Z]/g); | ||
const middle = moves.indexOf("L"); | ||
const coords = path.split(/[A-Z]/).slice(1); | ||
const subMoves = edge === "top" ? moves.slice(0, middle) : moves.slice(middle); | ||
const subCoords = edge === "top" ? coords.slice(0, middle) : coords.slice(middle); | ||
return subMoves.map((m, i) => ({ command: m, coords: subCoords[i].split(",") })); | ||
}; | ||
const moves = getPath("top").concat(getPath("bottom")); | ||
return moves.reduce((memo, move) => { | ||
memo += `${move.command} ${move.coords.join()}`; | ||
return memo; | ||
}, ""); | ||
} | ||
getBarPath(props, width, cornerRadius) { | ||
if (props.getPath) { | ||
return this.getCustomBarPath(props, width); | ||
return getCustomBarPath(props, width); | ||
} | ||
return props.horizontal ? | ||
this.getHorizontalBarPath(props, width, cornerRadius) : | ||
this.getVerticalBarPath(props, width, cornerRadius); | ||
getHorizontalBarPath(props, width, cornerRadius) : | ||
getVerticalBarPath(props, width, cornerRadius); | ||
} | ||
@@ -210,9 +63,9 @@ | ||
// TODO Radial bars | ||
return this.getVerticalPolarBarPath(props, cornerRadius); | ||
return getVerticalPolarBarPath(props, cornerRadius); | ||
} | ||
getBarWidth(props, style) { | ||
const { active, scale, data, barWidth, defaultBarWidth } = props; | ||
const { active, scale, data, datum, barWidth, defaultBarWidth } = props; | ||
if (barWidth) { | ||
return isFunction(barWidth) ? Helpers.evaluateProp(barWidth, active) : barWidth; | ||
return isFunction(barWidth) ? Helpers.evaluateProp(barWidth, datum, active) : barWidth; | ||
} else if (style.width) { | ||
@@ -229,12 +82,33 @@ return style.width; | ||
getCornerRadius(props) { | ||
getCornerRadiusFromObject(props) { | ||
const { cornerRadius, datum, active } = props; | ||
const top = isPlainObject(cornerRadius) ? cornerRadius.top : cornerRadius || 0; | ||
const bottom = isPlainObject(cornerRadius) ? cornerRadius.bottom : 0; | ||
return { | ||
top: Helpers.evaluateProp(top, datum, active), | ||
bottom: Helpers.evaluateProp(bottom, datum, active) | ||
const realCornerRadius = { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 }; | ||
const updateCornerRadius = (corner, fallback) => { | ||
if (!isNil(cornerRadius[corner])) { | ||
realCornerRadius[corner] = Helpers.evaluateProp(cornerRadius[corner], datum, active); | ||
} else if (!isNil(cornerRadius[fallback])) { | ||
realCornerRadius[corner] = Helpers.evaluateProp(cornerRadius[fallback], datum, active); | ||
} | ||
}; | ||
updateCornerRadius("topLeft", "top"); | ||
updateCornerRadius("topRight", "top"); | ||
updateCornerRadius("bottomLeft", "bottom"); | ||
updateCornerRadius("bottomRight", "right"); | ||
return realCornerRadius; | ||
} | ||
getCornerRadius(props) { | ||
const { cornerRadius, datum, active } = props; | ||
const realCornerRadius = { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 }; | ||
if (!cornerRadius) { | ||
return realCornerRadius; | ||
} | ||
if (isPlainObject(cornerRadius)) { | ||
return this.getCornerRadiusFromObject(props); | ||
} | ||
realCornerRadius.topLeft = Helpers.evaluateProp(cornerRadius, datum, active); | ||
realCornerRadius.topRight = Helpers.evaluateProp(cornerRadius, datum, active); | ||
return realCornerRadius; | ||
} | ||
render() { | ||
@@ -241,0 +115,0 @@ const { |
export { default as VictoryBar } from "./victory-bar"; | ||
export { default as Bar } from "./bar"; | ||
export { | ||
getVerticalBarPath, | ||
getHorizontalBarPath, | ||
getVerticalPolarBarPath | ||
} from "./path-helper-methods"; |
@@ -60,3 +60,7 @@ import PropTypes from "prop-types"; | ||
top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), | ||
bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]) | ||
}) | ||
@@ -63,0 +67,0 @@ ]), |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1417350
22
26142