jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bar graph fix

Browse source
This commit is contained in:
Jack Mechem 2026-05-22 15:10:54 -07:00
parent 43318fb8cd
commit 8c3d749197
15 changed files with 973 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

49
app/components/SideNavWidgets.tsx
View file

@ -2,28 +2,24 @@
import { useState, useEffect, useRef } from "react";
import { IconLayoutGrid } from "@tabler/icons-react";
import HelpTooltip from "./HelpTooltip";
import { type Stats, type NetworkInterface } from "../lib/getStats";
import { type PowerData } from "../lib/getPower";
import { formatBytes, statColor } from "../lib/utils";
export type WidgetId =
| "cpu" | "memory" | "disk" | "temp"
| "power-server" | "power-desktop"
| "network" | "uptime" | "empty";
export type WidgetId = string;
const WIDGET_OPTIONS: { id: WidgetId; label: string }[] = [
const STATIC_WIDGET_OPTIONS: { id: WidgetId; label: string }[] = [
{ id: "empty", label: "Empty" },
{ id: "cpu", label: "CPU" },
{ id: "memory", label: "Memory" },
{ id: "disk", label: "Disk" },
{ id: "temp", label: "Temp" },
{ id: "power-server", label: "Server Power" },
{ id: "power-desktop", label: "Desktop Power" },
{ id: "network", label: "Network" },
{ id: "uptime", label: "Uptime" },
];
const DEFAULT_WIDGETS: WidgetId[] = ["power-server", "power-desktop", "cpu", "memory"];
const DEFAULT_WIDGETS: WidgetId[] = ["cpu", "memory", "network", "uptime"];
const STORAGE_KEY = "sidenav-widgets";
const card = "flex flex-col gap-2 p-3 bg-secondary/30 border border-secondary rounded-xl";
@ -104,14 +100,20 @@ function WidgetSlot({
editing: boolean;
onChange: (id: WidgetId) => void;
}) {
const powerOptions = (power?.devices ?? []).map((d) => ({
id: `power-${d.name}`,
label: `${d.name} Power`,
}));
const allOptions = [...STATIC_WIDGET_OPTIONS, ...powerOptions];
if (editing) {
return (
<select
value={id}
onChange={(e) => onChange(e.target.value as WidgetId)}
onChange={(e) => onChange(e.target.value)}
className="text-[11px] bg-secondary border border-secondary rounded-xl px-2 py-2 text-foreground w-full cursor-pointer"
>
{WIDGET_OPTIONS.map((o) => (
{allOptions.map((o) => (
<option key={o.id} value={o.id}>{o.label}</option>
))}
</select>
@ -123,10 +125,15 @@ function WidgetSlot({
if (id === "memory") return <MiniStatWidget label="Memory" value={stats ? `${stats.memory.percent}%` : "—"} percent={stats?.memory.percent} />;
if (id === "disk") return <MiniStatWidget label="Disk" value={stats ? `${stats.disk.percent}%` : "—"} percent={stats?.disk.percent} />;
if (id === "temp") return <MiniStatWidget label="Temp" value={stats?.temperature != null ? `${stats.temperature}°C` : "—"} />;
if (id === "power-server") return <MiniPowerWidget label="Server" device={power?.devices.find((d) => d.name === "server") ?? null} />;
if (id === "power-desktop") return <MiniPowerWidget label="Desktop" device={power?.devices.find((d) => d.name === "desktop") ?? null} />;
if (id === "network") return <MiniNetworkWidget speed={netSpeed} />;
if (id === "uptime") return <MiniUptimeWidget uptime={stats?.uptime ?? null} />;
if (id.startsWith("power-")) {
const deviceName = id.slice("power-".length);
const device = power?.devices.find((d) => d.name === deviceName) ?? null;
return <MiniPowerWidget label={deviceName} device={device} />;
}
return null;
}
@ -195,7 +202,7 @@ export function SideNavWidgets() {
function updateWidget(index: number, id: WidgetId) {
setWidgets((prev) => {
const next = [...prev] as WidgetId[];
const next = [...prev];
next[index] = id;
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch {}
return next;
@ -208,13 +215,15 @@ export function SideNavWidgets() {
<div className="px-[8px] mb-[4px] shrink-0">
<div className="flex items-center justify-between mb-2 px-[2px]">
<span className="text-xs text-foreground-sec font-medium">Widgets</span>
<button
onClick={() => setEditing((e) => !e)}
title={editing ? "Done" : "Customize widgets"}
className={`p-1 rounded-md transition-colors cursor-pointer ${editing ? "text-blue bg-blue/10" : "text-foreground-sec hover:text-foreground hover:bg-secondary/50"}`}
>
<IconLayoutGrid size={13} />
</button>
<HelpTooltip text="Customize which stats appear in the sidebar widgets. Click each slot to swap it for a different metric.">
<button
onClick={() => setEditing((e) => !e)}
title={editing ? "Done" : "Customize widgets"}
className={`p-1 rounded-md transition-colors cursor-pointer ${editing ? "text-blue bg-blue/10" : "text-foreground-sec hover:text-foreground hover:bg-secondary/50"}`}
>
<IconLayoutGrid size={13} />
</button>
</HelpTooltip>
</div>
<div className="grid grid-cols-2 gap-2">
{widgets.map((id, i) => (