diff --git a/app/src/components/icons/analysis.tsx b/app/src/components/icons/analysis.tsx index 591df60..30115cc 100644 --- a/app/src/components/icons/analysis.tsx +++ b/app/src/components/icons/analysis.tsx @@ -17,25 +17,39 @@ export function ThroughputSummaryIcon() { ); } + export function ProductionCapacityIcon() { return ( - - + + + + + + + + + ); } + export function ROISummaryIcon() { return ( ); } + export function PowerIcon() { return ( ); } + +export function ROISummaryProductName() { + return ( + + + + + ); +} + +export function SonarCrownIcon() { + return ( + + + + + ); +} + +export function CostBreakDownIcon() { + return ( + + + + ); +} + +export function LightBulpIcon() { + return ( + + + + ); +} diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 31c3a02..08ddb05 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -1,21 +1,101 @@ -import React, { useState } from "react"; -import { ProductionCapacityIcon } from "../../icons/analysis"; +import React from "react"; +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + LineElement, + CategoryScale, + LinearScale, + PointElement, +} from "chart.js"; +import { PowerIcon, ProductionCapacityIcon } from "../../icons/analysis"; -const ProductionCapacity = ({ - progressPercent = 50, - avgProcessTime = "28.4 Secs/unit", - machineUtilization = "78%", - throughputValue = 128, - timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" }, -}) => { - const totalBars = 6; - const barsToFill = Math.floor((progressPercent / 100) * totalBars); - const partialFillPercent = - ((progressPercent / 100) * totalBars - barsToFill) * 100; +ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); + +// Helper function to generate random colors +const getRandomColor = () => { + const letters = "0123456789ABCDEF"; + let color = "#"; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; + +const ThroughputSummary = () => { + // Define all data internally within the component + const timeRange = { + startTime: "08:00 AM", + endTime: "09:00 AM", + }; + + const throughputData = { + labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"], + data: [100, 120, 110, 130, 125, 128, 132], + totalThroughput: 1240, + assetUsage: 85, + }; + + const energyConsumption = { + energyConsumed: 456, + unit: "KWH", + }; + + // Dynamic shift data + const shiftUtilization = [ + { shift: 1, percentage: 30, color: "#F3C64D" }, + { shift: 2, percentage: 40, color: "#67B3F4" }, + { shift: 3, percentage: 30, color: "#7981F5" }, + ]; + + // Chart data configuration + const chartData = { + labels: throughputData.labels, + datasets: [ + { + label: "Units/hour", + data: throughputData.data, + borderColor: "#B392F0", + tension: 0.4, + pointRadius: 0, // Hide points + }, + ], + }; + + const chartOptions = { + responsive: true, + scales: { + x: { + grid: { + display: false, + }, + ticks: { + display: false, + color: "#fff", + }, + }, + y: { + grid: { + display: false, + }, + ticks: { + display: false, + color: "#fff", + }, + }, + }, + plugins: { + legend: { + display: false, + }, + tooltip: { + enabled: true, + }, + }, + }; return ( -
-
+
+
Production Capacity
@@ -30,34 +110,63 @@ const ProductionCapacity = ({
- {throughputValue} Units/hour + {throughputData.totalThroughput}{" "} + Units/hour
- - {/* Dynamic Progress Bar */} -
- {[...Array(totalBars)].map((_, i) => ( -
- {i < barsToFill ? ( -
- ) : i === barsToFill ? ( -
- ) : null} -
- ))} +
+
+
Asset usage
+
{throughputData.assetUsage}%
+
+
-
-
- Avg. Process Time - {avgProcessTime} +
+
+
Energy Consumption
+
+
+ +
+
+
{energyConsumption.energyConsumed}
+
{energyConsumption.unit}
+
+
-
- Machine Utilization - {machineUtilization} +
+
Shift Utilization
+
+
{throughputData.assetUsage}%
+ +
+ {/* Dynamically create progress bars based on shiftUtilization array */} + {shiftUtilization.map((shift, index) => ( +
+ ))} +
+ +
+ {/* Dynamically create shift indicators with random colors */} + {shiftUtilization.map((shift, index) => ( +
+ + +
+ ))} +
+
@@ -65,4 +174,4 @@ const ProductionCapacity = ({ ); }; -export default ProductionCapacity; +export default ThroughputSummary; diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx index 11101fd..92628af 100644 --- a/app/src/components/ui/analysis/ROISummary.tsx +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -1,5 +1,11 @@ import React, { useState } from "react"; -import { ROISummaryIcon } from "../../icons/analysis"; +import { + CostBreakDownIcon, + LightBulpIcon, + ROISummaryIcon, + ROISummaryProductName, + SonarCrownIcon, +} from "../../icons/analysis"; import SemiCircleProgress from "./SemiCircleProgress"; const ROISummary = ({ @@ -76,10 +82,12 @@ const ROISummary = ({
+
Product :
{roiSummaryData.productName}
+
+{roiSummaryData.roiPercentage}% ROI with payback in @@ -116,7 +124,7 @@ const ROISummary = ({
- ① + Cost Breakdown
@@ -168,13 +176,18 @@ const ROISummary = ({
- 💡 + + + How to improve ROI?
Increase CNC utilization by 10%{" "} to shave 0.5 months of payback period +
+
+