Fix the calculations in this small Vue component.

I'm having trouble with the calculations of this script that takes waveform JSON values and draws a SVG waveform with them. The SVG changes depending on the bar width and bar spacing chosen. The bigger the spacing chosen, the less bars are displayed so that it remains in the container. The mean/average of these values for each bar is also calculated to do this so that it keeps the same shape.

Additionally, I'm having the most trouble figuring out the correct calculated X value for each SVG rect.

Here's the vue component:

[login to view URL],js,output

Here is what I'm trying to replicate. Click the little slider button at the top to see the 'style' tab:

[login to view URL]

JavaScript SVG Vue.js

Nº del proyecto: #16912646

Sobre el proyecto