Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

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