Dwinzo_dev/app/src/components/ui/analysis/ThroughputSummary.tsx

import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";
import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";

ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);

// Helper function to generate random colors
const getRandomColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

const ThroughputSummary = () => {
  // Define all data internally within the component
  const timeRange = {
    startTime: "08:00 AM",
    endTime: "09:00 AM",
  };

  const throughputData = {
    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
    data: [100, 120, 110, 130, 125, 128, 132],
    totalThroughput: 1240,
    assetUsage: 85,
  };

  const energyConsumption = {
    energyConsumed: 456,
    unit: "KWH",
  };

  // Dynamic shift data
  const shiftUtilization = [
    { shift: 1, percentage: 30 },
    { shift: 2, percentage: 40 },
    { shift: 3, percentage: 30 },
  ];

  // Chart data configuration
  const chartData = {
    labels: throughputData.labels,
    datasets: [
      {
        label: "Units/hour",
        data: throughputData.data,
        borderColor: "#B392F0",
        tension: 0.4,
        pointRadius: 0, // Hide points
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    scales: {
      x: {
        grid: {
          display: false,
        },
        ticks: {
          display: false,
          color: "#fff",
        },
      },
      y: {
        grid: {
          display: false,
        },
        ticks: {
          display: false,
          color: "#fff",
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
      },
    },
  };

  return (
    <div className="throughoutSummary analysis-card">
      <div className="throughoutSummary-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Throughput Summary</div>
            <div className="sub-header">
              {timeRange.startTime} - {timeRange.endTime}
            </div>
          </div>
          <div className="icon-wrapper">
            <ThroughputSummaryIcon />
          </div>
        </div>

        <div className="process-container">
          <div className="throughput-value">
            <span className="value">{throughputData.totalThroughput}</span>{" "}
            Units/hour
          </div>
          <div className="lineChart">
            <div className="assetUsage">
              <div className="key">Asset usage</div>
              <div className="value">{throughputData.assetUsage}%</div>
            </div>
            <Line data={chartData} options={chartOptions} />
          </div>
        </div>

        <div className="footer">
          <div className="energyConsumption footer-card">
            <div className="header">Energy Consumption</div>
            <div className="value-container">
              <div className="energy-icon">
                <PowerIcon />
              </div>
              <div className="value-wrapper">
                <div className="value">{energyConsumption.energyConsumed}</div>
                <div className="unit">{energyConsumption.unit}</div>
              </div>
            </div>
          </div>
          <div className="shiftUtilization footer-card">
            <div className="header">Shift Utilization</div>
            <div className="value-container">
              <div className="value">{throughputData.assetUsage}%</div>

              <div className="progress-wrapper">
                {/* Dynamically create progress bars based on shiftUtilization array */}
                {shiftUtilization.map((shift, index) => (
                  <div
                    key={shift.shift}
                    className={`progress shift-${shift.shift}`}
                    style={{
                      width: `${shift.percentage}%`,
                      backgroundColor: getAvatarColor(index),
                    }}
                  ></div>
                ))}
              </div>

              <div className="progress-indicator">
                {/* Dynamically create shift indicators with random colors */}
                {shiftUtilization.map((shift, index) => (
                  <div className="shift-wrapper" key={shift.shift}>
                    <span
                      className={`indicator shift-${shift.shift}`}
                      style={{ backgroundColor: getAvatarColor(index) }} // Random color for indicator
                    ></span>
                    <label>Shift {shift.shift}</label>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ThroughputSummary;