From a0aa946a1bc96ea7a7cc66faa75fb634986dca25 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 20 Apr 2018 11:52:13 -0700 Subject: [PATCH 1/6] prefer native methods --- src/components/containers/victory-cursor-container.js | 10 +++++----- src/components/victory-errorbar/helper-methods.js | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/containers/victory-cursor-container.js b/src/components/containers/victory-cursor-container.js index ea942064..0b009e74 100644 --- a/src/components/containers/victory-cursor-container.js +++ b/src/components/containers/victory-cursor-container.js @@ -1,7 +1,7 @@ import PropTypes from "prop-types"; import React from "react"; import { VictoryContainer, VictoryLabel, Axis, Helpers } from "victory-core"; -import { defaults, assign, isNumber, isUndefined, isObject } from "lodash"; +import { defaults, assign, isObject } from "lodash"; import CursorHelpers from "./cursor-helpers"; export const cursorContainerMixin = (base) => class VictoryCursorContainer extends base { @@ -62,7 +62,7 @@ export const cursorContainerMixin = (base) => class VictoryCursorContainer exten const { cursorValue, defaultCursorValue, cursorDimension, domain } = props; if (cursorValue) { return cursorValue; } - if (isNumber(defaultCursorValue)) { + if (typeof defaultCursorValue === "number") { return { x: (domain.x[0] + domain.x[1]) / 2, y: (domain.y[0] + domain.y[1]) / 2, @@ -76,7 +76,7 @@ export const cursorContainerMixin = (base) => class VictoryCursorContainer exten getCursorLabelOffset(props) { const { cursorLabelOffset } = props; - if (isNumber(cursorLabelOffset)) { + if (typeof cursorLabelOffset === "number") { return { x: cursorLabelOffset, y: cursorLabelOffset @@ -87,9 +87,9 @@ export const cursorContainerMixin = (base) => class VictoryCursorContainer exten } getPadding(props) { - if (isUndefined(props.padding)) { + if (props.padding === undefined) { const child = props.children.find((c) => { - return isObject(c.props) && !isUndefined(c.props.padding); + return isObject(c.props) && c.props.padding !== undefined; }); return Helpers.getPadding(child.props); } else { diff --git a/src/components/victory-errorbar/helper-methods.js b/src/components/victory-errorbar/helper-methods.js index 331b8a25..f7acfcd8 100644 --- a/src/components/victory-errorbar/helper-methods.js +++ b/src/components/victory-errorbar/helper-methods.js @@ -1,4 +1,4 @@ -import { assign, isArray, flatten, sortBy } from "lodash"; +import { assign, flatten, sortBy } from "lodash"; import { Helpers, LabelHelpers, Scale, Domain, Data } from "victory-core"; const getErrors = (datum, scale, axis) => { @@ -15,7 +15,7 @@ const getErrors = (datum, scale, axis) => { return false; } - return isArray(errors) ? + return Array.isArray(errors) ? [ errors[0] === 0 ? false : scale[axis](errors[0] + datum[`_${axis}`]), errors[1] === 0 ? false : scale[axis](datum[`_${axis}`] - errors[1]) ] : [ scale[axis](errors + datum[`_${axis}`]), scale[axis](datum[`_${axis}`] - errors) ]; @@ -53,7 +53,7 @@ const formatErrorData = (dataset, props) => { const replaceNegatives = (errors) => { // check if the value is negative, if it is set to 0 const replaceNeg = (val) => !val || val < 0 ? 0 : val; - return isArray(errors) ? errors.map((err) => replaceNeg(err)) : replaceNeg(errors); + return Array.isArray(errors) ? errors.map((err) => replaceNeg(err)) : replaceNeg(errors); }; const stringMap = { @@ -113,7 +113,7 @@ const getDomainFromData = (props, axis, dataset) => { const errorData = flatten(flatten(dataset).map((datum) => { let errorMax; let errorMin; - if (isArray(datum[error])) { + if (Array.isArray(datum[error])) { errorMax = datum[error][0] + datum[`_${currentAxis}`]; errorMin = datum[`_${currentAxis}`] - datum[error][1]; } else { From a30e8171c88a261c3c392f30d6ca9b39d2432fe5 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 20 Apr 2018 14:06:30 -0700 Subject: [PATCH 2/6] remove partialRight --- src/components/victory-area/victory-area.js | 3 +- src/components/victory-axis/helper-methods.js | 743 +++++++++--------- src/components/victory-axis/victory-axis.js | 12 +- src/components/victory-bar/victory-bar.js | 3 +- .../victory-boxplot/victory-boxplot.js | 4 +- .../victory-candlestick.js | 3 +- .../victory-errorbar/victory-errorbar.js | 3 +- src/components/victory-line/victory-line.js | 3 +- .../victory-polar-axis/victory-polar-axis.js | 6 +- .../victory-scatter/helper-methods.js | 176 ++--- .../victory-scatter/victory-scatter.js | 6 +- .../victory-voronoi/victory-voronoi.js | 3 +- src/helpers/wrapper.js | 5 +- 13 files changed, 480 insertions(+), 490 deletions(-) diff --git a/src/components/victory-area/victory-area.js b/src/components/victory-area/victory-area.js index fbc264f4..8c114002 100644 --- a/src/components/victory-area/victory-area.js +++ b/src/components/victory-area/victory-area.js @@ -1,4 +1,3 @@ -import { partialRight } from "lodash"; import PropTypes from "prop-types"; import React from "react"; import { getBaseProps } from "./helper-methods"; @@ -58,7 +57,7 @@ class VictoryArea extends React.Component { static defaultPolarTransitions = DefaultTransitions.continuousPolarTransitions(); static getDomain = Domain.getDomainWithZero.bind(Domain); static getData = Data.getData.bind(Data); - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/components/victory-axis/helper-methods.js b/src/components/victory-axis/helper-methods.js index 16c180ba..671a5c8d 100644 --- a/src/components/victory-axis/helper-methods.js +++ b/src/components/victory-axis/helper-methods.js @@ -9,384 +9,383 @@ const orientationSign = { bottom: 1 }; -export default { - evaluateProp(prop, data, index) { - return isFunction(prop) ? prop(data, index) : prop; - }, - - evaluateStyle(style, data, index) { - if (!style || !Object.keys(style).some((value) => isFunction(style[value]))) { - return style; - } - return Object.keys(style).reduce((prev, curr) => { - prev[curr] = this.evaluateProp(style[curr], data, index); - return prev; - }, {}); - }, - - // exposed for use by VictoryChart - getDomain(props, axis) { - const inherentAxis = this.getAxis(props); - if (axis && axis !== inherentAxis) { - return undefined; - } - let domain; - if (Array.isArray(props.domain)) { - domain = props.domain; - } else if (props.domain && props.domain[inherentAxis]) { - domain = props.domain[inherentAxis]; - } else if (Array.isArray(props.tickValues) && props.tickValues.length > 1) { - domain = Domain.getDomainFromTickValues(props, axis); - } - const paddedDomain = Domain.padDomain(domain, props, inherentAxis); - return domain ? Domain.cleanDomain(paddedDomain, props, inherentAxis) : undefined; - }, - - // exposed for use by VictoryChart - getAxis(props, flipped) { - if (props.orientation) { - const vertical = { top: "x", bottom: "x", left: "y", right: "y" }; - return vertical[props.orientation]; - } - const axisType = props.dependentAxis ? "dependent" : "independent"; - const flippedAxis = { dependent: "x", independent: "y" }; - const normalAxis = { independent: "x", dependent: "y" }; - return flipped ? flippedAxis[axisType] : normalAxis[axisType]; - }, - - // exposed for use by VictoryChart - getScale(props) { - const axis = this.getAxis(props); - const scale = Scale.getBaseScale(props, axis); - const domain = this.getDomain(props) || scale.domain(); - scale.range(Helpers.getRange(props, axis)); - scale.domain(domain); - return scale; - }, - - getStyleObject(props) { - const { theme, dependentAxis } = props; - const generalAxisStyle = theme && theme.axis && theme.axis.style; - const axisType = dependentAxis ? "dependentAxis" : "independentAxis"; - const specificAxisStyle = theme && theme[axisType] && theme[axisType].style; - - return generalAxisStyle && specificAxisStyle - ? defaultsDeep({}, - specificAxisStyle, - generalAxisStyle - ) - : specificAxisStyle || generalAxisStyle; - }, - - getStyles(props, styleObject) { - const style = props.style || {}; - styleObject = styleObject || {}; - const parentStyleProps = { height: "100%", width: "100%" }; - return { - parent: defaults(style.parent, styleObject.parent, parentStyleProps), - axis: defaults({}, style.axis, styleObject.axis), - axisLabel: defaults({}, style.axisLabel, styleObject.axisLabel), - grid: defaults({}, style.grid, styleObject.grid), - ticks: defaults({}, style.ticks, styleObject.ticks), - tickLabels: defaults({}, style.tickLabels, styleObject.tickLabels) - }; - }, - - getTickProps(layout, style, datum) { - const { position, transform } = layout; - return { - x1: transform.x, - y1: transform.y, - x2: transform.x + position.x2, - y2: transform.y + position.y2, - style, - datum - }; - }, - - getTickLabelProps(layout, style, anchors, datum, text) { // eslint-disable-line max-params - const { position, transform } = layout; - return { - style, - x: transform.x + position.x, - y: transform.y + position.y, - verticalAnchor: anchors.verticalAnchor, - textAnchor: anchors.textAnchor, - angle: style.angle, - text, - datum - }; - }, - - getGridProps(layout, style, datum) { - const { edge, transform } = layout; - return { - type: "grid", - x1: transform.x, - y1: transform.y, - x2: edge.x + transform.x, - y2: edge.y + transform.y, - style, - datum - }; - }, - - getAxisProps(modifiedProps, calculatedValues, globalTransform) { - const { style, padding, isVertical } = calculatedValues; - const { width, height } = modifiedProps; - return { - type: "axis", - style: style.axis, - x1: isVertical ? globalTransform.x : padding.left + globalTransform.x, - x2: isVertical ? globalTransform.x : width - padding.right + globalTransform.x, - y1: isVertical ? padding.top + globalTransform.y : globalTransform.y, - y2: isVertical ? height - padding.bottom + globalTransform.y : globalTransform.y - }; - }, - - getLayoutProps(modifiedProps, calculatedValues) { - const offset = this.getOffset(modifiedProps, calculatedValues); - return { - globalTransform: this.getTransform(modifiedProps, calculatedValues, offset), - gridOffset: this.getGridOffset(modifiedProps, calculatedValues, offset), - gridEdge: this.getGridEdge(modifiedProps, calculatedValues) - }; - }, +const evaluateProp = (prop, data, index) => { + return isFunction(prop) ? prop(data, index) : prop; +}; - getEvaluatedStyles(style, tick, index) { - return { - tickStyle: this.evaluateStyle(style.ticks, tick, index), - labelStyle: this.evaluateStyle(style.tickLabels, tick, index), - gridStyle: this.evaluateStyle(style.grid, tick, index) - }; - }, +const evaluateStyle = (style, data, index) => { + if (!style || !Object.keys(style).some((value) => isFunction(style[value]))) { + return style; + } + return Object.keys(style).reduce((prev, curr) => { + prev[curr] = evaluateProp(style[curr], data, index); + return prev; + }, {}); +}; - getRole(props) { - if (props.dependentAxis) { - return props.theme && props.theme.dependentAxis - ? "dependentAxis" - : "axis"; - } +// exposed for use by VictoryChart +const getAxis = (props, flipped) => { + if (props.orientation) { + const vertical = { top: "x", bottom: "x", left: "y", right: "y" }; + return vertical[props.orientation]; + } + const axisType = props.dependentAxis ? "dependent" : "independent"; + const flippedAxis = { dependent: "x", independent: "y" }; + const normalAxis = { independent: "x", dependent: "y" }; + return flipped ? flippedAxis[axisType] : normalAxis[axisType]; +}; - return props.theme && props.theme.independentAxis - ? "independentAxis" - : "axis"; - }, - - getShallowMergedThemeProps(props, role) { - const axisTheme = props.theme.axis || {}; - return defaults({}, props.theme[role], axisTheme); - }, - - modifyProps(props, fallbackProps, role) { - if (role !== "axis") { - props.theme[role] = this.getShallowMergedThemeProps(props, role); - } - return Helpers.modifyProps(props, fallbackProps, role); - }, - - getBaseProps(props, fallbackProps) { - const role = this.getRole(props); - props = this.modifyProps(props, fallbackProps, role); - const calculatedValues = this.getCalculatedValues(props); - const { - axis, style, orientation, isVertical, scale, ticks, tickFormat, anchors, domain, stringTicks - } = calculatedValues; - const otherAxis = axis === "x" ? "y" : "x"; - const { width, height, standalone, theme, polar, padding } = props; - const { - globalTransform, gridOffset, gridEdge - } = this.getLayoutProps(props, calculatedValues); - const sharedProps = { scale: { [axis]: scale }, polar }; - const axisProps = this.getAxisProps(props, calculatedValues, globalTransform); - const axisLabelProps = this.getAxisLabelProps(props, calculatedValues, globalTransform); - const initialChildProps = { - parent: assign( - { style: style.parent, ticks, standalone, theme, width, height, padding, domain }, - sharedProps +// exposed for use by VictoryChart +const getDomain = (props, axis) => { + const inherentAxis = getAxis(props); + if (axis && axis !== inherentAxis) { + return undefined; + } + let domain; + if (Array.isArray(props.domain)) { + domain = props.domain; + } else if (props.domain && props.domain[inherentAxis]) { + domain = props.domain[inherentAxis]; + } else if (Array.isArray(props.tickValues) && props.tickValues.length > 1) { + domain = Domain.getDomainFromTickValues(props, axis); + } + const paddedDomain = Domain.padDomain(domain, props, inherentAxis); + return domain ? Domain.cleanDomain(paddedDomain, props, inherentAxis) : undefined; +}; + +// exposed for use by VictoryChart +const getScale = (props) => { + const axis = getAxis(props); + const scale = Scale.getBaseScale(props, axis); + const domain = getDomain(props) || scale.domain(); + scale.range(Helpers.getRange(props, axis)); + scale.domain(domain); + return scale; +}; + +const getStyleObject = (props) => { + const { theme, dependentAxis } = props; + const generalAxisStyle = theme && theme.axis && theme.axis.style; + const axisType = dependentAxis ? "dependentAxis" : "independentAxis"; + const specificAxisStyle = theme && theme[axisType] && theme[axisType].style; + + return generalAxisStyle && specificAxisStyle + ? defaultsDeep({}, + specificAxisStyle, + generalAxisStyle ) + : specificAxisStyle || generalAxisStyle; +}; + +const getStyles = (props, styleObject) => { + const style = props.style || {}; + styleObject = styleObject || {}; + const parentStyleProps = { height: "100%", width: "100%" }; + return { + parent: defaults(style.parent, styleObject.parent, parentStyleProps), + axis: defaults({}, style.axis, styleObject.axis), + axisLabel: defaults({}, style.axisLabel, styleObject.axisLabel), + grid: defaults({}, style.grid, styleObject.grid), + ticks: defaults({}, style.ticks, styleObject.ticks), + tickLabels: defaults({}, style.tickLabels, styleObject.tickLabels) + }; +}; + +const getTickProps = (layout, style, datum) => { + const { position, transform } = layout; + return { + x1: transform.x, + y1: transform.y, + x2: transform.x + position.x2, + y2: transform.y + position.y2, + style, + datum + }; +}; + +// eslint-disable-next-line max-params +const getTickLabelProps = (layout, style, anchors, datum, text) => { + const { position, transform } = layout; + return { + style, + x: transform.x + position.x, + y: transform.y + position.y, + verticalAnchor: anchors.verticalAnchor, + textAnchor: anchors.textAnchor, + angle: style.angle, + text, + datum + }; +}; + +const getGridProps = (layout, style, datum) => { + const { edge, transform } = layout; + return { + type: "grid", + x1: transform.x, + y1: transform.y, + x2: edge.x + transform.x, + y2: edge.y + transform.y, + style, + datum + }; +}; + +const getAxisProps = (modifiedProps, calculatedValues, globalTransform) => { + const { style, padding, isVertical } = calculatedValues; + const { width, height } = modifiedProps; + return { + type: "axis", + style: style.axis, + x1: isVertical ? globalTransform.x : padding.left + globalTransform.x, + x2: isVertical ? globalTransform.x : width - padding.right + globalTransform.x, + y1: isVertical ? padding.top + globalTransform.y : globalTransform.y, + y2: isVertical ? height - padding.bottom + globalTransform.y : globalTransform.y + }; +}; + +const getEvaluatedStyles = (style, tick, index) => { + return { + tickStyle: evaluateStyle(style.ticks, tick, index), + labelStyle: evaluateStyle(style.tickLabels, tick, index), + gridStyle: evaluateStyle(style.grid, tick, index) + }; +}; + +const getRole = (props) => { + if (props.dependentAxis) { + return props.theme && props.theme.dependentAxis + ? "dependentAxis" + : "axis"; + } + + return props.theme && props.theme.independentAxis + ? "independentAxis" + : "axis"; +}; + +const getShallowMergedThemeProps = (props, role) => { + const axisTheme = props.theme.axis || {}; + return defaults({}, props.theme[role], axisTheme); +}; + +const modifyProps = (props, fallbackProps, role) => { + if (role !== "axis") { + props.theme[role] = getShallowMergedThemeProps(props, role); + } + return Helpers.modifyProps(props, fallbackProps, role); +}; + +const getAxisLabelProps = (props, calculatedValues, globalTransform) => { + const { style, orientation, padding, labelPadding, isVertical } = calculatedValues; + const sign = orientationSign[orientation]; + const hPadding = padding.left + padding.right; + const vPadding = padding.top + padding.bottom; + const verticalAnchor = sign < 0 ? "end" : "start"; + const labelStyle = style.axisLabel; + const angle = isVertical ? -90 : 0; // eslint-disable-line no-magic-numbers + const x = isVertical ? globalTransform.x + (sign * labelPadding) : + ((props.width - hPadding) / 2) + padding.left + globalTransform.x; + const y = isVertical ? + ((props.height - vPadding) / 2) + padding.top + globalTransform.y : + (sign * labelPadding) + globalTransform.y; + + return { + x, + y, + verticalAnchor: labelStyle.verticalAnchor || verticalAnchor, + textAnchor: labelStyle.textAnchor || "middle", + angle: labelStyle.angle || angle, + style: labelStyle, + text: props.label + }; +}; + +const getAnchors = (orientation, isVertical) => { + const anchorOrientation = { top: "end", left: "end", right: "start", bottom: "start" }; + const anchor = anchorOrientation[orientation]; + return { + textAnchor: isVertical ? anchor : "middle", + verticalAnchor: isVertical ? "middle" : anchor + }; +}; + +const getLabelPadding = (props, style) => { + const labelStyle = style.axisLabel || {}; + if (labelStyle.padding !== undefined && labelStyle.padding !== null) { + return labelStyle.padding; + } + const isVertical = Helpers.isVertical(props); + // TODO: magic numbers + /*eslint-disable no-magic-numbers*/ + const fontSize = labelStyle.fontSize || 14; + return props.label ? (fontSize * (isVertical ? 2.3 : 1.6)) : 0; + /*eslint-enable no-magic-numbers*/ +}; + +const getOffset = (props, calculatedValues) => { + const { + style, padding, isVertical, orientation, labelPadding, stringTicks, ticks + } = calculatedValues; + 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 tickSizes = ticks.map((data) => { + const tick = stringTicks ? props.tickValues[data - 1] : data; + const tickStyle = evaluateStyle(style.ticks, tick); + return tickStyle.size || 0; + }); + const totalPadding = fontSize + (2 * Math.max(...tickSizes)) + labelPadding; + 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 + }; +}; + +const getTransform = (props, calculatedValues, offset) => { + const { orientation } = calculatedValues; + return { + top: { x: 0, y: offset.y }, + bottom: { x: 0, y: props.height - offset.y }, + left: { x: offset.x, y: 0 }, + right: { x: props.width - offset.x, y: 0 } + }[orientation]; +}; + +const getTickPosition = (style, orientation, isVertical) => { + const { tickStyle, labelStyle } = style; + const size = tickStyle.size || 0; + const tickPadding = tickStyle.padding || 0; + const labelPadding = labelStyle.padding || 0; + const tickSpacing = size + tickPadding + labelPadding; + const sign = orientationSign[orientation]; + return { + x: isVertical ? sign * tickSpacing : 0, + x2: isVertical ? sign * size : 0, + y: isVertical ? 0 : sign * tickSpacing, + y2: isVertical ? 0 : sign * size + }; +}; + +const getTickTransform = (tick, globalTransform, isVertical) => { + return { + x: isVertical ? globalTransform.x : tick + globalTransform.x, + y: isVertical ? tick + globalTransform.y : globalTransform.y + }; +}; + +const getGridEdge = (props, calculatedValues) => { + const { orientation, padding, isVertical } = calculatedValues; + const sign = -orientationSign[orientation]; + const x = isVertical ? + sign * (props.width - (padding.left + padding.right)) : 0; + const y = isVertical ? + 0 : sign * (props.height - (padding.top + padding.bottom)); + return { x, y }; +}; + +const getGridOffset = (props, calculatedValues, offset) => { + const { padding, orientation } = 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 + }; +}; + +const getLayoutProps = (modifiedProps, calculatedValues) => { + const offset = getOffset(modifiedProps, calculatedValues); + return { + globalTransform: getTransform(modifiedProps, calculatedValues, offset), + gridOffset: getGridOffset(modifiedProps, calculatedValues, offset), + gridEdge: getGridEdge(modifiedProps, calculatedValues) + }; +}; + +const getCalculatedValues = (props) => { + const defaultStyles = getStyleObject(props); + const style = getStyles(props, defaultStyles); + const padding = Helpers.getPadding(props); + const orientation = props.orientation || (props.dependentAxis ? "left" : "bottom"); + const isVertical = Helpers.isVertical(props); + const labelPadding = getLabelPadding(props, style); + const stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined; + const axis = getAxis(props); + const scale = getScale(props); + const domain = getDomain(props); + const ticks = Axis.getTicks(props, scale, props.crossAxis); + const tickFormat = Axis.getTickFormat(props, scale); + const anchors = getAnchors(orientation, isVertical); + + return { + axis, style, padding, orientation, isVertical, labelPadding, stringTicks, + anchors, scale, ticks, tickFormat, domain + }; +}; + +const getBaseProps = (props, fallbackProps) => { + const role = getRole(props); + props = modifyProps(props, fallbackProps, role); + const calculatedValues = getCalculatedValues(props); + const { + axis, style, orientation, isVertical, scale, ticks, tickFormat, anchors, domain, stringTicks + } = calculatedValues; + const otherAxis = axis === "x" ? "y" : "x"; + const { width, height, standalone, theme, polar, padding } = props; + const { globalTransform, gridOffset, gridEdge } = getLayoutProps(props, calculatedValues); + const sharedProps = { scale: { [axis]: scale }, polar }; + const axisProps = getAxisProps(props, calculatedValues, globalTransform); + const axisLabelProps = getAxisLabelProps(props, calculatedValues, globalTransform); + const initialChildProps = { + parent: assign( + { style: style.parent, ticks, standalone, theme, width, height, padding, domain }, + sharedProps + ) + }; + const gridProps = { + dimension: otherAxis, + range: { [otherAxis]: Helpers.getRange(props, otherAxis) }, + scale: props.scale && props.scale[otherAxis] ? + { [otherAxis]: props.scale[otherAxis] } : undefined + }; + return ticks.reduce((childProps, tick, index) => { + const originalTick = stringTicks ? stringTicks[index] : tick; + const styles = getEvaluatedStyles(style, originalTick, index); + const tickLayout = { + position: getTickPosition(styles, orientation, isVertical), + transform: getTickTransform(scale(tick), globalTransform, isVertical) }; - const gridProps = { - dimension: otherAxis, - range: { [otherAxis]: Helpers.getRange(props, otherAxis) }, - scale: props.scale && props.scale[otherAxis] ? - { [otherAxis]: props.scale[otherAxis] } : undefined - }; - return ticks.reduce((childProps, tick, index) => { - const originalTick = stringTicks ? stringTicks[index] : tick; - const styles = this.getEvaluatedStyles(style, originalTick, index); - const tickLayout = { - position: this.getTickPosition(styles, orientation, isVertical), - transform: this.getTickTransform(scale(tick), globalTransform, isVertical) - }; - - const gridLayout = { - edge: gridEdge, - transform: { - x: isVertical ? - -gridOffset.x + globalTransform.x : scale(tick) + globalTransform.x, - y: isVertical ? - scale(tick) + globalTransform.y : gridOffset.y + globalTransform.y - } - }; - childProps[index] = { - axis: assign({ dimension: axis }, sharedProps, axisProps), - axisLabel: assign({}, sharedProps, axisLabelProps), - ticks: assign({}, sharedProps, this.getTickProps(tickLayout, styles.tickStyle, tick)), - tickLabels: assign({}, sharedProps, this.getTickLabelProps( - tickLayout, styles.labelStyle, anchors, tick, tickFormat(tick, index, ticks) - )), - grid: assign( - {}, sharedProps, gridProps, this.getGridProps(gridLayout, styles.gridStyle, tick) - ) - }; - return childProps; - }, initialChildProps); - }, - - getCalculatedValues(props) { - const defaultStyles = this.getStyleObject(props); - const style = this.getStyles(props, defaultStyles); - const padding = Helpers.getPadding(props); - const orientation = props.orientation || (props.dependentAxis ? "left" : "bottom"); - const isVertical = Helpers.isVertical(props); - const labelPadding = this.getLabelPadding(props, style); - const stringTicks = Helpers.stringTicks(props) ? props.tickValues : undefined; - const axis = this.getAxis(props); - const scale = this.getScale(props); - const domain = this.getDomain(props); - const ticks = Axis.getTicks(props, scale, props.crossAxis); - const tickFormat = Axis.getTickFormat(props, scale); - const anchors = this.getAnchors(orientation, isVertical); - - return { - axis, style, padding, orientation, isVertical, labelPadding, stringTicks, - anchors, scale, ticks, tickFormat, domain - }; - }, - - getAxisLabelProps(props, calculatedValues, globalTransform) { - const { style, orientation, padding, labelPadding, isVertical } = calculatedValues; - const sign = orientationSign[orientation]; - const hPadding = padding.left + padding.right; - const vPadding = padding.top + padding.bottom; - const verticalAnchor = sign < 0 ? "end" : "start"; - const labelStyle = style.axisLabel; - const angle = isVertical ? -90 : 0; // eslint-disable-line no-magic-numbers - const x = isVertical ? globalTransform.x + (sign * labelPadding) : - ((props.width - hPadding) / 2) + padding.left + globalTransform.x; - const y = isVertical ? - ((props.height - vPadding) / 2) + padding.top + globalTransform.y : - (sign * labelPadding) + globalTransform.y; - - return { - x, - y, - verticalAnchor: labelStyle.verticalAnchor || verticalAnchor, - textAnchor: labelStyle.textAnchor || "middle", - angle: labelStyle.angle || angle, - style: labelStyle, - text: props.label - }; - }, - - getAnchors(orientation, isVertical) { - const anchorOrientation = { top: "end", left: "end", right: "start", bottom: "start" }; - const anchor = anchorOrientation[orientation]; - return { - textAnchor: isVertical ? anchor : "middle", - verticalAnchor: isVertical ? "middle" : anchor - }; - }, - - getLabelPadding(props, style) { - const labelStyle = style.axisLabel || {}; - if (labelStyle.padding !== undefined && labelStyle.padding !== null) { - return labelStyle.padding; - } - const isVertical = Helpers.isVertical(props); - // TODO: magic numbers - /*eslint-disable no-magic-numbers*/ - const fontSize = labelStyle.fontSize || 14; - return props.label ? (fontSize * (isVertical ? 2.3 : 1.6)) : 0; - /*eslint-enable no-magic-numbers*/ - }, - - getOffset(props, calculatedValues) { - const { - style, padding, isVertical, orientation, labelPadding, stringTicks, ticks - } = calculatedValues; - 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 tickSizes = ticks.map((data) => { - const tick = stringTicks ? props.tickValues[data - 1] : data; - const tickStyle = this.evaluateStyle(style.ticks, tick); - return tickStyle.size || 0; - }); - const totalPadding = fontSize + (2 * Math.max(...tickSizes)) + labelPadding; - 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 - }; - }, - - getTransform(props, calculatedValues, offset) { - const { orientation } = calculatedValues; - return { - top: { x: 0, y: offset.y }, - bottom: { x: 0, y: props.height - offset.y }, - left: { x: offset.x, y: 0 }, - right: { x: props.width - offset.x, y: 0 } - }[orientation]; - }, - - getTickPosition(style, orientation, isVertical) { - const { tickStyle, labelStyle } = style; - const size = tickStyle.size || 0; - const tickPadding = tickStyle.padding || 0; - const labelPadding = labelStyle.padding || 0; - const tickSpacing = size + tickPadding + labelPadding; - const sign = orientationSign[orientation]; - return { - x: isVertical ? sign * tickSpacing : 0, - x2: isVertical ? sign * size : 0, - y: isVertical ? 0 : sign * tickSpacing, - y2: isVertical ? 0 : sign * size - }; - }, - getTickTransform(tick, globalTransform, isVertical) { - return { - x: isVertical ? globalTransform.x : tick + globalTransform.x, - y: isVertical ? tick + globalTransform.y : globalTransform.y + const gridLayout = { + edge: gridEdge, + transform: { + x: isVertical ? + -gridOffset.x + globalTransform.x : scale(tick) + globalTransform.x, + y: isVertical ? + scale(tick) + globalTransform.y : gridOffset.y + globalTransform.y + } }; - }, - - getGridEdge(props, calculatedValues) { - const { orientation, padding, isVertical } = calculatedValues; - const sign = -orientationSign[orientation]; - const x = isVertical ? - sign * (props.width - (padding.left + padding.right)) : 0; - const y = isVertical ? - 0 : sign * (props.height - (padding.top + padding.bottom)); - return { x, y }; - }, - - getGridOffset(props, calculatedValues, offset) { - const { padding, orientation } = 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 + childProps[index] = { + axis: assign({ dimension: axis }, sharedProps, axisProps), + axisLabel: assign({}, sharedProps, axisLabelProps), + ticks: assign({}, sharedProps, getTickProps(tickLayout, styles.tickStyle, tick)), + tickLabels: assign({}, sharedProps, getTickLabelProps( + tickLayout, styles.labelStyle, anchors, tick, tickFormat(tick, index, ticks) + )), + grid: assign( + {}, sharedProps, gridProps, getGridProps(gridLayout, styles.gridStyle, tick) + ) }; - } + return childProps; + }, initialChildProps); }; + +export { getBaseProps, getDomain, getAxis, getScale, getStyles }; diff --git a/src/components/victory-axis/victory-axis.js b/src/components/victory-axis/victory-axis.js index 9d7b4cbb..f901da40 100644 --- a/src/components/victory-axis/victory-axis.js +++ b/src/components/victory-axis/victory-axis.js @@ -1,11 +1,11 @@ import PropTypes from "prop-types"; import React from "react"; -import { assign, partialRight } from "lodash"; +import { assign } from "lodash"; import { PropTypes as CustomPropTypes, Helpers, VictoryLabel, VictoryContainer, VictoryTheme, Grid, TextSize, addEvents } from "victory-core"; -import AxisHelpers from "./helper-methods"; +import { getBaseProps, getDomain, getScale, getStyles } from "./helper-methods"; import Axis from "../../helpers/axis"; import { BaseProps } from "../../helpers/common-props"; @@ -104,11 +104,11 @@ class VictoryAxis extends React.Component { fixLabelOverlap: false }; - static getDomain = AxisHelpers.getDomain.bind(AxisHelpers); + static getDomain = getDomain; static getAxis = Axis.getAxis.bind(Axis); - static getScale = AxisHelpers.getScale.bind(AxisHelpers); - static getStyles = partialRight(AxisHelpers.getStyles.bind(AxisHelpers), fallbackProps.style); - static getBaseProps = partialRight(AxisHelpers.getBaseProps.bind(AxisHelpers), fallbackProps); + static getScale = getScale; + static getStyles = (props) => getStyles(props, fallbackProps.style); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "axisComponent", "axisLabelComponent", "groupComponent", "containerComponent", "tickComponent", "tickLabelComponent", "gridComponent" diff --git a/src/components/victory-bar/victory-bar.js b/src/components/victory-bar/victory-bar.js index b9ff7ff8..64d062ed 100644 --- a/src/components/victory-bar/victory-bar.js +++ b/src/components/victory-bar/victory-bar.js @@ -1,7 +1,6 @@ import PropTypes from "prop-types"; import React from "react"; import { getBaseProps } from "./helper-methods"; -import { partialRight } from "lodash"; import { Helpers, VictoryLabel, VictoryContainer, VictoryTheme, Bar, addEvents, Data, Domain } from "victory-core"; @@ -68,7 +67,7 @@ class VictoryBar extends React.Component { static getDomain = Domain.getDomainWithZero.bind(Domain); static getData = Data.getData.bind(Data); - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/components/victory-boxplot/victory-boxplot.js b/src/components/victory-boxplot/victory-boxplot.js index 2ef6b598..dda6c56c 100644 --- a/src/components/victory-boxplot/victory-boxplot.js +++ b/src/components/victory-boxplot/victory-boxplot.js @@ -1,6 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { partialRight, flatten } from "lodash"; +import { flatten } from "lodash"; import { BaseProps, DataProps } from "../../helpers/common-props"; import { Helpers, VictoryLabel, addEvents, Line, PropTypes as CustomPropTypes, @@ -149,7 +149,7 @@ class VictoryBoxPlot extends React.Component { static getDomain = getDomain; static getData = getData; - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "maxComponent", "maxLabelComponent", "medianComponent", "medianLabelComponent", "minComponent", "minLabelComponent", "q1Component", "q1LabelComponent", diff --git a/src/components/victory-candlestick/victory-candlestick.js b/src/components/victory-candlestick/victory-candlestick.js index cebd60b4..7e3d23ca 100644 --- a/src/components/victory-candlestick/victory-candlestick.js +++ b/src/components/victory-candlestick/victory-candlestick.js @@ -1,6 +1,5 @@ import PropTypes from "prop-types"; import React from "react"; -import { partialRight } from "lodash"; import { PropTypes as CustomPropTypes, Helpers, VictoryLabel, addEvents, VictoryContainer, VictoryTheme, DefaultTransitions, Candle @@ -86,7 +85,7 @@ class VictoryCandlestick extends React.Component { static getDomain = getDomain; static getData = getData; - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/components/victory-errorbar/victory-errorbar.js b/src/components/victory-errorbar/victory-errorbar.js index 49ee1f3b..327cf5b8 100644 --- a/src/components/victory-errorbar/victory-errorbar.js +++ b/src/components/victory-errorbar/victory-errorbar.js @@ -4,7 +4,6 @@ import { PropTypes as CustomPropTypes, Helpers, VictoryLabel, addEvents, VictoryContainer, VictoryTheme, DefaultTransitions, ErrorBar, Data } from "victory-core"; -import { partialRight } from "lodash"; import { getBaseProps, getDomain } from "./helper-methods"; import { BaseProps, DataProps } from "../../helpers/common-props"; @@ -65,7 +64,7 @@ class VictoryErrorBar extends React.Component { static getDomain = getDomain; static getData = Data.getData.bind(Data); - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/components/victory-line/victory-line.js b/src/components/victory-line/victory-line.js index 4f73910e..2d770e0e 100644 --- a/src/components/victory-line/victory-line.js +++ b/src/components/victory-line/victory-line.js @@ -1,4 +1,3 @@ -import { partialRight } from "lodash"; import PropTypes from "prop-types"; import React from "react"; import { getBaseProps } from "./helper-methods"; @@ -58,7 +57,7 @@ class VictoryLine extends React.Component { static getDomain = Domain.getDomain.bind(Domain); static getData = Data.getData.bind(Data); - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/components/victory-polar-axis/victory-polar-axis.js b/src/components/victory-polar-axis/victory-polar-axis.js index 73c02a70..c72ac336 100644 --- a/src/components/victory-polar-axis/victory-polar-axis.js +++ b/src/components/victory-polar-axis/victory-polar-axis.js @@ -1,6 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { assign, partialRight } from "lodash"; +import { assign } from "lodash"; import { PropTypes as CustomPropTypes, Helpers, VictoryLabel, VictoryContainer, VictoryTheme, Grid, addEvents, Arc @@ -108,8 +108,8 @@ class VictoryPolarAxis extends React.Component { static getDomain = getDomain; static getAxis = getAxis; static getScale = getScale; - static getStyles = partialRight(getStyles, fallbackProps.style); - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getStyles = (props) => getStyles(props, fallbackProps.style); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "axisComponent", "circularAxisComponent", "groupComponent", "containerComponent", "tickComponent", "tickLabelComponent", "gridComponent", "circularGridComponent" diff --git a/src/components/victory-scatter/helper-methods.js b/src/components/victory-scatter/helper-methods.js index abc5340d..81da9204 100644 --- a/src/components/victory-scatter/helper-methods.js +++ b/src/components/victory-scatter/helper-methods.js @@ -1,100 +1,100 @@ import { assign, values } from "lodash"; import { Helpers, LabelHelpers, Data, Domain, Scale } from "victory-core"; -export default { - getBaseProps(props, fallbackProps) { - const modifiedProps = Helpers.modifyProps(props, fallbackProps, "scatter"); - props = assign({}, modifiedProps, this.getCalculatedValues(modifiedProps)); - const { - data, domain, events, height, origin, padding, polar, scale, - sharedEvents, standalone, style, theme, width, labels - } = props; - const initialChildProps = { parent: { - style: style.parent, scale, domain, data, height, width, standalone, theme, - origin, polar, padding - } }; - - return data.reduce((childProps, datum, index) => { - const eventKey = datum.eventKey; - const { x, y } = Helpers.scalePoint(props, datum); - const dataProps = { - x, y, datum, data, index, scale, polar, origin, - size: this.getSize(datum, props), - symbol: this.getSymbol(datum, props), - style: style.data - }; +const getSymbol = (data, props) => { + if (props.bubbleProperty) { + return "circle"; + } + return data.symbol || props.symbol; +}; - childProps[eventKey] = { data: dataProps }; - const text = LabelHelpers.getText(props, datum, index); - if (text !== undefined && text !== null || (labels && (events || sharedEvents))) { - childProps[eventKey].labels = LabelHelpers.getProps(props, index); - } +const getBubbleSize = (datum, props) => { + const { data, z, maxBubbleSize, minBubbleSize } = props; + const zData = data.map((point) => point[z]); + const zMin = Math.min(...zData); + const zMax = Math.max(...zData); + const getMaxRadius = () => { + const minPadding = Math.min(...values(Helpers.getPadding(props))); + return Math.max(minPadding, 5); // eslint-disable-line no-magic-numbers + }; + const maxRadius = maxBubbleSize || getMaxRadius(); + const minRadius = minBubbleSize || maxRadius * 0.1; // eslint-disable-line no-magic-numbers + if (zMax === zMin) { + return Math.max(minRadius, 1); + } + const maxArea = Math.PI * Math.pow(maxRadius, 2); + const minArea = Math.PI * Math.pow(minRadius, 2); + const pointArea = ((datum[z] - zMin) / (zMax - zMin)) * maxArea; + const area = Math.max(pointArea, minArea); + const radius = Math.sqrt(area / Math.PI); + return Math.max(radius, 1); +}; - return childProps; - }, initialChildProps); - }, +const getSize = (datum, props) => { + const { size, z } = props; + if (datum.size) { + return typeof datum.size === "function" ? datum.size : Math.max(datum.size, 1); + } else if (typeof props.size === "function") { + return size; + } else if (datum[z]) { + return getBubbleSize(datum, props); + } else { + return Math.max(size || 0, 1); + } +}; - getCalculatedValues(props) { - const defaultStyles = props.theme && props.theme.scatter && props.theme.scatter.style ? - props.theme.scatter.style : {}; - const style = Helpers.getStyles(props.style, defaultStyles); - const data = Data.getData(props); - const range = { - x: Helpers.getRange(props, "x"), - y: Helpers.getRange(props, "y") - }; - const domain = { - x: Domain.getDomain(props, "x"), - y: Domain.getDomain(props, "y") - }; - const scale = { - x: Scale.getBaseScale(props, "x").domain(domain.x).range(range.x), - y: Scale.getBaseScale(props, "y").domain(domain.y).range(range.y) - }; - const origin = props.polar ? props.origin || Helpers.getPolarOrigin(props) : undefined; - const z = props.bubbleProperty || "z"; - return { domain, data, scale, style, origin, z }; - }, +const getCalculatedValues = (props) => { + const defaultStyles = props.theme && props.theme.scatter && props.theme.scatter.style ? + props.theme.scatter.style : {}; + const style = Helpers.getStyles(props.style, defaultStyles); + const data = Data.getData(props); + const range = { + x: Helpers.getRange(props, "x"), + y: Helpers.getRange(props, "y") + }; + const domain = { + x: Domain.getDomain(props, "x"), + y: Domain.getDomain(props, "y") + }; + const scale = { + x: Scale.getBaseScale(props, "x").domain(domain.x).range(range.x), + y: Scale.getBaseScale(props, "y").domain(domain.y).range(range.y) + }; + const origin = props.polar ? props.origin || Helpers.getPolarOrigin(props) : undefined; + const z = props.bubbleProperty || "z"; + return { domain, data, scale, style, origin, z }; +}; - getSymbol(data, props) { - if (props.bubbleProperty) { - return "circle"; - } - return data.symbol || props.symbol; - }, +const getBaseProps = (props, fallbackProps) => { + const modifiedProps = Helpers.modifyProps(props, fallbackProps, "scatter"); + props = assign({}, modifiedProps, getCalculatedValues(modifiedProps)); + const { + data, domain, events, height, origin, padding, polar, scale, + sharedEvents, standalone, style, theme, width, labels + } = props; + const initialChildProps = { parent: { + style: style.parent, scale, domain, data, height, width, standalone, theme, + origin, polar, padding + } }; - getBubbleSize(datum, props) { - const { data, z, maxBubbleSize, minBubbleSize } = props; - const zData = data.map((point) => point[z]); - const zMin = Math.min(...zData); - const zMax = Math.max(...zData); - const getMaxRadius = () => { - const minPadding = Math.min(...values(Helpers.getPadding(props))); - return Math.max(minPadding, 5); // eslint-disable-line no-magic-numbers + return data.reduce((childProps, datum, index) => { + const eventKey = datum.eventKey; + const { x, y } = Helpers.scalePoint(props, datum); + const dataProps = { + x, y, datum, data, index, scale, polar, origin, + size: getSize(datum, props), + symbol: getSymbol(datum, props), + style: style.data }; - const maxRadius = maxBubbleSize || getMaxRadius(); - const minRadius = minBubbleSize || maxRadius * 0.1; // eslint-disable-line no-magic-numbers - if (zMax === zMin) { - return Math.max(minRadius, 1); - } - const maxArea = Math.PI * Math.pow(maxRadius, 2); - const minArea = Math.PI * Math.pow(minRadius, 2); - const pointArea = ((datum[z] - zMin) / (zMax - zMin)) * maxArea; - const area = Math.max(pointArea, minArea); - const radius = Math.sqrt(area / Math.PI); - return Math.max(radius, 1); - }, - getSize(datum, props) { - const { size, z } = props; - if (datum.size) { - return typeof datum.size === "function" ? datum.size : Math.max(datum.size, 1); - } else if (typeof props.size === "function") { - return size; - } else if (datum[z]) { - return this.getBubbleSize(datum, props); - } else { - return Math.max(size || 0, 1); + childProps[eventKey] = { data: dataProps }; + const text = LabelHelpers.getText(props, datum, index); + if (text !== undefined && text !== null || (labels && (events || sharedEvents))) { + childProps[eventKey].labels = LabelHelpers.getProps(props, index); } - } + + return childProps; + }, initialChildProps); }; + +export { getBaseProps }; diff --git a/src/components/victory-scatter/victory-scatter.js b/src/components/victory-scatter/victory-scatter.js index 3710a110..8e1124b3 100644 --- a/src/components/victory-scatter/victory-scatter.js +++ b/src/components/victory-scatter/victory-scatter.js @@ -1,11 +1,10 @@ import PropTypes from "prop-types"; import React from "react"; -import { partialRight } from "lodash"; import { PropTypes as CustomPropTypes, Helpers, VictoryLabel, addEvents, VictoryContainer, VictoryTheme, DefaultTransitions, Point, Data, Domain } from "victory-core"; -import ScatterHelpers from "./helper-methods"; +import { getBaseProps } from "./helper-methods"; import { BaseProps, DataProps } from "../../helpers/common-props"; const fallbackProps = { @@ -54,8 +53,7 @@ class VictoryScatter extends React.Component { static getDomain = Domain.getDomain.bind(Domain); static getData = Data.getData.bind(Data); - static getBaseProps = partialRight( - ScatterHelpers.getBaseProps.bind(ScatterHelpers), fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/components/victory-voronoi/victory-voronoi.js b/src/components/victory-voronoi/victory-voronoi.js index 657c8634..933a37d5 100644 --- a/src/components/victory-voronoi/victory-voronoi.js +++ b/src/components/victory-voronoi/victory-voronoi.js @@ -1,5 +1,4 @@ import React from "react"; -import { partialRight } from "lodash"; import { PropTypes as CustomPropTypes, Helpers, VictoryLabel, addEvents, VictoryContainer, VictoryTheme, DefaultTransitions, Voronoi, Data, Domain @@ -42,7 +41,7 @@ class VictoryVoronoi extends React.Component { static getDomain = Domain.getDomain.bind(Domain); static getData = Data.getData.bind(Data); - static getBaseProps = partialRight(getBaseProps, fallbackProps); + static getBaseProps = (props) => getBaseProps(props, fallbackProps); static expectedComponents = [ "dataComponent", "labelComponent", "groupComponent", "containerComponent" ]; diff --git a/src/helpers/wrapper.js b/src/helpers/wrapper.js index a07929c3..c4e4df7f 100644 --- a/src/helpers/wrapper.js +++ b/src/helpers/wrapper.js @@ -1,5 +1,4 @@ -import { assign, defaults, flatten, isFunction, keys, partialRight, uniq, - some, sortBy } from "lodash"; +import { assign, defaults, flatten, isFunction, keys, uniq, some, sortBy } from "lodash"; import React from "react"; import Axis from "./axis"; import { Style, Transitions, Collection, Data, Domain, Events } from "victory-core"; @@ -122,7 +121,7 @@ export default { state, (newState) => this.setState(newState) ); - getTransitions = partialRight(getTransitionProps, index); + getTransitions = (childComponent) => getTransitionProps(childComponent, index); } return defaults({ getTransitions, parentState }, props.animate, child.props.animate); }, From 0b388610cdf78a08bd7b1b9d44a9d26d16b68461 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 20 Apr 2018 14:51:05 -0700 Subject: [PATCH 3/6] fix labels in events demo --- demo/components/events-demo.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demo/components/events-demo.js b/demo/components/events-demo.js index 56769848..797b14e0 100644 --- a/demo/components/events-demo.js +++ b/demo/components/events-demo.js @@ -114,6 +114,7 @@ class App extends React.Component { }]} > null} style={{ data: { width: 15, fill: "green" } }} data={[ { x: 1, y: 1 }, @@ -174,7 +175,7 @@ class App extends React.Component { ]} > - + null}/> Date: Fri, 20 Apr 2018 14:53:43 -0700 Subject: [PATCH 4/6] replace sortBy with orderBy --- src/components/victory-boxplot/helper-methods.js | 6 +++--- src/components/victory-candlestick/helper-methods.js | 4 ++-- src/components/victory-errorbar/helper-methods.js | 4 ++-- src/helpers/axis.js | 4 ++-- src/helpers/wrapper.js | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/victory-boxplot/helper-methods.js b/src/components/victory-boxplot/helper-methods.js index a7c87426..dd266f4f 100644 --- a/src/components/victory-boxplot/helper-methods.js +++ b/src/components/victory-boxplot/helper-methods.js @@ -1,4 +1,4 @@ -import { sortBy, defaults, assign, uniq, groupBy, keys, isEmpty } from "lodash"; +import { orderBy, defaults, assign, uniq, groupBy, keys, isEmpty } from "lodash"; import { Helpers, Scale, Domain, Data, Collection } from "victory-core"; import { min as d3Min, max as d3Max, quantile as d3Quantile } from "d3-array"; @@ -66,7 +66,7 @@ const processData = (props, data) => { the depedentVarArray and process each datum separately */ return data.map((datum) => { const dataArray = datum[sortKey].map((d) => assign({}, datum, { [sortKey]: d })); - const sortedData = sortBy(dataArray, sortKey); + const sortedData = orderBy(dataArray, sortKey); return getSummaryStatistics(sortedData, horizontal); }); } else { @@ -74,7 +74,7 @@ const processData = (props, data) => { const groupedData = groupBy(data, groupKey); return keys(groupedData).map((key) => { const datum = groupedData[key]; - const sortedData = sortBy(datum, sortKey); + const sortedData = orderBy(datum, sortKey); return getSummaryStatistics(sortedData, horizontal); }); } diff --git a/src/components/victory-candlestick/helper-methods.js b/src/components/victory-candlestick/helper-methods.js index df57879a..965ce055 100644 --- a/src/components/victory-candlestick/helper-methods.js +++ b/src/components/victory-candlestick/helper-methods.js @@ -1,4 +1,4 @@ -import { assign, sortBy } from "lodash"; +import { assign, orderBy } from "lodash"; import { Helpers, LabelHelpers, Scale, Domain, Data } from "victory-core"; const sortData = (dataset, sortKey, sortOrder = "ascending") => { @@ -10,7 +10,7 @@ const sortData = (dataset, sortKey, sortOrder = "ascending") => { sortKey = `_${sortKey}`; } - const sortedData = sortBy(dataset, sortKey); + const sortedData = orderBy(dataset, sortKey); if (sortOrder === "descending") { return sortedData.reverse(); diff --git a/src/components/victory-errorbar/helper-methods.js b/src/components/victory-errorbar/helper-methods.js index f7acfcd8..80faff9a 100644 --- a/src/components/victory-errorbar/helper-methods.js +++ b/src/components/victory-errorbar/helper-methods.js @@ -1,4 +1,4 @@ -import { assign, flatten, sortBy } from "lodash"; +import { assign, flatten, orderBy } from "lodash"; import { Helpers, LabelHelpers, Scale, Domain, Data } from "victory-core"; const getErrors = (datum, scale, axis) => { @@ -30,7 +30,7 @@ const sortData = (dataset, sortKey, sortOrder = "ascending") => { sortKey = `_${sortKey}`; } - const sortedData = sortBy(dataset, sortKey); + const sortedData = orderBy(dataset, sortKey); if (sortOrder === "descending") { return sortedData.reverse(); diff --git a/src/helpers/axis.js b/src/helpers/axis.js index 409ff687..fb83023b 100644 --- a/src/helpers/axis.js +++ b/src/helpers/axis.js @@ -1,6 +1,6 @@ import { Collection } from "victory-core"; import { - identity, isFunction, invert, uniq, range, sortBy, values, includes, without + identity, isFunction, invert, uniq, range, orderBy, values, includes, without } from "lodash"; import React from "react"; @@ -167,7 +167,7 @@ export default { return this.stringTicks(props) ? (x, index) => tickValues[index] : fallbackFormat; } else { const invertedStringMap = stringMap && invert(stringMap); - const tickValueArray = sortBy(values(stringMap), (n) => n); + const tickValueArray = orderBy(values(stringMap), (n) => n); const dataNames = tickValueArray.map((tick) => invertedStringMap[tick]); // string ticks should have one tick of padding at the beginning const dataTicks = ["", ...dataNames, ""]; diff --git a/src/helpers/wrapper.js b/src/helpers/wrapper.js index c4e4df7f..9ea1fd02 100644 --- a/src/helpers/wrapper.js +++ b/src/helpers/wrapper.js @@ -1,4 +1,4 @@ -import { assign, defaults, flatten, isFunction, keys, uniq, some, sortBy } from "lodash"; +import { assign, defaults, flatten, isFunction, keys, uniq, some, orderBy } from "lodash"; import React from "react"; import Axis from "./axis"; import { Style, Transitions, Collection, Data, Domain, Events } from "victory-core"; @@ -218,7 +218,7 @@ export default { return prev; }, {}); const xKeys = keys(xMap).map((k) => +k); - const xArr = sortBy(xKeys); + const xArr = orderBy(xKeys); return datasets.map((dataset) => { let indexOffset = 0; From 548c901733b6cafc656db4ef98aa00c70d348b96 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 20 Apr 2018 15:20:30 -0700 Subject: [PATCH 5/6] fix specs --- .../victory-scatter/helper-methods.js | 2 +- .../victory-axis/helper-methods.spec.js | 39 +++++++------------ .../victory-scatter/helper-methods.spec.js | 37 +++++++++--------- 3 files changed, 34 insertions(+), 44 deletions(-) diff --git a/src/components/victory-scatter/helper-methods.js b/src/components/victory-scatter/helper-methods.js index 81da9204..df9de28b 100644 --- a/src/components/victory-scatter/helper-methods.js +++ b/src/components/victory-scatter/helper-methods.js @@ -97,4 +97,4 @@ const getBaseProps = (props, fallbackProps) => { }, initialChildProps); }; -export { getBaseProps }; +export { getBaseProps, getSize, getBubbleSize, getSymbol }; diff --git a/test/client/spec/components/victory-axis/helper-methods.spec.js b/test/client/spec/components/victory-axis/helper-methods.spec.js index b29a1282..7e060b99 100644 --- a/test/client/spec/components/victory-axis/helper-methods.spec.js +++ b/test/client/spec/components/victory-axis/helper-methods.spec.js @@ -1,6 +1,6 @@ /* eslint no-unused-expressions: 0 */ /* global sinon */ -import AxisHelpers from "src/components/victory-axis/helper-methods"; +import { getDomain, getScale, getAxis } from "src/components/victory-axis/helper-methods"; import { Helpers, Domain, Scale } from "victory-core"; describe("victory-axis/helper-methods", () => { @@ -9,8 +9,6 @@ describe("victory-axis/helper-methods", () => { beforeEach(() => { sandbox = sinon.sandbox.create(); sandbox.spy(Domain, "getDomainFromTickValues"); - const fakeGetAxis = () => "x"; - sandbox.stub(AxisHelpers, "getAxis", fakeGetAxis); }); afterEach(() => { @@ -19,14 +17,14 @@ describe("victory-axis/helper-methods", () => { it("determines a domain from props", () => { const props = { domain: [1, 2] }; - const domainResult = AxisHelpers.getDomain(props); + const domainResult = getDomain(props); expect(Domain.getDomainFromTickValues).notCalled; expect(domainResult).to.eql([1, 2]); }); it("calculates a domain from tickValues", () => { const props = { tickValues: [1, 2, 3, 4] }; - const domainResult = AxisHelpers.getDomain(props); + const domainResult = getDomain(props); expect(Domain.getDomainFromTickValues).calledWith(props) .and.returned([1, 4]); expect(domainResult).to.eql([1, 4]); @@ -34,38 +32,36 @@ describe("victory-axis/helper-methods", () => { it("does not calculate a domain from too few tick values", () => { const props = { tickValues: [0] }; - const domainResult = AxisHelpers.getDomain(props); + const domainResult = getDomain(props); expect(Domain.getDomainFromTickValues).not.called; expect(domainResult).to.equal(undefined); }); it("returns undefined if the given axis doesn't match this axis", () => { const props = { domain: [1, 3] }; - const domainResultX = AxisHelpers.getDomain(props, "x"); - expect(AxisHelpers.getAxis).calledWith(props).and.returned("x"); + const domainResultX = getDomain(props, "x"); expect(domainResultX).to.eql([1, 3]); - const domainResultY = AxisHelpers.getDomain(props, "y"); - expect(AxisHelpers.getAxis).calledWith(props).and.returned("x"); + const domainResultY = getDomain(props, "y"); expect(domainResultY).to.be.undefined; }); }); describe("getAxis", () => { it("determines the axis based on orientation prop", () => { - expect(AxisHelpers.getAxis({ orientation: "top" })).to.equal("x"); - expect(AxisHelpers.getAxis({ orientation: "bottom" })).to.equal("x"); - expect(AxisHelpers.getAxis({ orientation: "left" })).to.equal("y"); - expect(AxisHelpers.getAxis({ orientation: "right" })).to.equal("y"); + expect(getAxis({ orientation: "top" })).to.equal("x"); + expect(getAxis({ orientation: "bottom" })).to.equal("x"); + expect(getAxis({ orientation: "left" })).to.equal("y"); + expect(getAxis({ orientation: "right" })).to.equal("y"); }); it("determines the axis based on type (dependent / independent)", () => { - expect(AxisHelpers.getAxis({ dependentAxis: true })).to.equal("y"); - expect(AxisHelpers.getAxis({})).to.equal("x"); + expect(getAxis({ dependentAxis: true })).to.equal("y"); + expect(getAxis({})).to.equal("x"); }); it("determines the axis based on type when flipped", () => { - expect(AxisHelpers.getAxis({ dependentAxis: true }, true)).to.equal("x"); - expect(AxisHelpers.getAxis({}, true)).to.equal("y"); + expect(getAxis({ dependentAxis: true }, true)).to.equal("x"); + expect(getAxis({}, true)).to.equal("y"); }); }); @@ -73,9 +69,6 @@ describe("victory-axis/helper-methods", () => { let sandbox; beforeEach(() => { sandbox = sinon.sandbox.create(); - sandbox.spy(AxisHelpers, "getDomain"); - const fakeGetAxis = () => "x"; - sandbox.stub(AxisHelpers, "getAxis", fakeGetAxis); sandbox.spy(Scale, "getBaseScale"); const fakeGetRange = () => [0, 100]; sandbox.stub(Helpers, "getRange", fakeGetRange); @@ -87,10 +80,8 @@ describe("victory-axis/helper-methods", () => { it("returns a scale", () => { const props = { domain: [0, 10] }; - const scaleResult = AxisHelpers.getScale(props); - expect(AxisHelpers.getAxis).calledWith(props).and.returned("x"); + const scaleResult = getScale(props); expect(Scale.getBaseScale).calledWith(props, "x"); - expect(AxisHelpers.getDomain).calledWith(props).and.returned([0, 10]); expect(Helpers.getRange).calledWith(props, "x").and.returned([0, 100]); expect(scaleResult.domain()).to.eql([0, 10]); expect(scaleResult.range()).to.eql([0, 100]); diff --git a/test/client/spec/components/victory-scatter/helper-methods.spec.js b/test/client/spec/components/victory-scatter/helper-methods.spec.js index eeb7be10..b47da53b 100644 --- a/test/client/spec/components/victory-scatter/helper-methods.spec.js +++ b/test/client/spec/components/victory-scatter/helper-methods.spec.js @@ -1,44 +1,43 @@ /* eslint no-unused-expressions: 0 */ /* global sinon */ -import Helpers from "src/components/victory-scatter/helper-methods"; +import { getSize, getBubbleSize, getSymbol } from "src/components/victory-scatter/helper-methods"; describe("victory-scatter/helper-methods", () => { describe("getSize", () => { let sandbox; beforeEach(() => { sandbox = sinon.sandbox.create(); - const fakeBubbleSize = (data, props) => data[props.z]; - sandbox.stub(Helpers, "getBubbleSize", fakeBubbleSize); + sandbox.spy(getBubbleSize); }); afterEach(() => { sandbox.restore(); }); - const data = { x: 1, y: 2, t: 4, z: 5 }; + const data = [{ x: 1, y: 2, z: 1, t: 4 }, { x: 2, y: 3, z: 1, t: 2 }]; + const datum = data[0]; it("returns a size attribute from data", () => { - const point = { size: 3, ...data }; - const sizeResult = Helpers.getSize(point, {}); - expect(Helpers.getBubbleSize).notCalled; + const point = { size: 3, ...datum }; + const sizeResult = getSize(point, {}); + expect(getBubbleSize).notCalled; expect(sizeResult).to.equal(3); }); it("returns 1 if the size attribute is less than one", () => { - const point = { size: -2, ...data }; - const sizeResult = Helpers.getSize(point, {}); - expect(Helpers.getBubbleSize).notCalled; + const point = { size: -2, ...datum }; + const sizeResult = getSize(point, {}); + expect(getBubbleSize).notCalled; expect(sizeResult).to.equal(1); }); it("returns size from props, if no size is set on data", () => { - const sizeResult = Helpers.getSize(data, { data, size: 2 }); - expect(Helpers.getBubbleSize).notCalled; + const sizeResult = getSize(datum, { data, size: 2 }); + expect(getBubbleSize).notCalled; expect(sizeResult).to.equal(2); }); it("calculates a bubbleSize if a bubbleProperty is specified, and size is not set", () => { - const sizeResult = Helpers.getSize(data, { data, z: "t" }); - expect(Helpers.getBubbleSize).calledWith(data, { data, z: "t" }); - expect(sizeResult).to.equal(4); + const sizeResult = getSize(datum, { data, z: "t" }); + expect(sizeResult).to.equal(5); }); }); @@ -46,7 +45,7 @@ describe("victory-scatter/helper-methods", () => { it("determines the size of a point", () => { const data = [{ x: 1, y: 2, z: 5 }, { x: 2, y: 3, z: 1 }]; const props = { data, z: "z" }; - const sizeResult = Helpers.getBubbleSize(data[0], props); + const sizeResult = getBubbleSize(data[0], props); expect(sizeResult).to.equal(5); }); }); @@ -55,17 +54,17 @@ describe("victory-scatter/helper-methods", () => { const data = { symbol: "star" }; const props = { symbol: "plus" }; it("returns 'circle' for bubble plots", () => { - const symbolResult = Helpers.getSymbol({}, { ...props, bubbleProperty: "z" }); + const symbolResult = getSymbol({}, { ...props, bubbleProperty: "z" }); expect(symbolResult).to.equal("circle"); }); it("returns a symbol from data if one is given", () => { - const symbolResult = Helpers.getSymbol(data, props); + const symbolResult = getSymbol(data, props); expect(symbolResult).to.equal("star"); }); it("returns a symbol from props if no symbol is found on data", () => { - const symbolResult = Helpers.getSymbol({}, props); + const symbolResult = getSymbol({}, props); expect(symbolResult).to.equal("plus"); }); }); From def28e7e2d60e6cf096979e2e1ca804850141292 Mon Sep 17 00:00:00 2001 From: boygirl Date: Fri, 20 Apr 2018 15:41:34 -0700 Subject: [PATCH 6/6] remove defaultsDeep --- src/components/victory-axis/helper-methods.js | 18 +++++++++++------- .../victory-polar-axis/helper-methods.js | 18 +++++++++++------- 2 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/victory-axis/helper-methods.js b/src/components/victory-axis/helper-methods.js index 671a5c8d..f358caf6 100644 --- a/src/components/victory-axis/helper-methods.js +++ b/src/components/victory-axis/helper-methods.js @@ -1,4 +1,4 @@ -import { assign, defaults, defaultsDeep, isFunction } from "lodash"; +import { assign, defaults, isFunction } from "lodash"; import Axis from "../../helpers/axis"; import { Helpers, Scale, Domain } from "victory-core"; @@ -69,12 +69,16 @@ const getStyleObject = (props) => { const axisType = dependentAxis ? "dependentAxis" : "independentAxis"; const specificAxisStyle = theme && theme[axisType] && theme[axisType].style; - return generalAxisStyle && specificAxisStyle - ? defaultsDeep({}, - specificAxisStyle, - generalAxisStyle - ) - : specificAxisStyle || generalAxisStyle; + const mergeStyles = () => { + const styleNamespaces = ["axis", "axisLabel", "grid", "parent", "tickLabels", "ticks"]; + return styleNamespaces.reduce((memo, curr) => { + memo[curr] = defaults({}, specificAxisStyle[curr], generalAxisStyle[curr]); + return memo; + }, {}); + }; + + return generalAxisStyle && specificAxisStyle ? + mergeStyles() : specificAxisStyle || generalAxisStyle; }; const getStyles = (props, styleObject) => { diff --git a/src/components/victory-polar-axis/helper-methods.js b/src/components/victory-polar-axis/helper-methods.js index 2e1b223d..5b2b93fc 100644 --- a/src/components/victory-polar-axis/helper-methods.js +++ b/src/components/victory-polar-axis/helper-methods.js @@ -1,4 +1,4 @@ -import { assign, uniqBy, defaults, defaultsDeep, isFunction } from "lodash"; +import { assign, uniqBy, defaults, isFunction } from "lodash"; import Axis from "../../helpers/axis"; import { Helpers, LabelHelpers, Scale, Domain, Collection } from "victory-core"; @@ -82,12 +82,16 @@ const getStyleObject = (props) => { const axisType = dependentAxis ? "dependentAxis" : "independentAxis"; const specificAxisStyle = theme && theme[axisType] && theme[axisType].style; - return generalAxisStyle && specificAxisStyle - ? defaultsDeep({}, - specificAxisStyle, - generalAxisStyle - ) - : specificAxisStyle || generalAxisStyle; + const mergeStyles = () => { + const styleNamespaces = ["axis", "axisLabel", "grid", "parent", "tickLabels", "ticks"]; + return styleNamespaces.reduce((memo, curr) => { + memo[curr] = defaults({}, specificAxisStyle[curr], generalAxisStyle[curr]); + return memo; + }, {}); + }; + + return generalAxisStyle && specificAxisStyle ? + mergeStyles() : specificAxisStyle || generalAxisStyle; }; const getRadius = (props) => {