VictoryLine Animation

by tacomanator

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://npmcdn.com/victory@latest/dist/victory.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recompose/0.26.0/Recompose.min.js"></script>
<div id="app"></div>

Babel + JSX

const { compose, withState, withHandlers } = Recompose;
const { VictoryChart, VictoryLine, VictoryAxis, VictoryVoronoiContainer} = Victory;

const lineCount = 5
const pointCount = 600
const animation = {duration: 300, onLoad: { duration: 300 }}

// generates sample data using configuration above
const point = m => x => ({ x, y: Math.log(x*m) })
const line = m => _.map(_.range(1, pointCount+1), point(m))
const data = _.map(_.range(1, lineCount+1), line)

const enhance = compose(
	withState("animate", "setAnimate", false),
  withHandlers({toggle: props => event => props.setAnimate(!props.animate)})
);

const container = <VictoryVoronoiContainer labels={d => d.y} voronoiDimension="x" />

const App = enhance(props => (
	<div>
    <p>
      Animation: {props.animate ? "On": "Off"}
      {" "}<button onClick={props.toggle}>Toggle</button>
    </p>
    <VictoryChart
      animate={props.animate ? animation :null}
      containerComponent={container}>
      <VictoryAxis />
      <VictoryAxis dependentAxis />
      {_.map(data, (data, line) => <VictoryLine key={line} data={data} />)}
    </VictoryChart>
  </div>
));
 
ReactDOM.render(<App/>, document.getElementById('app'));