External events

[boygirl]

This PR adds support for triggering external events via a prop called externalEventMutations on VictorySharedEvents and components enhanced with the add-events HOC i.e. VictoryBar, VictoryPie etc.

note This feature will require minimal updates to victory-chart and victory-pie repos (adding props). No changes for victory-native will be necessary.

Example Usage:

mutation handlers

removeMutation() {
    this.setState({
      externalMutation: null
    });
  }

  handleClick() {
    const callback = this.removeMutation.bind(this);
    this.setState({
      externalMutation: [{
        childName: "bar",
        target: ["data", "labels"],
        eventKey: "all",
        mutation: (props) => {
          const fill = props.style && props.style.fill;
          return fill === "blue" ?
            { style: Object.assign({}, props.style, { fill: "red" }) } :
            { style: Object.assign({}, props.style, { fill: "blue" }) };
        },
        callback
      }]
    });
  }

clearStyle() {
    this.setState({
      externalMutation: [
        {
          childName: "bar",
          target: "all",
          eventKey: "all",
          mutation: () => ({ style: undefined })
        }
      ]
    });
  }

...
Victory Components

<div>
 <button onClick={this.handleClick.bind(this)}>External Mutation</button>
 <button onClick={this.clearStyle.bind(this)}>Clear Style</button>

 <VictoryChart
  externalEventMutations={this.state.externalMutation}
  events={[
    {
      childName: "bar",
      target: "data",
      eventHandlers: {
        onClick: () => {
          return [
            {
              mutation: () => {
                return { style: { fill: "orange" } };
              }
            }, {
              target: "labels",
              mutation: (props) => {
                return props.text === "clicked" ? { text: "unclicked" } : { text: "clicked" };
              }
            }
          ];
        }
      }
    }
  ]}
>
  <VictoryBar name="bar" style={{ data: { fill: "cyan" } }}/>
</VictoryChart>

</div>

[mbilokonsky]

Thanks! Sorry, @boygirl, I didn't get to take a look at it before you merged, I moved across state lines this weekend and won't have reliable internet until thursday.

[boygirl]

@mbilokonsky good luck on your move! I'm going to complete the release process for this, since It won't be a breaking change anyway. I'll hold off on updating the docs until after the weekend. It would be great if you could kick the tires before then. I'd love to get any changes in before I document this feature.

[mbilokonsky]

will do, thanks!

…

On Tue, Jan 2, 2018 at 5:43 PM Lauren ***@***.***> wrote: @mbilokonsky <https://github.com/mbilokonsky> good luck on your move! I'm going to complete the release process for this, since It won't be a breaking change anyway. I'll hold off on updating the docs until after the weekend. It would be great if you could kick the tires before then. I'd love to get any changes in before I document this feature. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#324 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAk1hSQGfBUZHOcg38k436p1EJbSn1alks5tGrD2gaJpZM4RQM9u> .