チャートラベル表示の改善

概要

actual-consensusページのEACチャートにおいて、数値ラベルの視認性を改善するための変更を実施した。

変更内容

1. 色の統一（グレースケール化）

変更前

バーの色: 緑（Sales）、青（Net Income）、紫（EPS）など多色
実績と予測で異なる色相を使用
ラベルの色も各色に対応

変更後

バーの色: グレー統一
- 実績データ: 濃いグレー (#4a4a4a)
- 予測データ: 薄いグレー (#a0a0a0)
折れ線・ラベル: #333333 / #888888
凡例も同様にグレーに統一

2. ラベルの視認性向上（白アウトライン）

変更前

ラベルがバーの上に配置されるが、バーの色と重なると読みにくい
特に高いバー（チャート上端に近い）で問題が顕著

変更後

すべての数値ラベルに**白いストローク（アウトライン）**を追加
- stroke="#ffffff"
- stroke-width="3"
バーの色に被っても読みやすくなった

<!-- 白いアウトライン（背景） -->
<text fill="none" stroke="#ffffff" stroke-width="3">76B</text>
<!-- 実際のテキスト -->
<text fill="#333333">76B</text>

3. フォントサイズの統一

変更前

Annual: 9-11px
Quarterly: 7-9px（データが多いため小さめ）

変更後

すべて11px、font-weight 600で統一
Annual/Quarterly問わず同じサイズ

4. 全期間へのラベル表示

変更前

Annualは2つおき、Quarterlyは3つおきに間引いて表示
shouldShowGrowthLabel(index) で制御

変更後

すべての期間にラベルを表示
間引きロジックを削除

5. パーセンテージ表示の改善

変更前

+15%  -8%  +22%

プラス値: + 記号付き
マイナス値: - 記号付き

変更後

15%  ▾8%  22%

プラス値: 符号なし（正の値であることは文脈から明らか）
マイナス値: ▾（小さい下向き黒三角）+ 数値
- 使用文字: ▾ (U+25BE, Black Down-Pointing Small Triangle)
- 下向き三角で「下落」を視覚的に表現

6. X軸ラベル（期間）のフォントサイズ統一

変更前

Annual: 9px
Quarterly: 7px

変更後

すべて11px、font-weight 600で統一
値ラベルと同じサイズ・ウェイトで一貫性を確保

7. 段階損益率チャートの追加（Profit Margins）

新規追加

Sales（売上高）チャートの下に、段階損益率（Profit Margins）の折れ線チャートを追加。

表示項目

Gross Margin（売上総利益率）: 最も濃いグレー (#2a2a2a)
EBIT Margin（営業利益率）: 中間のグレー (#4a4a4a)
Net Margin（純利益率）: 最も薄いグレー (#6a6a6a)

特徴

折れ線グラフで率の推移を表示
各データポイントにマウスオーバーでツールチップ表示
白アウトライン付きの値ラベルで視認性確保
Annual/Quarterly両方に対応

// データマッピング
{
  grossMargin: m['Gross_Margin_Pct'],
  ebitMargin: m['EBIT_Adj._Margin_Pct'],
  netMargin: m['Net_Income_Adj._Margin_Pct']
}

対象コンポーネント

EACSingleMetricChart.vue - メインの変更対象
EACBarChart.vue - 色のグレー化
EACCombinedChart.vue - 色のグレー化
EACEpsChart.vue - 色のグレー化
EACMarginChart.vue - 新規追加（段階損益率チャート）

効果

視認性向上: 白アウトラインにより、どの背景でもラベルが読みやすい
一貫性: グレースケールで統一され、データの区別は濃淡で表現
情報量: 全期間にラベルが表示され、詳細な値を一目で確認可能
直感性: マイナス値が▾で表現され、下落が視覚的に分かりやすい