chore: update ProductionCapacity component for improved readability and maintainability

This commit is contained in:
Gomathi 2025-05-23 12:12:23 +05:30
parent 0cfd9307d0
commit b6597a912a
1 changed files with 66 additions and 63 deletions

View File

@ -31,6 +31,7 @@ interface ProductionCapacityProps {
type: string;
position: [number, number, number];
rotation: [number, number, number];
scale?: [number, number, number];
Data?: any;
onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any
@ -41,7 +42,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
type,
Data,
position,
rotation,
rotation = [0, 0, 0],
scale = [0.5, 0.5, 0.5],
onContextMenu,
}) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
@ -198,74 +200,75 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
useEffect(() => { }, [rotation]);
return (
<Html
// data
position={position}
scale={[0.5, 0.5, 0.5]}
rotation={rotation}
// class
wrapperClass="pointer-none"
// other
transform
zIndexRange={[1, 0]}
prepend
// sprite
distanceFactor={20}
// events
onDragOver={(e) => {
e.preventDefault();
e.stopPropagation();
}}
onDrop={(e) => {
e.preventDefault();
}}
>
<div
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
style={{
width: "300px", // Original width
height: "300px", // Original height
// transform: transformStyle.transform,
transformStyle: "preserve-3d",
position: "absolute",
transform: "translate(-50%, -50%)",
<>
{position && scale && rotation && <Html
// data
position={position}
scale={scale}
rotation={rotation}
// class
wrapperClass="pointer-none"
// other
transform
zIndexRange={[1, 0]}
prepend
// sprite
distanceFactor={20}
// events
onDragOver={(e) => {
e.preventDefault();
e.stopPropagation();
}}
onDrop={(e) => {
e.preventDefault();
}}
>
<div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div>
<div className="production-capacity">
<div className="value">1,200</div>{" "}
<div className="value">units/hour</div>
</div>
<div className="production-capacity">
<div className="current">
<div className="key">Current</div>
<div className="value">1500</div>
<div
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
style={{
width: "300px", // Original width
height: "300px", // Original height
// transform: transformStyle.transform,
transformStyle: "preserve-3d",
position: "absolute",
transform: "translate(-50%, -50%)",
}}
>
<div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div>
<div className="production-capacity">
<div className="value">1,200</div>{" "}
<div className="value">units/hour</div>
</div>
<div className="target">
<div className="key">Target</div>
<div className="value">2.345</div>
<div className="production-capacity">
<div className="current">
<div className="key">Current</div>
<div className="value">1500</div>
</div>
<div className="target">
<div className="key">Target</div>
<div className="value">2.345</div>
</div>
{/* <div className="value">units/hour</div> */}
</div>
{/* <div className="value">units/hour</div> */}
</div>{" "}
<div className="bar-chart charts">
{/* Bar Chart */}
<Bar
data={
Object.keys(measurements).length > 0
? chartData
: defaultChartData
}
options={chartOptions}
/>
</div>
</div>{" "}
<div className="bar-chart charts">
{/* Bar Chart */}
<Bar
data={
Object.keys(measurements).length > 0
? chartData
: defaultChartData
}
options={chartOptions}
/>
</div>
</div>
</Html>
</Html>}
</>
);
};