Xプレミアムアナリティクスの活用法：投稿効果を最大化する方法

import React from 'react';
import { AreaChart, Area, BarChart, Bar, LineChart, Line, ComposedChart, Pie, PieChart, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, RadialBarChart, RadialBar, ScatterChart, Scatter, Tooltip, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from 'recharts';

const XAnalyticsDashboard = () => {
  // 推定データ - 実際のデータがないため推測値を使用
  const monthlyEngagementData = [
    { month: '2024-01', impressions: 125000, engagement: 3200, followers: 850 },
    { month: '2024-02', impressions: 145000, engagement: 3800, followers: 920 },
    { month: '2024-03', impressions: 180000, engagement: 4500, followers: 1100 },
    { month: '2024-04', impressions: 210000, engagement: 5200, followers: 1350 },
    { month: '2024-05', impressions: 250000, engagement: 6100, followers: 1600 },
    { month: '2024-06', impressions: 285000, engagement: 7000, followers: 1900 }
  ];

  const contentTypeData = [
    { type: 'テキスト', engagement: 2500 },
    { type: '画像', engagement: 4800 },
    { type: '動画', engagement: 6200 },
    { type: 'リンク', engagement: 3100 },
    { type: 'リツイート', engagement: 2800 }
  ];

  const timeAnalysisData = [
    { hour: '0-4', posts: 120, engagement: 1500 },
    { hour: '4-8', posts: 180, engagement: 2200 },
    { hour: '8-12', posts: 450, engagement: 5800 },
    { hour: '12-16', posts: 580, engagement: 7200 },
    { hour: '16-20', posts: 620, engagement: 8100 },
    { hour: '20-24', posts: 380, engagement: 4500 }
  ];

  const performanceMetrics = [
    { metric: 'インプレッション', value: 85 },
    { metric: 'エンゲージメント', value: 72 },
    { metric: 'クリック率', value: 65 },
    { metric: 'フォロワー増加', value: 78 },
    { metric: 'リーチ', value: 80 }
  ];

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-6 mb-8">
          <h1 className="text-2xl font-bold mb-4">Xプレミアムアナリティクス分析ダッシュボード</h1>
          <p className="text-sm text-gray-500 mb-6">
            データソース: <a href="https://service.cominka.co.jp/twitter-analytics/" target="_blank" rel="noopener noreferrer" className="text-blue-500 underline hover:text-blue-700">X（Twitter）アナリティクス徹底攻略！分析・活用でアカウントを成長させる</a>
          </p>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div className="bg-gray-50 p-6 rounded-lg">
              <h2 className="text-xl font-semibold mb-4">月間パフォーマンス推移</h2>
              <ResponsiveContainer width="100%" height={300}>
                <ComposedChart data={monthlyEngagementData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="month" />
                  <YAxis yAxisId="left" />
                  <YAxis yAxisId="right" orientation="right" />
                  <Tooltip />
                  <Legend />
                  <Area yAxisId="left" type="monotone" dataKey="impressions" fill="#8884d8" stroke="#8884d8" name="インプレッション数" />
                  <Line yAxisId="right" type="monotone" dataKey="engagement" stroke="#82ca9d" name="エンゲージメント数" />
                  <Bar yAxisId="right" dataKey="followers" fill="#ffc658" name="新規フォロワー数" />
                </ComposedChart>
              </ResponsiveContainer>
            </div>

            <div className="bg-gray-50 p-6 rounded-lg">
              <h2 className="text-xl font-semibold mb-4">コンテンツタイプ別エンゲージメント</h2>
              <ResponsiveContainer width="100%" height={300}>
                <PieChart>
                  <Pie
                    data={contentTypeData}
                    dataKey="engagement"
                    nameKey="type"
                    cx="50%"
                    cy="50%"
                    outerRadius={100}
                    fill="#8884d8"
                    label
                  />
                  <Tooltip />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-gray-50 p-6 rounded-lg">
              <h2 className="text-xl font-semibold mb-4">時間帯別アクティビティ分析</h2>
              <ResponsiveContainer width="100%" height={300}>
                <AreaChart data={timeAnalysisData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="hour" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Area type="monotone" dataKey="engagement" fill="#82ca9d" stroke="#82ca9d" name="エンゲージメント数" />
                  <Area type="monotone" dataKey="posts" fill="#8884d8" stroke="#8884d8" name="投稿数" />
                </AreaChart>
              </ResponsiveContainer>
            </div>

            <div className="bg-gray-50 p-6 rounded-lg">
              <h2 className="text-xl font-semibold mb-4">パフォーマンスメトリクス</h2>
              <ResponsiveContainer width="100%" height={300}>
                <RadarChart cx="50%" cy="50%" outerRadius="80%" data={performanceMetrics}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey="metric" />
                  <PolarRadiusAxis angle={30} domain={[0, 100]} />
                  <Radar name="パフォーマンス" dataKey="value" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
                  <Legend />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default XAnalyticsDashboard;