Created
May 31, 2016 19:22
-
-
Save boygirl/367b76ab7d6144f43ce3e6a5228fde40 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<VictorySharedEvents | |
events={[ | |
{ | |
childName: "firstBar", // if a child name is not provided, event will be attached to all children. | |
target: "data", // what type of element to attach to. Matches the style namespaces | |
eventKey: 1, // What event key of element to attach to. Defaults to the index in data. | |
eventHandlers: { | |
onClick: () => { | |
return { | |
childName: "secondBar", // the child to be modified | |
// props here are the props that define the targeted component i.e. what is passed to an individual bar | |
mutation: (props) => { | |
return {style: merge({}, props.style, {fill: "blue"})}; // Whatever is returned here will override the existing props | |
} | |
}; | |
} | |
} | |
}, { | |
childName: "secondBar", | |
target: "data", | |
eventKey: 0, | |
eventHandlers: { | |
onClick: () => { // event handlers can return an array of mutation objects with different targeted elements | |
return [ | |
{ | |
childName: "firstBar", | |
mutation: (props) => { | |
return {style: merge({}, props.style, {fill: "cyan"})}; | |
} | |
}, { | |
mutation: (props) => { // the default target element is whatever element the handler is attached to | |
return {style: merge({}, props.style, {fill: "orange"})}; | |
} | |
}, { | |
target: "labels", | |
eventKey: 1, | |
mutation: () => { | |
return {text: "CLICKED"}; | |
} | |
} | |
]; | |
} | |
} | |
} | |
]} | |
> | |
<VictoryBar | |
name="firstBar" // if children don't have name props they can be referenced by index in shared events | |
style={{ | |
data: {width: 25, fill: "gold"} | |
}} | |
data={[{x: "a", y: 2}, {x: "b", y: 3}, {x: "c", y: 4}]} | |
/> | |
<VictoryBar | |
name="secondBar" | |
data={[{x: "a", y: 2}, {x: "b", y: 3}, {x: "c", y: 4}]} | |
/> | |
</VictorySharedEvents> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment