diff --git a/database/data.json b/database/data.json index 8dfcc53..7e348da 100644 --- a/database/data.json +++ b/database/data.json @@ -70,6 +70,18 @@ "data": "2023-06", "total": 250, "id": "gtKX26d" + }, + { + "id_unidade": "def", + "data": "2023-09", + "total": 55, + "id": "IEdzhfq" + }, + { + "id_unidade": "def", + "data": "2023-05", + "total": 33, + "id": "3iTmfhJ" } ] } \ No newline at end of file diff --git a/src/components/grafico/LineChart.css b/src/components/grafico/LineChart.css deleted file mode 100644 index f1037c6..0000000 --- a/src/components/grafico/LineChart.css +++ /dev/null @@ -1,12 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -#lineChart { - width: 961px; - height: 646px; - top: 360px; - left: 614px; -} \ No newline at end of file diff --git a/src/components/grafico/LineChart.jsx b/src/components/grafico/LineChart.jsx index b35a551..40d57d4 100644 --- a/src/components/grafico/LineChart.jsx +++ b/src/components/grafico/LineChart.jsx @@ -1,4 +1,4 @@ -import "./LineChart.css" +import styles from "./LineChart.module.css" import { useState, useEffect } from "react"; import { Chart as ChartJS, @@ -14,60 +14,56 @@ import { Line } from "react-chartjs-2"; import axios from "axios"; export const LineChart = () => { - const [listaUnidades, setListaUnidades] = useState([]); const [listaLancamentos, setListaLancamentos] = useState([]); // Realiza a busca dos dados ao carregar a página useEffect(() => { - buscaUnidades(); buscaListaLancamentos(); }, []); - // Faz a busca de informações no endpoint unidades - const buscaUnidades = () => { - axios - .get("http://localhost:3000/unidades") - .then((response) => setListaUnidades(response.data)) - .catch((error) => alert(error)); - }; - // Faz a busca de informações no endpoint lancamentos - const buscaListaLancamentos = () => { - axios + const buscaListaLancamentos = async () => { + await axios .get("http://localhost:3000/lancamentos") .then((response) => setListaLancamentos(response.data)) .catch((error) => alert(error)); }; - // Lógica para cálculo dos dados do gráfico - const unidadesAtivas = listaUnidades.filter( - (unidade) => unidade.ativa == true - ); - // Passa os dados do array para o objeto que vai conter os dados do gráfico let somaLancamentos = {}; listaLancamentos.forEach((element) => { - let estaAtiva = false - Object.values(unidadesAtivas).forEach(unidade => { - if (unidade.id === element.id_unidade) { - estaAtiva = true - } - }) - - // - if (estaAtiva) { - if (somaLancamentos[element.data]) { - somaLancamentos[element.data] += element.total; - } else { - somaLancamentos[element.data] = element.total; - } + + if (somaLancamentos[element.data]) { + somaLancamentos[element.data] += element.total; + } else { + somaLancamentos[element.data] = element.total; + } + }) + + // Cria um novo objeto com as propriedades ordenadas + function organizaData(objeto) { + const propriedadeOrdenada = Object.keys(objeto).sort(); + const objetoOrdenado = {}; + + for (const propriedade of propriedadeOrdenada) { + objetoOrdenado[propriedade] = objeto[propriedade]; } - // Caso o tamanho do objeto seja maior que 12 retira o mês mais antigo - if (Object.keys(somaLancamentos).length > 12) { - delete somaLancamentos[Object.keys(somaLancamentos)[0]]; + return objetoOrdenado + } + + // Caso o tamanho do objeto seja maior que 12 retira o mês mais antigo + function ultimosMeses(objeto) { + + while (Object.keys(objeto).length > 12) { + delete objeto[Object.keys(objeto)[0]]; } - }); + + return objeto + } + + const dadosOrganizados = organizaData(somaLancamentos) + const mesesFinais = ultimosMeses(dadosOrganizados) // Criação do Gráfico ChartJS.register( @@ -81,13 +77,13 @@ export const LineChart = () => { ); // Declaração dos dados usados e configurações visuais do gráfico - const labels = Object.keys(somaLancamentos).map((key) => key); + const labels = Object.keys(mesesFinais).map((key) => key); const data = { labels, datasets: [ { - label: "Total de energia gerada por mês", - data: Object.values(somaLancamentos).map((value) => value), + label: "", + data: Object.values(mesesFinais).map((value) => value), backgroundColor: "white", borderColor: "aqua", tension: 0.4, @@ -102,16 +98,15 @@ export const LineChart = () => { plugins: { legend: { onClick: false, - align: 'start', - labels: { - boxWidth: 0, - font: { - size: 30, - } - } + display: false, }, }, scales: { + x: { + grid: { + display: false + } + }, y: { min: 0, position: 'right' @@ -120,8 +115,15 @@ export const LineChart = () => { }; return ( -