Vue Calculating percentages for progress bars

Question

I made a function that counts every value in the table's rows (calories, fat etc). I made progress bars but I don't know how to calculate the width so that it changes dynamically when I add a new row in the table. I have declared the maximum values (this is 100%).

Example: 3464 kcal is 69.28% (~69.3) from 5000 kcal

<div class="progress" style="width: {{ kcalPercentage }}%"></div>

Demo code here

HTML:

<div id="app">
  <v-app id="inspire">
    <v-row class="bars">
      <v-col
        cols="12"
        md="4"
      >
        <p>Calories</p>
        <p><strong>{{ sum('calories') }}</strong> / {{ kcalMax }}</p>
        <div class="bar">
          <div class="progress" style="width: 69%"></div>
        </div>
      </v-col>
      <v-col
        cols="12"
        md="4"
      >
        <p>Fat</p>
        <p><strong>{{ sum('fat') }}</strong> / {{ fatMax }}</p>
        <div class="bar">
          <div class="progress" style="width: 52%"></div>
        </div>
      </v-col>
      <v-col
        cols="12"
        md="4"
      >
        <p>Carbs</p>
        <p><strong>{{ sum('carbs') }}</strong> / {{ carbsMax }}</p>
        <div class="bar">
          <div class="progress" style="width: 149%"></div>
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-col
        cols="12"
      >
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
        ></v-data-table>
      </v-col>
    </v-row>
  </v-app>
</div>

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      // maximum values
      kcalMax: 5000,
      fatMax: 200,
      carbsMax: 400,
      
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 1,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
  methods: {
    sum(key) {
      return this.desserts.reduce((a, b) => a + (b[key] || 0), 0)
    },
  },
  computed: {
        /*calculateKcal: function() {
      return ((sum('carbs') / kcalMax) * 100).toFixed(0)
    },*/
  }
})

Answer 1

You can use v-progress-linear component of Vuetify and pass percentage. Doc link https://vuetifyjs.com/en/components/progress-linear/

Please check if this helps https://codepen.io/manojkmishra/pen/JjEPYqw

HTML:

<div id="app">
<v-app id="inspire">
<v-row class="bars">
  <v-col cols="12" md="4">
    <p>Calories</p>
    <p><strong>{{ sum('calories') }}</strong> / {{ kcalMax }}</p>
    <v-progress-linear :value="percentage('calories',kcalMax)"  height="20" background-color="grey lighten-2" color="red lighten-3" >
      <div class="text-center">{{ percentage('calories',kcalMax)}}%</div>
    </v-progress-linear>
  </v-col>
  <v-col cols="12" md="4">
    <p>Fat</p>
    <p><strong>{{ sum('fat') }}</strong> / {{ fatMax }}</p>
    <v-progress-linear :value="percentage('fat',fatMax)"  height="20" background-color="grey lighten-2" color="red lighten-3" >
      <div class="text-center">{{ percentage('fat',fatMax)}}%</div>
    </v-progress-linear>
  </v-col>
  <v-col cols="12" md="4">
    <p>Carbs</p>
    <p><strong>{{ sum('carbs') }}</strong> / {{ carbsMax }}</p>
    <v-progress-linear :value="percentage('carbs',carbsMax)"  height="20" background-color="grey lighten-2" color="red lighten-3" >
      <div class="text-center">{{ percentage('carbs',carbsMax)}}%</div>
    </v-progress-linear>
  </v-col>
</v-row>
<v-row>
  <v-col cols="12">
    <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
  </v-col>
</v-row>
</v-app>
</div>

JS:

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
  // maximum values
  kcalMax: 5000,
  fatMax: 200,
  carbsMax: 400,
  
  headers: [
    {
      text: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      value: 'name',
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' },
    { text: 'Carbs (g)', value: 'carbs' },
    { text: 'Protein (g)', value: 'protein' },
    { text: 'Iron (%)', value: 'iron' },
  ],
  desserts: [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1%',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1%',
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7%',
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: '8%',
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16,
      carbs: 49,
      protein: 3.9,
      iron: '16%',
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0,
      carbs: 94,
      protein: 0.0,
      iron: '0%',
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 1,
      carbs: 98,
      protein: 0,
      iron: '2%',
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3,
      carbs: 87,
      protein: 6.5,
      iron: '45%',
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25,
      carbs: 51,
      protein: 4.9,
      iron: '22%',
    },
    {
      name: 'KitKat',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
      iron: '6%',
    },
  ],
}
},
methods: {
sum(key) {
  return this.desserts.reduce((a, b) => a + (b[key] || 0), 0)
},
percentage( key,maxValue) {
  let total=this.desserts.reduce((a, b) => a + (b[key] || 0), 0);
  return (100 * total) / maxValue;
}
},
})

Answer 2

To calculate the percentage you need to multiply the progress max-width (100) with the current value and divide the result with the maxValue;

Recommendation: use computed values for the total and percentage so it's saved in vue cache

Template

<p>Calories</p>
<p><strong>{{ calories.total }}</strong> / {{ kcalMax }}</p> 
<div class="bar">
  <div class="progress" :style="`width: ${calories.percentage}%`"></div>
</div> 

Script

 methods: {
    sum(key) {
      return this.desserts.reduce((a, b) => a + (b[key] || 0), 0)
    },
    percentage(currentValue, maxValue, percent = 100) {
      return (percent * currentValue) / maxValue;
    }
  },
  computed: {
    calories() {
       const total = this.sum('calories');
       const percentage = this.percentage(total, this.kcalMax);
       return  {
         total,
         percentage
       };
    },
    fat() {
       const total = this.sum('fat');
       const percentage = this.percentage(total, this.fatMax);
       return  {
         total,
         percentage
       };
    },
    carbs() {
       const total = this.sum('carbs');
       const percentage = this.percentage(total, this.carbsMax);
       return  {
         total,
         percentage
       };
    },
  }