Skip to content
This repository has been archived by the owner on Feb 19, 2022. It is now read-only.

Feature/victory minimap #427

Merged
merged 29 commits into from
Jan 31, 2017
Merged

Feature/victory minimap #427

merged 29 commits into from
Jan 31, 2017

Conversation

boygirl
Copy link
Contributor

@boygirl boygirl commented Jan 24, 2017

This PR:

  • Adds VictoryBrushContainer
  • Adds VictoryZoomContainer
  • Deprecates VictoryZoom
  • Changes default styles for VictorySelectionContainer
  • Adds override-able selectionComponent for VictorySelectionContainer
  • Adds domain and standalone to list of props that get stored in parent state
  • Simplifies and standardizes container rendering across components.

Here's an example using VictoryZoomContainer and VictoryBrushContainer:

victory brush and zoom

class App extends React.Component {
  handleZoom(domain) {
    this.setState({selectedDomain: domain});
  }

  handleBrush(domain) {
    this.setState({zoomDomain: domain});
  }

  render() {
    return (
      <div>
        <VictoryChart width={800} height={500} scale={{x: "time"}}
          containerComponent={
            <VictoryZoomContainer responsive={false}
              zoomDomain={this.state.zoomDomain}
              onDomainChange={this.handleZoom.bind(this)}
            />
          }
        >
          <VictoryLine
            style={{
              data: {stroke: "tomato"}
            }}
            data={[
              {x: new Date(1982, 1, 1), y: 125},
              {x: new Date(1987, 1, 1), y: 257},
              {x: new Date(1993, 1, 1), y: 345},
              {x: new Date(1997, 1, 1), y: 515},
              {x: new Date(2001, 1, 1), y: 132},
              {x: new Date(2005, 1, 1), y: 305},
              {x: new Date(2011, 1, 1), y: 270},
              {x: new Date(2015, 1, 1), y: 470}
            ]}
          />

        </VictoryChart>
        <VictoryChart
          padding={{top: 0, left: 50, right: 50, bottom: 30}}
          width={800} height={100} scale={{x: "time"}}
          containerComponent={
            <VictoryBrushContainer responsive={false}
              selectedDomain={this.state.selectedDomain}
              onDomainChange={this.handleBrush.bind(this)}
            />
          }
        >
          <VictoryAxis
            tickValues={[
              new Date(1985, 1, 1),
              new Date(1990, 1, 1),
              new Date(1995, 1, 1),
              new Date(2000, 1, 1),
              new Date(2005, 1, 1),
              new Date(2010, 1, 1)
            ]}
            tickFormat={(x) => new Date(x).getFullYear()}
          />
          <VictoryLine
            style={{
              data: {stroke: "tomato"}
            }}
            data={[
              {x: new Date(1982, 1, 1), y: 125},
              {x: new Date(1987, 1, 1), y: 257},
              {x: new Date(1993, 1, 1), y: 345},
              {x: new Date(1997, 1, 1), y: 515},
              {x: new Date(2001, 1, 1), y: 132},
              {x: new Date(2005, 1, 1), y: 305},
              {x: new Date(2011, 1, 1), y: 270},
              {x: new Date(2015, 1, 1), y: 470}
            ]}
          />
        </VictoryChart>
      <div>
    );
  }
}

@boygirl boygirl merged commit e8c4e82 into master Jan 31, 2017
@boygirl boygirl deleted the feature/victory-minimap branch January 31, 2017 01:52
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant