React script that represents the weekly messages for the last 12 weeks

react-script-weekly-messages-last-12-weeks

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

const data = [
  { WEEK_START: "2024-10-21", TOTAL_MESSAGES: 14369219 },
  { WEEK_START: "2024-10-28", TOTAL_MESSAGES: 16087327 },
  { WEEK_START: "2024-11-04", TOTAL_MESSAGES: 16607384 },
  { WEEK_START: "2024-11-11", TOTAL_MESSAGES: 15846486 },
  { WEEK_START: "2024-11-18", TOTAL_MESSAGES: 15901369 },
];

const Dashboard = () => {
  // Prepare data for the chart
  const chartData = {
    labels: data.map((item) => item.WEEK_START),
    datasets: [
      {
        label: "Total Messages",
        data: data.map((item) => item.TOTAL_MESSAGES),
        borderColor: "#3e95cd",
        fill: false,
      },
    ],
  };

  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>Total Messages</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.WEEK_START}</td>
              <td>{item.TOTAL_MESSAGES}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Chart Visualization */}
      <div style={{ maxWidth: "800px", margin: "0 auto" }}>
        <Line data={chartData} options={{
          responsive: true,
          plugins: {
            legend: {
              display: true,
              position: "top",
            },
          },
        }} />
      </div>
    </div>
  );
};

export default Dashboard;