ダッシュボード下部のy軸のメモリが見切れるバグ

[AyumuOgasawara]

概要

予算が10万以上になった際に、メモリが見切れる

バグ画像

[AyumuOgasawara]

Matplotlibの話ならあった。

https://qiita.com/78910jqk/items/e8bce993081c384afdba

[AyumuOgasawara]

結構あるあるらしい。

[AyumuOgasawara]

これは、数字が増えていくにつれて変更し続けなければならなくなる。

例えば、現在100,000で見えなくなるが、これを修正しても、1,000,00の際には新たに修正しなければならない。

[AyumuOgasawara]

そのため、表示方法を変えるようにした。

100,000以上のものは10万と表示するようにする1000万まで、この表示で、1億からまた変更する。 まずは、10万の対応のみ行う。

[AyumuOgasawara]

yAxis を以下のように指定

yAxis={[{valueFormatter: (v) => v >= 100000 ?${formatCurrency(v/10000)}万: formatCurrency(v)}]}

[AyumuOgasawara]

formatCurrenctは以下のようにすることで、¥マークをつけるかどうか決めれるようにした

// 日本円の表記にフォーマット (useCurrencyがture：1000 -> ¥1,000, useCurrencyがfalse：1000 -> 1,000)
export const formatCurrency = (
  amount: number,
  useCurrency: boolean = false
): string => {
  return new Intl.NumberFormat("ja-JP", {
    style: useCurrency ? "currency" : "decimal",
    currency: useCurrency ? "JPY" : undefined,
  }).format(amount);
};