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

3d widget editoption function added.

Browse Source
This commit is contained in:
Gomathi
2025-04-03 19:31:25 +05:30
parent 1dc04d19bb
commit 22bb0332ac
16 changed files with 312 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
View File

@@ -30,11 +30,13 @@ interface ProductionCapacityProps {
id: string;
type: string;
position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any
}
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, position }) => {
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId,setSelectedChartId } = useWidgetStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
@@ -111,7 +113,7 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
};
const startStream = () => {
const startStream = () => {
socket.emit("lineInput", inputData);
};
@@ -146,8 +148,8 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async () => {
if (id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -173,20 +175,18 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
, [chartMeasurements, chartDuration, widgetName])
return (
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
sprite>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
zIndexRange={[1, 0]}
transform
sprite>
<div className="productionCapacity-wrapper card"
onClick={
() => setSelectedChartId({
id: id,
type: type
})
}>
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
>
<div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div>
<div className="production-capacity">
@@ -207,7 +207,7 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
</div>{" "}
<div className="bar-chart charts">
{/* Bar Chart */}
<Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData } options={chartOptions} />
<Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData} options={chartOptions} />
</div>
</div>
</Html>

28
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
View File

@@ -43,10 +43,11 @@ interface ReturnOfInvestmentProps {
id: string;
type: string;
position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
}
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position }) => {
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId,setSelectedChartId } = useWidgetStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h")
@@ -138,7 +139,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
};
const startStream = () => {
const startStream = () => {
socket.emit("lineInput", inputData);
};
@@ -155,8 +156,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
return {
label: datasetKey,
data: responseData[datasetKey]?.values ?? [],
borderColor: index === 0 ? "rgba(75, 192, 192, 1)": "rgba(255, 99, 132, 1)", // Light blue color
backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)": "rgba(255, 99, 132, 0.2)",
borderColor: index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
fill: true,
tension: 0.4, // Smooth curve effect
pointRadius: 0, // Hide dots
@@ -174,8 +175,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async () => {
if (id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -201,21 +202,18 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
, [chartMeasurements, chartDuration, widgetName])
return (
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1,0]}
zIndexRange={[1, 0]}
sprite>
<div className="returnOfInvestment card"
onClick={
() => setSelectedChartId({
id: id,
type: type
})
}>
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
>
<div className="header">Return of Investment</div>
<div className="lineGraph charts">
{/* Smooth curve graph with two datasets */}

54
app/src/components/layout/3D-cards/cards/StateWorking.tsx
View File

@@ -7,11 +7,12 @@ import io from "socket.io-client";
// import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps {
id:string;
id: string;
type: string;
position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
}
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
@@ -38,14 +39,14 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
duration,
interval: 1000,
};
const startStream = () => {
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData = response;
console.log("responceeeeeeeeeee",response);
console.log("responceeeeeeeeeee", response);
setDatas(responseData);
});
@@ -56,8 +57,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async () => {
if (id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -74,8 +75,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
}
}
console.log("dataaaaa",datas);
console.log("dataaaaa", datas);
useEffect(() => {
fetchSavedInputes();
@@ -86,27 +87,24 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
, [chartMeasurements, chartDuration, widgetName])
return (
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1,0]}
zIndexRange={[1, 0]}
sprite>
<div className="stateWorking-wrapper card"
onClick={
() => setSelectedChartId({
id: id,
type: type
})
}>
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
>
<div className="header-wrapper">
<div className="header">
<span>State</span>
<span>
{datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
{datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
</span>
</div>
<div className="img">
@@ -126,24 +124,24 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
<div className="key">{datas?.input2 ? datas.input2 : 'data'}</div>
</div>
<div className="data-table">
<div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
<div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
<div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
<div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
</div>
<div className="data-table">
<div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
<div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
<div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
<div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
</div>
<div className="data-table">
<div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
<div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
<div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
<div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
</div>
<div className="data-table">
<div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
<div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
<div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
<div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
</div>
<div className="data-table">
<div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
<div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
<div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
<div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
</div>
</div>
</div>

24
app/src/components/layout/3D-cards/cards/Throughput.tsx
View File

@@ -45,11 +45,12 @@ interface ThroughputProps {
id: string;
type: string;
position: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void;
}
const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => {
const { selectedChartId,setSelectedChartId } = useWidgetStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h")
@@ -121,7 +122,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
};
const startStream = () => {
const startStream = () => {
socket.emit("lineInput", inputData);
};
@@ -154,8 +155,8 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
const fetchSavedInputes = async () => {
if (id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -181,7 +182,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
fetchSavedInputes();
}
}
,[chartMeasurements, chartDuration, widgetName])
, [chartMeasurements, chartDuration, widgetName])
return (
<Html position={[position[0], position[1], position[2]]}
@@ -189,13 +190,10 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
transform
zIndexRange={[1, 0]}
sprite>
<div className="throughput-wrapper"
onClick={
() => setSelectedChartId({
id: id,
type: type
})
}>
<div className="throughput-wrapper"
onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu}
>
<div className="header">{name}</div>
<div className="display-value">
<div className="left">