Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance ComparisonResult component with chart integration and layout adjustments

Browse Source
This commit is contained in:
Nalvazhuthi
2025-05-28 09:54:16 +05:30
parent 3944588cb0
commit 3f3e6d4f14
2 changed files with 120 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@@ -1,8 +1,52 @@
import React from "react";
import React, { useMemo } from "react";
import PerformanceResult from "./result-card/PerformanceResult";
import EnergyUsage from "./result-card/EnergyUsage";
import { Bar } from "react-chartjs-2";
const ComparisonResult = () => {
const defaultData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "Dataset",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["#6f42c1"],
borderColor: "#b392f0",
borderWidth: 1,
},
],
};
// Memoize Chart Options
const options = useMemo(
() => ({
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
},
legend: {
display: false,
},
},
scales: {
x: {
display: false, // Hide x-axis
grid: {
display: false,
},
},
y: {
display: false, // Hide y-axis
grid: {
display: false,
},
},
},
}),
[]
);
return (
<div className="compare-result-container">
<div className="header">Performance Comparison</div>
@@ -45,24 +89,34 @@ const ComparisonResult = () => {
</div>
<div className="overallDowntime-container comparisionCard">
<div className="overallDowntime-header">Overall Downtime</div>
<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 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"></div>
</div>
</div>
<div className="overallScrapRate comparisionCard">
<div className="overallScrapRate-header">Overall Scrap Rate</div>
<div className="overallScrapRate-value">
<div className="overallScrapRate-label">Layout 1</div>
<div className="overallScrapRate-key">Total scrap produced by</div>
<div className="overallScrapRate-value">2.7 ton</div>
<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={defaultData} options={options} />
</div>
</div>
</div>
<PerformanceResult />