vuejs Weekly Expenses app with chart.js

index.html

<div id="app">
  <canvas ref="myChart" style="width:100%;max-width:600px"></canvas>
  <input type="number" v-model="addValue">
  <button @click="addChart">Add</button>
  
  <ul>
    <li v-for="(transaction, index) in recentTransaction">amount: {{transaction.amount}} <button @click="deleteItem(index)">delete</button></li>
  </ul>
</div>

script.js

new Vue({
  data(){
    return{
      id: 1,
      chart: null, 
      addValue: 0, 
      recentTransaction: [
        ],
      weekDayFormat: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      recieveEvent: []
    }
  },
  mounted(){
    this.viewChart()
  },
  methods:{
    deleteItem(index){
      this.chart.update();
      this.recentTransaction.splice(index, 1)
      this.viewChart()
    },
    viewChart(){
      array = [0,0,0,0,0,0,0]
      recentTransaction = this.recentTransaction
      var i;
      for (i = 0; i < array.length; i++) {
        var dt = new Date(); 
        dt.setDate(dt.getDate() -i); 
        array[i] = dt;
        var totalSum = 0;
        for(j = 0;j<recentTransaction.length;j++ ){
          if(recentTransaction[j].date.day == dt.getDate() && recentTransaction[j].date.month == dt.getMonth() && 
            recentTransaction[j].date.year == dt.getFullYear()){
            totalSum += recentTransaction[j].amount
          }
          
        }
        
        day = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        
        this.weekDayFormat[i] = day[dt.getDay()]
        
        array[i] = totalSum
      }
      var xValues = this.weekDayFormat;
      var yValues = array;
      var barColors = ["red", "green","blue","orange","brown", "red"];
      var vm = this;
      this.chart = new Chart(vm.$refs.myChart, {
        type: "bar",
        data: {
          labels: xValues,
          datasets: [{
            backgroundColor: barColors,
            data: yValues
          }]
        },
        options: {
          legend: {display: false},
          title: {
            display: true,
            text: "Expense"
          }
        }
      })
    },
    addChart(){
      this.chart.update();
      var dt = new Date(),
          add = Object.assign({}, {value: this.addValue})
      
      this.recentTransaction.push(
      {
        date:{
          day: dt.getDate(),
          month: dt.getMonth(),
          year: dt.getFullYear()
        },
        amount: parseInt(add.value)
      })
      this.viewChart()
    },
  }
}).$mount('#app')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

vuejs-weekly-expenses-app-with-chart-js.markdown

vuejs Weekly Expenses app with chart.js

A Pen by Edward Lance Lorilla on CodePen.

License.