• #TODO
  • #Jリーグ
  • #実装計画
financial-data完了

純資産増減ウォーターフォール実装計画

PR情報

  • ブランチ: claude/implement-net-assets-waterfall-81XYK
  • 目的: ウォーターフォールチャートでJリーグクラブの純資産増減を可視化

修正項目

ユーザー要望

#項目状態詳細
1端数調整を当期純利益に吸収✅ 完了調整バーを表示せず、discrepancyをnetIncomeに含める
2利益剰余金調整も当期純利益に吸収✅ 完了retainedEarningsChangeもnetIncomeに含める
3下部サマリーコメント削除✅ 完了variance-summaryセクションを削除
4高さ固定✅ 完了CHART_HEIGHT=220pxで固定(年度切り替えで変わらないように)
5資本変動ラベル変更✅ 完了「増資等」「減資等」→「資本金等の増減」に統一

コードレビュー指摘事項(初回)

#項目優先度状態詳細
1parseInt radix追加Low✅ 完了parseInt(p.label)parseInt(p.label, 10)
2色定数化Medium✅ 完了COLORSオブジェクトに抽出
3ResizeObserver エラーハンドリングMedium✅ 完了try-catchでフォールバック
4ツールチップ位置調整Low✅ 完了コンテナからはみ出ないように
5discrepancy閾値定数化Medium✅ 完了調整バー自体を削除したため不要に

コードレビュー指摘事項(2回目)

#項目優先度状態詳細
1テストと実装の不一致P0 🔴✅ 完了テストが古いロジックを検証している
2テストのラベル期待値更新P0 🔴✅ 完了"増資等"→"資本金等の増減"
3Dead Code削除P1 🟡✅ 完了retainedEarningsChangeのチェックブロック
4getRawData()のメモ化P1 🟡✅ 完了computedで再利用
5ARIAラベル追加P2 🟢✅ 完了アクセシビリティ改善
6Nullチェック改善P2 🟢✅ 完了一貫性のある記述に
7負の純資産でコネクター表示P0 🔴✅ 完了runningTotalでY座標計算

追加実装(UX改善)

#項目状態詳細
1クラブ切り替え時の年度保持✅ 完了URLクエリパラメータ?year=2020で状態を保持
2クラブ切り替え時のタブ保持✅ 完了URLクエリパラメータ?tab=net-assetsで状態を保持
3クエリパラメータを年度形式に変更✅ 完了period=14year=2024で直感的に

追加実装(アクセシビリティ)

#項目状態詳細
1チャートにARIAラベル追加✅ 完了role="figure", role="img", aria-label
2タブにARIA属性追加✅ 完了role="tablist", role="tab", role="tabpanel"
3ツールチップにARIA追加✅ 完了role="tooltip", aria-live="polite"

コードレビュー指摘事項(3回目)

#項目優先度状態詳細
1queryYear NaN検証Low✅ 完了isNaNチェックと2000-2100の範囲検証追加
2ResizeObserverメモリリークLow✅ 完了新規作成前に既存observerをdisconnect
3マジックナンバー抽出Low✅ 完了TOOLTIP_MAX_WIDTH = 220定数化

変更ファイル

apps/web/app/composables/jleague/useJLeagueNetAssetsVariance.ts

  1. COLORS定数追加 - バー色を一元管理
  2. calculateNetAssetsVariance修正 - discrepancyをnetIncomeに吸収
  3. netAssetsVarianceToBarData修正 - 調整バー削除、COLORS使用
  4. parseInt radix追加

apps/web/app/components/jleague/JLeagueNetAssetsWaterfallChart.vue

  1. variance-summaryセクション削除 - テンプレート・スタイル両方
  2. 高さ固定 - CHART_HEIGHT = 220
  3. ResizeObserver try-catch追加
  4. ツールチップ位置調整 - はみ出し防止

検算ロジック

前年純資産 + 当期純利益(調整済) + 資本変動 = 当期純資産
  • netIncome = rawNetIncome + retainedEarningsChange + discrepancy
  • 利益剰余金調整(配当等)と端数調整を全て当期純利益に吸収
  • これによりチャートは「前年純資産 → 当期純利益 → (増資等) → 当年純資産」のシンプルな構成に

テスト

テストファイル: apps/web/tests/jleague-net-assets-waterfall.test.ts

  • 全クラブ全年度の純資産整合性検証(895/895 = 100%)
  • 特定クラブ(浦和)の詳細検証
  • 負の純資産ケース
  • 大規模資本変動ケース(鹿島、浦和、柏、FC東京、東京V、町田)

残作業

  • ローカルで動作確認
  • テストパス確認(13 tests passed)
  • クラブ切り替え時の状態保持(年度・タブ)
  • PRマージ

実装詳細(クラブ切り替え時の状態保持)

変更ファイル

  • apps/web/app/pages/financial-quiz/jleague/club/[club].vue
    • URLクエリパラメータ ?year=2024&tab=net-assets で状態を管理
    • getClubUrl() 関数で前後クラブへのリンクにパラメータを付与
    • onMounted でクエリパラメータから状態を復元
    • NaN検証と範囲チェック(2000-2100年)を追加
  • apps/web/app/components/jleague/JLeaguePLWaterfallSection.vue
    • activeTabdefineModel に変更し、v-model対応
  • apps/web/app/components/jleague/JLeagueNetAssetsWaterfallChart.vue
    • ARIAラベル追加(chartAriaLabel, svgAriaLabel computed)
    • ResizeObserverのメモリリーク対策
    • TOOLTIP_MAX_WIDTH定数化