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

【LARAVEL】【ダイエット支援】ページネーションを実装する

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

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

このプログラムはこちらのリンク先で運用中です。

https://taki-lab.site:8443

さて、こちらのグラフなんですが、

• 

現状は最近の10日間のデータをグラフに表示させているのですが、

実際、もっと昔のデータもグラフに出したいじゃないですか。

なので、これをやります。

UIとしては、右下のところに日毎、週毎、月毎のリンクを作成して、それでグラフの切り替えをやっていこうと思います。

まずはフロント部分。

            <div class="command">
                <ul>
                    <li><a @click="onClickDay">day</a></li>
                    <li><a @click="onClickWeek">week</a></li>
                    <li><a @click="onClickMonth">month</a></li>
                </ul>
                <ul>
                    <li><a @click="onClickInput">クイック入力</a></li>
                    <li><a href="/weight">詳細</a></li>
                </ul>
            </div>

こんな感じでリンクを作ります。

フロントの処理はこちら。

        onClickDay: function() {
            this.contents.interval = 1;
            this.graphUpdate();
        },
        onClickWeek: function() {
            this.contents.interval = 7;
            this.graphUpdate();
        },
        onClickMonth: function() {
            this.contents.interval = 30;
            this.graphUpdate();
        },

クリックするリンクでデータ間隔を数字で設定して、APIのパラメータとして与えます。

ではAPIの処理。

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

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

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

実行結果はこちら。

日毎

• 

週毎

• 

月毎

• 

データが少ないからあまり違いがわかりませんが、表示はちゃんと変わってます。