samedi 8 juin 2019

Checkbox that filter a graph with react

I'm making a website that at the home page it shows two graphs, what i need to do is make a checkbox at the home page that filters the first graph. The home page's graphs code stay at dash.js and that's the code:

  render () {
    //var id = null
    var id = this.props.id //---pessoal do login tem que passar id como props
    return (
      <div>
        <nav>
          <div className="container-fluid">
            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul className="nav navbar-nav">

                <li><Link activeClass="active" className="GraphGeral" to="GraphGeral" spy={true} smooth={true} duration={500} >Colheita por alimento CSA</Link></li>
                {id !== null && <li><Link activeClass="active" className="GraphEsp_1" to="GraphEsp_2" spy={true} smooth={true} duration={500}>Colheita por alimento Usuário</Link></li>}
                <li><Link activeClass="active" className="GraphEsp_2" to="GraphEsp_1" spy={true} smooth={true} duration={500} >Temporada de Colheita CSA</Link></li>
                {id !== null && <li><Link activeClass="active" className="GraphEsp_3" to="GraphEsp_3" spy={true} smooth={true} duration={500} >Temporada de Colheita Usuário</Link></li>}                




              </ul>
            </div>
          <Filtro/>
          </div>
        </nav>
        <Element name="GraphGeral" className="element" >
        Colheita por alimento CSA
        <div className="App">
          <Pie alimentos={this.state.alimentos_geral}/>
          <RadioGroup value={this.state.alimentos_geral} onChange={this.handleChange}></RadioGroup>
        </div>

        </Element>

        {id !== null && 
        <Element name="GraphEsp_2" className="element">
        Colheita por alimento Usuário 
        <div className="App">
          <Pie alimentos={this.state.alimentos_user}/>
        </div>
        </Element>}

        <Element name="GraphEsp_1" className="element">
        Temporada de Colheita CSA
        <div className="App">
          <Chart kg={this.state.kg_geral}/>
        </div>
        </Element>

        {id !== null &&
        <Element name="GraphEsp_3" className="element">
        Temporada de Colheita Usuário
        <div className="App">
          <Chart kg={this.state.kg_user}/>
        </div>
        </Element>}



      </div>

);


}
};

export default Dash;


The first graph is created by this line: Pie alimentos={this.state.alimentos_geral}/ And i need to filter each food with a checkbox at the graph




Aucun commentaire:

Enregistrer un commentaire