feat: add ComparisonResult and EnergyUsage components with performance metrics and energy usage charts
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
import React from "react";
|
||||
import {
|
||||
GreenTickIcon,
|
||||
PerformanceIcon,
|
||||
TickIcon,
|
||||
} from "../../../icons/ExportCommonIcons";
|
||||
|
||||
const PerformanceResult = () => {
|
||||
return (
|
||||
<div className="performanceResult-wrapper comparisionCard">
|
||||
<div className="header">
|
||||
<div className="icon">
|
||||
<PerformanceIcon />
|
||||
</div>
|
||||
<div className="head">Performance result</div>
|
||||
</div>
|
||||
|
||||
<div className="metrics-container">
|
||||
<div className="metrics-left">
|
||||
<div className="metric">
|
||||
<div className="metric-label">
|
||||
Success rate{" "}
|
||||
<span>
|
||||
<GreenTickIcon />
|
||||
</span>
|
||||
</div>
|
||||
<div className="metric-value">98%</div>
|
||||
</div>
|
||||
<div className="label">Environmental impact</div>
|
||||
</div>
|
||||
|
||||
<div className="metrics-right">
|
||||
<div className="metric-wrapper">
|
||||
<div className="metric-label">Waste generation</div>
|
||||
<div className="metric">
|
||||
<div className="metric-icon">I</div>
|
||||
<div className="metric-value">0.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metric-wrapper">
|
||||
<div className="metric-label">Risk
management</div>
|
||||
<div className="metric">
|
||||
<div className="metric-icon">I</div>
|
||||
<div className="metric-value">0.1%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="metric-wrapper">
|
||||
<div className="metric">
|
||||
<div className="metric-icon">I</div>
|
||||
<div className="metric-value">0.5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="simulation-tag">Simulation 1</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PerformanceResult;
|
||||
Reference in New Issue
Block a user