fix: Correção de visualização de dados no gráfico

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"
     }
   ]
 }

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 (
-    <div id="lineChart">
-      <Line options={options} data={data} />
+    <div>
+      {Object.keys(listaLancamentos).length > 0 ? (
+        <div id={styles.lineChart}>
+          <h3>Total de energia gerada por mês</h3>
+          <Line id={styles.grafico} options={options} data={data} />
+        </div>
+      ) : (
+        <h1 id={styles.mensagem}>Nenhum lançamento mensal consta no banco de dados.</h1>
+      )}
     </div>
   )
-};
+};

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;
+}