vh/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-12-07 09:35:54 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

mini-non-chart charts

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

159
src/widgets/glances/metrics/info.jsx
View File

@@ -6,9 +6,65 @@ import Block from "../components/block";
import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
function Swap({ quicklookData, className = "" }) {
const { t } = useTranslation();
return quicklookData && quicklookData.swap !== 0 && (
<div className="text-xs flex place-content-between">
<div className={className}>{t("glances.swap")}</div>
<div className={className}>
{t("common.number", {
value: quicklookData.swap,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
);
}
function CPU({ quicklookData, className = "" }) {
const { t } = useTranslation();
return quicklookData && quicklookData.cpu && (
<div className="text-xs flex place-content-between">
<div className={className}>{t("glances.cpu")}</div>
<div className={className}>
{t("common.number", {
value: quicklookData.cpu,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
);
}
function Mem({ quicklookData, className = "" }) {
const { t } = useTranslation();
return quicklookData && quicklookData.mem && (
<div className="text-xs flex place-content-between">
<div className={className}>{t("glances.mem")}</div>
<div className={className}>
{t("common.number", {
value: quicklookData.mem,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
);
}
export default function Component({ service }) {
const { widget } = service;
const { chart } = widget;
const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, 'quicklook', {
refreshInterval: 1000,
});
@@ -41,74 +97,59 @@ export default function Component({ service }) {
return (
<Container className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
<Container chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
<Block position="top-3 right-3">
{quicklookData && quicklookData.cpu_name && (
{quicklookData && quicklookData.cpu_name && chart && (
<div className="text-[0.6rem] opacity-50">
{quicklookData.cpu_name}
</div>
)}
{ !chart && quicklookData?.swap === 0 && (
<div className="text-[0.6rem] opacity-50">
{quicklookData.cpu_name}
</div>
)}
<div className="w-[4rem]">
{ !chart && <Swap quicklookData={quicklookData} className="opacity-25" /> }
</div>
</Block>
<Block position="bottom-3 left-3">
{systemData && systemData.linux_distro && (
<div className="text-xs opacity-50">
{systemData.linux_distro}
</div>
)}
{systemData && systemData.os_version && (
<div className="text-xs opacity-50">
{systemData.os_version}
</div>
)}
{systemData && systemData.hostname && (
<div className="text-xs opacity-75">
{systemData.hostname}
</div>
)}
</Block>
{chart && (
<Block position="bottom-3 left-3">
{systemData && systemData.linux_distro && (
<div className="text-xs opacity-50">
{systemData.linux_distro}
</div>
)}
{systemData && systemData.os_version && (
<div className="text-xs opacity-50">
{systemData.os_version}
</div>
)}
{systemData && systemData.hostname && (
<div className="text-xs opacity-75">
{systemData.hostname}
</div>
)}
</Block>
)}
{!chart && (
<Block position="bottom-3 left-3 w-[3rem]">
<CPU quicklookData={quicklookData} className="opacity-75" />
</Block>
)}
<Block position="bottom-3 right-3 w-[4rem]">
{quicklookData && quicklookData.cpu && (
<div className="text-xs opacity-25 flex place-content-between">
<div>{t("glances.cpu")}</div>
<div className="opacity-75">
{t("common.number", {
value: quicklookData.cpu,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
)}
{ chart && <CPU quicklookData={quicklookData} className="opacity-50" /> }
{quicklookData && quicklookData.mem && (
<div className="text-xs opacity-25 flex place-content-between">
<div>{t("glances.mem")}</div>
<div className="opacity-75">
{t("common.number", {
value: quicklookData.mem,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
)}
{ chart && <Mem quicklookData={quicklookData} className="opacity-50" /> }
{ !chart && <Mem quicklookData={quicklookData} className="opacity-75" /> }
{quicklookData && quicklookData.swap !== 0 && (
<div className="text-xs opacity-25 flex place-content-between">
<div>{t("glances.swap")}</div>
<div className="opacity-75">
{t("common.number", {
value: quicklookData.swap,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
)}
{ chart && <Swap quicklookData={quicklookData} className="opacity-50" /> }
</Block>
</Container>
);