mini-non-chart charts

This commit is contained in:
Ben Phelps 2023-09-06 13:53:39 +03:00
parent c2058f353d
commit 17b0f635d8
12 changed files with 437 additions and 245 deletions

View file

@ -14,11 +14,14 @@ const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(service.widget, 'mem', {
refreshInterval: 1000,
refreshInterval: chart ? 1000 : 5000,
});
useEffect(() => {
@ -42,21 +45,23 @@ export default function Component({ service }) {
}
return (
<Container>
<ChartDual
dataPoints={dataPoints}
max={data.total}
label={[t("resources.used"), t("resources.free")]}
formatter={(value) => t("common.bytes", {
value,
maximumFractionDigits: 0,
binary: true,
})}
/>
<Container chart={chart} >
{chart && (
<ChartDual
dataPoints={dataPoints}
max={data.total}
label={[t("resources.used"), t("resources.free")]}
formatter={(value) => t("common.bytes", {
value,
maximumFractionDigits: 0,
binary: true,
})}
/>
)}
{data && !error && (
<Block position="bottom-3 left-3">
{data.free && (
{data.free && chart && (
<div className="text-xs opacity-50">
{t("common.bytes", {
value: data.free,
@ -78,6 +83,20 @@ export default function Component({ service }) {
</Block>
)}
{ !chart && (
<Block position="top-3 right-3">
{data.free && (
<div className="text-xs opacity-50">
{t("common.bytes", {
value: data.free,
maximumFractionDigits: 0,
binary: true,
})} {t("resources.free")}
</div>
)}
</Block>
)}
<Block position="bottom-3 right-3">
<div className="text-xs font-bold opacity-75">
{t("common.bytes", {