Dwinzo_dev/app/src/components/ui/compareVersion/ComparisonResult.tsx

173 lines
5.3 KiB
TypeScript
Raw Normal View History

import React, { useMemo } from "react";
import PerformanceResult from "./result-card/PerformanceResult";
import EnergyUsage from "./result-card/EnergyUsage";
import { Bar, Line, Pie } from "react-chartjs-2";
const ComparisonResult = () => {
const options = useMemo(
() => ({
responsive: true,
maintainAspectRatio: false,
plugins: {
title: { display: false },
legend: { display: false },
},
scales: {
x: { display: false, grid: { display: false } },
y: { display: false, grid: { display: false } },
},
}),
[]
);
// Color palette
const purpleDark = "#6a0dad";
const purpleLight = "#b19cd9";
const throughputData = {
labels: ["Layout 1", "Layout 2"],
datasets: [
{
label: "Throughput (units/hr)",
data: [500, 550],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10, // ✅ Rounded all corners (TypeScript-safe)
// borderSkipped: "bottom", // ✅ This is allowed by the Chart.js types
},
],
};
const cycleTimePieData = {
labels: ["Layout 1", "Layout 2"],
datasets: [
{
label: "Cycle Time (sec)",
data: [120, 110],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderWidth: 2,
},
],
};
const downtimeData = {
labels: ["Layout 1", "Layout 2"],
datasets: [
{
label: "Downtime (mins)",
data: [17, 12],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10,
borderSkipped: false,
},
],
};
const scrapRateData = {
labels: ["Layout 1", "Layout 2"],
datasets: [
{
label: "Scrap Rate (tons)",
data: [2.7, 1.9],
backgroundColor: [purpleDark, purpleLight],
borderColor: [purpleDark, purpleLight],
borderWidth: 1,
borderRadius: 10,
borderSkipped: false,
},
],
};
return (
<div className="compare-result-container">
<div className="header">Performance Comparison</div>
<div className="compare-result-wrapper">
<EnergyUsage />
<div className="throughPutCard-container comparisionCard">
<h4>Throughput (units/hr)</h4>
<div className="layers-wrapper">
<div className="layer-wrapper">
<div className="key">Layout 1</div>
<div className="value">500/ hr</div>
</div>
<div className="layer-wrapper">
<div className="key">Layout 2</div>
<div className="value">550/ hr</div>
</div>
<div className="chart">
<Bar data={throughputData} options={options} />
</div>
</div>
</div>
<div className="cycle-time-container comparisionCard">
<div className="cycle-main">
<h4 className="cycle-header">Cycle Time</h4>
<div className="layers-wrapper">
<div className="layers">
<div className="layer-name">Layout 1</div>
<div className="layer-time">120 Sec</div>
<div className="layer-profit">
<span></span>19.6%
</div>
</div>
<div className="layers">
<div className="layer-name">Layout 2</div>
<div className="layer-time">110 Sec</div>
<div className="layer-profit">
<span></span>1.6%
</div>
</div>
</div>
</div>
<div className="chart">
<Pie data={cycleTimePieData} options={options} />
</div>
</div>
<div className="overallDowntime-container comparisionCard">
<h4 className="overallDowntime-header">Overall Downtime</h4>
<div className="totalDownTime-wrapper">
<div className="totalDownTime">
<div className="totalDownTime-right">
<div className="totalDownTime-label">Total down time</div>
<div className="totalDownTime-subLabel">(Simulation 1)</div>
</div>
<div className="totalDownTime-left">
<div className="value">17</div>
<div className="key">mins</div>
</div>
</div>
<div className="chart">
<Bar data={downtimeData} options={options} />
</div>
</div>
</div>
<div className="overallScrapRate comparisionCard">
<h4 className="overallScrapRate-header">Overall Scrap Rate</h4>
<div className="overallScrapRate-wrapper">
<div className="overallScrapRate-value">
<div className="overallScrapRate-label">Layout 1</div>
<div className="overallScrapRate-key">Total scrap produced by</div>
<div className="overallScrapRateKey-value">2.7 ton</div>
</div>
<div className="chart">
<Bar data={scrapRateData} options={options} />
</div>
</div>
</div>
<PerformanceResult />
</div>
</div>
);
};
export default ComparisonResult;