first commit
This commit is contained in:
25
app/src/components/layout/3D-cards/CardsScene.tsx
Normal file
25
app/src/components/layout/3D-cards/CardsScene.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import Throughput from "./cards/Throughput";
|
||||
import ReturnOfInvestment from "./cards/ReturnOfInvestment";
|
||||
import ProductionCapacity from "./cards/ProductionCapacity";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import StateWorking from "./cards/StateWorking";
|
||||
|
||||
const CardsScene = () => {
|
||||
return (
|
||||
<div className="cards-scene" style={{ width: "100%", height: "100%" }}>
|
||||
<Canvas>
|
||||
{/* 3d-cards */}
|
||||
|
||||
{/* <Throughput /> */}
|
||||
{/* <ReturnOfInvestment /> */}
|
||||
{/* <ProductionCapacity /> */}
|
||||
{/* <StateWorking /> */}
|
||||
|
||||
<OrbitControls />
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardsScene;
|
||||
108
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
Normal file
108
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import { Bar } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TooltipItem, // Import TooltipItem for typing
|
||||
} from "chart.js";
|
||||
|
||||
// Register ChartJS components
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
const ProductionCapacity = () => {
|
||||
// Chart data for a week
|
||||
const chartData = {
|
||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
|
||||
datasets: [
|
||||
{
|
||||
label: "Production Capacity (units/day)",
|
||||
data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data
|
||||
backgroundColor: "#6f42c1", // Theme color
|
||||
borderColor: "#6f42c1",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8, // Rounded corners for the bars
|
||||
borderSkipped: false, // Ensure all corners are rounded
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Chart options
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false, // Hide legend
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Weekly Production Capacity",
|
||||
font: {
|
||||
size: 16,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
// Explicitly type the context parameter
|
||||
label: (context: TooltipItem<"bar">) => {
|
||||
const value = context.parsed.y; // Extract the y-axis value
|
||||
return `${value} units`; // Customize tooltip to display "units"
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false, // Hide x-axis grid lines
|
||||
},
|
||||
},
|
||||
y: {
|
||||
display: false, // Remove the y-axis completely
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="productionCapacity-wrapper card">
|
||||
<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>
|
||||
<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="bar-chart charts">
|
||||
{/* Bar Chart */}
|
||||
<Bar data={chartData} options={chartOptions} />
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductionCapacity;
|
||||
131
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
Normal file
131
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip,
|
||||
ChartData,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { WavyIcon } from "../../../icons/3dChartIcons";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Tooltip
|
||||
);
|
||||
|
||||
// Define Props for SmoothLineGraphComponent
|
||||
interface SmoothLineGraphProps {
|
||||
data: ChartData<"line">; // Type for chart data
|
||||
options?: ChartOptions<"line">; // Type for chart options (optional)
|
||||
}
|
||||
|
||||
// SmoothLineGraphComponent using react-chartjs-2
|
||||
const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
|
||||
data,
|
||||
options,
|
||||
}) => {
|
||||
return <Line data={data} options={options} />;
|
||||
};
|
||||
|
||||
const ReturnOfInvestment = () => {
|
||||
// Improved sample data for the smooth curve graph (single day)
|
||||
const graphData: ChartData<"line"> = {
|
||||
labels: [
|
||||
"12 AM",
|
||||
"3 AM",
|
||||
"6 AM",
|
||||
"9 AM",
|
||||
"12 PM",
|
||||
"3 PM",
|
||||
"6 PM",
|
||||
"9 PM",
|
||||
"12 AM",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "Investment",
|
||||
data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth
|
||||
borderColor: "rgba(75, 192, 192, 1)", // Light blue color
|
||||
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
fill: true,
|
||||
tension: 0.4, // Smooth curve effect
|
||||
pointRadius: 0, // Hide dots
|
||||
pointHoverRadius: 0, // Hide hover dots
|
||||
},
|
||||
{
|
||||
label: "Return",
|
||||
data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values
|
||||
borderColor: "rgba(255, 99, 132, 1)", // Pink color
|
||||
backgroundColor: "rgba(255, 99, 132, 0.2)",
|
||||
fill: true,
|
||||
tension: 0.4, // Smooth curve effect
|
||||
pointRadius: 0, // Hide dots
|
||||
pointHoverRadius: 0, // Hide hover dots
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Options for the smooth curve graph
|
||||
const graphOptions: ChartOptions<"line"> = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: true, // Enable tooltips on hover
|
||||
mode: "index", // Show both datasets' values at the same index
|
||||
intersect: false, // Allow hovering anywhere on the graph
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false, // Hide x-axis grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide x-axis labels
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false, // Hide y-axis grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="returnOfInvestment card">
|
||||
<div className="header">Return of Investment</div>
|
||||
<div className="lineGraph charts">
|
||||
{/* Smooth curve graph with two datasets */}
|
||||
<SmoothLineGraphComponent data={graphData} options={graphOptions} />
|
||||
</div>
|
||||
<div className="returns-wrapper">
|
||||
<div className="icon">
|
||||
<WavyIcon />
|
||||
</div>
|
||||
<div className="value">5.78</div>
|
||||
<div className="key">Years</div>
|
||||
</div>
|
||||
<div className="footer">
|
||||
in <span>5y</span> with avg <span>7%</span> yearly return
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReturnOfInvestment;
|
||||
42
app/src/components/layout/3D-cards/cards/StateWorking.tsx
Normal file
42
app/src/components/layout/3D-cards/cards/StateWorking.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Html } from "@react-three/drei";
|
||||
import image from "../../../../assets/image/temp/image.png";
|
||||
const StateWorking = () => {
|
||||
const datas = [
|
||||
{ key: "Oil Tank:", value: "24/341" },
|
||||
{ key: "Oil Refin:", value: 36.023 },
|
||||
{ key: "Transmission:", value: 36.023 },
|
||||
{ key: "Fuel:", value: 36732 },
|
||||
{ key: "Power:", value: 1300 },
|
||||
{ key: "Time:", value: 13 - 9 - 2023 },
|
||||
];
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="stateWorking-wrapper card">
|
||||
<div className="header-wrapper">
|
||||
<div className="header">
|
||||
<span>State</span>
|
||||
<span>
|
||||
Working <span>.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="img">
|
||||
<img src={image} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Data */}
|
||||
<div className="data-wrapper">
|
||||
{datas.map((data, index) => (
|
||||
<div className="data-table" key={index}>
|
||||
<div className="data">{data.key}</div>
|
||||
<div className="key">{data.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default StateWorking;
|
||||
|
||||
|
||||
124
app/src/components/layout/3D-cards/cards/Throughput.tsx
Normal file
124
app/src/components/layout/3D-cards/cards/Throughput.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import { Html } from "@react-three/drei";
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ChartData,
|
||||
ChartOptions,
|
||||
} from "chart.js";
|
||||
import { ThroughputIcon } from "../../../icons/3dChartIcons";
|
||||
|
||||
// Register Chart.js components
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
// Define Props for LineGraphComponent
|
||||
interface LineGraphProps {
|
||||
data: ChartData<"line">; // Type for chart data
|
||||
options?: ChartOptions<"line">; // Type for chart options (optional)
|
||||
}
|
||||
|
||||
// LineGraphComponent using react-chartjs-2
|
||||
const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
|
||||
return <Line data={data} options={options} />;
|
||||
};
|
||||
|
||||
const Throughput = () => {
|
||||
// Sample data for the line graph
|
||||
const graphData: ChartData<"line"> = {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Throughput",
|
||||
data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values
|
||||
borderColor: "rgba(75, 192, 192, 1)",
|
||||
backgroundColor: "rgba(75, 192, 192, 0.2)",
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Options for the line graph
|
||||
const graphOptions: ChartOptions<"line"> = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top",
|
||||
display: false,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Throughput Over Time",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: true, // Show vertical grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide x-axis labels
|
||||
},
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false, // Hide horizontal grid lines
|
||||
},
|
||||
ticks: {
|
||||
display: false, // Hide y-axis labels
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Html position={[0, 0, 0]} transform occlude>
|
||||
<div className="throughput-wrapper">
|
||||
<div className="header">Throughput</div>
|
||||
<div className="display-value">
|
||||
<div className="left">
|
||||
<div className="icon">
|
||||
<ThroughputIcon />
|
||||
</div>
|
||||
<div className="value-container">
|
||||
<div className="value-wrapper">
|
||||
<div className="value">1,200</div>
|
||||
<div className="key"> Units/hr</div>
|
||||
</div>
|
||||
<div className="total-sales">
|
||||
<div className="value">316</div>
|
||||
<div className="key">sales</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="percent-increase">5.77%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="line-graph">
|
||||
{/* Line graph using react-chartjs-2 */}
|
||||
<LineGraphComponent data={graphData} options={graphOptions} />
|
||||
</div>
|
||||
<div className="footer">
|
||||
You made an extra <span className="value">$1256.13</span> this month
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default Throughput;
|
||||
Reference in New Issue
Block a user