Refactor AssetDetailsCard and MaterialAnimator: improve progress calculation and enhance group positioning syntax
This commit is contained in:
parent
c1d425b91d
commit
db7800367d
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue