はじめに

Vuetifyではあらかじめ用意されているコンポーネントを使用することで簡単に様々な機能が作成できます。
今回はそのVuetifyのコンポーネントv-progress-circularとv-progress-linearを使って使用容量を示すサンプルを作成します。
参考にしてくれると嬉しいです！

環境

vue 2.6.14
vuetify 2.6.2
npm: 7.21.1
node: 14.17.5

Vuetifyをインストールされていない方は以下のリンクから準備をお願いします。

実装

今回作成したのはCircleStorage.vueとLinearStorage.vueです。

これらのコンポーネントは親コンポーネントから

name : 名前
usage : 使用容量
limit : 制限容量

を受け取ることを想定しています。
今回は容量の単位をGBにしていますが、そこは適宜変更してください。

円グラフでの使用容量コンポーネント

CircleStorage.vue

<template>
    <v-card
        elevation="0"
        class="mt-2 mb-6 mx-1"
      >
       <v-progress-circular
        :rotate="-90"
        :size="140"
        :width="11"
        :value="this.usageRate"
        color="primary"
      >
        <div class="d-flex flex-column black--text " >
          <p class="pb-0 ma-0 text-h7 black--text text-center text--secondary font-weight-bold">{{this.name}}</p>
          <div class="d-flex pt-2 pl-2 ">
            <p class="text-h5 text--primary mt-auto  mb-0 pb-0">
              {{this.usage}}
            </p>
            <p class="mt-auto  mb-0 pb-0  " >
              /{{this.limit}}GB
            </p>
          </div>
        </div>
      </v-progress-circular>
    </v-card>
</template>

<script>

  export default {
    name: 'CircleStorage',
    props:['name','usage','limit'],
    data () {
      return {
      }
    },

    computed:{
      usageRate(){
        return this.usage/this.limit*100
      }
    },

  }

</script>

棒グラフでの使用容量コンポーネント

LinearStorage.vue

<template>
    <v-card
        elevation="0"
        class="mt-2 mb-6 mx-1"
      >
        <v-progress-linear
          :value="usageRate"
          rounded
          disabled
          height="35"
          color="#4ECDC4"
          background-color="grey lighten-3"
        >
          <div class="  grey--text text--darken-2">  {{ usageText }} </div>
        </v-progress-linear>
    </v-card>
</template>

<script>

  export default {
    name: 'LinearStorage',
    props:['name','usage','limit'],
    data () {
      return {
      }
    },

    computed:{
      usageRate(){
        return this.usage/this.limit*100
      },
      usageText(){
        return ` ${this.name}:  ${this.usage} / ${this.limit} GB (${Math.round(this.usageRate*10)/10}%) ` 
      }
    },

  }

</script>

使用例

CircleStorage.vueとLinearStorage.vueを使用したHelloWorld.vueのサンプルコードを載せます。

HelloWorld.vue

<template>
  <div class="mx-auto mt-3 mb-6 text-center" style="width:600px;">

    <CircleStorage v-for="item in items" :key="item.name"
      :name="item.name"
      :usage="item.usage"
      :limit="item.limit"
    />

    <LinearStorage v-for="item in items" :key="item.name"
      :name="item.name"
      :usage="item.usage"
      :limit="item.limit"
    />
  
  </div>
</template>


<template>
  <div class="mx-auto mt-3 mb-6 text-center" style="width:600px;">

    <CircleStorage v-for="item in items" :key="item.name"
      :name="item.name"
      :usage="item.usage"
      :limit="item.limit"
    />

    <LinearStorage v-for="item in items" :key="item.name"
      :name="item.name"
      :usage="item.usage"
      :limit="item.limit"
    />
  
  </div>
</template>

<script>
  import CircleStorage from "./CircleStorage.vue"
  import LinearStorage from "./LinearStorage.vue"

  export default {
    name: 'HelloWorld',
    components:{CircleStorage,LinearStorage},
    data () {
      return {
        items:[
          {
            name:"アイテム1",
            usage:1.44,
            limit:2
          },
          {
            name:"アイテム2",
            usage:0.55,
            limit:2
          },
        ],
        
      }
    },

  }

</script>

まとめ

今回は使用容量を表示する自作サンプルを紹介しました。どなたかの助けになれば幸いです。ご指摘等あればコメントお願いします。