132 lines
4.0 KiB
TypeScript
132 lines
4.0 KiB
TypeScript
|
import React, { useState } from 'react'
|
||
|
|
import { Line } from 'react-chartjs-2'
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
const WarehouseThroughputComponent = ({
|
||
|
|
object
|
||
|
|
}: any) => {
|
||
|
|
|
||
|
|
const [measurements, setmeasurements] = useState<any>({});
|
||
|
|
const [duration, setDuration] = useState("1h")
|
||
|
|
|
||
|
|
const lineGraphData = {
|
||
|
|
labels: [
|
||
|
|
"Jan",
|
||
|
|
"Feb",
|
||
|
|
"Mar",
|
||
|
|
"Apr",
|
||
|
|
"May",
|
||
|
|
"Jun",
|
||
|
|
"Jul",
|
||
|
|
"Aug",
|
||
|
|
"Sep",
|
||
|
|
"Oct",
|
||
|
|
"Nov",
|
||
|
|
"Dec",
|
||
|
|
], // Months of the year
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: "Throughput (units/month)",
|
||
|
|
data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
|
||
|
|
borderColor: "#6f42c1", // Use the desired color for the line (purple)
|
||
|
|
backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
|
||
|
|
borderWidth: 2, // Line thickness
|
||
|
|
fill: true, // Enable fill for this dataset
|
||
|
|
pointRadius: 0, // Remove dots at each data point
|
||
|
|
tension: 0.5, // Smooth interpolation for the line
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
// Line graph options
|
||
|
|
const lineGraphOptions = {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false, // Allow custom height/width adjustments
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: false, // Hide legend
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
display: false, // No chart title needed
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
callbacks: {
|
||
|
|
label: (context: any) => {
|
||
|
|
const value = context.parsed.y;
|
||
|
|
return `${value} units`; // Customize tooltip to display "units"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
grid: {
|
||
|
|
display: false, // Hide x-axis grid lines
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
maxRotation: 0, // Prevent label rotation
|
||
|
|
autoSkip: false, // Display all months
|
||
|
|
font: {
|
||
|
|
size: 8, // Adjust font size for readability
|
||
|
|
color: "#ffffff", // Light text color for labels
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
display: true, // Show y-axis
|
||
|
|
grid: {
|
||
|
|
drawBorder: false, // Remove border line
|
||
|
|
color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
|
||
|
|
borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
|
||
|
|
},
|
||
|
|
ticks: {
|
||
|
|
font: {
|
||
|
|
size: 8, // Adjust font size for readability
|
||
|
|
color: "#ffffff", // Light text color for ticks
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
elements: {
|
||
|
|
line: {
|
||
|
|
tension: 0.5, // Smooth interpolation for the line
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// const fetchSavedInputes = async() => {
|
||
|
|
|
||
|
|
// if (object.id !== "") {
|
||
|
|
// try {
|
||
|
|
// const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
|
||
|
|
// if (response.status === 200) {
|
||
|
|
// setmeasurements(response.data.Data.measurements)
|
||
|
|
// setDuration(response.data.Data.duration)
|
||
|
|
// setName(response.data.widgetName)
|
||
|
|
// } else {
|
||
|
|
// console.log("Unexpected response:", response);
|
||
|
|
// }
|
||
|
|
// } catch (error) {
|
||
|
|
// console.error("There was an error!", error);
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="header">
|
||
|
|
<h2>Warehouse Throughput</h2>
|
||
|
|
<p>
|
||
|
|
<span>(+5) more</span> in 2025
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="lineGraph" style={{ height: "100%" }}>
|
||
|
|
<Line data={lineGraphData} options={lineGraphOptions} />
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WarehouseThroughputComponent
|