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 ( -
- +
+ {Object.keys(listaLancamentos).length > 0 ? ( +
+

Total de energia gerada por mês

+ +
+ ) : ( +

Nenhum lançamento mensal consta no banco de dados.

+ )}
) -}; +}; \ No newline at end of file diff --git a/src/components/grafico/LineChart.module.css b/src/components/grafico/LineChart.module.css new file mode 100644 index 0000000..481e214 --- /dev/null +++ b/src/components/grafico/LineChart.module.css @@ -0,0 +1,39 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +#lineChart { + border: 1px solid #E5E5E5; + border-radius: 4px; + background-color: #FFFFFF; + margin: auto; + margin-top: 40px; + width: 961px; + height: 600px; +} + +#lineChart h3 { + font-family: 'Roboto', sans-serif; + width: 293px; + height: 30px; + font-size: 20px; + margin-top: 35px; + margin-left: 32px; + letter-spacing: 0.15px; +} + +#grafico { + margin-top: 20px; + margin-left: 12px; + padding-right: 20px; +} + +#mensagem { + font-family: 'Roboto', sans-serif; + text-align: center; + margin-top: 30px; +} \ No newline at end of file