diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx index cf388734..859f3a2b 100644 --- a/src/components/Charts/DeviceNetworkHealth.tsx +++ b/src/components/Charts/DeviceNetworkHealth.tsx @@ -15,38 +15,35 @@ type ChartData = { color: string data: DataPoint[] } - type DeviceNetworkHealthProps = { - uploadRate: number[] - downloadRate: number[] -} -const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthProps) => { + latency: number[]; +}; + +const DeviceNetworkHealth = ({ latency }: DeviceNetworkHealthProps) => { const [isHovered, setIsHovered] = useState(false); const THRESHOLD = 60; const GOOD_COLOR = '#8DC6BC'; - const POOR_COLOR_UPLOAD = '#e95460'; - const POOR_COLOR_DOWNLOAD = '#D92344'; + const POOR_COLOR_LATENCY = '#D92344'; - const processDataRate = (rate: number[], id: string, poorColor: string) => { - const dataObj = rate.map((yValue, index: number) => ({ x: index + 1, y: yValue })); - const currentLoad = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0; - const message = currentLoad > THRESHOLD ? 'Good' : 'Poor'; - const color = message === 'Good' ? GOOD_COLOR : poorColor; + const processLatency = (latency: number[], id: string) => { + const dataObj = latency.map((yValue, index: number) => ({ x: index + 1, y: yValue })); + const currentLatency = dataObj.length > 0 ? dataObj[dataObj.length - 1].y : 0; + const message = currentLatency < THRESHOLD ? 'Good' : 'Poor'; + const color = message === 'Good' ? GOOD_COLOR : POOR_COLOR_LATENCY; return { id, color, data: dataObj, - currentLoad, + currentLatency, message, }; }; - const upload = processDataRate(uploadRate, 'uploadRate', POOR_COLOR_UPLOAD); - const download = processDataRate(downloadRate, 'downloadRate', POOR_COLOR_DOWNLOAD); + const processedLatency = processLatency(latency, 'latency'); - const chartData: ChartData[] = [upload, download]; + const chartData: ChartData[] = [processedLatency]; return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} @@ -77,26 +74,26 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr Network - {upload.currentLoad} GB + {processedLatency.currentLatency} ms : } + icon={processedLatency.message === 'Good' ? : } weight={'semibold'} > - {upload.message} + {processedLatency.message} - {upload.message === 'Poor' && ( + {processedLatency.message === 'Poor' && ( - {((upload.currentLoad / 60) * 100).toFixed(0)}% Utilization + {`High Latency: ${processedLatency.currentLatency}ms`} )} - + ) }