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

[AyumuOgasawara]

概要

ダッシュボードの下半分を作成。カテゴリー毎の予算と出費を棒グラフで表す。

関連タスク

Relates to #44 Relates to #45 Relates to #48

[AyumuOgasawara]

typescriptはenumが非推奨らしい。 https://typescriptbook.jp/reference/values-types-variables/enum/enum-problems-and-alternatives-to-enums

[AyumuOgasawara]

現状うまくできないことに対して、#50　バグのイシューを立てた

[AyumuOgasawara]

カテゴリーを取得して、categoryId(Key) と categoryName(Value)を持ったディクトを作成する。

[AyumuOgasawara]

muiのbarChartでは、以下のようにundefinedのものは0としてみなしてくれる。

[
  { budget: 11202, expense: 41750, categoryName: '食費' },
  { budget: 25075, expense: 22837, categoryName: 'その他' },
  { budget: 17076, expense: undefined, categoryName: '病院代' },
  { budget: 20374, expense: 18002, categoryName: '水道光熱費' },
  { budget: 25175, expense: undefined, categoryName: '家賃' },
  { budget: 17822, expense: undefined, categoryName: '日用品' },
  { budget: 20636, expense: undefined, categoryName: '娯楽' },
  { budget: 26735, expense: 50462, categoryName: '交通費' },
  { budget: 24872, expense: 42983, categoryName: '衣服・美容' }
]

[AyumuOgasawara]

と思ったら普通にエラーが出ていた

expense" is used for plotting bars, but contains nonnumerical elements. Bar plots only support numbers and null values.

[AyumuOgasawara]

undefinedだったら、0が入るようにした

budget: budgetCategoryTotals[category.id] ? budgetCategoryTotals[category.id] : 0

[AyumuOgasawara]

予算を変えたら出費の色を赤、超えていなかったら青にする。 予算は常時緑

[AyumuOgasawara]

予算を変えたら出費の色を赤、超えていなかったら青にする。 予算は常時緑

これをやろうとしたが、うまくいいものが見つからなかった。

https://mui.com/x/react-charts/bars/#color-scale

const series = [
    { dataKey: "budget", label: "予算", color: green},
    { dataKey: "expense", label: "出費"},
  ];

予算は緑固定で、出費を変動させたい。 以下実験的に9つの色を指定した

 <BarChart
      dataset={dataset}
      xAxis={[{ scaleType: "band", dataKey: xAxixsDataKey, colorMap: {
                type: 'ordinal',
                colors: [
                  '#ccebc5',
                  '#a8ddb5',
                  '#7bccc4',
                  '#4eb3d3',
                  '#2b8cbe',
                  '#08589e',
                ],
              }}]}
      series={series}
      {...chartSetting}
    />

結果

カテゴリー毎同じ色になってしまう。

[AyumuOgasawara]

DBとの接続をcacheするようにした

https://nextjs.org/docs/app/building-your-application/caching#react-cache-function

[AyumuOgasawara]

グラフの表示に時間がかかる可能性があるため、Loadingが入るようにした

https://zenn.dev/akfm/articles/nextjs-partial-pre-rendering#ppr%E3%81%A8%E3%81%AF