This commit is contained in:
Vishnu 2025-05-03 17:59:46 +05:30
commit d41a4849e1
2 changed files with 20 additions and 18 deletions

View File

@ -19,8 +19,8 @@ const ThroughputSummary = () => {
}; };
const throughputData = { const throughputData = {
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"], labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50"],
data: [100, 120, 110, 130, 125, 128, 132], data: [5, 10, 8, 10, 12, 10],
totalThroughput: 1240, totalThroughput: 1240,
assetUsage: 85, assetUsage: 85,
}; };
@ -55,22 +55,11 @@ const ThroughputSummary = () => {
responsive: true, responsive: true,
scales: { scales: {
x: { x: {
grid: { display: false, // hide X axis completely
display: false,
},
ticks: {
display: false,
color: "#fff",
},
}, },
y: { y: {
grid: { display: false, // hide Y axis completely
display: false, min: 0, // force Y axis to start at 0
},
ticks: {
display: false,
color: "#fff",
},
}, },
}, },
plugins: { plugins: {
@ -83,6 +72,7 @@ const ThroughputSummary = () => {
}, },
}; };
return ( return (
<div className="production analysis-card"> <div className="production analysis-card">
<div className="production-wrapper analysis-card-wrapper"> <div className="production-wrapper analysis-card-wrapper">
@ -165,3 +155,5 @@ const ThroughputSummary = () => {
}; };
export default ThroughputSummary; export default ThroughputSummary;
// Can we add dot pattern to background of lineChart and remove axis

View File

@ -128,7 +128,7 @@
.throughput-value { .throughput-value {
font-size: var(--font-size-small); font-size: var(--font-size-small);
flex: 1; flex: 0.8;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -140,15 +140,24 @@
} }
.lineChart { .lineChart {
flex: 1.2;
max-width: 200px; max-width: 200px;
height: 100px; height: 100px;
position: relative; position: relative;
background-image: radial-gradient(#d3d3d3 1px, transparent 1px);
background-size: 10px 10px;
border-radius: 8px;
.assetUsage { .assetUsage {
text-align: right; text-align: right;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
.key,
.value {
font-size: var(--font-size-regular);
}
} }
canvas { canvas {
@ -322,6 +331,7 @@
gap: 3px; gap: 3px;
align-items: center; align-items: center;
font-weight: 300; font-weight: 300;
.key { .key {
font-weight: 500; font-weight: 500;
font-size: var(--font-size-large); font-size: var(--font-size-large);