-
Notifications
You must be signed in to change notification settings - Fork 525
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.
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
VictoryChart: adds an option for adding background for chart area #1558
Changes from 17 commits
4a339c8
26554d9
f41363a
6c6253a
5fdf2cf
1856706
0493017
e0e0f1f
fc8cf42
0142050
ce270ae
8ddb47c
95cd939
f0c280e
1e824ec
bdd6128
a28aa7d
226d9a2
6e0f1b3
ee88dbd
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -36,6 +36,37 @@ function getAxisProps(child, props, calculatedProps) { | |
}; | ||
} | ||
|
||
function getBackgroundWithProps(props, calculatedProps) { | ||
const backgroundElement = props.backgroundComponent; | ||
|
||
const height = props.polar | ||
? calculatedProps.range.y[1] | ||
: calculatedProps.range.y[0] - calculatedProps.range.y[1]; | ||
const width = calculatedProps.range.x[1] - calculatedProps.range.x[0]; | ||
|
||
const xScale = props.horizontal | ||
? calculatedProps.scale.y.range()[0] | ||
: calculatedProps.scale.x.range()[0]; | ||
const yScale = props.horizontal | ||
? calculatedProps.scale.x.range()[1] | ||
: calculatedProps.scale.y.range()[1]; | ||
|
||
const xCoordinate = props.polar ? calculatedProps.origin.x : xScale; | ||
const yCoordinate = props.polar ? calculatedProps.origin.y : yScale; | ||
|
||
const backgroundProps = { | ||
height, | ||
polar: props.polar, | ||
scale: calculatedProps.scale, | ||
style: props.style.background, | ||
x: xCoordinate, | ||
y: yCoordinate, | ||
width | ||
}; | ||
|
||
return React.cloneElement(backgroundElement, backgroundProps); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should use lodash Like imagine the following scenario where a user wants the background to span the whole height of the svg but be confined to the chart width:
The I think the props should be There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh great point |
||
} | ||
|
||
function getChildProps(child, props, calculatedProps) { | ||
const axisChild = Axis.findAxisComponents([child]); | ||
if (axisChild.length > 0) { | ||
|
@@ -47,6 +78,7 @@ function getChildProps(child, props, calculatedProps) { | |
|
||
function getStyles(props) { | ||
const styleProps = props.style && props.style.parent; | ||
|
||
return { | ||
parent: defaults({}, styleProps, { | ||
height: "100%", | ||
|
@@ -129,6 +161,7 @@ function getChildren(props, childComponents, calculatedProps) { | |
const { height, polar, theme, width } = props; | ||
const { origin, horizontal } = calculatedProps; | ||
const parentName = props.name || "chart"; | ||
|
||
return childComponents.map((child, index) => { | ||
const role = child.type && child.type.role; | ||
const style = Array.isArray(child.props.style) | ||
|
@@ -158,21 +191,24 @@ function getChildren(props, childComponents, calculatedProps) { | |
|
||
const getChildComponents = (props, defaultAxes) => { | ||
const childComponents = React.Children.toArray(props.children); | ||
if (childComponents.length === 0) { | ||
return [defaultAxes.independent, defaultAxes.dependent]; | ||
} | ||
let newChildComponents = [...childComponents]; | ||
|
||
const axisComponents = { | ||
dependent: Axis.getAxisComponentsWithParent(childComponents, "dependent"), | ||
independent: Axis.getAxisComponentsWithParent(childComponents, "independent") | ||
}; | ||
if (childComponents.length === 0) { | ||
newChildComponents.push(defaultAxes.independent, defaultAxes.dependent); | ||
} else { | ||
const axisComponents = { | ||
dependent: Axis.getAxisComponentsWithParent(childComponents, "dependent"), | ||
independent: Axis.getAxisComponentsWithParent(childComponents, "independent") | ||
}; | ||
|
||
if (axisComponents.dependent.length === 0 && axisComponents.independent.length === 0) { | ||
return props.prependDefaultAxes | ||
? [defaultAxes.independent, defaultAxes.dependent].concat(childComponents) | ||
: childComponents.concat([defaultAxes.independent, defaultAxes.dependent]); | ||
if (axisComponents.dependent.length === 0 && axisComponents.independent.length === 0) { | ||
newChildComponents = props.prependDefaultAxes | ||
? [defaultAxes.independent, defaultAxes.dependent].concat(newChildComponents) | ||
: newChildComponents.concat([defaultAxes.independent, defaultAxes.dependent]); | ||
} | ||
} | ||
return childComponents; | ||
|
||
return newChildComponents; | ||
}; | ||
|
||
const getDomain = (props, axis, childComponents) => { | ||
|
@@ -252,4 +288,4 @@ const createStringMap = (props, childComponents) => { | |
return { x, y }; | ||
}; | ||
|
||
export { getChildren, getCalculatedProps, getChildComponents }; | ||
export { getBackgroundWithProps, getChildren, getCalculatedProps, getChildComponents }; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,31 +1,32 @@ | ||
import * as React from "react"; | ||
import { | ||
CategoryPropType, | ||
EventPropTypeInterface, | ||
DomainPropType, | ||
EventPropTypeInterface, | ||
StringOrNumberOrCallback, | ||
VictoryCommonProps, | ||
VictoryStyleInterface | ||
VictoryStyleInterface, | ||
VictoryStyleObject | ||
} from "victory-core"; | ||
|
||
export type AxesType = { | ||
independent?: React.ReactElement; | ||
dependent?: React.ReactElement; | ||
independent?: React.ReactElement; | ||
}; | ||
|
||
export interface VictoryChartProps extends VictoryCommonProps { | ||
defaultAxes?: AxesType; | ||
defaultPolarAxes?: AxesType; | ||
categories?: CategoryPropType; | ||
children?: React.ReactNode | React.ReactNode[]; | ||
defaultAxes?: AxesType; | ||
defaultPolarAxes?: AxesType; | ||
domain?: DomainPropType; | ||
endAngle?: number; | ||
events?: EventPropTypeInterface<string, string[] | number[] | string | number>[]; | ||
eventKey?: StringOrNumberOrCallback; | ||
events?: EventPropTypeInterface<string, string[] | number[] | string | number>[]; | ||
innerRadius?: number; | ||
prependDefaultAxes?: boolean; | ||
startAngle?: number; | ||
style?: Pick<VictoryStyleInterface, "parent">; | ||
style?: Pick<VictoryStyleInterface, "parent"> & { background?: VictoryStyleObject }; | ||
} | ||
|
||
export class VictoryChart extends React.Component<VictoryChartProps, any> {} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,6 +7,7 @@ export { default as VictoryTheme } from "./victory-theme/victory-theme"; | |
export { default as VictoryPortal } from "./victory-portal/victory-portal"; | ||
export { default as Portal } from "./victory-portal/portal"; | ||
export { default as Arc } from "./victory-primitives/arc"; | ||
export { default as Background } from "./victory-primitives/background"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The main |
||
export { default as Border, default as Box } from "./victory-primitives/border"; | ||
export { default as ClipPath } from "./victory-primitives/clip-path"; | ||
export { default as LineSegment } from "./victory-primitives/line-segment"; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from "react"; | ||
import PropTypes from "prop-types"; | ||
import CommonProps from "../victory-util/common-props"; | ||
import Rect from "./rect"; | ||
import Circle from "./circle"; | ||
|
||
const Background = (props) => { | ||
return props.polar | ||
? React.cloneElement(props.circleComponent, { | ||
...props.events, | ||
style: props.style, | ||
role: props.role, | ||
shapeRendering: props.shapeRendering, | ||
cx: props.x, | ||
cy: props.y, | ||
r: props.height | ||
}) | ||
: React.cloneElement(props.rectComponent, { | ||
...props.events, | ||
style: props.style, | ||
role: props.role, | ||
shapeRendering: props.shapeRendering, | ||
x: props.x, | ||
y: props.y, | ||
width: props.width, | ||
height: props.height | ||
}); | ||
}; | ||
|
||
Background.propTypes = { | ||
...CommonProps.primitiveProps, | ||
circleComponent: PropTypes.element, | ||
height: PropTypes.number, | ||
rectComponent: PropTypes.element, | ||
width: PropTypes.number, | ||
x: PropTypes.number, | ||
wsparsons marked this conversation as resolved.
Show resolved
Hide resolved
|
||
y: PropTypes.number | ||
}; | ||
|
||
Background.defaultProps = { | ||
circleComponent: <Circle />, | ||
rectComponent: <Rect />, | ||
role: "presentation", | ||
shapeRendering: "auto" | ||
}; | ||
|
||
export default Background; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add
scale
to the list of backgroundProps.