-2
i want to add the chart to the panel when I click the access button, as I make it appear inside the panel I stylized without putting it right there, only after clicking the accessos button???
import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2'
import { Container, Graficos, Gerar } from './styles'
// Components
import SectionTopBar from '../../components/SectionTopBar'
import NavigationBar from '../../components/NavigationBar'
const Dashboard = () => {
const access = () => {
//MANDAR ADICIONAR A FUNÇÃO CHART() AQUI
}
const [charData, setCharData] = useState({})
const chart = () => {
setCharData({
labels: ['Jorge', 'Lucas', 'Ana', 'Antonio', 'Luiza', 'Matheus', 'Luana'],
datasets: [
{
label: 'Acessos',
data: [25, 30, 13, 9, 47, 10, 21],
backgroundColor: [
'rgba(6, 196, 131, 0.4)'
],
borderColor: [
'rgba(6, 196, 131, 1)'
],
borderWidth: 1
}
]
})
}
useEffect(() => {
chart()
}, [])
return (
<Container>
<Graficos>
<Gerar>
<button className="card" onClick={access} >
<div className="content-info">
<text className="textbtn" >Acessos</text>
<text className="quantidade" >12.000</text>
</div>
<div><i class="fas fa-sign-in-alt"></i></div>
</button>
<a></a>
</button>
</Gerar>
<div className="grafico-container" >
//ADICIONAR AQUI NO PAINEL
<div className="painel" ><Bar data={charData} /></div>
</div>
</Graficos>
</Container>
);
}