import React, { Component } from "react"; import NodeGroup from "react-move/NodeGroup"; import { getInitialData, getAppendedData, getTruncatedData, getUpdatedData } from "./helpers"; import "./barchart.css"; let barHeight = 25; let barPadding = 2; let barColour = "#348AA7"; let widthScale = d => d * 5; function BarGroup(props) { let width = widthScale(props.state.value); let yMid = barHeight * 0.5; return ( {props.state.value.toFixed(0)} {props.data.name} ); } class BarChart extends Component { constructor(props) { super(props); this.state = { data: getInitialData() }; this.handleAdd = this.handleAdd.bind(this); this.handleRemove = this.handleRemove.bind(this); this.handleUpdate = this.handleUpdate.bind(this); } handleAdd() { this.setState({ data: getAppendedData(this.state.data) }); } handleRemove() { this.setState({ data: getTruncatedData(this.state.data) }); } handleUpdate() { this.setState({ data: getUpdatedData(this.state.data) }); } startTransition(d, i) { return { value: 0, y: i * barHeight, opacity: 0 }; } enterTransition(d) { return { value: [d.value], opacity: [1], timing: { duration: 250 } }; } updateTransition(d, i) { return { value: [d.value], y: [i * barHeight], timing: { duration: 300 } }; } leaveTransition(d) { return { y: [-barHeight], opacity: [0], timing: { duration: 250 } }; } render() { return (

); } } export default BarChart;