Video Analytics Data

VideoAnalyticsData.js

//...

const VideoAnalyticsData = () => {

  //...

  return (
    <div className="flex flex-col items-center w-full bg-white rounded-lg shadow-lg p-6">
      <h2 className="text-2xl font-bold mb-4 text-gray-900">
        Video Analytics Summary
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
        <div className="bg-gray-100 rounded-lg p-4 shadow">
          <h3 className="text-lg font-semibold text-gray-700 text-center mb-4">
            Total Views
          </h3>
          <p className="text-2xl font-bold text-gray-900 text-center">
            {totalViews}
          </p>
        </div>
        <div className="bg-gray-100 rounded-lg p-4 shadow">
          <h3 className="text-lg font-semibold text-gray-700 text-center mb-4">
            Avg Watch Time (seconds)
          </h3>
          <p className="text-2xl font-bold text-gray-900 text-center">
            {averageWatchTime}
          </p>
        </div>
        <div className="bg-gray-100 rounded-lg p-4 shadow">
          <h3 className="text-lg font-semibold text-gray-700 text-center mb-4">
            Engagement Rate (%)
          </h3>
          <p className="text-2xl font-bold text-gray-900 text-center">
            {engagementRate}
          </p>
        </div>
        <div className="bg-gray-100 rounded-lg p-4 shadow">
          <h3 className="text-lg font-semibold text-gray-700 text-center">
            Countries
          </h3>
          <Bar data={countryChartData} />
        </div>
        <div className="bg-gray-100 rounded-lg p-4 shadow">
          <h3 className="text-lg font-semibold text-gray-700 text-center">
            Operating Systems
          </h3>
          <Bar data={osChartData} />
        </div>
        <div className="bg-gray-100 rounded-lg p-4 shadow">
          <h3 className="text-lg font-semibold text-gray-700 text-center">
            Applications
          </h3>
          <Bar data={appChartData} />
        </div>
      </div>
    </div>
  );
};

export default VideoAnalyticsData;