How to: Running total calculation on console.log data

Hi

New to vue.js and was wondering how to compute a running balance from console log data.

In short - I collect data via an API that updates weekly with a new entry of data. Each week has a different number of accounts created {{ x.metric.accounts_created }} . I want to be able to populate the field {{ total }} with the total number of accounts created. I want to add the accounts created this week to a running total where at:
week 1 total = 0 + {{ x.metric.accounts_created(week 1) }} = {{ total(week1) }}
week 2 total = {{ total(week1) }} + {{ x.metric.accounts_created(week 2) }} = {{ total(week2) }}
week 3 total = {{ total(week2) }} + {{ x.metric.accounts_created(week 2) }} = {{ total(week3) }} and so on

any help greatly appreciated


    <tbody>
                      <tr scope="row" v-for="x in MetricsAll.stats" v-bind:key="x.date">
                        <td></td>
                        <td
                          class="text-left"
                        >{{ new Date(Date.parse(x.date)).toLocaleDateString('en-NZ',{ month: 'long', day: 'numeric', year: 'numeric'}).replace(',',' ') }}</td>
                        <td class="text-right">{{ x.metric.accounts_created }} </td>
                        <td class="text-right"> {{ total }};</td>
                      </tr>
                    </tbody> ```

Do you mean to add all the weeks?

Yes, as an example, where TOTAL is a field that I need to calculate

wk created TOTAL
1 1000 1000
2 2000 3000
3 5000 8000
4 1500 9500

Use a computed property to add up the sum of your stats.

Thanks James

I thought as much but have been unable to find a suitable guide to show me how. I’m new to vue and script and trying to learn. Any chance you could show me how?

Sure, here’s an example: https://jsfiddle.net/jamesbrndwgn/01gtfn67/

More on the reduce Array function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Thanks

I’ll have a play and see if I can get it working

I’ve managed to get it working, to a degree - so thanks for the help so far

Except that instead of having a changing balance after each entry it gives me the combined total on each and every entry. Photo enclosed:

What I want is for the Total Accounts column to be the balance as at that date.

i.e.
Date Created Total
7 Jan 46 46
10 Jan 40 86
21 Jan 61 147
28 Jan 27 174

Thoughts on how to fix this?

Here’s a very abridged fiddle
https://jsfiddle.net/cjmchch/7cy63dev/8/

Can you provide an example of the JSON data you’re working with?

Nevermind, I see that you’re grabbing it from ripple

Something along these lines should do the trick: https://jsfiddle.net/jamesbrndwgn/8fd1L9ej/1/

let runningTotal = [];

new Vue({
  el: "#app",
  data: {
  	xrpMetricsAll: {}
  },
  
  methods: {
  	total (val) {
    	runningTotal.push(val);
      
    	return runningTotal.reduce((acc, curr) => acc + curr, 0);
    }
  },
  
  created () {
  	window
      .fetch(
        "https://data.ripple.com/v2/stats?descending=true&interval=week&limit=5"
      )
      .then(x => {
        return x.json();
      })
      .then(data => {
        // Set it to the Vue App data
        this.xrpMetricsAll = data;
      });
  }
})
1 Like

Thank you so much, it works perfectly!

One small issue James, it’s cycling through on refresh and the total accounts changes it’s balance up

  • if you refresh, the last value prior to refreshing becomes the new start value for item 1. Thoughts?

you can see its behaviour: [Here]( - XRPL Metrics tab - 2nd card

Not sure what you’re referring to “on refresh”. You mean browser refresh? If so, I’m not seeing what you’re seeing

browser refresh yes - locally in my development area it does it and also when I visit the site outside of my own network - via my 4G phone. If you refresh or visit other links and come back to that particular card the values have changed

Hmm, hard to say without seeing the code involved. Kind of seams like the component list is rendering multiple times, so the first row picks up the value of the already completed running total.

1 Like

If you’re keen to help, I shall try and find it as well.

Full Site Sandbox Here

Would take a look, but it the sandbox is working - getting a tonne of console errors.

1 Like

Thanks anyway, I’ve appreciated your help. I’m still trying to debug it to work out why.

As an update and the final solutionto solving the recalc problem:

As instance was triggered on component create originally, when you come back it isn’t created again, so I changed it to mounted, that triggered every time In came back to that particular page/card.

As it transpired, I needed to bring it back into ‘create’ in order to run something else so to finally fix it I stored the data in the parent component calling it from the child.

I really appreciated the help you gave James, many thanks.