stacked bar chart of HUMAN_TO_AI and AI_TO_HUMAN messages for the last 2 weeks

react-script-stacked-bar-chart-of-human-to-ai-messages-for-the-last-two-weeks

import React from "react";
import { Bar } from "react-chartjs-2";
import "chart.js/auto";

const data = [
  { WEEK_START: "2024-12-30", TYPE: "AI_TO_HUMAN", TOTAL_MESSAGES: 5055261 },
  { WEEK_START: "2024-12-30", TYPE: "HUMAN_TO_AI", TOTAL_MESSAGES: 5000859 },
  { WEEK_START: "2025-01-06", TYPE: "AI_TO_HUMAN", TOTAL_MESSAGES: 6102716 },
  { WEEK_START: "2025-01-06", TYPE: "HUMAN_TO_AI", TOTAL_MESSAGES: 6048182 },
  { WEEK_START: "2025-01-13", TYPE: "AI_TO_HUMAN", TOTAL_MESSAGES: 1256256 },
  { WEEK_START: "2025-01-13", TYPE: "HUMAN_TO_AI", TOTAL_MESSAGES: 1234567 },
];

const Dashboard = () => {
  // Prepare data for the chart
  const labels = Array.from(new Set(data.map((item) => item.WEEK_START)));
  const aiToHumanData = labels.map((label) => {
    const item = data.find((d) => d.WEEK_START === label && d.TYPE === "AI_TO_HUMAN");
    return item ? item.TOTAL_MESSAGES : 0;
  });
  const humanToAiData = labels.map((label) => {
    const item = data.find((d) => d.WEEK_START === label && d.TYPE === "HUMAN_TO_AI");
    return item ? item.TOTAL_MESSAGES : 0;
  });

  const chartData = {
    labels: labels,
    datasets: [
      {
        label: "AI to Human",
        data: aiToHumanData,
        backgroundColor: "#3e95cd",
      },
      {
        label: "Human to AI",
        data: humanToAiData,
        backgroundColor: "#8e5ea2",
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
      },
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true,
      },
    },
  };

  return (
    <div style={{ padding: "20px" }}>
      <h1>Boost KPI Dashboard</h1>

      {/* Data Table */}
      <table border="1" style={{ margin: "20px 0", width: "100%", textAlign: "left" }}>
        <thead>
          <tr>
            <th>Week Start</th>
            <th>Type</th>
            <th>Total Messages</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.WEEK_START}</td>
              <td>{item.TYPE}</td>
              <td>{item.TOTAL_MESSAGES}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Chart Visualization */}
      <div style={{ maxWidth: "800px", margin: "0 auto" }}>
        <Bar data={chartData} options={options} />
      </div>
    </div>
  );
};

export default Dashboard;