glances widget test 1

package.json

@@ -30,6 +30,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
     "react-icons": "^4.4.0",
+    "recharts": "^2.7.2",
     "shvl": "^3.0.0",
     "swr": "^1.3.0",
     "systeminformation": "^5.17.12",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@headlessui/react':
     specifier: ^1.7.2
@@ -61,6 +65,9 @@ dependencies:
   react-icons:
     specifier: ^4.4.0
     version: 4.8.0(react@18.2.0)
+  recharts:
+    specifier: ^2.7.2
+    version: 2.7.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
   shvl:
     specifier: ^3.0.0
     version: 3.0.0
@@ -435,6 +442,48 @@ packages:
       tailwindcss: 3.3.0(postcss@8.4.21)
     dev: true
 
+  /@types/d3-array@3.0.5:
+    resolution: {integrity: sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==}
+    dev: false
+
+  /@types/d3-color@3.1.0:
+    resolution: {integrity: sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==}
+    dev: false
+
+  /@types/d3-ease@3.0.0:
+    resolution: {integrity: sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==}
+    dev: false
+
+  /@types/d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==}
+    dependencies:
+      '@types/d3-color': 3.1.0
+    dev: false
+
+  /@types/d3-path@3.0.0:
+    resolution: {integrity: sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==}
+    dev: false
+
+  /@types/d3-scale@4.0.3:
+    resolution: {integrity: sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==}
+    dependencies:
+      '@types/d3-time': 3.0.0
+    dev: false
+
+  /@types/d3-shape@3.1.1:
+    resolution: {integrity: sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==}
+    dependencies:
+      '@types/d3-path': 3.0.0
+    dev: false
+
+  /@types/d3-time@3.0.0:
+    resolution: {integrity: sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==}
+    dev: false
+
+  /@types/d3-timer@3.0.0:
+    resolution: {integrity: sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==}
+    dev: false
+
   /@types/hoist-non-react-statics@3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
@@ -785,6 +834,7 @@ packages:
   /buildcheck@0.0.3:
     resolution: {integrity: sha512-pziaA+p/wdVImfcbsZLNF32EiWyujlQLwolMqUQE8xpKNOH7KmZQaY8sXN7DGOEzPAElo9QTaeNRfGnf3iOJbA==}
     engines: {node: '>=10.0.0'}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -1020,6 +1070,10 @@ packages:
       nth-check: 2.1.1
     dev: false
 
+  /css-unit-converter@1.1.2:
+    resolution: {integrity: sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==}
+    dev: false
+
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -1034,6 +1088,77 @@ packages:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
     dev: false
 
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
@@ -1067,6 +1192,10 @@ packages:
     dependencies:
       ms: 2.1.2
 
+  /decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+    dev: false
+
   /decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -1175,6 +1304,12 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-helpers@3.4.0:
+    resolution: {integrity: sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+    dev: false
+
   /dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
     dependencies:
@@ -1654,6 +1789,10 @@ packages:
     deprecated: Use promise-toolbox/fromEvent instead
     dev: false
 
+  /eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: false
+
   /execa@5.0.0:
     resolution: {integrity: sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==}
     engines: {node: '>=10'}
@@ -1685,6 +1824,11 @@ packages:
     resolution: {integrity: sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==}
     dev: true
 
+  /fast-equals@5.0.1:
+    resolution: {integrity: sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
   /fast-glob@3.2.12:
     resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
     engines: {node: '>=8.6.0'}
@@ -2158,6 +2302,11 @@ packages:
       side-channel: 1.0.4
     dev: true
 
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /interpret@1.4.0:
     resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
     engines: {node: '>= 0.10'}
@@ -2361,6 +2510,7 @@ packages:
 
   /jose@4.13.1:
     resolution: {integrity: sha512-MSJQC5vXco5Br38mzaQKiq9mwt7lwj2eXpgpRyQYNHYt2lq1PjkWa7DLXX0WVcQLE9HhMh3jPiufS7fhJf+CLQ==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -2480,6 +2630,10 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
+
   /logform@2.5.1:
     resolution: {integrity: sha512-9FyqAm9o9NKKfiAKfZoYo9bGXXuwMkxQiQttkT4YjjVtQVIQtK6LmVtlxmCaFswo6N4AfEkHqZTV0taDtPotNg==}
     dependencies:
@@ -2623,6 +2777,7 @@ packages:
 
   /nan@2.17.0:
     resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -2755,11 +2910,11 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-hash@2.2.0:
     resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
     engines: {node: '>= 6'}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -2832,6 +2987,7 @@ packages:
   /oidc-token-hash@5.0.1:
     resolution: {integrity: sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==}
     engines: {node: ^10.13.0 || >=12.0.0}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -3023,6 +3179,10 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /postcss-value-parser@3.3.1:
+    resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
+    dev: false
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
@@ -3077,7 +3237,6 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    dev: true
 
   /psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
@@ -3162,6 +3321,49 @@ packages:
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-lifecycles-compat@3.0.4:
+    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
+    dev: false
+
+  /react-resize-detector@8.1.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      lodash: 4.17.21
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /react-smooth@2.0.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg==}
+    peerDependencies:
+      prop-types: ^15.6.0
+      react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      fast-equals: 5.0.1
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-transition-group: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
+  /react-transition-group@2.9.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==}
+    peerDependencies:
+      react: '>=15.0.0'
+      react-dom: '>=15.0.0'
+    dependencies:
+      dom-helpers: 3.4.0
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-lifecycles-compat: 3.0.4
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -3212,6 +3414,34 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+    dependencies:
+      decimal.js-light: 2.5.1
+    dev: false
+
+  /recharts@2.7.2(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-HMKRBkGoOXHW+7JcRa6+MukPSifNtJlqbc+JreGVNA407VLE/vOP+8n3YYjprDVVIF9E2ZgwWnL3D7K/LUFzBg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      prop-types: ^15.6.0
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      classnames: 2.3.2
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-is: 16.13.1
+      react-resize-detector: 8.1.0(react-dom@18.2.0)(react@18.2.0)
+      react-smooth: 2.0.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
+      recharts-scale: 0.4.5
+      reduce-css-calc: 2.1.8
+      victory-vendor: 36.6.11
+    dev: false
+
   /rechoir@0.6.2:
     resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
     engines: {node: '>= 0.10'}
@@ -3219,6 +3449,13 @@ packages:
       resolve: 1.22.1
     dev: false
 
+  /reduce-css-calc@2.1.8:
+    resolution: {integrity: sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==}
+    dependencies:
+      css-unit-converter: 1.1.2
+      postcss-value-parser: 3.3.1
+    dev: false
+
   /regenerator-runtime@0.13.11:
     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
@@ -3896,6 +4133,25 @@ packages:
       extsprintf: 1.3.0
     dev: false
 
+  /victory-vendor@36.6.11:
+    resolution: {integrity: sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==}
+    dependencies:
+      '@types/d3-array': 3.0.5
+      '@types/d3-ease': 3.0.0
+      '@types/d3-interpolate': 3.0.1
+      '@types/d3-scale': 4.0.3
+      '@types/d3-shape': 3.1.1
+      '@types/d3-time': 3.0.0
+      '@types/d3-timer': 3.0.0
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+    dev: false
+
   /void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}

public/locales/en/common.json

@@ -371,7 +371,10 @@
         "free": "Free",
         "used": "Used",
         "days": "d",
-        "hours": "h"
+        "hours": "h",
+        "crit": "Crit",
+        "read": "Read",
+        "write": "Write"
     },
     "quicklaunch": {
         "bookmark": "Bookmark",

src/components/services/item.jsx

@@ -34,9 +34,9 @@ export default function Item({ service, group }) {
       <div
         className={`${
           hasLink ? "cursor-pointer " : " "
-        }transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative`}
+        }transition-all h-15 mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip`}
       >
-        <div className="flex select-none">
+        <div className="flex select-none z-0">
           {service.icon &&
             (hasLink ? (
               <a
@@ -60,21 +60,21 @@ export default function Item({ service, group }) {
               rel="noreferrer"
               className="flex-1 flex items-center justify-between rounded-r-md "
             >
-              <div className="flex-1 px-2 py-2 text-sm text-left">
+              <div className="flex-1 px-2 py-2 text-sm text-left z-10">
                 {service.name}
                 <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
               </div>
             </a>
           ) : (
             <div className="flex-1 flex items-center justify-between rounded-r-md ">
-              <div className="flex-1 px-2 py-2 text-sm text-left">
+              <div className="flex-1 px-2 py-2 text-sm text-left z-10">
                 {service.name}
                 <p className="text-theme-500 dark:text-theme-300 text-xs font-light">{service.description}</p>
               </div>
             </div>
           )}
 
-          <div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2">
+          <div className="absolute top-0 right-0 w-1/2 flex flex-row justify-end gap-2 mr-2 z-30">
               {service.ping && (
                 <div className="flex-shrink-0 flex items-center justify-center cursor-pointer">
                   <Ping group={group} service={service.name} />

src/utils/config/service-helpers.js

@@ -294,7 +294,8 @@ export function cleanServiceGroups(groups) {
           snapshotHost, // kopia
           snapshotPath,
           userEmail, // azuredevops
-          repositoryId
+          repositoryId,
+          metric, // glances
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -358,6 +359,9 @@ export function cleanServiceGroups(groups) {
           if (snapshotHost) cleanedService.widget.snapshotHost = snapshotHost;
           if (snapshotPath) cleanedService.widget.snapshotPath = snapshotPath;
         }
+        if (type === "glances") {
+          if (metric) cleanedService.widget.metric = metric;
+        }
       }
 
       return cleanedService;

src/utils/proxy/handlers/credentialed.js

@@ -64,6 +64,8 @@ export default async function credentialedProxyHandler(req, res, map) {
       }
       else if (widget.type === "azuredevops") {
         headers.Authorization = `Basic ${Buffer.from(`$:${widget.key}`).toString("base64")}`;
+      } else if (widget.type === "glances") {
+        headers.Authorization = `Basic ${Buffer.from(`${widget.username}:${widget.password}`).toString("base64")}`;
       } else {
         headers["X-API-Key"] = `${widget.key}`;
       }

src/widgets/components.js

@@ -24,6 +24,7 @@ const components = {
   freshrss: dynamic(() => import("./freshrss/component")),
   gamedig: dynamic(() => import("./gamedig/component")),
   ghostfolio: dynamic(() => import("./ghostfolio/component")),
+  glances: dynamic(() => import("./glances/component")),
   gluetun: dynamic(() => import("./gluetun/component")),
   gotify: dynamic(() => import("./gotify/component")),
   grafana: dynamic(() => import("./grafana/component")),

src/widgets/glances/chart.jsx

@@ -0,0 +1,46 @@
+import { PureComponent } from "react";
+import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
+
+import CustomTooltip from "./custom_tooltip";
+
+class Chart extends PureComponent {
+  render() {
+    const { dataPoints, formatter, label } = this.props;
+
+    return (
+      <div className="overflow-clip z-10 w-full h-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={dataPoints}>
+            <defs>
+              <linearGradient id="color" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
+                <stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
+              </linearGradient>
+            </defs>
+            <Area
+              name={label[0]}
+              isAnimationActive={false}
+              type="monotoneX"
+              dataKey="value"
+              stroke="rgb(var(--color-500))"
+              fillOpacity={1} fill="url(#color)"
+              baseLine={0}
+            />
+            <Tooltip
+              allowEscapeViewBox={{ x: false, y: false }}
+              formatter={formatter}
+              content={<CustomTooltip formatter={formatter} />}
+              classNames="rounded-md text-xs p-0.5"
+              contentStyle={{
+                backgroundColor: "rgb(var(--color-800))",
+                color: "rgb(var(--color-100))"
+              }}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  }
+}
+
+export default Chart;

src/widgets/glances/chart_dual.jsx

@@ -0,0 +1,61 @@
+import { PureComponent } from "react";
+import { AreaChart, Area, ResponsiveContainer, Tooltip } from "recharts";
+
+import CustomTooltip from "./custom_tooltip";
+
+class ChartDual extends PureComponent {
+  render() {
+    const { dataPoints, formatter, stack, label } = this.props;
+
+    return (
+      <div className="overflow-clip z-10 w-full h-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={dataPoints}  stackOffset={stack ?? "none"}>
+            <defs>
+              <linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="rgb(var(--color-800))" stopOpacity={0.8}/>
+                <stop offset="95%" stopColor="rgb(var(--color-800))" stopOpacity={0.5}/>
+              </linearGradient>
+              <linearGradient id="colorB" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="rgb(var(--color-500))" stopOpacity={0.4}/>
+                <stop offset="95%" stopColor="rgb(var(--color-500))" stopOpacity={0.1}/>
+              </linearGradient>
+            </defs>
+
+            <Area
+              name={label[0]}
+              stackId="1"
+              isAnimationActive={false}
+              type="monotoneX"
+              dataKey="a"
+              stroke="rgb(var(--color-700))"
+              fillOpacity={1} fill="url(#colorA)"
+            />
+            <Area
+              name={label[1]}
+              stackId="1"
+              isAnimationActive={false}
+              type="monotoneX"
+              dataKey="b"
+              stroke="rgb(var(--color-500))"
+              fillOpacity={1} fill="url(#colorB)"
+            />
+            <Tooltip
+              allowEscapeViewBox={{ x: false, y: false }}
+              formatter={formatter}
+              content={<CustomTooltip formatter={formatter} />}
+              classNames="rounded-md text-xs p-0.5"
+              contentStyle={{
+                backgroundColor: "rgb(var(--color-800))",
+                color: "rgb(var(--color-100))"
+              }}
+
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    );
+  }
+}
+
+export default ChartDual;

src/widgets/glances/component.jsx

@@ -0,0 +1,34 @@
+import Memory from "./memory";
+import Cpu from "./cpu";
+import Sensor from "./sensor";
+import Net from "./net";
+import Process from "./process";
+import Disk from "./disk";
+
+export default function Component({ service }) {
+  const { widget } = service;
+
+  if (widget.metric === "memory") {
+    return <Memory service={service} />;
+  }
+
+  if (widget.metric === "process") {
+    return <Process service={service} />;
+  }
+
+  if (widget.metric.match(/^network:/)) {
+    return <Net service={service} />;
+  }
+
+  if (widget.metric.match(/^sensor:/)) {
+    return <Sensor service={service} />;
+  }
+
+  if (widget.metric.match(/^disk:/)) {
+    return <Disk service={service} />;
+  }
+
+  if (widget.metric === "cpu") {
+    return <Cpu service={service} />;
+  }
+}

src/widgets/glances/cpu.jsx

@@ -0,0 +1,100 @@
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const Chart = dynamic(() => import("./chart"), { ssr: false });
+
+const pointsLimit = 15;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+
+  const { data, error } = useWidgetAPI(service.widget, 'cpu', {
+    refreshInterval: 1000,
+  });
+
+  const { data: systemData, error: systemError } = useWidgetAPI(service.widget, 'system');
+
+  useEffect(() => {
+    if (data) {
+      setDataPoints((prevDataPoints) => {
+        const newDataPoints = [...prevDataPoints, { value: data.total }];
+          if (newDataPoints.length > pointsLimit) {
+              newDataPoints.shift();
+          }
+          return newDataPoints;
+      });
+    }
+  }, [data]);
+
+  if (error) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">
+      {t("widget.api_error")}
+      </div>
+    </div>
+  </div>;
+  }
+
+  if (!data) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-xs opacity-75">
+        -
+      </div>
+    </div>
+  </div>;
+  }
+
+  return (
+    <>
+      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+      <Chart
+          dataPoints={dataPoints}
+          label={[t("resources.used")]}
+          formatter={(value) => t("common.number", {
+            value,
+            style: "unit",
+            unit: "percent",
+            maximumFractionDigits: 0,
+            })}
+        />
+      </div>
+      <div className="absolute bottom-3 left-3 opacity-50 z-10 pointer-events-none">
+        {systemData && !systemError && (
+          <>
+            {systemData.linux_distro && (
+              <div className="text-xs opacity-80">
+                {systemData.linux_distro}
+              </div>
+            )}
+            {systemData.os_version && (
+              <div className="text-xs opacity-80">
+                {systemData.os_version}
+              </div>
+            )}
+            {systemData.hostname && (
+              <div className="text-xs font-bold">
+                {systemData.hostname}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      <div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
+        {t("common.number", {
+          value: data.total,
+          style: "unit",
+          unit: "percent",
+          maximumFractionDigits: 0,
+        })} {t("resources.used")}
+      </div>
+      <div className="h-[68px] overflow-clip" />
+    </>
+  );
+}

src/widgets/glances/custom_tooltip.jsx

@@ -0,0 +1,15 @@
+export default function Tooltip({ active, payload, formatter }) {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-theme-800/80 rounded-md text-theme-200 px-2 py-0">
+        {payload.map((pld, id) => (
+          <div key={Math.random()} className="first-of-type:pt-0 pt-0.5">
+            <div>{formatter(pld.value)} {payload[id].name}</div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return null;
+};

src/widgets/glances/disk.jsx

@@ -0,0 +1,113 @@
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false });
+
+const pointsLimit = 15;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  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));
+  const [ratePoints, setRatePoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
+
+  const { data, error } = useWidgetAPI(service.widget, 'diskio', {
+    refreshInterval: 1000,
+  });
+
+  const calculateRates = (d) => d.map(item => ({
+              a: item.read_bytes / item.time_since_update,
+              b: item.write_bytes / item.time_since_update
+          }));
+
+  useEffect(() => {
+    if (data) {
+      const diskData = data.find((item) => item.disk_name === diskName);
+
+      setDataPoints((prevDataPoints) => {
+        const newDataPoints = [...prevDataPoints, diskData];
+          if (newDataPoints.length > pointsLimit) {
+              newDataPoints.shift();
+          }
+          return newDataPoints;
+      });
+    }
+  }, [data, diskName]);
+
+  useEffect(() => {
+    setRatePoints(calculateRates(dataPoints));
+  }, [dataPoints]);
+
+  if (error) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
+      {t("widget.api_error")}
+      </div>
+    </div>
+  </div>;
+  }
+
+  if (!data) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
+        -
+      </div>
+    </div>
+  </div>;
+  }
+
+  const diskData = data.find((item) => item.disk_name === diskName);
+
+  if (!diskData) {
+    return <div>
+      <div className="h-[68px] overflow-clip" />
+    </div>;
+  }
+
+  const diskRates = calculateRates(dataPoints);
+  const currentRate = diskRates[diskRates.length - 1];
+
+  return (
+    <>
+      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+      <ChartDual
+          dataPoints={ratePoints}
+          label={[t("glances.read"), t("glances.write")]}
+          max={diskData.critical}
+          formatter={(value) => t("common.bitrate", {
+            value,
+            })}
+        />
+      </div>
+      <div className="absolute bottom-3 left-3 opacity-50 z-10 pointer-events-none">
+        {currentRate && !error && (
+          <>
+            <div className="text-xs opacity-80">
+              {t("common.bitrate", {
+                value: currentRate.a,
+              })} {t("glances.read")}
+            </div>
+            <div className="text-xs opacity-80">
+              {t("common.bitrate", {
+                value: currentRate.b,
+              })} {t("glances.write")}
+            </div>
+          </>
+        )}
+      </div>
+      <div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
+        {t("common.bitrate", {
+          value: currentRate.a + currentRate.b,
+        })}
+      </div>
+      <div className="h-[68px] overflow-clip" />
+    </>
+  );
+}

src/widgets/glances/memory.jsx

@@ -0,0 +1,96 @@
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false });
+
+const pointsLimit = 15;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+
+  const { data, error } = useWidgetAPI(service.widget, 'mem', {
+    refreshInterval: 1000,
+  });
+
+  useEffect(() => {
+    if (data) {
+      setDataPoints((prevDataPoints) => {
+        const newDataPoints = [...prevDataPoints, { a: data.used, b: data.free }];
+          if (newDataPoints.length > pointsLimit) {
+              newDataPoints.shift();
+          }
+          return newDataPoints;
+      });
+    }
+  }, [data]);
+
+  if (error) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
+      {t("widget.api_error")}
+      </div>
+    </div>
+  </div>;
+  }
+  if (!data) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
+        -
+      </div>
+    </div>
+  </div>;
+  }
+
+  return (
+    <>
+      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+        <ChartDual
+          dataPoints={dataPoints}
+          max={data.total}
+          label={[t("resources.used"), t("resources.free")]}
+          formatter={(value) => t("common.bytes", {
+            value,
+            maximumFractionDigits: 0,
+          })}
+        />
+      </div>
+      <div className="absolute bottom-3 left-3 z-10 opacity-50 pointer-events-none">
+        {data && !error && (
+          <>
+            {data.free && (
+              <div className="text-xs opacity-80">
+                {t("common.bytes", {
+                  value: data.free,
+                  maximumFractionDigits: 0,
+                })} {t("resources.free")}
+              </div>
+            )}
+
+            {data.total && (
+              <div className="text-xs font-bold">
+                {t("common.bytes", {
+                  value: data.total,
+                  maximumFractionDigits: 0,
+                })} {t("resources.total")}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      <div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
+        {t("common.bytes", {
+          value: data.used,
+          maximumFractionDigits: 0,
+        })} {t("resources.used")}
+      </div>
+      <div className="h-[68px] overflow-clip" />
+    </>
+  );
+}

src/widgets/glances/net.jsx

@@ -0,0 +1,96 @@
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const ChartDual = dynamic(() => import("./chart_dual"), { ssr: false });
+
+const pointsLimit = 15;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const [, interfaceName] = widget.metric.split(':');
+
+  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+
+  const { data, error } = useWidgetAPI(widget, 'network', {
+    refreshInterval: 1000,
+  });
+
+  useEffect(() => {
+    if (data) {
+      const interfaceData = data.find((item) => item[item.key] === interfaceName);
+
+      if (interfaceData) {
+        setDataPoints((prevDataPoints) => {
+          const newDataPoints = [...prevDataPoints, { a: interfaceData.tx, b: interfaceData.rx }];
+            if (newDataPoints.length > pointsLimit) {
+                newDataPoints.shift();
+            }
+            return newDataPoints;
+        });
+      }
+    }
+  }, [data, interfaceName]);
+
+  if (error) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
+      {t("widget.api_error")}
+      </div>
+    </div>
+  </div>;
+  }
+  if (!data) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
+        -
+      </div>
+    </div>
+  </div>;
+  }
+  const interfaceData = data.find((item) => item[item.key] === interfaceName);
+
+  if (!interfaceData) {
+    return <div>
+      <div className="h-[68px] overflow-clip" />
+    </div>;
+  }
+
+  return (
+    <>
+      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+        <ChartDual
+          dataPoints={dataPoints}
+          label={[t("docker.tx"), t("docker.rx")]}
+          formatter={(value) => t("common.byterate", {
+            value,
+            maximumFractionDigits: 0,
+          })}
+        />
+      </div>
+      <div className="absolute bottom-3 left-3 z-10 text-xs opacity-80 pointer-events-none">
+        {interfaceData && interfaceData.interface_name && (
+            <div className="text-xs opacity-80">
+              {interfaceData.interface_name}
+            </div>
+        )}
+        {t("common.bitrate", {
+          value: interfaceData.tx,
+          maximumFractionDigits: 0,
+        })} {t("docker.tx")}
+      </div>
+      <div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
+        {t("common.bitrate", {
+          value: interfaceData.rx,
+          maximumFractionDigits: 0,
+        })} {t("docker.rx")}
+      </div>
+      <div className="h-[68px] overflow-clip" />
+    </>
+  );
+}

src/widgets/glances/process.jsx

@@ -0,0 +1,72 @@
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+import ResolvedIcon from "components/resolvedicon";
+
+const statusMap = {
+  "R": <ResolvedIcon icon="mdi-circle" width={32} height={32} />,  // running
+  "S": <ResolvedIcon icon="mdi-circle-outline" width={32} height={32} />, // sleeping
+  "D": <ResolvedIcon icon="mdi-circle-double" width={32} height={32} />, // disk sleep
+  "Z": <ResolvedIcon icon="mdi-circle-opacity" width={32} height={32} />, // zombie
+  "T": <ResolvedIcon icon="mdi-decagram-outline" width={32} height={32} />, // traced
+  "t": <ResolvedIcon icon="mdi-hexagon-outline" width={32} height={32} />, // traced
+  "X": <ResolvedIcon icon="mdi-rhombus-outline" width={32} height={32} />, // dead
+};
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { data, error } = useWidgetAPI(service.widget, 'processlist', {
+    refreshInterval: 1000,
+  });
+
+  if (error) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
+      {t("widget.api_error")}
+      </div>
+    </div>
+  </div>;
+  }
+
+  if (!data) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
+        -
+      </div>
+    </div>
+  </div>;
+  }
+
+  data.splice(5);
+
+  return (
+    <>
+      <div className="absolute top-4 right-3 left-3 opacity-30 z-10 pointer-events-none">
+        <div className="flex items-center text-xs">
+          <div className="grow" />
+          <div className="w-14 text-right italic">{t("resources.cpu")}</div>
+          <div className="w-14 text-right">{t("resources.mem")}</div>
+        </div>
+      </div>
+      <div className="absolute bottom-4 right-3 left-3 z-10 pointer-events-none text-theme-900 dark:text-theme-200">
+        { data.map((item) => <div key={item.pid} className="text-[0.75rem] h-[0.8rem]">
+            <div className="flex items-center">
+              <div className="w-3 h-3 mr-1.5 opacity-60">
+                {statusMap[item.status]}
+              </div>
+              <div className="opacity-60 grow">{item.name}</div>
+              <div className="opacity-30 w-14 text-right">{item.cpu_percent.toFixed(1)}%</div>
+              <div className="opacity-30 w-14 text-right">{t("common.bytes", {
+                value: item.memory_info[0],
+                maximumFractionDigits: 0,
+              })}</div>
+            </div>
+          </div>) }
+      </div>
+      <div className="h-[68px] overflow-clip" />
+    </>
+  );
+}

src/widgets/glances/sensor.jsx

@@ -0,0 +1,99 @@
+import dynamic from "next/dynamic";
+import { useState, useEffect } from "react";
+import { useTranslation } from "next-i18next";
+
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+const Chart = dynamic(() => import("./chart"), { ssr: false });
+
+const pointsLimit = 15;
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  const [, sensorName] = widget.metric.split(':');
+
+  const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
+
+  const { data, error } = useWidgetAPI(service.widget, 'sensors', {
+    refreshInterval: 1000,
+  });
+
+  useEffect(() => {
+    if (data) {
+      const sensorData = data.find((item) => item.label === sensorName);
+      setDataPoints((prevDataPoints) => {
+        const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
+          if (newDataPoints.length > pointsLimit) {
+              newDataPoints.shift();
+          }
+          return newDataPoints;
+      });
+    }
+  }, [data, sensorName]);
+
+  if (error) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-80">
+      {t("widget.api_error")}
+      </div>
+    </div>
+  </div>;
+  }
+
+  if (!data) {
+    return <div>
+    <div className="h-[68px] overflow-clip">
+      <div className="absolute bottom-2 left-2 z-20 text-xs opacity-80">
+        -
+      </div>
+    </div>
+  </div>;
+  }
+
+  const sensorData = data.find((item) => item.label === sensorName);
+
+  if (!sensorData) {
+    return <div>
+      <div className="h-[68px] overflow-clip" />
+    </div>;
+  }
+
+  return (
+    <>
+      <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
+      <Chart
+          dataPoints={dataPoints}
+          label={[sensorData.unit]}
+          max={sensorData.critical}
+          formatter={(value) => t("common.number", {
+            value,
+            })}
+        />
+      </div>
+      <div className="absolute bottom-3 left-3 opacity-50 z-10 pointer-events-none">
+        {sensorData && !error && (
+          <>
+            {sensorData.warning && (
+              <div className="text-xs opacity-80">
+                {sensorData.warning}{sensorData.unit} {t("glances.warn")}
+              </div>
+            )}
+            {sensorData.critical && (
+              <div className="text-xs opacity-80">
+                {sensorData.critical} {sensorData.unit} {t("glances.crit")}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      <div className="absolute bottom-3 right-3 z-10 text-xs opacity-80 pointer-events-none">
+        {t("common.number", {
+          value: sensorData.value,
+        })} {sensorData.unit}
+      </div>
+      <div className="h-[68px] overflow-clip" />
+    </>
+  );
+}

src/widgets/glances/widget.js

@@ -0,0 +1,8 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/3/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+};
+
+export default widget;

src/widgets/widgets.js

@@ -19,6 +19,7 @@ import flood from "./flood/widget";
 import freshrss from "./freshrss/widget";
 import gamedig from "./gamedig/widget";
 import ghostfolio from "./ghostfolio/widget";
+import glances from "./glances/widget";
 import gluetun from "./gluetun/widget";
 import gotify from "./gotify/widget";
 import grafana from "./grafana/widget";
@@ -111,6 +112,7 @@ const widgets = {
   freshrss,
   gamedig,
   ghostfolio,
+  glances,
   gluetun,
   gotify,
   grafana,