chore: update ProductionCapacity component for improved readability and maintainability
This commit is contained in:
parent
0cfd9307d0
commit
b6597a912a
|
@ -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>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue