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

@ -1,9 +1,10 @@
export default function Container({ children, className = "" }) {
export default function Container({ children, chart = true, className = "" }) {
return (
<div>
{children}
<div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
<div className="h-[68px] overflow-clip" />
{ chart && <div className="h-[68px] overflow-clip" /> }
{ !chart && <div className="h-[16px] overflow-clip" /> }
</div>
);
}

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>
)}

View file

@ -15,6 +15,7 @@ const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [, diskName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit));
@ -65,24 +66,26 @@ export default function Component({ service }) {
const currentRate = diskRates[diskRates.length - 1];
return (
<Container>
<ChartDual
dataPoints={ratePoints}
label={[t("glances.read"), t("glances.write")]}
max={diskData.critical}
formatter={(value) => t("common.bitrate", {
value,
})}
/>
<Container chart={chart}>
{ chart && (
<ChartDual
dataPoints={ratePoints}
label={[t("glances.read"), t("glances.write")]}
max={diskData.critical}
formatter={(value) => t("common.bitrate", {
value,
})}
/>
)}
{currentRate && !error && (
<Block position="bottom-3 left-3">
<div className="text-xs opacity-50">
<Block position={chart ? "bottom-3 left-3" : "bottom-3 right-3"}>
<div className="text-xs opacity-50 text-right">
{t("common.bitrate", {
value: currentRate.a,
})} {t("glances.read")}
</div>
<div className="text-xs opacity-50">
<div className="text-xs opacity-50 text-right">
{t("common.bitrate", {
value: currentRate.b,
})} {t("glances.write")}
@ -90,7 +93,7 @@ export default function Component({ service }) {
</Block>
)}
<Block position="bottom-3 right-3">
<Block position={chart ? "bottom-3 right-3" : "bottom-3 left-3"}>
<div className="text-xs opacity-75">
{t("common.bitrate", {
value: currentRate.a + currentRate.b,

View file

@ -9,6 +9,7 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [, fsName] = widget.metric.split(':');
const { data, error } = useWidgetAPI(widget, 'fs', {
@ -30,35 +31,52 @@ export default function Component({ service }) {
}
return (
<Container>
<div className="absolute top-0 left-0 right-0 bottom-0">
<div style={{
height: `${Math.max(20, (fsData.size/fsData.free))}%`,
}} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" />
<Container chart={chart}>
{ chart && (
<div className="absolute top-0 left-0 right-0 bottom-0">
<div style={{
top: `${100-Math.max(18, (fsData.size/fsData.free))}%`,
}} className="relative -my-5 ml-2.5 text-xs opacity-50">
height: `${Math.max(20, (fsData.size/fsData.free))}%`,
}} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" />
</div>
)}
<Block position="bottom-3 left-3">
{ fsData.used && chart && (
<div className="text-xs opacity-50">
{t("common.bbytes", {
value: fsData.used,
maximumFractionDigits: 0,
})} {t("resources.used")}
</div>
<div style={{
top: `${100-Math.max(22, (fsData.size/fsData.free))}%`,
}} className="relative my-7 ml-2.5 text-xs opacity-50">
{t("common.bbytes", {
value: fsData.free,
maximumFractionDigits: 0,
})} {t("resources.free")}
</div>
</div>
)}
<Block position="top-3 right-3">
<div className="border rounded-md px-1.5 py-0.5 bg-theme-400/30 border-white/30 font-bold opacity-75">
<div className="text-xs opacity-75">
{t("common.bbytes", {
value: fsData.free,
maximumFractionDigits: 0,
})} {t("resources.free")}
</div>
</Block>
{ !chart && (
<Block position="top-3 right-3">
{fsData.used && (
<div className="text-xs opacity-50">
{t("common.bbytes", {
value: fsData.used,
maximumFractionDigits: 0,
})} {t("resources.used")}
</div>
)}
</Block>
)}
<Block position="bottom-3 right-3">
<div className="text-xs opacity-75">
{t("common.bbytes", {
value: fsData.size,
maximumFractionDigits: 1,
})}
})} {t("resources.total")}
</div>
</Block>
</Container>

View file

@ -15,6 +15,7 @@ const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [, gpuName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
@ -56,48 +57,84 @@ export default function Component({ service }) {
}
return (
<Container>
<ChartDual
dataPoints={dataPoints}
label={[t("glances.mem"), t("glances.gpu")]}
stack={['mem', 'proc']}
formatter={(value) => t("common.percent", {
value,
maximumFractionDigits: 1,
})}
/>
<Block position="bottom-3 left-3">
{gpuData && gpuData.name && (
<div className="text-xs opacity-50">
{gpuData.name}
</div>
)}
<div className="text-xs opacity-75">
{t("common.number", {
value: gpuData.mem,
<Container chart={chart}>
{ chart && (
<ChartDual
dataPoints={dataPoints}
label={[t("glances.mem"), t("glances.gpu")]}
stack={['mem', 'proc']}
formatter={(value) => t("common.percent", {
value,
maximumFractionDigits: 1,
})}% {t("glances.mem")} {t("resources.used")}
</div>
</Block>
})}
/>
)}
{ chart && (
<Block position="bottom-3 left-3">
{gpuData && gpuData.name && (
<div className="text-xs opacity-50">
{gpuData.name}
</div>
)}
<div className="text-xs opacity-50">
{t("common.number", {
value: gpuData.mem,
maximumFractionDigits: 1,
})}% {t("resources.mem")}
</div>
</Block>
)}
{ !chart && (
<Block position="bottom-3 left-3">
<div className="text-xs opacity-50">
{t("common.number", {
value: gpuData.temperature,
maximumFractionDigits: 1,
})}&deg; C
</div>
</Block>
)}
<Block position="bottom-3 right-3">
<div className="text-xs opacity-75">
{t("common.number", {
value: gpuData.proc,
maximumFractionDigits: 1,
})}% {t("glances.gpu")}
{!chart && (
<div className="inline-block mr-1">
{t("common.number", {
value: gpuData.proc,
maximumFractionDigits: 1,
})}% {t("glances.gpu")}
</div>
)}
{ !chart && (
<>&bull;</>
)}
<div className="inline-block ml-1">
{t("common.number", {
value: gpuData.proc,
maximumFractionDigits: 1,
})}% {t("glances.gpu")}
</div>
</div>
</Block>
<Block position="top-3 right-3">
<div className="text-xs opacity-75">
{t("common.number", {
value: gpuData.temperature,
maximumFractionDigits: 1,
})}&deg;
</div>
{ chart && (
<div className="text-xs opacity-50">
{t("common.number", {
value: gpuData.temperature,
maximumFractionDigits: 1,
})}&deg; C
</div>
)}
{gpuData && gpuData.name && !chart && (
<div className="text-xs opacity-50">
{gpuData.name}
</div>
)}
</Block>
</Container>
);

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>
);

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", {

View file

@ -15,12 +15,13 @@ const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const [, interfaceName] = widget.metric.split(':');
const { chart, metric } = widget;
const [, interfaceName] = metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(widget, 'network', {
refreshInterval: 1000,
refreshInterval: chart ? 1000 : 5000,
});
useEffect(() => {
@ -54,18 +55,20 @@ export default function Component({ service }) {
}
return (
<Container>
<ChartDual
dataPoints={dataPoints}
label={[t("docker.tx"), t("docker.rx")]}
formatter={(value) => t("common.byterate", {
value,
maximumFractionDigits: 0,
})}
/>
<Container chart={chart}>
{ chart && (
<ChartDual
dataPoints={dataPoints}
label={[t("docker.tx"), t("docker.rx")]}
formatter={(value) => t("common.byterate", {
value,
maximumFractionDigits: 0,
})}
/>
)}
<Block position="bottom-3 left-3">
{interfaceData && interfaceData.interface_name && (
{interfaceData && interfaceData.interface_name && chart && (
<div className="text-xs opacity-50">
{interfaceData.interface_name}
</div>
@ -79,6 +82,16 @@ export default function Component({ service }) {
</div>
</Block>
{ !chart && (
<Block position="top-3 right-3">
{interfaceData && interfaceData.interface_name && (
<div className="text-xs opacity-50">
{interfaceData.interface_name}
</div>
)}
</Block>
)}
<Block position="bottom-3 right-3">
<div className="text-xs opacity-75">
{t("common.bitrate", {

View file

@ -19,6 +19,8 @@ const statusMap = {
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const { data, error } = useWidgetAPI(service.widget, 'processlist', {
refreshInterval: 1000,
@ -32,10 +34,10 @@ export default function Component({ service }) {
return <Container><Block position="bottom-3 left-3">-</Block></Container>;
}
data.splice(5);
data.splice(chart ? 5 : 1);
return (
<Container>
<Container chart={chart}>
<Block position="top-4 right-3 left-3">
<div className="flex items-center text-xs">
<div className="grow" />

View file

@ -15,6 +15,7 @@ const pointsLimit = 15;
export default function Component({ service }) {
const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [, sensorName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
@ -51,37 +52,46 @@ export default function Component({ service }) {
}
return (
<Container>
<Chart
dataPoints={dataPoints}
label={[sensorData.unit]}
max={sensorData.critical}
formatter={(value) => t("common.number", {
value,
})}
/>
<Container chart={chart}>
{ chart && (
<Chart
dataPoints={dataPoints}
label={[sensorData.unit]}
max={sensorData.critical}
formatter={(value) => t("common.number", {
value,
})}
/>
)}
{sensorData && !error && (
<Block position="bottom-3 left-3">
{sensorData.warning && (
{sensorData.warning && chart && (
<div className="text-xs opacity-50">
{sensorData.warning}{sensorData.unit} {t("glances.warn")}
{t("glances.warn")} {sensorData.warning} {sensorData.unit}
</div>
)}
{sensorData.critical && (
<div className="text-xs opacity-50">
{sensorData.critical} {sensorData.unit} {t("glances.crit")}
{t("glances.crit")} {sensorData.critical} {sensorData.unit}
</div>
)}
</Block>
)}
<Block position="bottom-3 right-3">
<div className="text-xs opacity-75">
{t("common.number", {
value: sensorData.value,
})} {sensorData.unit}
</div>
<div className="text-xs opacity-50">
{sensorData.warning && !chart && (
<>
{t("glances.warn")} {sensorData.warning} {sensorData.unit}
</>
)}
</div>
<div className="text-xs opacity-75">
{t("glances.temp")} {t("common.number", {
value: sensorData.value,
})} {sensorData.unit}
</div>
</Block>
</Container>
);