45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { siAtom } from '@/atoms';
|
|
import { formatValue } from '@/utils/format';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useAtomValue } from 'jotai';
|
|
import { useMemo } from 'react';
|
|
import { ChartCard } from './common/card';
|
|
|
|
export const Memory = () => {
|
|
const { data: staticData } = useQuery<StaticData>({ queryKey: ['static'] });
|
|
const { data: historyData } = useQuery<HistorySlice[]>({ queryKey: ['history'] });
|
|
const isSi = useAtomValue(siAtom);
|
|
const formatOptions = { units: 'B', ...(isSi && { si: true }) };
|
|
|
|
const formatedTotals = useMemo(() => {
|
|
if (!staticData) {
|
|
return [];
|
|
}
|
|
return [formatValue(staticData.total_memory, formatOptions), formatValue(staticData.total_swap, formatOptions)];
|
|
}, [staticData, formatOptions]);
|
|
|
|
const last = useMemo(() => historyData?.at(-1), [historyData]);
|
|
|
|
if (!staticData || !historyData || !last) {
|
|
return <div />;
|
|
}
|
|
|
|
return (
|
|
<ChartCard
|
|
title='Memory'
|
|
legend={{
|
|
values: [
|
|
`${formatValue(last.mem[0], formatOptions)} / ${formatedTotals[0]}`,
|
|
`${formatValue(last.mem[1], formatOptions)} / ${formatedTotals[1]}`,
|
|
],
|
|
labels: ['Memory', 'Swap'],
|
|
}}
|
|
domain={[0, Math.max(staticData.total_memory, staticData.total_swap)]}
|
|
hardDomain
|
|
formatOptions={formatOptions}
|
|
dataKey={'mem'}
|
|
total={2}
|
|
/>
|
|
);
|
|
};
|