150 lines
4.1 KiB
TypeScript
150 lines
4.1 KiB
TypeScript
import React from "react";
|
|
import { Line } from "react-chartjs-2";
|
|
import {
|
|
Chart as ChartJS,
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
Filler, // Import Filler for area fill
|
|
} from "chart.js";
|
|
|
|
// Register ChartJS components
|
|
ChartJS.register(
|
|
CategoryScale,
|
|
LinearScale,
|
|
PointElement,
|
|
LineElement,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
Filler
|
|
);
|
|
|
|
const WarehouseThroughput = () => {
|
|
// Line graph data for a year (monthly throughput)
|
|
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 handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
|
|
const rect = event.currentTarget.getBoundingClientRect(); // Get element position
|
|
|
|
const cardData = JSON.stringify({
|
|
header: "Warehouse Throughput", // Static header
|
|
value: "+5", // Example value (you can change if dynamic)
|
|
per: "2025", // Example percentage or date
|
|
icon: "📊", // Placeholder for an icon (if needed)
|
|
className: event.currentTarget.className,
|
|
position: [rect.top, rect.left], // ✅ Store initial position
|
|
lineGraphData, // ✅ Include chart data
|
|
lineGraphOptions, // ✅ Include chart options
|
|
});
|
|
|
|
|
|
event.dataTransfer.setData("text/plain", cardData);
|
|
// event.dataTransfer.effectAllowed = "move"; // Improve drag effect
|
|
};
|
|
|
|
return (
|
|
<div className="warehouseThroughput floating" draggable onDragStart={handleDragStart}>
|
|
<div className="header">
|
|
<h2>Warehouse Throughput</h2>
|
|
<p>
|
|
<span>(+5) more</span> in 2025
|
|
</p>
|
|
</div>
|
|
<div className="lineGraph" style={{ height: "100%" }}>
|
|
{/* Line Graph */}
|
|
<Line data={lineGraphData} options={lineGraphOptions} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WarehouseThroughput;
|