7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

image.png

#環境

  • vue 2.6.14
  • vuetify 2.6.2
  • npm: 7.21.1
  • node: 14.17.5

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

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

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

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

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

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

image.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

###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.vueLinearStorage.vueを使用したHelloWorld.vueのサンプルコードを載せます。

image.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>


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

#参考

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?