rework position prop

src/widgets/glances/components/block.jsx

@@ -1,8 +1,6 @@
 export default function Block({ position, children }) {
-  const positionClasses = Object.entries(position).map(([key, value]) => `${key}-${value}`).join(' ');
-
   return (
-    <div className={`absolute ${positionClasses} z-20 text-sm`}>
+    <div className={`absolute ${position} z-20 text-sm pointer-events-none`}>
       {children}
     </div>
   );

src/widgets/glances/components/chart_dual.jsx

@@ -5,13 +5,13 @@ import CustomTooltip from "./custom_tooltip";
 
 class ChartDual extends PureComponent {
   render() {
-    const { dataPoints, formatter, stack, label } = this.props;
+    const { dataPoints, formatter, stack, label, stackOffset } = this.props;
 
     return (
       <div className="absolute -top-1 -left-1 h-[120px] w-[calc(100%+0.5em)] z-0">
         <div className="overflow-clip z-10 w-full h-full">
           <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={dataPoints}  stackOffset={stack ?? "none"}>
+            <AreaChart data={dataPoints}  stackOffset={stackOffset ?? "none"}>
               <defs>
                 <linearGradient id="colorA" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor="rgb(var(--color-800))" stopOpacity={0.8}/>
@@ -25,7 +25,7 @@ class ChartDual extends PureComponent {
 
               <Area
                 name={label[0]}
-                stackId="1"
+                stackId={(stack && stack[0]) ?? "1"}
                 isAnimationActive={false}
                 type="monotoneX"
                 dataKey="a"
@@ -34,7 +34,7 @@ class ChartDual extends PureComponent {
               />
               <Area
                 name={label[1]}
-                stackId="1"
+                stackId={(stack && stack[1]) ?? "1"}
                 isAnimationActive={false}
                 type="monotoneX"
                 dataKey="b"

src/widgets/glances/metrics/cpu.jsx

@@ -57,7 +57,7 @@ export default function Component({ service }) {
       />
 
       {systemData && !systemError && (
-        <Block position={{bottom: 3, left: 3}}>
+        <Block position="bottom-3 left-3">
           {systemData.linux_distro && (
             <div className="text-xs opacity-50">
               {systemData.linux_distro}
@@ -76,7 +76,7 @@ export default function Component({ service }) {
         </Block>
       )}
 
-      <Block position={{bottom: 3, right: 3}}>
+      <Block position="bottom-3 right-3">
         <div className="text-xs font-bold opacity-75">
             {t("common.number", {
               value: data.total,

src/widgets/glances/metrics/disk.jsx

@@ -76,7 +76,7 @@ export default function Component({ service }) {
       />
 
       {currentRate && !error && (
-        <Block position={{bottom: 3, left: 3}}>
+        <Block position="bottom-3 left-3">
           <div className="text-xs opacity-50">
             {t("common.bitrate", {
               value: currentRate.a,
@@ -90,7 +90,7 @@ export default function Component({ service }) {
         </Block>
       )}
 
-      <Block position={{bottom: 3, right: 3}}>
+      <Block position="bottom-3 right-3">
         <div className="text-xs opacity-75">
           {t("common.bitrate", {
             value: currentRate.a + currentRate.b,

src/widgets/glances/metrics/memory.jsx

@@ -54,7 +54,7 @@ export default function Component({ service }) {
       />
 
       {data && !error && (
-        <Block position={{bottom: 3, left: 3}}>
+        <Block position="bottom-3 left-3">
           {data.free && (
             <div className="text-xs opacity-50">
               {t("common.bytes", {
@@ -75,7 +75,7 @@ export default function Component({ service }) {
         </Block>
       )}
 
-      <Block position={{bottom: 3, right: 3}}>
+      <Block position="bottom-3 right-3">
         <div className="text-xs font-bold opacity-75">
           {t("common.bytes", {
             value: data.used,

src/widgets/glances/metrics/net.jsx

@@ -64,7 +64,7 @@ export default function Component({ service }) {
         })}
       />
 
-      <Block position={{bottom: 3, left: 3}}>
+      <Block position="bottom-3 left-3">
         {interfaceData && interfaceData.interface_name && (
             <div className="text-xs opacity-50">
               {interfaceData.interface_name}
@@ -79,7 +79,7 @@ export default function Component({ service }) {
         </div>
       </Block>
 
-      <Block position={{bottom: 3, right: 3}}>
+      <Block position="bottom-3 right-3">
         <div className="text-xs opacity-75">
           {t("common.bitrate", {
             value: interfaceData.rx,

src/widgets/glances/metrics/process.jsx

@@ -36,7 +36,7 @@ export default function Component({ service }) {
 
   return (
     <Container>
-      <Block position={{top: 4, right: 3, left: 3}}>
+      <Block position="top-4 right-3 left-3">
         <div className="flex items-center text-xs">
           <div className="grow" />
           <div className="w-14 text-right italic">{t("resources.cpu")}</div>
@@ -44,7 +44,7 @@ export default function Component({ service }) {
         </div>
       </Block>
 
-      <Block position={{bottom: 4, right: 3, left: 3}}>
+      <Block position="bottom-4 right-3 left-3">
         <div className="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">

src/widgets/glances/metrics/sensor.jsx

@@ -62,7 +62,7 @@ export default function Component({ service }) {
       />
 
       {sensorData && !error && (
-        <Block position={{bottom: 3, left: 3}}>
+        <Block position="bottom-3 left-3">
           {sensorData.warning && (
             <div className="text-xs opacity-50">
               {sensorData.warning}{sensorData.unit} {t("glances.warn")}
@@ -76,7 +76,7 @@ export default function Component({ service }) {
         </Block>
       )}
 
-      <Block position={{bottom: 3, right: 3}}>
+      <Block position="bottom-3 right-3">
         <div className="text-xs opacity-75">
           {t("common.number", {
             value: sensorData.value,