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

Jump to bottom

Improvement/functional-props #1360

Merged
merged 15 commits into from
Aug 6, 2019
Merged

Improvement/functional-props #1360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5a0f4a5
pass all props into style and prop evaluation
boygirl Jul 27, 2019
5b78f2b
clean up todo comments
boygirl Jul 27, 2019
dec7af3
lint
boygirl Jul 27, 2019
d5f1001
update function prop syntax in demos
boygirl Jul 30, 2019
efce226
update function prop syntax in demos
boygirl Jul 30, 2019
7b13573
ensure label props are passed to multipoint voronoi labels
boygirl Jul 30, 2019
656425e
correct label props for cursor and voronoi
boygirl Jul 30, 2019
94a8a52
update stories
boygirl Aug 2, 2019
dfa2e4c
merge upstream
boygirl Aug 2, 2019
7a52291
clean up stories
boygirl Aug 5, 2019
a32ea5a
evaluate axis styles with more props
boygirl Aug 5, 2019
eb09855
supply tick and tickValue to functional styles
boygirl Aug 5, 2019
2078e2d
update functional style story
boygirl Aug 5, 2019
e90e281
minor clean up
boygirl Aug 5, 2019
145bc6d
lint
boygirl Aug 5, 2019
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
38 changes: 19 additions & 19 deletions demo/components/create-container-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const Charts = ({ behaviors }) => {
containerComponent={
<CustomContainer
voronoiDimension="x"
labels={(d) => `y: ${d.y}`}
labels={({ datum }) => `y: ${datum.y}`}
labelComponent={<VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />}
selectedDomain={{ x: [1.5, 2] }}
/>
Expand Down Expand Up @@ -70,7 +70,7 @@ const Charts = ({ behaviors }) => {
style={{
data: {
stroke: "tomato",
strokeWidth: (d, active) => (active ? 4 : 2)
strokeWidth: ({ active }) => (active ? 4 : 2)
},
labels: { fill: "tomato" }
}}
Expand All @@ -85,7 +85,7 @@ const Charts = ({ behaviors }) => {
style={{
data: {
stroke: "blue",
strokeWidth: (d, active) => (active ? 4 : 2)
strokeWidth: ({ active }) => (active ? 4 : 2)
},
labels: { fill: "blue" }
}}
Expand All @@ -96,7 +96,7 @@ const Charts = ({ behaviors }) => {
style={{
data: {
stroke: "black",
strokeWidth: (d, active) => (active ? 4 : 2)
strokeWidth: ({ active }) => (active ? 4 : 2)
},
labels: { fill: "black" }
}}
Expand All @@ -108,8 +108,8 @@ const Charts = ({ behaviors }) => {
style={{ parent: chartStyle.parent }}
containerComponent={
<CustomContainer
labels={(d) => round(d.x, 2)}
cursorLabel={(d) => round(d.x, 2)}
labels={({ datum }) => round(datum.x, 2)}
cursorLabel={({ datum }) => round(datum.x, 2)}
selectionStyle={{
stroke: "tomato",
strokeWidth: 2,
Expand All @@ -124,10 +124,10 @@ const Charts = ({ behaviors }) => {
<VictoryScatter
style={{
data: {
fill: (datum, active) => (active ? "tomato" : "black")
fill: ({ active }) => (active ? "tomato" : "black")
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
y={(d) => d.x * d.x}
/>
</VictoryChart>
Expand All @@ -142,8 +142,8 @@ const Charts = ({ behaviors }) => {
style={{
data: { fill: "tomato" }
}}
size={(datum, active) => (active ? 5 : 3)}
labels={(d) => d.y}
size={({ active }) => (active ? 5 : 3)}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
data={[
{ x: 1, y: -5 },
Expand All @@ -159,8 +159,8 @@ const Charts = ({ behaviors }) => {
style={{
data: { fill: "blue" }
}}
size={(datum, active) => (active ? 5 : 3)}
labels={(d) => d.y}
size={({ active }) => (active ? 5 : 3)}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
data={[
{ x: 1, y: -3 },
Expand All @@ -182,9 +182,9 @@ const Charts = ({ behaviors }) => {
{ x: 6, y: 3 },
{ x: 7, y: -3 }
]}
labels={(d) => d.y}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
/>
</VictoryGroup>
</VictoryChart>
Expand All @@ -198,11 +198,11 @@ const Charts = ({ behaviors }) => {
style={{
data: {
fill: "tomato",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -5 },
{ x: 2, y: 4 },
Expand All @@ -217,11 +217,11 @@ const Charts = ({ behaviors }) => {
style={{
data: {
fill: "orange",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -3 },
{ x: 2, y: 5 },
Expand All @@ -236,7 +236,7 @@ const Charts = ({ behaviors }) => {
style={{
data: {
fill: "gold",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
Expand Down
14 changes: 7 additions & 7 deletions demo/components/debug-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class App extends React.Component {
containerComponent={<VictoryVoronoiContainer labels={() => "HELLO"} />}
>
<VictoryBar
style={{ data: { fill: (d, a) => (a ? "red" : "black") } }}
style={{ data: { fill: ({ active }) => (active ? "red" : "black") } }}
data={[
{ x: 0, y: 3.5, y0: 2.5 },
{ x: 0, y: 11, y0: 5 },
Expand All @@ -70,7 +70,7 @@ class App extends React.Component {
]}
/>
<VictoryScatter
style={{ data: { fill: (d, a) => (a ? "black" : "red") } }}
style={{ data: { fill: ({ active }) => (active ? "black" : "red") } }}
data={[
{ x: 0, y: 3.5 },
{ x: 0, y: 11 },
Expand Down Expand Up @@ -100,11 +100,11 @@ class App extends React.Component {
style={{
data: {
fill: "tomato",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -5 },
{ x: 2, y: 4 },
Expand All @@ -119,11 +119,11 @@ class App extends React.Component {
style={{
data: {
fill: "orange",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -3 },
{ x: 2, y: 5 },
Expand All @@ -138,7 +138,7 @@ class App extends React.Component {
style={{
data: {
fill: "gold",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
Expand Down
4 changes: 2 additions & 2 deletions demo/components/draggable-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ class App extends React.Component {
onBrushDomainChange={this.onDomainChange.bind(this)}
brushStyle={{
fill: "skyBlue",
opacity: (d, a) => (a ? 1 : 0.5)
opacity: ({ active }) => (active ? 1 : 0.5)
}}
/>
}
Expand All @@ -174,7 +174,7 @@ class App extends React.Component {
style={{
data: {
fill: "skyBlue",
opacity: (d, a) => (a ? 1 : 0.5),
opacity: ({ active }) => (active ? 1 : 0.5),
cursor: "move"
}
}}
Expand Down
8 changes: 4 additions & 4 deletions demo/components/external-events-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,11 +212,11 @@ class App extends React.Component {
style={{
data: {
fill: "tomato",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -5 },
{ x: 2, y: 4 },
Expand All @@ -231,11 +231,11 @@ class App extends React.Component {
style={{
data: {
fill: "orange",
stroke: (d, active) => (active ? "black" : "none"),
stroke: ({ active }) => (active ? "black" : "none"),
strokeWidth: 2
}
}}
size={(datum, active) => (active ? 5 : 3)}
size={({ active }) => (active ? 5 : 3)}
data={[
{ x: 1, y: -3 },
{ x: 2, y: 5 },
Expand Down
5 changes: 4 additions & 1 deletion demo/components/group-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,10 @@ class App extends React.Component {
<VictoryChart style={chartStyle}>
<VictoryGroup y={(data) => Math.sin(2 * Math.PI * data.x)}>
<VictoryLine />
<VictoryVoronoi labelComponent={<VictoryTooltip />} labels={(d) => d.y} />
<VictoryVoronoi
labelComponent={<VictoryTooltip />}
labels={({ datum }) => datum.y}
/>
</VictoryGroup>
</VictoryChart>
</div>
Expand Down
33 changes: 19 additions & 14 deletions demo/components/immutable-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,10 @@ class App extends React.Component {
<VictoryScatter
groupComponent={<VictoryClipContainer />}
data={this.state.scatterData}
style={{ data: { fill: (d) => d.fill, opacity: (d) => d.opacity } }}
style={{ data: {
fill: ({ datum }) => datum.fill,
opacity: ({ datum }) => datum.opacity
} }}
animate={{
onExit: {
duration: 500,
Expand Down Expand Up @@ -287,7 +290,7 @@ class App extends React.Component {

<VictoryLine
style={chartStyle}
labels={(datum) => Math.round(datum.y)}
labels={({ datum }) => Math.round(datum.y)}
data={fromJS([
{ x: new Date(1982, 1, 1), y: 125 },
{ x: new Date(1987, 1, 1), y: 257 },
Expand Down Expand Up @@ -514,7 +517,7 @@ class App extends React.Component {
<VictoryCandlestick
style={chartStyle}
labelComponent={<VictoryTooltip />}
labels={(d) => `hello #${d.x}`}
labels={({ datum }) => `hello #${datum.x}`}
data={fromJS([
{ x: 1, open: 5, close: 10, high: 15, low: 0 },
{ x: 2, open: 15, close: 10, high: 20, low: 5 },
Expand Down Expand Up @@ -633,7 +636,7 @@ class App extends React.Component {
containerComponent={
<VictoryVoronoiContainer
voronoiDimension="x"
labels={(d) => `y:${d.y}`}
labels={({ datum }) => `y:${datum.y}`}
labelComponent={
<VictoryTooltip
y={150}
Expand All @@ -652,7 +655,7 @@ class App extends React.Component {
{ x: 3, y: -2, l: "three" }
])}
style={{
data: { stroke: "tomato", strokeWidth: (d, active) => (active ? 4 : 2) },
data: { stroke: "tomato", strokeWidth: ({ active }) => (active ? 4 : 2) },
labels: { fill: "tomato" }
}}
/>
Expand All @@ -663,7 +666,7 @@ class App extends React.Component {
{ x: 3, y: 3, l: "blue" }
])}
style={{
data: { stroke: "blue", strokeWidth: (d, active) => (active ? 4 : 2) },
data: { stroke: "blue", strokeWidth: ({ active }) => (active ? 4 : 2) },
labels: { fill: "blue" }
}}
/>
Expand All @@ -674,7 +677,7 @@ class App extends React.Component {
{ x: 3, y: -2, l: "bird" }
])}
style={fromJS({
data: { stroke: "black", strokeWidth: (d, active) => (active ? 4 : 2) },
data: { stroke: "black", strokeWidth: ({ active }) => (active ? 4 : 2) },
labels: { fill: "black" }
})}
/>
Expand All @@ -686,7 +689,9 @@ class App extends React.Component {
height={400}
padding={{ top: 100, bottom: 40, left: 50, right: 50 }}
containerComponent={
<VictoryCursorContainer cursorLabel={(d) => `${round(d.x, 2)} , ${round(d.y, 2)}`} />
<VictoryCursorContainer
cursorLabel={({ datum }) => `${round(datum.x, 2)} , ${round(datum.y, 2)}`}
/>
}
>
<VictoryLegend
Expand Down Expand Up @@ -794,24 +799,24 @@ class App extends React.Component {
<VictoryGroup data={fromJS([{ x: 1, y: 5 }, { x: 2, y: 4 }, { x: 3, y: -2 }])}>
<VictoryLine style={{ data: { stroke: "tomato" } }} />
<VictoryScatter
style={{ data: { fill: (d, active) => (active ? "tomato" : "gray") } }}
labels={(d) => d.y}
style={{ data: { fill: ({ active }) => (active ? "tomato" : "gray") } }}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
/>
</VictoryGroup>
<VictoryGroup data={fromJS([{ x: 1, y: -3 }, { x: 2, y: 5 }, { x: 3, y: 3 }])}>
<VictoryLine style={{ data: { stroke: "blue" } }} />
<VictoryScatter
style={{ data: { fill: (d, active) => (active ? "blue" : "gray") } }}
labels={(d) => d.y}
style={{ data: { fill: ({ active }) => (active ? "blue" : "gray") } }}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
/>
</VictoryGroup>
<VictoryGroup data={fromJS([{ x: 1, y: 5 }, { x: 2, y: -4 }, { x: 3, y: -2 }])}>
<VictoryLine style={{ data: { stroke: "black" } }} />
<VictoryScatter
style={{ data: { fill: (d, active) => (active ? "black" : "gray") } }}
labels={(d) => d.y}
style={{ data: { fill: ({ active }) => (active ? "black" : "gray") } }}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
/>
</VictoryGroup>
Expand Down
2 changes: 1 addition & 1 deletion demo/components/performance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ class App extends React.Component {
<VictoryScatter
style={{
data: {
fill: (datum, active) => (active ? "tomato" : "black")
fill: ({ active }) => (active ? "tomato" : "black")
}
}}
data={scatterData}
Expand Down
Loading