財務諸表チャート - 実数分析・比率分析の分離表示

概要

現在の ProportionalFinancialStatementsAnimated コンポーネントは、金額と比率を同じチャートで比例縮尺表示している。 これを「実数分析」と「比率分析」の2つのセクションに分けて表示する新しいコンポーネントを作成する。

現状のコンポーネント

• ファイル: app/components/financial-quiz/ProportionalFinancialStatementsAnimated.vue
• データ: app/composables/useMicrosoftData.ts
• 表示ページ: app/pages/financial-quiz/proportional-animation.vue

新コンポーネントの要件

1. 実数分析（上部）

貸借対照表 (BS)

• Y軸: 百万円（または百万ドル）
• 左側バー: 資産合計（流動資産 + 固定資産）
• 右側バー: 負債・純資産合計（流動負債 + 固定負債 + 純資産）
• 色分け:
  • 流動資産: 薄い緑
  • 固定資産: 濃い緑
  • 流動負債: ピンク
  • 固定負債: オレンジ
  • 純資産: 黄色

損益計算書 (PL)

• Y軸: 百万円（または百万ドル）
• 左側バー: 費用 + 利益（売上原価 + 販管費 + 営業利益）
• 右側バー: 売上高（収益）
• 色分け:
  • 費用: グレー系
  • 利益: 緑系
  • 売上高: 黄色

2. 比率分析（下部）

貸借対照表 (BS)

• Y軸: 0-100%
• 資産側: 流動資産 %, 固定資産 %
• 負債・純資産側: 流動負債 %, 固定負債 %, 純資産 %
• 各項目のパーセンテージをラベル表示

損益計算書 (PL)

• Y軸: 0-100%
• 費用側: 売上原価 %, 販管費 %, 営業利益 %
• 収益側: 売上高 100%

データ構造

現在の useMicrosoftData.ts のデータ構造を使用:

interface FinancialData {
  bs: {
    currentAssets: BalanceSheetItem[]     // 流動資産
    fixedAssets: BalanceSheetItem[]       // 固定資産
    currentLiabilities: BalanceSheetItem[] // 流動負債
    fixedLiabilities: BalanceSheetItem[]   // 固定負債
    equity: BalanceSheetItem[]             // 純資産
  }
  pl: {
    expenses: number  // 費用
    profit: number    // 利益
    revenue: number   // 収益
  }
}

実装メモ

ファイル構成

• 新コンポーネント: app/components/financial-quiz/FinancialAnalysisChart.vue
• テスト表示: app/pages/financial-quiz/proportional-animation.vue の Microsoft セクション下部に追加

注意点

• 既存の ProportionalFinancialStatementsAnimated.vue は変更しない
• 完全に新規のコンポーネントとして作成
• 時系列データに対応（アニメーション付き）
• 同じ useMicrosoftData composable を使用

参考画像

ユーザー提供の画像を参照:

• 上部: 実数分析（百万円）- 縦棒グラフ
• 下部: 比率分析（%）- 100%積み上げ棒グラフ

次のステップ

1. FinancialAnalysisChart.vue コンポーネントを新規作成
2. proportional-animation.vue ページに追加してテスト
3. 表示の調整とスタイリング