Skip to content

Chart Time Window Selector #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
glenthomas wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Chart Time Window Selector #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 28 additions & 4 deletions src/renderer/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const App: React.FC = () => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [showThreads, setShowThreads] = useState(false);
const [timeWindow, setTimeWindow] = useState<5 | 15 | 30>(5);

// Track previous values for network rate calculation
const [prevNetworkRx, setPrevNetworkRx] = useState<number>(0);
Expand Down Expand Up @@ -282,11 +283,34 @@ const App: React.FC = () => {

</header>
<main className="main-content">
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
<div style={{ display: 'flex', border: '1px solid rgba(255,255,255,0.2)', borderRadius: '4px', overflow: 'hidden' }}>
{([5, 15, 30] as const).map((w, i) => (
<button
key={w}
onClick={() => setTimeWindow(w)}
style={{
padding: '5px 14px',
fontSize: '12px',
background: timeWindow === w ? 'rgba(102, 126, 234, 0.5)' : 'rgba(255, 255, 255, 0.07)',
border: 'none',
borderRight: i < 2 ? '1px solid rgba(255, 255, 255, 0.2)' : 'none',
color: 'white',
cursor: 'pointer',
fontWeight: timeWindow === w ? '600' : 'normal',
fontFamily: 'inherit',
}}
>
{w}m
</button>
))}
</div>
</div>
<div className="dashboard">
<CPUMonitor data={systemInfo?.cpu} history={history} />
<MemoryMonitor data={systemInfo?.memory} history={history} />
<DiskMonitor data={systemInfo?.disk} history={history} />
<NetworkMonitor data={systemInfo?.network} history={history} />
<CPUMonitor data={systemInfo?.cpu} history={history} timeWindow={timeWindow} />
<MemoryMonitor data={systemInfo?.memory} history={history} timeWindow={timeWindow} />
<DiskMonitor data={systemInfo?.disk} history={history} timeWindow={timeWindow} />
<NetworkMonitor data={systemInfo?.network} history={history} timeWindow={timeWindow} />
{/* {batteryInfo?.available && <BatteryMonitor batteryInfo={batteryInfo} />} */}
</div>
<ProcessList
Expand Down
9 changes: 5 additions & 4 deletions src/renderer/components/CPUMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,19 @@ interface CPUMonitorProps {
cpu: number;
perCore?: number[];
}>;
timeWindow?: 5 | 15 | 30;
}

const CPUMonitor: React.FC<CPUMonitorProps> = ({ data, history = [] }) => {
const CPUMonitor: React.FC<CPUMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
const [showPerCore, setShowPerCore] = React.useState(true);
const usage = data?.usage ?? 0;
const cores = data?.cores ?? 0;
const perCore = data?.perCore ?? [];

// Get last 5 minutes of data (150 data points at 2-second intervals)
// Slice history to the selected time window (30 data points per minute at 2s intervals)
const recentHistory = useMemo(() => {
return history.slice(-150);
}, [history]);
return history.slice(-(timeWindow * 30));
}, [history, timeWindow]);

const chartData = useMemo(() => {
if (showPerCore && perCore.length > 0) {
Expand Down
9 changes: 5 additions & 4 deletions src/renderer/components/DiskMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,18 @@ interface DiskMonitorProps {
diskRead: number;
diskWrite: number;
}>;
timeWindow?: 5 | 15 | 30;
}

const DiskMonitor: React.FC<DiskMonitorProps> = ({ data, history = [] }) => {
const DiskMonitor: React.FC<DiskMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
const read = data?.read ?? 0;
const write = data?.write ?? 0;
const disks = data?.disks ?? [];

// Get last 5 minutes of data (150 data points at 2-second intervals)
// Slice history to the selected time window (30 data points per minute at 2s intervals)
const recentHistory = useMemo(() => {
return history.slice(-150);
}, [history]);
return history.slice(-(timeWindow * 30));
}, [history, timeWindow]);

const chartData = useMemo(() => {
return {
Expand Down
9 changes: 5 additions & 4 deletions src/renderer/components/MemoryMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ interface MemoryMonitorProps {
memory: number;
swap: number;
}>;
timeWindow?: 5 | 15 | 30;
}

const MemoryMonitor: React.FC<MemoryMonitorProps> = ({ data, history = [] }) => {
const MemoryMonitor: React.FC<MemoryMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
const total = data?.total ?? 0;
const used = data?.used ?? 0;
const usagePercent = total > 0 ? (used / total) * 100 : 0;
Expand All @@ -22,10 +23,10 @@ const MemoryMonitor: React.FC<MemoryMonitorProps> = ({ data, history = [] }) =>
const usedSwap = data?.usedSwap ?? 0;
const swapPercent = totalSwap > 0 ? (usedSwap / totalSwap) * 100 : 0;

// Get last 5 minutes of data (150 data points at 2-second intervals)
// Slice history to the selected time window (30 data points per minute at 2s intervals)
const recentHistory = useMemo(() => {
return history.slice(-150);
}, [history]);
return history.slice(-(timeWindow * 30));
}, [history, timeWindow]);

const chartData = useMemo(() => {
return {
Expand Down
9 changes: 5 additions & 4 deletions src/renderer/components/NetworkMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ interface NetworkMonitorProps {
networkRx: number;
networkTx: number;
}>;
timeWindow?: 5 | 15 | 30;
}

const NetworkMonitor: React.FC<NetworkMonitorProps> = ({ data, history = [] }) => {
const NetworkMonitor: React.FC<NetworkMonitorProps> = ({ data, history = [], timeWindow = 5 }) => {
const rx = data?.rx ?? 0;
const tx = data?.tx ?? 0;
const incomingInterfaces = data?.interfaces ?? [];
Expand Down Expand Up @@ -55,10 +56,10 @@ const NetworkMonitor: React.FC<NetworkMonitorProps> = ({ data, history = [] }) =
// Convert map to array for rendering
const interfaces = Array.from(persistedInterfaces.values());

// Get last 5 minutes of data (150 data points at 2-second intervals)
// Slice history to the selected time window (30 data points per minute at 2s intervals)
const recentHistory = useMemo(() => {
return history.slice(-150);
}, [history]);
return history.slice(-(timeWindow * 30));
}, [history, timeWindow]);

const chartData = useMemo(() => {
return {
Expand Down
Loading