献血データをダッシュボード管理画面にグラフ表示する（Vue.js）

# はじめに

こちらの投稿を拝見しました。

https://qiita.com/rana_kualu/items/38df213f5e30326a81a8

- 100回すごいなぁと思いつつ、自分の献血のデータを確認してみたところ、**30回弱**といったところでした。100回には遠く及ばないですが、データを表示する・調べるにはまぁまぁの数かなと思いました。

- また、以前からグラフや数字がかっこよく並ぶダッシュボード(管理画面)を作成したいと思っていましたが、データとして何を表示したらよいかと思案していました。これはなかなかいいデータではないかと思ったので、献血データを一画面でグラフで見られるようにしたいと思います。

- Vue.jsのテンプレートをダウンロードして必要なところを変更しながら作成してみたいと思います。Google検索で、「Vue.js　ダッシュボード　テンプレート」といった感じで調べればいい感じのものがたくさん見つかります。


今回使用したのはこちら
[https://coreui.io/vue/](https://coreui.io/vue/)

```
# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue

# go into app's directory
$ cd CoreUI-Vue

# install app's dependencies
$ npm install

# serve with hot reload at localhost:8080
$ npm run serve
```

# データ

- 献血サイトを確認しながらGoogleSpreadSheetに、データを作成。（ここは先の記事を参考にスクレイピングでもOKかと思いますが、私は手で作成しました）

- **自分の検査結果をベースに、適当に中身の数値を変更してサンプルデータ** とします。

- データの更新を自動で実施したい場合は、参考記事のとおり、スクレイピングするくらいしか思いつきません。

- そこまで頻度よく更新しなくてもよい場合は、献血をするたびにスプレッドシートを手で更新でもよいかなとは思います。（今後どのくらいの頻度で献血するかにもよりますが、値を更新すればグラフに反映しますので、そのあたりはモチベーションになるかもしれません）

![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/d048fecd-9bca-32ed-4f9f-9a5b11c8882d.png)

# デモサイト

[デモサイトはこちら](https://bdonation.anotherskyjp.site/#/)　
（献血データは、自分の結果をベースに適当に数値を変更しているサンプルデータ）

#### ①Dashboard：現在の献血回数・100回まであと何回・前回の献血日・血圧/脈拍に加えて各検査結果データ15グラフ
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/2428a5a8-1a89-9f54-59eb-11d09234ca69.png)

#### ②生化学検査結果：7グラフ（説明付き）
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/7b4a9305-3a3d-1e45-92d7-b76dd1ac6b15.png)

#### ③血球計数検査結果：8グラフ（説明付き）
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/f595bfdb-9bf2-321a-64a1-6a21475201c8.png)



# コード（APIによるデータ取得とグラフパラメータセット部分）
グラフデータは、親コンポーネントでaxiosにて一括で取得します。また、各グラフのタイトルや説明、グラフに必要な値をパラメータ化して、オブジェクトに持たせておき、子コンポーネントに渡す形です（Propsを使用する）。

サンプル

```sample.vue
<script>
export default {
  // 省略

  data () {
    return {
      // 省略
    }
  },
  created () {
    axios.get(apiurl).then(response => {
      this.apidata = response.data.values
      this.makeInfo()      // ヘッダー情報・説明テキストの取得設定
    })

    this.dval1 = {
      label1: '血圧(最高)', colum1: 3,
      label2: '血圧(最低)', colum2: 4,
      label3: '脈拍', colum3: 5,
      maxGraph: 180,
      minGraph: 30
    }
    this.dval2 = {
      title:'(2) ALT(GPT)', label: 'ALT(GPT)', colum: 6, maxValue: 49, minValue: 8, maxGraph: 70, minGraph: 0
    }
    this.dval3 = {
      title:'(3) γ-GTP', label: 'γ-GTP', colum: 7, maxValue: 68, minValue: 9, maxGraph: 80, minGraph: 0
    }

    // 以下省略

  },
  methods: {
    // 説明テキストの取得設定
    makeInfo () {
      for (var i = 1; i <= this.apidata.length; i++) {
        if (i === 4) {
          var k = 1
          for (var j = 0; j <= 20; j++) {
            if (j > 5) {
              var additem = {
                id: k,
                text: this.apidata[3][j]
              }
              this.items.push(additem)
              k = k + 1
            }
          }
        }
        // 最終行の回数と日付の設定
        if (i === this.apidata.length) {
          this.numbertime = this.apidata[i-1][0]
          this.lastdate = this.apidata[i-1][1]
          this.moretime = 100 - this.numbertime
        }
      }
    }
  }
}
</script>
```


# まとめ
- やはり数字の羅列よりは、グラフのほうがわかりやすく、注意すべき指標もパッと見で判断できます。

- 献血サイトでもこんなグラフが見れたらよいな、と思うような画面をつくることができました。（本家は直前3回分しか見れません。今後すべてのデータが見れようになればいいですが）

- ダッシュボードを作ってみたかったのですが、よい題材がなかったので、とてもよい例になりました。

# 最後に
- 目指せ献血100回