diff --git a/packages/victory-axis/src/helper-methods.js b/packages/victory-axis/src/helper-methods.js index 9c97a4f6a..c9b1e5219 100644 --- a/packages/victory-axis/src/helper-methods.js +++ b/packages/victory-axis/src/helper-methods.js @@ -169,25 +169,38 @@ const getLabelPadding = (props, style) => { /*eslint-enable no-magic-numbers*/ }; -const getOffset = (props, calculatedValues) => { +const getDefaultOrientations = (axis, originSign, horizontal) => { + const sign = originSign || "positive"; + const orientations = { + positive: { x: "bottom", y: "left" }, + negative: { x: "top", y: "right" } + }; + const horizontalOrientations = { + positive: { x: "left", y: "bottom" }, + negative: { x: "right", y: "top" } + }; + return horizontal ? horizontalOrientations[sign][axis] : orientations[sign][axis]; +}; + +const getStandaloneOffset = (props, calculatedValues) => { const { style, - padding, - isVertical, + scale, orientation, - labelPadding, - stringTicks, + padding, + axis, ticks, - scale, - axis + stringTicks, + isVertical, + labelPadding } = calculatedValues; const { polar, horizontal } = props; const sharedProps = { scale: { [axis]: scale }, polar, horizontal, ticks, stringTicks }; const xPadding = orientation === "right" ? padding.right : padding.left; const yPadding = orientation === "top" ? padding.top : padding.bottom; - const fontSize = style.axisLabel.fontSize || 14; // eslint-disable-line no-magic-numbers const offsetX = props.offsetX !== null && props.offsetX !== undefined ? props.offsetX : xPadding; const offsetY = props.offsetY !== null && props.offsetY !== undefined ? props.offsetY : yPadding; + const fontSize = style.axisLabel.fontSize || 14; // eslint-disable-line no-magic-numbers const tickSizes = ticks.map((data, index) => { const tick = stringTicks ? props.tickValues[data - 1] : data; const tickStyle = Helpers.evaluateStyle(style.ticks, assign({}, sharedProps, { tick, index })); @@ -197,14 +210,84 @@ const getOffset = (props, calculatedValues) => { const minimumPadding = 1.2 * fontSize; // eslint-disable-line no-magic-numbers const x = isVertical ? totalPadding : minimumPadding; const y = isVertical ? minimumPadding : totalPadding; + return { x: offsetX !== null && offsetX !== undefined ? offsetX : x, y: offsetY !== null && offsetY !== undefined ? offsetY : y }; }; +// eslint-disable-next-line complexity +const getOffset = (props, calculatedValues) => { + const { scale, origin, orientation, orientations, domain, padding } = calculatedValues; + const { top, bottom, left, right } = padding; + + const calculatedOrientation = { + x: orientation === "bottom" || orientation === "top" ? orientation : orientations.x, + y: orientation === "left" || orientation === "right" ? orientation : orientations.y + }; + + // make the axes line up, and cross when appropriate + const orientationOffset = { + x: calculatedOrientation.y === "left" ? left : right, + y: calculatedOrientation.x === "bottom" ? bottom : top + }; + const originOffset = { + x: calculatedOrientation.y === "left" ? 0 : props.width, + y: calculatedOrientation.x === "bottom" ? props.height : 0 + }; + const originPosition = { + x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x), + y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y) + }; + + const x = originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x; + const y = originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y; + const offsetX = props.offsetX !== null && props.offsetX !== undefined ? x - props.offsetX : x; + const offsetY = props.offsetY !== null && props.offsetY !== undefined ? y - props.offsetY : y; + + return { + x: offsetX, + y: offsetY + }; +}; + +// eslint-disable-next-line complexity +const getHorizontalOffset = (props, calculatedValues) => { + const { scale, origin, orientation, orientations, domain, padding } = calculatedValues; + const { top, bottom, left, right } = padding; + + const calculatedOrientation = { + y: orientation === "bottom" || orientation === "top" ? orientation : orientations.x, + x: orientation === "left" || orientation === "right" ? orientation : orientations.y + }; + + // make the axes line up, and cross when appropriate + const orientationOffset = { + x: calculatedOrientation.y === "bottom" ? bottom : top, + y: calculatedOrientation.x === "left" ? left : right + }; + const originOffset = { + y: calculatedOrientation.x === "left" ? 0 : props.width, + x: calculatedOrientation.y === "bottom" ? props.height : 0 + }; + const originPosition = { + x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x), + y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y) + }; + + const y = originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x; + const x = originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y; + const offsetX = props.offsetX !== null && props.offsetX !== undefined ? x - props.offsetX : x; + const offsetY = props.offsetY !== null && props.offsetY !== undefined ? y - props.offsetY : y; + + return { + x: offsetX, + y: offsetY + }; +}; + const getTransform = (props, calculatedValues, offset) => { - // const { orientation, axis } = calculatedValues; const axisValue = Axis.getAxisValue(props, axis); return { @@ -257,21 +340,28 @@ const getGridEdge = (props, calculatedValues) => { return { x, y }; }; -const getGridOffset = (props, calculatedValues, offset) => { - const { padding, orientation } = calculatedValues; +const getGridOffset = (calculatedValues, offset) => { + const { padding, orientation, crossAxis } = calculatedValues; const xPadding = orientation === "right" ? padding.right : padding.left; const yPadding = orientation === "top" ? padding.top : padding.bottom; return { - x: props.crossAxis ? offset.x - xPadding : 0, - y: props.crossAxis ? offset.y - yPadding : 0 + x: crossAxis ? offset.x - xPadding : 0, + y: crossAxis ? offset.y - yPadding : 0 }; }; const getLayoutProps = (modifiedProps, calculatedValues) => { - const offset = getOffset(modifiedProps, calculatedValues); + let offset; + if (calculatedValues.domain.x && calculatedValues.domain.y) { + offset = modifiedProps.horizontal + ? getHorizontalOffset(modifiedProps, calculatedValues) + : getOffset(modifiedProps, calculatedValues); + } else { + offset = getStandaloneOffset(modifiedProps, calculatedValues); + } return { globalTransform: getTransform(modifiedProps, calculatedValues, offset), - gridOffset: getGridOffset(modifiedProps, calculatedValues, offset), + gridOffset: getGridOffset(calculatedValues, offset), gridEdge: getGridEdge(modifiedProps, calculatedValues) }; }; @@ -287,34 +377,83 @@ const getOrientation = (props) => { return props.dependentAxis ? defaultOrientations.dependent : defaultOrientations.independent; }; +// eslint-disable-next-line complexity const getCalculatedValues = (props) => { const defaultStyles = getStyleObject(props); const style = getStyles(props, defaultStyles); const padding = Helpers.getPadding(props); - const isVertical = Axis.isVertical(props); const labelPadding = getLabelPadding(props, style); const stringTicks = Axis.stringTicks(props) ? props.tickValues : undefined; const axis = Axis.getAxis(props); - const orientation = getOrientation(props); - const scale = getScale(props); - const domain = Axis.getDomain(props); - const ticks = Axis.getTicks(props, scale, props.crossAxis); - const tickFormat = Axis.getTickFormat(props, scale); + const axisDomain = Axis.getDomain(props); + const axisScale = getScale(props); + const xAxisDomain = axis === "x" ? axisDomain : undefined; + const yAxisDomain = axis === "y" ? axisDomain : undefined; + const xAxisScale = axis === "x" ? axisScale : undefined; + const yAxisScale = axis === "y" ? axisScale : undefined; + const crossAxis = props.crossAxis === false || props.standalone === true ? false : true; + const ticks = Axis.getTicks(props, axisScale, crossAxis); + const tickFormat = Axis.getTickFormat(props, axisScale); + const range = { + x: Helpers.getRange(props, "x"), + y: Helpers.getRange(props, "y") + }; + // use full domain if passed in from parent, + // otherwise use the just the one axis available + const domain = { + x: props.domain && props.domain.x ? props.domain.x : xAxisDomain, + y: props.domain && props.domain.y ? props.domain.y : yAxisDomain + }; + // use full scale if passed in from parent, + // otherwise use the just the one axis available + const scale = { + x: + props.domain && props.domain.x + ? Scale.getBaseScale(props, "x") + .domain(props.domain.x) + .range(props.horizontal ? range.y : range.x) + : xAxisScale, + y: + props.domain && props.domain.y + ? Scale.getBaseScale(props, "y") + .domain(props.domain.y) + .range(props.horizontal ? range.x : range.y) + : yAxisScale + }; + const origin = domain.x && domain.y ? Axis.getOrigin(domain) : undefined; + const originSign = origin + ? { + x: Axis.getOriginSign(origin.x, domain.x), + y: Axis.getOriginSign(origin.y, domain.y) + } + : undefined; + const orientations = originSign + ? { + x: getDefaultOrientations("x", originSign.y, props.horizontal), + y: getDefaultOrientations("y", originSign.x, props.horizontal) + } + : undefined; + const orientation = orientations + ? props.orientation || orientations[axis] + : getOrientation(props); + const isVertical = Axis.isVertical(Object.assign({}, props, { orientation })); const anchors = getAnchors(orientation, isVertical); - return { + anchors, axis, - style, - padding, - orientation, + crossAxis, + domain, isVertical, labelPadding, - stringTicks, - anchors, + orientation, + orientations, + origin, + padding, scale, - ticks, + stringTicks, + style, tickFormat, - domain + ticks }; }; @@ -337,7 +476,7 @@ const getBaseProps = (props, fallbackProps) => { const otherAxis = axis === "x" ? "y" : "x"; const { width, height, standalone, theme, polar, padding, horizontal } = props; const { globalTransform, gridOffset, gridEdge } = getLayoutProps(props, calculatedValues); - const sharedProps = { scale: { [axis]: scale }, polar, horizontal, ticks, stringTicks }; + const sharedProps = { scale: { [axis]: scale[axis] }, polar, horizontal, ticks, stringTicks }; const axisProps = getAxisProps(props, calculatedValues, globalTransform); const axisLabelProps = getAxisLabelProps(props, calculatedValues, globalTransform); const initialChildProps = { @@ -361,14 +500,18 @@ const getBaseProps = (props, fallbackProps) => { ); const tickLayout = { position: getTickPosition(styles, orientation, isVertical), - transform: getTickTransform(scale(tickValue), globalTransform, isVertical) + transform: getTickTransform(scale[axis](tickValue), globalTransform, isVertical) }; const gridLayout = { edge: gridEdge, transform: { - x: isVertical ? -gridOffset.x + globalTransform.x : scale(tickValue) + globalTransform.x, - y: isVertical ? scale(tickValue) + globalTransform.y : gridOffset.y + globalTransform.y + x: isVertical + ? -gridOffset.x + globalTransform.x + : scale[axis](tickValue) + globalTransform.x, + y: isVertical + ? scale[axis](tickValue) + globalTransform.y + : gridOffset.y + globalTransform.y } }; childProps[index] = { diff --git a/packages/victory-chart/src/helper-methods.js b/packages/victory-chart/src/helper-methods.js index 9859dc31f..72ec0f0c8 100644 --- a/packages/victory-chart/src/helper-methods.js +++ b/packages/victory-chart/src/helper-methods.js @@ -12,14 +12,7 @@ const fallbackProps = { }; function getAxisProps(child, props, calculatedProps) { - const { domain, scale, stringMap, categories, horizontal, orientations } = calculatedProps; - const childProps = Axis.modifyProps(defaults({ horizontal, theme: props.theme }, child.props)); - const axis = child.type.getAxis(childProps); - const crossAxis = childProps.crossAxis === false ? false : true; - const orientation = childProps.orientation || orientations[axis]; - const axisOffset = horizontal - ? getHorizontalAxisOffset(props, calculatedProps, orientation) - : getAxisOffset(props, calculatedProps, orientation); + const { domain, scale, stringMap, categories, horizontal } = calculatedProps; return { stringMap, horizontal, @@ -28,11 +21,7 @@ function getAxisProps(child, props, calculatedProps) { endAngle: props.endAngle, innerRadius: props.innerRadius, domain, - scale, - offsetY: childProps.offsetY !== undefined ? childProps.offsetY : axisOffset.y, - offsetX: childProps.offsetX !== undefined ? childProps.offsetX : axisOffset.x, - crossAxis, - orientation + scale }; } @@ -93,19 +82,6 @@ function getStyles(props) { }; } -function getOrientation(axis, originSign, horizontal) { - const sign = originSign || "positive"; - const orientations = { - positive: { x: "bottom", y: "left" }, - negative: { x: "top", y: "right" } - }; - const horizontalOrientations = { - positive: { x: "left", y: "bottom" }, - negative: { x: "right", y: "top" } - }; - return horizontal ? horizontalOrientations[sign][axis] : orientations[sign][axis]; -} - function getCalculatedProps(props, childComponents) { const style = getStyles(props); props = Helpers.modifyProps(props, fallbackProps, "chart"); @@ -133,16 +109,6 @@ function getCalculatedProps(props, childComponents) { const origin = polar ? Helpers.getPolarOrigin(props) : Axis.getOrigin(domain); - const originSign = { - x: Axis.getOriginSign(origin.x, domain.x), - y: Axis.getOriginSign(origin.y, domain.y) - }; - - const orientations = { - x: getOrientation("x", originSign.y, horizontal), - y: getOrientation("y", originSign.x, horizontal) - }; - const padding = Helpers.getPadding(props); return { @@ -154,8 +120,7 @@ function getCalculatedProps(props, childComponents) { stringMap, style, origin, - padding, - orientations + padding }; } @@ -224,74 +189,6 @@ const getDomain = (props, axis, childComponents) => { return invertDomain ? domain.concat().reverse() : domain; }; -const getAxisOffset = (props, calculatedProps, orientation) => { - const { scale, origin, domain, padding } = calculatedProps; - const { top, bottom, left, right } = padding; - const orientations = { - x: - orientation === "bottom" || orientation === "top" - ? orientation - : calculatedProps.orientations.x, - y: - orientation === "left" || orientation === "right" - ? orientation - : calculatedProps.orientations.y - }; - // make the axes line up, and cross when appropriate - const orientationOffset = { - y: orientations.x === "bottom" ? bottom : top, - x: orientations.y === "left" ? left : right - }; - const originOffset = { - x: orientations.y === "left" ? 0 : props.width, - y: orientations.x === "bottom" ? props.height : 0 - }; - - const originPosition = { - x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x), - y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y) - }; - - return { - x: originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x, - y: originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y - }; -}; - -const getHorizontalAxisOffset = (props, calculatedProps, orientation) => { - const { scale, origin, domain, padding } = calculatedProps; - const { top, bottom, left, right } = padding; - const orientations = { - y: - orientation === "bottom" || orientation === "top" - ? orientation - : calculatedProps.orientations.x, - x: - orientation === "left" || orientation === "right" - ? orientation - : calculatedProps.orientations.y - }; - // make the axes line up, and cross when appropriate - const orientationOffset = { - x: orientations.y === "bottom" ? bottom : top, - y: orientations.x === "left" ? left : right - }; - const originOffset = { - y: orientations.x === "left" ? 0 : props.width, - x: orientations.y === "bottom" ? props.height : 0 - }; - - const originPosition = { - x: origin.x === domain.x[0] || origin.x === domain.x[1] ? 0 : scale.x(origin.x), - y: origin.y === domain.y[0] || origin.y === domain.y[1] ? 0 : scale.y(origin.y) - }; - - return { - y: originPosition.x ? Math.abs(originOffset.x - originPosition.x) : orientationOffset.x, - x: originPosition.y ? Math.abs(originOffset.y - originPosition.y) : orientationOffset.y - }; -}; - const createStringMap = (props, childComponents, allStrings) => { const x = !allStrings.x || allStrings.x.length === 0 diff --git a/packages/victory-zoom-container/src/zoom-helpers.js b/packages/victory-zoom-container/src/zoom-helpers.js index d74fe57c6..b7d49a69d 100644 --- a/packages/victory-zoom-container/src/zoom-helpers.js +++ b/packages/victory-zoom-container/src/zoom-helpers.js @@ -265,7 +265,6 @@ const RawZoomHelpers = { startX: x, startY: y, parentSVG, - domain: currentDomain, currentDomain, originalDomain, cachedZoomDomain: zoomDomain, @@ -307,7 +306,6 @@ const RawZoomHelpers = { (targetProps.zoomActive && !this.checkDomainEquality(originalDomain, lastDomain)); const mutatedProps = { - domain: currentDomain, currentDomain, originalDomain, cachedZoomDomain: zoomDomain,