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

はじめに

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

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

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

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

今回使用したのはこちら
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かと思いますが、私は手で作成しました）

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

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

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

デモサイト

デモサイトはこちら　
（献血データは、自分の結果をベースに適当に数値を変更しているサンプルデータ）

①Dashboard：現在の献血回数・100回まであと何回・前回の献血日・血圧/脈拍に加えて各検査結果データ15グラフ

②生化学検査結果：7グラフ（説明付き）

③血球計数検査結果：8グラフ（説明付き）

コード（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回