Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-11-04 00:10:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

rework position prop

Browse Source
This commit is contained in:
Ben Phelps 2023-08-01 16:39:46 +03:00
parent b77909a360
commit cd2c24d47b
8 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/glances/components/block.jsx
View File

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

8
src/widgets/glances/components/chart_dual.jsx
View File

@ -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"

4
src/widgets/glances/metrics/cpu.jsx
View File

@ -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,

4
src/widgets/glances/metrics/disk.jsx
View File

@ -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,

4
src/widgets/glances/metrics/memory.jsx
View File

@ -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,

4
src/widgets/glances/metrics/net.jsx
View File

@ -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,

4
src/widgets/glances/metrics/process.jsx
View File

@ -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">

4
src/widgets/glances/metrics/sensor.jsx
View File

@ -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,