react script that represents the DAU for the last 7 days

react-script-dau-last-seven-days

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

const data = [
  { DATE: "2025-01-07", DAILY_ACTIVE_USERS: 13311 },
  { DATE: "2025-01-08", DAILY_ACTIVE_USERS: 13423 },
  { DATE: "2025-01-09", DAILY_ACTIVE_USERS: 12361 },
  { DATE: "2025-01-10", DAILY_ACTIVE_USERS: 12165 },
  { DATE: "2025-01-11", DAILY_ACTIVE_USERS: 13206 },
];

const Dashboard = () => {
  // Prepare data for the chart
  const chartData = {
    labels: data.map((item) => item.DATE),
    datasets: [
      {
        label: "Daily Active Users",
        data: data.map((item) => item.DAILY_ACTIVE_USERS),
        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>Date</th>
            <th>Daily Active Users</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.DATE}</td>
              <td>{item.DAILY_ACTIVE_USERS}</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;