mini-non-chart charts

2025-07-10 15:28:47 +00:00 · 2023-09-06 13:53:39 +03:00 · 2023-09-06 13:53:39 +03:00 · 17b0f635d8
commit 17b0f635d8
parent c2058f353d
12 changed files with 437 additions and 245 deletions
--- a/src/widgets/glances/components/container.jsx
+++ b/src/widgets/glances/components/container.jsx
@ -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>
  );
 }
--- a/src/widgets/glances/metrics/cpu.jsx
+++ b/src/widgets/glances/metrics/cpu.jsx
@ -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>
          )}
--- a/src/widgets/glances/metrics/disk.jsx
+++ b/src/widgets/glances/metrics/disk.jsx
@ -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,
--- a/src/widgets/glances/metrics/fs.jsx
+++ b/src/widgets/glances/metrics/fs.jsx
@ -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>
--- a/src/widgets/glances/metrics/gpu.jsx
+++ b/src/widgets/glances/metrics/gpu.jsx
@ -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>
  );
--- a/src/widgets/glances/metrics/info.jsx
+++ b/src/widgets/glances/metrics/info.jsx
@ -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>
  );
--- a/src/widgets/glances/metrics/memory.jsx
+++ b/src/widgets/glances/metrics/memory.jsx
@ -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", {
--- a/src/widgets/glances/metrics/net.jsx
+++ b/src/widgets/glances/metrics/net.jsx
@ -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", {
--- a/src/widgets/glances/metrics/process.jsx
+++ b/src/widgets/glances/metrics/process.jsx
@ -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" />
--- a/src/widgets/glances/metrics/sensor.jsx
+++ b/src/widgets/glances/metrics/sensor.jsx
@ -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>
  );