前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

前回はAPI側を作成したので、今回はフロント側を作成します。

使用したライブラリは、chart.jsです。

なんか、Vue.js用に拡張されたvue-chart.jsというものもあるみたいなのですが、うまく動かなかったので、chart.jsにしました。

原因はわからん。

npm install chart.js --save

でインストール。

resouces/assets/app.jsに以下を書き込みます。

require('chart.js');

これでどこでもchart.jsが使えます。

<template>
    <div>
        <div class="dashboard">
            <div class="chart">
                <canvas id="weight"></canvas>
            </div>
            <div class="command">
                <ul>
                    <li><a @click="onClickInput">クイック入力</a></li>
                    <li><a href="/weight">詳細</a></li>
                </ul>
            </div>
        </div>
        <weight-input-dialog-component :show="showInputDialogContent" @update="invokeUpdateList"></weight-input-dialog-component>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showInputDialogContent: false,
            datetimeList: [],
            weightList: [],
            fat_rateList: [],
            bmiList: [],
        };
    },
    created: function() {
    },
    mounted: function() {
        this.graphUpdate();
    },
    methods: {
        onClickInput: function() {
            this.showInputDialogContent = true;
        },
        invokeUpdateList: function() {
            this.graphUpdate();
        },
        graphUpdate: function() {
            this.datetimeList = [];
            this.weightList = [];
            this.fat_rateList = [];
            this.bmiList = [];
            var ctx = document.getElementById("weight");
            var self = this;
            axios.post('api/weight/graph').then(function(response){
                response.data.datas.forEach(element => {
                    self.datetimeList.push(element.datetime);
                    self.weightList.push(element.weight);
                    self.fat_rateList.push(element.fat_rate);
                    self.bmiList.push(element.bmi);
                });
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: self.datetimeList,
                        datasets: [
                            {
                                yAxisID: 'weight',
                                label: '体重(kg)',
                                data: self.weightList,
                                borderColor: "rgba(255,0,0,1)",
                                backgroundColor: "rgba(0,0,0,0)"
                            },
                            {
                                yAxisID: 'fat_rate',
                                label: '体脂肪率(%)',
                                data: self.fat_rateList,
                                borderColor: "rgba(0,255,0,1)",
                                backgroundColor: "rgba(0,0,0,0)"
                            },
                            {
                                yAxisID: 'bmi',
                                label: 'BMI',
                                data: self.bmiList,
                                borderColor: "rgba(0,0,255,1)",
                                backgroundColor: "rgba(0,0,0,0)"
                            },
                        ]
                    },
                    options: {
                        title: {
                            display: true,
                            text: '最近の記録',
                        },
                        elements: {
                            line: {
                                tension: 0,
                            }
                        },
                        scales: {
                            yAxes: [
                                {
                                    id: 'weight',
                                    type: 'linear',
                                    position: 'left',
                                    ticks: {
                                        suggestedMax: 100,
                                        suggestedMin: 0,
                                        stepsize: 10,
                                        callback: function(value, index, values){
                                            return value + 'kg';
                                        }
                                    }
                                },
                                {
                                    id: 'fat_rate',
                                    type: 'linear',
                                    position: 'right',
                                    ticks: {
                                        suggestedMax: 100,
                                        suggestedMin: 0,
                                        stepsize: 10,
                                        callback: function(value, index, values){
                                            return value + '%';
                                        }
                                    }
                                },
                                {
                                    id: 'bmi',
                                    type: 'linear',
                                    position: 'left',
                                    ticks: {
                                        suggestedMax: 100,
                                        suggestedMin: 0,
                                        stepsize: 10,
                                        callback: function(value, index, values){
                                            return value;
                                        }
                                    }
                                },
                            ]
                        }
                    }
                });
            }).catch(function(error){
            });
        }
    }
}
</script>

var ctx = document.getElementById(“weight”);でcanvasの要素を取得し、var myChart = new Chart(ctx, {…})で{…}の部分にデータを入れることで、canvasにグラフが描画されます。

axiosのpostメソッドを使用して、前回作成したAPIを呼び出し、表示するデータを項目ごとにリスト化してchart.jsに渡します。

動作結果はこんな感じ。

思ったよりいい感じです。

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

これからダッシュボードに表示するグラフを作成するんですが、それに使用するデータの取得を行います。

今回グラフに表示するのは、最近１０日間のデータのみ、という想定をしています。

    public function getGraphData($user)
    {
        $datetimes = [];
        for($i = 0; $i < 10 ; $i++) {
            $datetimes[] = date('Y-m-d', strtotime('today - '.$i.' day'));
        }

        return $user->WeightManagements()
                    ->whereIn(DB::raw('date_format(datetime, "%Y-%m-%d")'), $datetimes)
                    ->get();
    }

今回のポイントは特定ユーザに関連するデータのみを対象にする場合、

$user->WeightManagements()->whereIn()

という感じで、リレーションからのSQLビルダ作成、というやり方ができるらしい。

前回のホテル予約管理ではjoinやらwhereやら使いまくっててコードがごちゃごちゃしていたけど、その必要はなかった。

ただし、ここからgroupbyやら統計関連の関数を使用するとうまく行かない。

どうやら、laravelさんがget()の出力内容にuser_idなどの情報を含めているためにグループ化ができないため、SQL実行エラーとなるようです。

なので、一日の最新を取り出す、ということになると、このやり方ではSQLビルダは使用できなくって、PHP側で処理することになります。

今回はめんどくさいので、最新１０日のデータ全部、としました。

きちんとtinkerで動作確認したよ。

    /**
     * グラフ用データを取得する
     */
    public function graph(Request $request)
    {
        return response()->json(['datas' => $this->weightManagement->getGraphData(Auth::user())]);
    }

Route::post('api/weight/graph', 'Weight\ApiController@graph');

>>> $rep->getGraphData($user)
=> Illuminate\Database\Eloquent\Collection {#3849
     all: [
       App\Model\WeightManagement {#3843
         id: 1,
         datetime: "2020-05-28 02:14:00",
         weight: "80.00",
         fat_rate: "17.00",
         bmi: "27.00",
         created_at: "2020-05-28 02:14:50",
         updated_at: "2020-05-28 02:14:50",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3840
           user_id: 1,
           weight_management_id: 1,
         },
       },
       App\Model\WeightManagement {#3844
         id: 2,
         datetime: "2020-05-28 02:15:00",
         weight: "80.00",
         fat_rate: "17.00",
         bmi: "27.00",
         created_at: "2020-05-28 02:15:10",
         updated_at: "2020-05-28 02:15:10",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3841
           user_id: 1,
           weight_management_id: 2,
         },
       },
       App\Model\WeightManagement {#3845
         id: 5,
         datetime: "2020-05-28 02:34:00",
         weight: "80.00",
         fat_rate: "17.00",
         bmi: "28.00",
         created_at: "2020-05-28 02:34:49",
         updated_at: "2020-06-01 01:20:56",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3779
           user_id: 1,
           weight_management_id: 5,
         },
       },
       App\Model\WeightManagement {#3846
         id: 9,
         datetime: "2020-05-31 02:44:00",
         weight: "87.00",
         fat_rate: "17.00",
         bmi: "17.00",
         created_at: "2020-05-31 02:44:36",
         updated_at: "2020-05-31 02:44:36",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3834
           user_id: 1,
           weight_management_id: 9,
         },
       },
       App\Model\WeightManagement {#3847
         id: 10,
         datetime: "2020-06-02 02:03:00",
         weight: "87.80",
         fat_rate: "15.90",
         bmi: "27.00",
         created_at: "2020-06-02 02:03:29",
         updated_at: "2020-06-02 02:03:29",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3848
           user_id: 1,
           weight_management_id: 10,
         },
       },
     ],
   }