📚

Nuxt.jsでWebアプリケーション開発メモ32

に公開

概要

統計・グラフのカスタム期間で選択した期間に応じてデータを表示するようにするなど。

プロンプト32

# 命令32
- `pages/top.vue`の`統計・グラフ`の`カスタム`ボタンのポップアップメニュー項目をクリックしたとき、選択期間に応じた情報を表示する機能を実装してください。
- 情報表示対象は`体重・体脂肪率推移`グラフ、`消費カロリー推移`グラフ、`サマリー`の3つです。
- `サマリー`に`体脂肪率変化`を追加してください。仕様は既存の`体重変化`と同じです。(指定期間内の最初の日の体脂肪率と最後の日の体脂肪率の差異を表示。)

追加命令

  • summary REST APIのレスポンスデータのIFをOpen API Schemaで自動生成できるようにして、フロントエンド側ではそれを使用するようにして。

対応内容

  • カスタムボタン内の期間を選択し適用ボタンクリックで期間に応じたデータを取得し表示する。
  • summary REST APIのレスポンスデータのIFをOpen API Schemaで自動生成できるようにした。(バックエンド側の対応)
  • サマリー体脂肪率変化を追加。

画面

  • 過去1年とかを選択したとき、年の情報表示がないので分かりづらい。。

ソース差分

バックエンド

https://github.com/tkure/prototype-backend/commit/813090f2b02e0dd92029539b1ed75d6be8f4bf83

フロントエンド

https://github.com/tkure/prototype-frontend/commit/b7118f4d7744cec373602c6989a5c1b07551820e


[→ Nuxt.jsでWebアプリケーション開発メモ33]

Discussion