• #TODO
  • #財務チャート
  • #ウォーターフォール
開発financial-data完了

概要

waterfall-test.vue ページのP/LウォーターフォールチャートとCFウォーターフォールチャートの改善項目。

TODO項目

1. P/Lウォーターフォールのラベルを日本語化

対象ファイル: app/components/financial-quiz/PLWaterfallChart.vue

現在英語表記になっているラベルを日本語に変更する。

現在変更後
Revenue売上高
Cost of Revenue売上原価
Gross Profit / Gross Loss売上総利益 / 売上総損失
SG&A販管費
R&D研究開発費
D&A減価償却費
Other Opその他営業費用
Operating Income / Operating Loss営業利益 / 営業損失
Non-op Income / Non-op Expense営業外収益 / 営業外費用
PreTax Income / PreTax Loss税引前利益 / 税引前損失
Taxes法人税等
Net Income / Net Loss純利益 / 純損失

2. X座標の位置合わせ

対象ファイル:

  • app/components/financial-quiz/PLWaterfallChart.vue
  • app/components/financial-quiz/CFWaterfallChart.vue

P/Lウォーターフォールの「Revenue（売上高）」のX座標と、CFウォーターフォールの「期首現預金」のX座標を揃える。

理由: 2つのウォーターフォールチャート間の余白を揃えているため、バーチャート自体の開始位置も揃えるべきだ。

確認項目:

  • 両チャートの MARGIN.left の値
  • 最初のバーの開始X座標

3. フォントの太さを調整

対象ファイル:

  • app/components/financial-quiz/PLWaterfallChart.vue
  • app/components/financial-quiz/CFWaterfallChart.vue

現在、ウォーターフォールチャートのラベルと数値はfont-weight: 600（セミボールド）になっている。

上部の比例縮尺図（ProportionalFinancialStatementsAnimated.vue）のフォントと合わせて、より細いフォントにする。

変更箇所:

  • ラベルの font-weight: 600 → 400 or 500
  • 数値の font-weight: 600 → 400 or 500

4. CFウォーターフォールに借入金増減を追加

対象ファイル:

  • app/components/financial-quiz/CFWaterfallChart.vue
  • app/pages/financial-quiz/waterfall-test.vue
  • scripts/generate-financial-data.mjs（データ追加が必要な場合）

財務CFセクションに「借入金増減（純額）」を追加する。

目的: 債務の返済額がいくらあったかを可視化する。

追加項目:

  • 短期借入金の増減
  • 長期借入金の増減
  • または両者の純額合計

データソース確認:

  • SQLiteの koyfin.db から該当するフィールドを確認
  • Cash Flow from Financing の内訳に含まれるか確認

関連ファイル

ファイル説明
app/components/financial-quiz/PLWaterfallChart.vueP/Lウォーターフォールチャート
app/components/financial-quiz/CFWaterfallChart.vueCFウォーターフォールチャート
app/pages/financial-quiz/waterfall-test.vueテストページ
app/components/financial-quiz/ProportionalFinancialStatementsAnimated.vue比例縮尺図（フォント参照用）
scripts/generate-financial-data.mjs財務データ生成スクリプト

進捗

  • P/Lラベル日本語化
  • X座標位置合わせ
  • フォント太さ調整
  • 借入金増減データ追加
  • 営業外損益のラベル修正（ネット値として表示）