diff --git a/mapcon/pages/mapcon/graficos/conflitosmes.jsx b/mapcon/pages/mapcon/graficos/conflitosmes.jsx index 8a6b5cf..c380386 100644 --- a/mapcon/pages/mapcon/graficos/conflitosmes.jsx +++ b/mapcon/pages/mapcon/graficos/conflitosmes.jsx @@ -1,55 +1,79 @@ +// Importa a conexão com o banco de dados import db from '../../../lib/back/db' + +// Importa o React import React from 'react' + +// Importa o componente de gráfico da biblioteca PrimeReact import { Chart } from 'primereact/chart'; + +// Importa a biblioteca moment para manipulação de datas import moment from 'moment'; + +// Importa a barra superior da interface do sistema import ToolbarMapCon from '../../../components/toolbar_mapcon'; +// Componente principal da página export default function ConflitosMes(props) { + + // Define os dados que serão usados no gráfico de barras const chartData = { - labels: props.conflitosmes.map(r => r.to_char), + labels: props.conflitosmes.map(r => r.to_char), // Mês formatado datasets: [ { - data: props.conflitosmes.map(r => r.count), - label: 'Total', - backgroundColor: 'red' - // backgroundColor: props.totaissit.map(r => getColor(r.situacao)) - }] + data: props.conflitosmes.map(r => r.count), // Quantidade de protestos por mês + label: 'Total', // Legenda da série de dados + backgroundColor: 'red' // Cor das barras + // backgroundColor: props.totaissit.map(r => getColor(r.situacao)) <- comentário anterior, exemplo de como definir cor por situação + } + ] } + // Define as opções de configuração do gráfico const options = { title: { - display: true, - text: 'Protestos por mês', - fontSize: 16 + display: true, // Exibe o título + text: 'Protestos por mês', // Texto do título + fontSize: 16 // Tamanho da fonte do título } }; + // Retorno visual do componente return (