Calcular gastos por dia e mostrar no gráfico [JQUERY]

14/06/2019

0

Estou fazendo um trabalho de escola que consiste em implementar um web app (site responsivo mobile first) para armazenar na API Local Storage gastos realizados pelo usuário. Recursos mínimos:

-Adicionar um gasto: descrição, valor, data, categoria (alimentação, vestuário,transporte, lazer, etc.);
-Editar um gasto;
-Remover um gasto;
-Exibir os gastos cadastrados;
-Gráfico de pizza dos gastos por categoria;
-Gráfico de barras dos gastos por dia do mês.

Eu consegui fazer os 5 primeiros recursos, mas no ultimo estou com dificuldade de somar os gastos por dia, pois em vez de somar ele só esta pegando o ultimo gasto cadastrado de uma data. Se alguém puder me ajudar agradeço.

Segue os códigos no JSFiddle: https://jsfiddle.net/n2Lwg0jt/
Matheus William

Matheus William

Responder

Post mais votado

26/06/2019

$(function() {
    var operacao = "A"; //"A"=Adição; "E"=Edição
    var indice_selecionado = -1;
    var tbClientes = localStorage.getItem("tbClientes"); // Recupera os dados armazenados
    var datas;
    tbClientes = JSON.parse(tbClientes); // Converte string para objeto
  
    if (tbClientes == null) // Caso não haja conteúdo, iniciamos um vetor vazio
      tbClientes = [];
  
    $("gasto").on("change", function() {
      $(this).val(parseFloat($(this).val()).toFixed(2));
    });
  
    function Adicionar() {
      var data = $("#data").val();
      let split = data.split('-');
      let formated = split[2] + "/" + split[1] + "/" + split[0];
  
      var cliente = JSON.stringify({
        Descrição: $("#descricao").text(),
        Gasto: $("#gasto").val(),
        Data: formated,
        Categoria: $("#categoria").val()
      });
      tbClientes.push(cliente);
  
      localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
  
      alert("Registro adicionado.");
      return true;
    }
  
    function Editar() {
      tbClientes[indice_selecionado] = JSON.stringify({
        Descrição: $("#descricao").val(),
        Gasto: $("#gasto").val(),
        Data: $("#data").val(),
        Categoria: $("#categoria").val()
      });
      localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
      alert("Informações editadas.")
      operacao = "A";
      return true;
    }
  
    function Listar() {
      $("#tblListar").html("");
      $("#tblListar").html(
        "<thead>" +
        "   <tr>" +
        "   <th scope='col'>Descrição</th>" +
        "   <th scope='col'>Gasto</th>" +
        "   <th scope='col'>Data</th>" +
        "   <th scope='col'>Categoria</th>" +
        "   <th scope='col'></th>" +
        "   </tr>" +
        "</thead>" +
        "<tbody>" +
        "</tbody>"
      );
      var soma = 0,
        soma1 = 0,
        soma2 = 0,
        soma3 = 0,
        soma4 = 0,
        soma5 = 0,
        soma6 = 0,
        soma7 = 0,
        somaData = [];
      var listaData = [],
        novaArr = [];
       
      // Cria objeto por dia
      let perDay = {}

      for (var i in tbClientes) {
        var cli = JSON.parse(tbClientes[i]);
        $("#tblListar tbody").append("<tr>" +
          "  <td>" + cli.Descricao + "</td>" +
          "  <td>" + cli.Gasto + "</td>" +
          "  <td>" + cli.Data + "</td>" +
          "  <td>" + cli.Categoria + "</td>" +
          "  <td><img src='edit.png' alt='" + i + "' class='btnEditar'/><img src='delete.png' alt='" + i + "' class='btnExcluir'/></td>" +
          "</tr>");
        if (cli.Categoria == "Sem categoria")
          soma += parseFloat(cli.Gasto);
        if (cli.Categoria == "Transferência")
          soma1 += parseFloat(cli.Gasto);
        if (cli.Categoria == "Alimentação")
          soma2 += parseFloat(cli.Gasto);
        if (cli.Categoria == "Casa")
          soma3 += parseFloat(cli.Gasto);
        if (cli.Categoria == "Receita")
          soma4 += parseFloat(cli.Gasto);
        if (cli.Categoria == "Saude")
          soma5 += parseFloat(cli.Gasto);
        if (cli.Categoria == "Transporte")
          soma6 += parseFloat(cli.Gasto);
        if (cli.Categoria == "Vestuário")
          soma7 += parseFloat(cli.Gasto);
  
        listaData.push(cli.Data);
        novaArr = listaData.filter((este, i) => listaData.indexOf(este) === i);

        // Transformo a data em timestamp
        let date = cli.Data.split('/')
        date = new Date(date[0], date[1], date[2]).getTime()

        // Teste: 
        if(!perDay[date]) {
            // se o timestamp não for uma chave no objeto perDay, então adiciono ele lá com o gasto
            perDay[date] = parseFloat(cli.Gasto)
        } else {
            // se o timestamp já for uma chave no objeto perDay, apenas somo no valor presente
            perDay[date] += parseFloat(cli.Gasto)
        }

        for (var j in novaArr) {
          if (cli.Data == novaArr[j]) {
            somaData[j] = 0;
            somaData[j] += somaData[j] + parseFloat(cli.Gasto);
          }
        }
      }
      
      // Comparando vetor novo e vetor antigo
      console.log(Object.values(perDay), somaData)
  
      let segundoGrafico = document.getElementById('segundoGrafico').getContext('2d');
      let chart2 = new Chart(segundoGrafico, {
        type: 'bar',
        data: {
          labels: novaArr,
          // no data do chart, extraio os valores do objeto perDay e converto pra array
          datasets: [{
            label: 'Gastos por Dia',
            data: Object.values(perDay),
            backgroundColor: ["#ff2200"]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Grafico de Gastos por Dia'
          }
        }
      });
  
      let primeiroGrafico = document.getElementById('primeiroGrafico').getContext('2d');
      let chart = new Chart(primeiroGrafico, {
        type: 'pie',
        data: {
          labels: ['Sem categoria', 'Transferência', 'Alimentação', 'Casa', 'Receita', 'Saude', 'Transporte', 'Vestuário'],
          datasets: [{
            label: 'Gastos por Categoria',
            data: [soma, soma1, soma2, soma3, soma4, soma5, soma6, soma7],
            backgroundColor: ["#ff2200", "#088A08", "#0404B4", "#6E6E6E", "#FFFF00", "#3B0B0B", "#58D3F7", "#74DF00"]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Grafico de Gastos por Categoria'
          }
        }
      });
    }
  
    function Excluir() {
      tbClientes.splice(indice_selecionado, 1);
      localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
      alert("Registro excluído.");
    }
  
    Listar();
  
    $("#frmCadastro").on("submit", function() {
      if (operacao == "A")
        return Adicionar();
      else
        return Editar();
    });
  
    $("#tblListar").on("click", ".btnEditar", function() {
      operacao = "E";
      indice_selecionado = parseInt($(this).attr("alt"));
      var cli = JSON.parse(tbClientes[indice_selecionado]);
      $("#descricao").text(cli.Descricao);
      $("#gasto").val(cli.Gasto);
      $("#data").val(cli.Data);
      $("#categoria").val(cli.Categoria);
    });
  
    $("#tblListar").on("click", ".btnExcluir", function() {
      indice_selecionado = parseInt($(this).attr("alt"));
      Excluir();
      Listar();
    });
  });
  

Gabriel

Gabriel
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar