diff --git a/src/components/DeviceMemoryHealth.tsx b/src/components/DeviceMemoryHealth.tsx new file mode 100644 index 00000000..b5857e22 --- /dev/null +++ b/src/components/DeviceMemoryHealth.tsx @@ -0,0 +1,70 @@ +import StandartLineChart from './StandardLineChart' +import ShadowBox from './ShadowBox' +import IconText from './IconText' +import { Paragraph, Separator, XStack, YStack } from 'tamagui' + +type DataPoint = { + x: number + y: number +} + +type ChartData = { + id: string + color: string + data: DataPoint[] +} + +type DeviceMemoryProps = { + load: number[] +} +const DeviceMemory: React.FC = ({ load }) => { + const chartData: ChartData[] = [ + { + id: 'cpu', + color: '#8DC6BC', + data: load.map((yValue, index: number) => ({ + x: index + 1, + y: yValue, + })), + }, + ] + const currentLoad = + chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0 + + const message = currentLoad < 80 ? 'Good' : 'Poor' + + return ( + + + +
+ +
+ + + Memory + + + {currentLoad} GB + + +
+ + + + {message} + + {/* This is additional text */} + +
+
+ ) +} + +export default DeviceMemory diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index d6bc3dc6..25286f31 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -1,6 +1,7 @@ import LayoutComponent from './LayoutComponent' import './LandingPage.css' import QuickStartBar from './QuickStartBar' +import DeviceMemory from './DeviceMemoryHealth' function LandingPage() { return ( @@ -95,6 +96,7 @@ function Content() { Discover Nodes + ) }