Refactor AssetDetailsCard and MaterialAnimator: improve progress calculation and enhance group positioning syntax

This commit is contained in:
Vishnu 2025-05-10 14:18:07 +05:30
parent c1d425b91d
commit db7800367d
2 changed files with 4 additions and 5 deletions

View File

@ -1,6 +1,5 @@
import React, { useState } from "react";
import {
CartBagIcon,
ExpandIcon,
IndicationArrow,
SimulationStatusIcon,
@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
<div className="value-container">
<div className="progress-bar">
{[...Array(5)].map((_, i) => {
const percentage = (count ?? 0 / totalCapacity) * 100;
const percentage = (count! / totalCapacity) * 100;
const start = i * 20;
const end = (i + 1) * 20;
// fill amount: 0 to 100
@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
fillPercent = ((percentage - start) / 20) * 100;
}
return (
<div key={i} className="block">
<div key={`block-${i}-${start}-${end}`} className="block">
<div
className="fill"
style={
@ -134,7 +133,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
})}
</div>
<div className="value">
{Math.round((count ?? 0 / totalCapacity) * 100).toString()}%
{Math.round((count! / totalCapacity) * 100).toString()}%
</div>
</div>
</div>

View File

@ -58,7 +58,7 @@ const MaterialAnimator = ({
}, [storageModel, storage.currentMaterials]);
return (
<group position={[0, -padding, 0]}>
<group {...{ position: [0, -padding, 0] }}>
{hasLoad &&
storage.currentMaterials.map((mat, index) => (
<MaterialModel