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,6 +14,8 @@ 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));
@@ -44,32 +46,45 @@ export default function Component({ service }) {
}
return (
<Container>
<Chart
dataPoints={dataPoints}
label={[t("resources.used")]}
formatter={(value) => t("common.number", {
value,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
/>
<Container chart={chart}>
{ chart && (
<Chart
dataPoints={dataPoints}
label={[t("resources.used")]}
formatter={(value) => t("common.number", {
value,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
/>
)}
{ !chart && (
<Block position="top-3 right-3">
<div className="text-xs opacity-50">
{systemData.linux_distro && `${systemData.linux_distro} - ` }
{systemData.os_version && systemData.os_version }
</div>
</Block>
)}
{systemData && !systemError && (
<Block position="bottom-3 left-3">
{systemData.linux_distro && (
{systemData.linux_distro && chart && (
<div className="text-xs opacity-50">
{systemData.linux_distro}
</div>
)}
{systemData.os_version && (
{systemData.os_version && chart && (
<div className="text-xs opacity-50">
{systemData.os_version}
</div>
)}
{systemData.hostname && (
<div className="text-xs opacity-75">
<div className="text-xs opacity-50">
{systemData.hostname}
</div>
)}