ダッシュボードの上半分を作成

[AyumuOgasawara]

概要

ダッシュボードの上半分を作成

• [x] 何月の予算化の表示
• [x] 予算の合計金額を表示
• [x] 何円使用しているかを表示し、予算の何割を占めているかを表す円グラフを作成
• [x] 残り何日で今月が終わるのかを表示

親イシュー

Relates to #44

実装方法

基本的にはmuiを使用して実装する。

[AyumuOgasawara]

何月かの表示 初期値は今月にするため、以下のように実装。

const today = new Date(); // UTC時間

  // formattedDateは関数化してutilsにおいてもいいかも　"ja-JP"で日本時間に変換
  const formattedDate = today.toLocaleDateString("ja-JP", {
    month: "long",
  });

[AyumuOgasawara]

全てUTCで計算するようにする。

例えば、新しい出費を作成した場合にcreatedAtに入るのはUTCである。そのため、月毎の出費を取得する際にUTCで検索をかける必要がある。

ただ、データベース内に入っているものもUTCなどであまり考えなくて良い。

const date = new Date(2024, 8, 1); // 2024/09/01日だがUTC時間に変更される
  console.log("前", date);
  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1); // 日本の1日をUTCで表示
  const lasrDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  console.log("firstDay", firstDay);
  console.log("lasrDay", lasrDay);

出力結果

前 2024-09-09T15:00:00.000Z
firstDay 2024-08-31T15:00:00.000Z
lasrDay 2024-09-29T15:00:00.000Z

[AyumuOgasawara]

reduceを使うことで、amoutの計算を行った。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

[AyumuOgasawara]

カテゴリー毎の合計金額も取得できた

// categoryIdでグルーピングしてamountを合計する
  const totalAmountOfEachCategory = monthExpenses.reduce((acc, current) => {
    const categoryId = current.categoryId;

    // カテゴリIDがまだ存在しない場合は初期化
    if (!acc[categoryId]) {
      acc[categoryId] = 0;
    }

    // カテゴリIDごとにamountを加算
    acc[categoryId] += current.amount;

    return acc;
  }, {} as { [categoryId: number]: number });

  console.log(totalAmountOfEachCategory);

[AyumuOgasawara]

配置を整えた簡易的なダッシュボード上半分を作成

[AyumuOgasawara]

グラフを作成して、レイアウトやカラーを整えた

[AyumuOgasawara]

chatの真ん中に数字が表示されるように、240x240のBoxに 240x240 のDoughnutPieChartを入れ、文字を親タグの真ん中に置くようにした

[AyumuOgasawara]

寝ぼけていたのか、今まで予算と思って表示していたものが出費だったので、予算を取得するようにして、表示した。

[AyumuOgasawara]

TODO

• [x] 金額の表示に変える(1000 -> 1,000)
• [x] 円グラフの中身をpropsで与えれるようにする
• [x] カテゴリ毎の予算、出費を取得する
  • [x] グラフに予算と出費 の割合を表示
• [x] 残り何日かの計算
  • [x] グラフ後何日か表示

[AyumuOgasawara]

lib/db/とかtypes/の下とかでindexファイルをおき、そのディレクトリ化のファイルの関数をimportしたら、ディレクトリ毎でまとめてexportできる。

例：

// src/lib/db/index.ts

import { getMonthBudgets } from "@/lib/db/budget"
import { getMonthExpenses } from "@/lib/db/expense"

export { getMonthBudgets, getMonthExpenses}

// src/_components/features/Dashbord/UpperDashbord.tsx

import { getMonthExpenses, getMonthBudgets } from "@/lib/db";

[AyumuOgasawara]

今更だけど、後何日より、どれくらい何に使ったかがわかったほうがいいんじない？ それはv2として、とりあえず今ので行こう。他に時間を使いたい。

イメージとしては、カテゴリー毎に色が分かれており、出費合計の何割をそのカテゴリーに使ったかがわかる