dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-19 11:09:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

105
src/widgets/glances/metrics/gpu.jsx
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>
);