【ダイエット支援】【食事管理】グラフデータ取得処理を作成する。

前回までの状況はこちら

【ダイエット支援】【食事管理】データ削除ダイアログ処理を作成する。

最新ソースはこちら(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[]に設定すれば、グラフが表示されます。