feat: add ComparisonResult and EnergyUsage components with performance metrics and energy usage charts
This commit is contained in:
Nalvazhuthi
@@ -189,8 +189,242 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.compare-result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
z-index: 10;
|
||||
background: var(--background-color-secondary);
|
||||
backdrop-filter: blur(20px);
|
||||
padding: 18px 8px;
|
||||
|
||||
.header {
|
||||
width: fit-content;
|
||||
background-color: var(--background-color-solid);
|
||||
color: var(--background-color-accent);
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.compare-result-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.comparisionCard {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
max-height: 200px;
|
||||
background: var(--background-color);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
border-radius: 12px;
|
||||
padding: 8px 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.performanceResult-wrapper {
|
||||
min-width: 328px;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
padding-right: 65px;
|
||||
|
||||
.header {
|
||||
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.metrics-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
|
||||
.metrics-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
|
||||
.metric {
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
padding-top: 6px;
|
||||
font-size: var(--font-size-xlarge);
|
||||
color: var(--background-color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
padding-bottom: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
.metrics-right {
|
||||
height: fit-content;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
|
||||
gap: 2px;
|
||||
overflow: visible;
|
||||
|
||||
margin: auto 0;
|
||||
|
||||
.metric-wrapper {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 50px;
|
||||
overflow: visible; // allow content like labels to overflow
|
||||
|
||||
&:nth-child(1) {
|
||||
&::after {
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
top: -100%;
|
||||
left: 50%;
|
||||
width: 100%; // Required for visible shape
|
||||
height: 40px;
|
||||
background-color: #B7B7C6;
|
||||
|
||||
// Custom polygon shape (adjust if needed)
|
||||
clip-path: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, 0 100%, 42% 52%);
|
||||
|
||||
|
||||
z-index: 0; // Behind any inner content
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: content above the shape
|
||||
>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.metric-label {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0%;
|
||||
white-space: nowrap;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
font-size: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.metric-wrapper {
|
||||
|
||||
&:nth-child(1) {
|
||||
.metric-label {
|
||||
top: -57%;
|
||||
left: 220%;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.metric-label {
|
||||
white-space: normal;
|
||||
width: 50px;
|
||||
// top: -50%;
|
||||
left: 230%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metric {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: var(--background-color, wheat);
|
||||
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
|
||||
// backdrop-filter: blur(20px);
|
||||
// filter: drop-shadow(30px 10px 4px #4444dd);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Content stays above the shape
|
||||
>* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.metric-wrapper:nth-child(2) {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.metric-wrapper:nth-child(3) {
|
||||
grid-row: span 2 / span 2;
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
margin-top: 40%;
|
||||
left: -16px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.simulation-tag {
|
||||
|
||||
background: var(--background-color-button);
|
||||
|
||||
color: var(--icon-default-color-active);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 10px 5px;
|
||||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
@@ -210,4 +444,151 @@
|
||||
|
||||
// transition: padding 0.3s ease;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.energy-usage {
|
||||
position: relative;
|
||||
|
||||
.energy-usage-wrapper {
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding-top: 25px;
|
||||
font-size: var(--font-size-xxxlarge);
|
||||
color: var(--background-color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.simulation-details {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
|
||||
.simulation-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--background-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 90%;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.throughPutCard-container {
|
||||
|
||||
.layers-wrapper {
|
||||
padding: 20px 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.layer-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:last-child {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 90%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-time-container {
|
||||
.cycle-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
.layers-wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.layers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.layer-name {
|
||||
color: var(--background-color-accent);
|
||||
}
|
||||
|
||||
.layer-time {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
.layer-profit {
|
||||
color: #14CA44;
|
||||
text-align: end;
|
||||
|
||||
span {
|
||||
color: #14CA44;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overallDowntime-container {
|
||||
.totalDownTime {
|
||||
background: var(--background-color-secondary);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 8px 10px;
|
||||
margin: 44px 0;
|
||||
|
||||
.totalDownTime-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.totalDownTime-left {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.value {
|
||||
font-size: var(--font-size-xlarge);
|
||||
color: var(--background-color-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overallScrapRate {
|
||||
.overallScrapRate-value {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user