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

3dWidget dnd and 2d widgets backend api updated

Browse Source
This commit is contained in:
Gomathi
2025-03-28 19:13:20 +05:30
parent f69b601785
commit c842b81611
26 changed files with 435 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,8 +21,11 @@ ChartJS.register(
Tooltip,
Legend
);
interface ProductionCapacityProps {
position: [number, number, number];
}
const ProductionCapacity = () => {
const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => {
// Chart data for a week
const chartData = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@@ -76,7 +79,10 @@ const ProductionCapacity = () => {
};
return (
<Html position={[0, 0, 0]} transform occlude>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
sprite>
<div className="productionCapacity-wrapper card">
<div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div>

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

@@ -35,8 +35,10 @@ const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
}) => {
return <Line data={data} options={options} />;
};
const ReturnOfInvestment = () => {
interface ReturnOfInvestmentProps {
position: [number, number, number];
}
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) => {
// Improved sample data for the smooth curve graph (single day)
const graphData: ChartData<"line"> = {
labels: [
@@ -106,7 +108,10 @@ const ReturnOfInvestment = () => {
};
return (
<Html position={[0, 0, 0]} transform occlude>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
sprite>
<div className="returnOfInvestment card">
<div className="header">Return of Investment</div>
<div className="lineGraph charts">

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

@@ -1,6 +1,9 @@
import { Html } from "@react-three/drei";
import image from "../../../../assets/image/temp/image.png";
const StateWorking = () => {
// import image from "../../../../assets/image/temp/image.png";
interface StateWorkingProps {
position: [number, number, number];
}
const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
const datas = [
{ key: "Oil Tank:", value: "24/341" },
{ key: "Oil Refin:", value: 36.023 },
@@ -10,7 +13,10 @@ const StateWorking = () => {
{ key: "Time:", value: 13 - 9 - 2023 },
];
return (
<Html position={[0, 0, 0]} transform occlude>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
sprite>
<div className="stateWorking-wrapper card">
<div className="header-wrapper">
<div className="header">
@@ -20,7 +26,7 @@ const StateWorking = () => {
</span>
</div>
<div className="img">
<img src={image} alt="" />
{/* <img src={image} alt="" /> */}
</div>
</div>
{/* Data */}

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

@@ -37,7 +37,12 @@ const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
return <Line data={data} options={options} />;
};
const Throughput = () => {
interface ThroughputProps {
position: [number, number, number];
}
const Throughput: React.FC<ThroughputProps> = ({ position }) => {
// Sample data for the line graph
const graphData: ChartData<"line"> = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
@@ -86,7 +91,10 @@ const Throughput = () => {
};
return (
<Html position={[0, 0, 0]} transform occlude>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
sprite>
<div className="throughput-wrapper">
<div className="header">Throughput</div>
<div className="display-value">