Vuetifyで使用容量のグラフ表示


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/edc3b745-fd08-b171-96b5-8ecfb4a00477.png)


#環境
-  vue 2.6.14
-  vuetify 2.6.2
-  npm: 7.21.1
-  node: 14.17.5

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

https://vuetifyjs.com/ja/getting-started/installation/

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

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

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


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/1aa8e97c-8362-173a-ebc9-ae89392ad730.png)

###CircleStorage.vue



```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>

```



#棒グラフでの使用容量コンポーネント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/949714e5-65b7-3980-a8d9-8ae1b761ee4b.png)

###LinearStorage.vue

```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のサンプルコードを載せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/972861/425ab00e-a98d-b043-febb-e1cd27fde1bf.png)


```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>


```


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

#参考

https://vuetifyjs.com/ja/