Add maxMemory argument

This commit is contained in:
Hristo Nedelkov 2023-08-11 14:16:20 +03:00
parent 04b29d9e84
commit caf4469556
3 changed files with 12 additions and 6 deletions

View File

@ -12,20 +12,23 @@ type ChartData = {
id: string id: string
color: string color: string
data: DataPoint[] data: DataPoint[]
maxMemory?: number
} }
type DeviceMemoryProps = { type DeviceMemoryProps = {
load: number[] currentMemory: number[]
maxMemory?: number
} }
const DeviceMemory: React.FC<DeviceMemoryProps> = ({ load }) => { const DeviceMemory = ({ currentMemory, maxMemory }: DeviceMemoryProps) => {
const chartData: ChartData[] = [ const chartData: ChartData[] = [
{ {
id: 'cpu', id: 'cpu',
color: '#8DC6BC', color: '#8DC6BC',
data: load.map((yValue, index: number) => ({ data: currentMemory.map((yValue, index: number) => ({
x: index + 1, x: index + 1,
y: yValue, y: yValue,
})), })),
maxMemory: maxMemory,
}, },
] ]
const currentLoad = const currentLoad =

View File

@ -96,7 +96,7 @@ function Content() {
Discover Nodes Discover Nodes
</button> </button>
</article> </article>
<DeviceMemory load={[12,13,14,14,2,1,3]}></DeviceMemory> <DeviceMemory currentMemory={[12,32,21,2,3,64]} maxMemory={64}/>
</div> </div>
) )
} }

View File

@ -7,12 +7,15 @@ interface DataPoint {
interface ChartData { interface ChartData {
id: string id: string
data: DataPoint[] data: DataPoint[]
maxMemory?: number
} }
interface StandartLineChartProps { interface StandartLineChartProps {
data: ChartData[] data: ChartData[]
} }
const StandartLineChart = ({ data }: StandartLineChartProps) => { const StandartLineChart = ({ data }: StandartLineChartProps) => {
const maxMemory = data[0].maxMemory || 'auto'
return ( return (
<ResponsiveLine <ResponsiveLine
data={data} data={data}
@ -20,8 +23,8 @@ const StandartLineChart = ({ data }: StandartLineChartProps) => {
xScale={{ type: 'linear', min: 0, max: data[0].data.length }} xScale={{ type: 'linear', min: 0, max: data[0].data.length }}
yScale={{ yScale={{
type: 'linear', type: 'linear',
min: 'auto', min: 0,
max: 'auto', max: maxMemory,
stacked: true, stacked: true,
reverse: false, reverse: false,
}} }}