Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis Prop Updates #1835

Merged
merged 14 commits into from
May 12, 2021
Merged

Axis Prop Updates #1835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
10ca857
don't mutate domain on zoom or pan event
jhumbug May 6, 2021
ee239a7
first pass: calculate axis offset x and y inside axis rather than chart
jhumbug May 10, 2021
1cdb1be
linter cleanup
jhumbug May 10, 2021
51c552f
calculate horizontal offset in axis
jhumbug May 10, 2021
44467b0
get scale and domain from helpers
jhumbug May 10, 2021
0290f53
cleanup
jhumbug May 11, 2021
e817500
offload some offset calcs to getCalculatedValues, use current axis do…
jhumbug May 11, 2021
ee8d26f
calculate crossAxis is VictoryAxis rather than VictoryChart
jhumbug May 11, 2021
d633f4d
calculate orientation correctly in VictoryAxis
jhumbug May 11, 2021
931070a
fix to grid offset and horizontal offset
jhumbug May 11, 2021
17b24c7
factor in standalone axis offset and domain/scale/props
jhumbug May 12, 2021
36c063b
fix for checking how to calculate scale
jhumbug May 12, 2021
d5bacbb
use domain x/y check rather than standalone prop for single axis layout
jhumbug May 12, 2021
45520db
removed orientations from VictoryChart
jhumbug May 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 176 additions & 33 deletions packages/victory-axis/src/helper-methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }));
Expand All @@ -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 {
Expand Down Expand Up @@ -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)
};
};
Expand All @@ -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
};
};

Expand All @@ -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 = {
Expand All @@ -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] = {
Expand Down
Loading