{"size": 2436, "ext": "js", "max_stars_repo_path": "src/demo.js", "max_stars_repo_name": "Eye12/bar-charts", "max_stars_repo_stars_event_min_datetime": "2019-10-26T03:25:45.000Z", "max_stars_repo_stars_event_max_datetime": "2019-10-26T03:25:45.000Z", "max_issues_repo_path": "src/demo.js", "max_issues_repo_name": "Eye12/bar-charts", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/demo.js", "max_forks_repo_name": "Eye12/bar-charts", "max_forks_repo_forks_event_min_datetime": "2019-10-27T10:12:56.000Z", "max_forks_repo_forks_event_max_datetime": "2019-10-27T10:12:56.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 38.0625, "max_line_length": 340, "alphanum_fraction": 0.4724958949}
import React, {Component} from "react";
import ReactDOM from "react-dom";
import BarCharts from "./components/BarCharts";
import "./styles/global.scss";

class Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            xAxisDatas: [
                {title: "5万", flex: 1, value: "1.50"},
                {title: "10万", flex: 1, value: "2.00"},
                {title: "15万", flex: 1, value: "2.50"},
                {title: "20万", flex: 1, value: "3.00"},
                {title: "25万", flex: 1, value: "3.50"},
                {title: "30万", flex: 1, value: "4.00"},
                {title: "35万", flex: 1, value: "4.50"}
            ],
            yAxisDatas: [
                {title: 0, value: 0},
                {title: "1.0000", value: 1},
                {title: "2.0000", value: 2},
                {title: "3.0000", value: 3},
                {title: "4.0000", value: 4},
                {title: "5.0000", value: 5}
            ],
            markIndex: 5
        }
    }

    click = () => {
        // this.barCharts.rePainting();
        this.setState({
            yAxisDatas: [
                {title: 0, flex: 0, value: 0},
                {title: "1.0000", flex: 1, value: 1},
                {title: "2.0000", flex: 2, value: 2},
                {title: "3.0000", flex: 3, value: 3},
                {title: "4.0000", flex: 1, value: 4},
                {title: "5.0000", flex: 1, value: 5}
            ],
            markIndex: 1
        });
    };

    render() {
        let {
            xAxisDatas,
            yAxisDatas,
            markIndex
        } = this.state;
        return (
            <div>
                <BarCharts ref={node => this.barCharts = node} xAxisDatas={xAxisDatas} yAxisDatas={yAxisDatas} scaleDirectionY={"left"} xAxisScaleAlign={"side"} xAxisTxtAlign={"center"} firstScaleY={false} firstScaleX={true} markIndex={markIndex} yAxisTextAlign={"right"} gridDashX={[5, 5, 5]} markLineDash={[2, 4, 2, 4]} barPaddinng={10}/>
                <div style={{textAlign: "center"}}>
                    <button onClick={this.click} style={{marginLeft: "10px", borderRadius: "4px", backgroundColor: "lightgrey", padding: "5px 10px", color: "#fff", outline: "none", border: "none", boxShadow: "0px 1px 2px grey"}}>Click Me</button>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<Demo/>, document.getElementById("root"));
