From 0b9e894341bb2e6c29e38e417178a654bee0e40c Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 28 May 2025 11:02:12 +0530
Subject: [PATCH] feat: refactor compareLayout styles for improved layout and
responsiveness
---
.../ui/compareVersion/CompareLayOut.tsx | 22 +-
app/src/styles/layout/compareLayout.scss | 1073 ++++++++---------
2 files changed, 521 insertions(+), 574 deletions(-)
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index b857c13..00480bc 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, Suspense } from "react";
import {
CompareLayoutIcon,
LayoutIcon,
@@ -9,6 +9,7 @@ import Search from "../inputs/Search";
import OuterClick from "../../../utils/outerClick";
import RegularDropDown from "../inputs/RegularDropDown";
import { useProductStore } from "../../../store/simulation/useProductStore";
+import Scene from "../../../modules/scene/scene";
interface Layout {
id: number;
@@ -90,6 +91,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
window.removeEventListener("mouseup", handleMouseUp);
document.body.classList.remove("resizing-active");
};
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isResizing]);
// Maintain proportional width on window resize
@@ -120,10 +122,22 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
ref={wrapperRef}
style={{ width }}
>
+ <button
+ title="resize-canvas"
+ id="compare-resize-slider-btn"
+ className="resizer"
+ onMouseDown={handleStartResizing}
+ >
+ <ResizerIcon />
+ </button>
<div className="chooseLayout-container">
- <div className="resizer" onMouseDown={handleStartResizing}>
- <ResizerIcon />
- </div>
+ {selectedLayout && (
+ <div className="compare-layout-canvas-container">
+ {/*<Suspense fallback={null}>
+ <Scene />
+ </Suspense> */}
+ </div>
+ )}
{width !== "0px" &&
!selectedLayout && ( // Show only if no layout selected
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index b78772c..e17f227 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -2,652 +2,585 @@
@use "../abstracts/mixins" as *;
.initial-selectLayout-wrapper {
- position: fixed;
- top: 100px;
- left: 40px;
- z-index: 10;
+ position: fixed;
+ top: 100px;
+ left: 40px;
+ z-index: 10;
- .regularDropdown-container {
- background: var(--background-color);
- }
+ .regularDropdown-container {
+ background: var(--background-color);
+ }
}
.compareLayOut-wrapper {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 2;
- height: 100vh;
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 2;
+ height: 100vh;
+ background: var(--background-color);
+ backdrop-filter: blur(20px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ animation: slideInFromRight 0.4s ease-out forwards;
+ user-select: none;
+
+ .selectLayout-wrapper {
+ position: absolute;
+ top: 100px;
+ right: 40px;
+
+ .regularDropdown-container {
+ background: var(--background-color);
+ }
+ }
+
+ .resizer {
+ width: 32px;
+ height: 32px;
+ @include flex-center;
+ padding: 6px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translate(-50%, -50%);
background: var(--background-color);
backdrop-filter: blur(20px);
+ box-shadow: $box-shadow-heavy;
+ border-radius: 50%;
+ cursor: ew-resize;
+ transition: transform 0.1s ease;
+ z-index: 10;
+ }
+
+ .chooseLayout-container {
+ width: 100%;
+ height: 100%;
display: flex;
justify-content: center;
align-items: center;
- animation: slideInFromRight 0.4s ease-out forwards;
- user-select: none;
+ position: relative;
+ overflow: hidden;
-
- .selectLayout-wrapper {
-
- position: absolute;
- top: 100px;
- right: 40px;
-
- .regularDropdown-container {
- background: var(--background-color);
- }
+ .compare-layout-canvas-container {
+ position: absolute;
+ height: 100vh;
+ width: 100vw;
+ top: 0;
+ right: 0;
}
- .chooseLayout-container {
+ .chooseLayout-wrapper {
+ background: var(--background-color);
+ backdrop-filter: blur(20px);
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: $box-shadow-medium;
+ max-width: 80%;
+ text-align: center;
+ position: relative;
+
+ .icon {
width: 100%;
- height: 100%;
+ margin-bottom: 15px;
+ text-align: center;
+
+ svg {
+ width: 100%;
+ }
+ }
+
+ .value {
+ margin-bottom: 15px;
+ font-size: var(--font-size-small);
+ font-weight: 500;
+ color: var(--text-primary);
+ }
+
+ button {
+ display: block;
+ margin: 0 auto;
+ padding: 8px 16px;
+ background: var(--background-color-button);
+ color: var(--icon-default-color-active);
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ transform: translateY(-1px);
+ }
+ }
+
+ .displayLayouts-container {
+ max-width: 170px;
+ height: auto;
+ background: var(--background-color);
+ backdrop-filter: blur(20px);
+ padding: 6px;
+ border-radius: 8px;
+ box-shadow: $box-shadow-medium;
+ position: absolute;
+ right: 0;
+ top: 100%;
+ transform: translate(50%, -10px);
display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
-
- .resizer {
- width: 32px;
- height: 32px;
- @include flex-center;
- padding: 6px;
- position: absolute;
- top: 50%;
- left: 0;
- transform: translate(-50%, -50%);
- background: var(--background-color);
- backdrop-filter: blur(20px);
- box-shadow: $box-shadow-heavy;
- border-radius: 50%;
- cursor: ew-resize;
- transition: transform 0.1s ease;
- z-index: 10;
-
-
+ flex-direction: column;
+ gap: 6px;
+ .header {
+ text-align: left;
+ padding-top: 6px;
+ padding-left: 6px;
}
- .chooseLayout-wrapper {
- background: var(--background-color);
- backdrop-filter: blur(20px);
- padding: 20px;
- border-radius: 8px;
- box-shadow: $box-shadow-medium;
- max-width: 80%;
- text-align: center;
- position: relative;
+ .search-wrapper {
+ padding: 6px 0;
- .icon {
- width: 100%;
- margin-bottom: 15px;
- text-align: center;
-
- svg {
-
- width: 100%;
- }
-
- }
-
- .value {
- margin-bottom: 15px;
- font-size: var(--font-size-small);
- font-weight: 500;
- color: var(--text-primary);
- }
-
- button {
- display: block;
- margin: 0 auto;
- padding: 8px 16px;
- background: var(--background-color-button);
- color: var(--icon-default-color-active);
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s ease;
-
- &:hover {
-
- transform: translateY(-1px);
- }
-
-
-
- }
-
- .displayLayouts-container {
- max-width: 170px;
- height: auto;
- background: var(--background-color);
- backdrop-filter: blur(20px);
- padding: 6px;
- border-radius: 8px;
- box-shadow: $box-shadow-medium;
- position: absolute;
- right: 0;
- top: 100%;
- transform: translate(50%, -10px);
- display: flex;
- flex-direction: column;
- gap: 6px;
-
- .header {
- text-align: left;
- padding-top: 6px;
- padding-left: 6px;
- }
-
- .search-wrapper {
- padding: 6px 0;
-
- .search-container {
- padding: 0;
- border-radius: 6px;
- }
- }
-
- .layouts-container {
- .layout {
-
- padding: 6px 0;
- }
-
- .layout-wrapper {
- display: flex;
- align-items: center;
- gap: 6px;
- cursor: pointer;
- padding: 0 10px;
- background: none;
- width: 100%;
-
- &:hover {
- background-color: var(--highlight-text-color) !important;
- border-radius: 4px;
-
- .layout {
- color: var(--text-button-color) !important;
-
- }
-
- svg {
-
- path {
-
- fill: var(--text-button-color) !important;
- }
- }
-
- .layout {
-
- color: var(--background-color-accent);
- }
- }
- }
- }
- }
+ .search-container {
+ padding: 0;
+ border-radius: 6px;
+ }
}
+
+ .layouts-container {
+ .layout {
+ padding: 6px 0;
+ }
+
+ .layout-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ padding: 0 10px;
+ background: none;
+ width: 100%;
+
+ &:hover {
+ background-color: var(--highlight-text-color) !important;
+ border-radius: 4px;
+
+ .layout {
+ color: var(--text-button-color) !important;
+ }
+
+ svg {
+ path {
+ fill: var(--text-button-color) !important;
+ }
+ }
+ }
+ }
+ }
+ }
}
-
-
-
+ }
}
.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;
+ 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;
+ .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;
}
- .compare-result-wrapper {
+ .performanceResult-wrapper {
+ min-width: 328px;
+ flex: 0;
+ position: relative;
+ padding-right: 65px;
+
+ .header {
display: flex;
gap: 12px;
+ align-items: center;
+ }
- .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;
+ .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;
+ }
}
- .performanceResult-wrapper {
- min-width: 328px;
- flex: 0;
+ .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;
- padding-right: 65px;
+ width: 64px;
+ height: 50px;
+ overflow: visible; // allow content like labels to overflow
- .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);
+ &:nth-child(1) {
+ .metric-label {
+ top: -57%;
+ left: 220%;
+ }
+ &::after {
+ content: "";
position: absolute;
- bottom: 0;
- right: 0;
- padding: 10px 5px;
- border-radius: 12px 0 0 0;
+
+ 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;
+ }
+
+ &:nth-child(2) {
+ grid-column-start: 1;
+ grid-row-start: 2;
+ .metric-label {
+ white-space: normal;
+ width: 50px;
+ left: 230%;
+ }
+ }
+ &:nth-child(3) {
+ grid-row: span 2 / span 2;
+ grid-column-start: 2;
+ grid-row-start: 1;
+ margin-top: 40%;
+ left: -16px;
+ position: relative;
+ }
+ }
+
+ .metric-label {
+ position: absolute;
+ top: 0px;
+ left: 0%;
+ white-space: nowrap;
+
+ transform: translate(-50%, -50%);
+
+ font-size: 10px;
+ z-index: 1;
+ }
+
+ .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));
+
+ z-index: 0;
+ }
+
+ // Content stays above the shape
+ > * {
+ position: relative;
+ z-index: 1;
+ }
+ }
}
+ }
+ .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%);
- opacity: 0;
- }
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
- to {
- transform: translateX(0);
- opacity: 1;
- }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
}
-
-// body.compare-layout-open {
-// main {
-// padding-right: 10px;
-
-// transition: padding 0.3s ease;
-// }
-// }
-
.energy-usage {
- position: relative;
+ position: relative;
- .energy-usage-wrapper {
- h4 {
- font-weight: 600;
- }
-
- .value {
- padding-top: 25px;
- font-size: var(--font-size-xxxlarge);
- color: var(--background-color-accent);
- }
+ .energy-usage-wrapper {
+ h4 {
+ font-weight: 600;
}
- .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);
- }
- }
+ .value {
+ padding-top: 25px;
+ font-size: var(--font-size-xxxlarge);
+ color: var(--background-color-accent);
}
+ }
- .chart {
- height: 100%;
- width: 90%;
- position: absolute;
- top: 10px;
- left: 0;
- margin-bottom: 20px;
- padding: 20px;
+ .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;
- .layers-wrapper {
- padding: 20px 10px;
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: space-between;
+ .layer-wrapper {
+ display: flex;
+ flex-direction: column;
- .layer-wrapper {
- display: flex;
- flex-direction: column;
-
- &:last-child {
- justify-content: end;
- }
- }
+ &:last-child {
+ justify-content: end;
+ }
}
+ }
- .chart {
- height: 90%;
- position: absolute;
- bottom: 0;
- left: 0;
- }
+ .chart {
+ height: 90%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ }
}
.cycle-time-container {
- .cycle-main {
+ .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;
- justify-content: space-between;
- height: 100%;
+ flex-direction: column;
+ gap: 4px;
- .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;
- }
- }
- }
+ .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-wrapper {
+ .totalDownTime-wrapper {
+ display: flex;
+
+ .totalDownTime {
+ width: 70%;
+ background: var(--background-color-secondary);
+ backdrop-filter: blur(20px);
+ border-radius: 12px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 20px;
+ padding: 8px 10px;
+ margin: 44px 0;
+
+ .totalDownTime-right {
display: flex;
- height: auto;
- width: 100%;
- justify-content: space-between;
+ flex-direction: column;
+ gap: 6px;
+ }
- .totalDownTime {
- width: 70%;
- background: var(--background-color-secondary);
- backdrop-filter: blur(20px);
- border-radius: 12px;
+ .totalDownTime-left {
+ display: flex;
+ align-items: center;
+ gap: 6px;
- 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;
- align-items: center;
- gap: 6px;
-
- .value {
- font-size: var(--font-size-xlarge);
- color: var(--background-color-button);
- }
- }
- }
-
- .chart {
- height: auto;
- width: 30%;
- width: 20px;
- position: relative;
- perspective: 800px;
- /* Enables 3D viewing */
-
-
- .vertical-chart {
- height: 100%;
- display: flex;
- flex-direction: column-reverse;
- gap: 6px;
-
- .layout2 {
- transform-style: preserve-3d;
- transform: rotateX(15deg);
- /* 3D tilt */
- height: 20%;
- background-color: #F3A60D;
- }
-
- .layout1 {
- height: 80%;
- background-color: #6F42C1;
- }
- }
+ .value {
+ font-size: var(--font-size-xlarge);
+ color: var(--background-color-button);
}
+ }
}
+
+ .chart {
+ width: 30%;
+ position: relative;
+ }
+ }
}
.overallScrapRate {
- .overallScrapRate-wrapper {
- display: flex;
+ .overallScrapRate-wrapper {
+ display: flex;
- .overallScrapRate-value {
- width: 50%;
- display: flex;
- flex-direction: column;
- gap: 6px;
- margin: 40px 0;
+ .overallScrapRate-value {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ margin: 40px 0;
- .overallScrapRate-key {
-
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
-
- .chart {
- width: 50%;
- position: relative;
- }
+ .overallScrapRate-key {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
-}
\ No newline at end of file
+
+ .chart {
+ width: 50%;
+ position: relative;
+ }
+ }
+}