前回までの状況はこちら

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

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

ダッシュボードに表示するグラフを作成していきます。

どんあグラフにしようかというと、

こんな感じのレーダーグラフです。

一日分の摂取したタンパク質、脂質、炭水化物などの情報を取得するAPIが必要になります。

まずは、それを作ります。

app/Repository/EatingManagementRepository.php

    /**
     * 一日あたりのデータを取得する
     */
    public function getDaily($user, $date)
    {
        $eatings = $user->EatingManagements()
            ->where(DB::raw('date_format(date, "%Y-%m-%d")'), $date)
            ->get();

        $retDatas = [];
        for($j = 2; $j < count($this->paramNames); $j++) {
            $retDatas[$this->paramNames[$j]] = 0;
        }
        foreach($eatings as $eating) {
            for($j = 2; $j < count($this->paramNames); $j++) {
                $retDatas[$this->paramNames[$j]] += $eating->{$this->paramNames[$j]};
            }
        }
        return $retDatas;
    }

$dateに取得する日付が入ります。

その日付に一致するデータをすべて取得し、それを栄養素毎に集計します。

これをAPIで取得するようにします。

app/Http/Controllers/Eating/ApiController.php

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

routes/web.php

Route::post('api/eating/graph', 'Eating\ApiController@graph');

これをダッシュボードからデータを取得し、グラフにします。

resources/assets/js/components/Eating/EatingDashboardComponent.vue

            param: {},
            contents: {
               date: "",
            },
            label: ['タンパク質', '脂質', '炭水化物', 'カロリー'],
            datasets: [],
            sub: 0,
        };
    },
    created: function() {
        this.todayDate = this.getDate(this.sub);
    },
    mounted: function() {
        this.graphUpdate();
    },
    methods: {
        getDate: function(sub) {
            var today = new Date();
            return today.getFullYear() + "-" + ('00'+(today.getMonth() + 1)).slice( -2 ) + "-" + ('00'+(today.getDate() + sub)).slice(-2);
        },
        onClickNext: function() {
            this.sub++;
            this.todayDate = this.getDate(this.sub);
            this.graphUpdate();
        },
        onClickPrev: function() {
            this.sub--;
            this.todayDate = this.getDate(this.sub);
            this.graphUpdate();
        },
        onClickInput: function() {
            this.showInputDialogContent = true;
        },
        invokeUpdateList: function() {
            this.graphUpdate();
        },
        graphUpdate: function() {
            var ctx = document.getElementById("eating");
            var self = this;
            this.contents.date = this.todayDate;
            this.param.contents = this.contents;
            this.datasets = [];
            axios.post('api/eating/graph', this.param).then(function(response){
                if(response.data.data != null) {
                    self.datasets.push(response.data.data.protein);
                    self.datasets.push(response.data.data.liqid);
                    self.datasets.push(response.data.data.carbo);
                    self.datasets.push(response.data.data.calorie);
                    var myChart = new Chart(ctx, {
                        type: 'radar',
                        data: {
                            labels: self.label,
                            datasets: [{
                                label: self.todayDate,
                                data: self.datasets,
                                backgroundColor: 'RGBA(225,95,150, 0.5)',
                                borderColor: 'RGBA(225,95,150, 1)',
                                borderWidth: 1,
                                pointBackgroundColor: 'RGB(46,106,177)'
                            }]
                        },
                        options: {
                            title: {
                                display: true,
                                text: '摂取栄養素'
                            },
                            scale:{
                                ticks:{
                                    suggestedMin: 0,
                                    suggestedMax: 100,
                                }
                            }
                        }
                    });
                } else {
                    var myChart = new Chart(ctx, {
                        type: 'radar',
                        data: {
                            labels: self.label,
                            datasets: [
                            ]
                        },
                    });
                }
            }).catch(function(error){
            });
        }

デフォルトはアクセスした当日を表示し、next、prevクリックでそれぞれ次の日、前の日に切り替えることができるようにします。

getDate()で取得する日付の文字列を取得し、これをAPIのパラメータとします。

取得したデータをグラフのdatasets[]に設定すれば、グラフが表示されます。

次回はこのグラフをもっと見やすいようにカスタマイズしていきます。