mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-13 16:30:31 +00:00
mini-non-chart charts
This commit is contained in:
parent
c2058f353d
commit
17b0f635d8
12 changed files with 437 additions and 245 deletions
|
@ -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", {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue