bar graph fix

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

View file

@ -3,6 +3,7 @@
import React, { useState, useEffect, useRef, useMemo } from "react";
import { getStats, type Stats, type NetworkInterface } from "../../lib/getStats";
import AnalyticsPanel from "./AnalyticsPanel";
import HelpTooltip from "../HelpTooltip";
// ── Types / constants ─────────────────────────────────────────────────────────
@ -211,19 +212,24 @@ export default function DashboardPanel({ isAuthed }: { isAuthed: boolean }) {
<p style={{ fontSize: "10pt", fontWeight: 600, color: "var(--color-foreground)", margin: 0 }}>
Power Analytics
</p>
<div style={{ display: "flex", gap: 4 }}>
<div style={{ display: "flex", flexDirection: "column", gap: 4, alignItems: "flex-end" }}>
<span style={{ fontSize: 10, fontWeight: 500, color: "var(--color-foreground-sec)" }}>Time Range</span>
<div style={{ display: "flex", gap: 4 }}>
{PRESETS.map(p => (
<button key={p.h} onClick={() => setHours(p.h)} style={{
padding: "4px 10px", borderRadius: 7, fontSize: "10pt", fontWeight: 500, cursor: "pointer",
border: `1px solid ${hours === p.h ? "var(--color-blue)" : "var(--color-secondary)"}`,
background: hours === p.h ? "color-mix(in srgb, var(--color-blue) 14%, transparent)" : "transparent",
color: hours === p.h ? "var(--color-blue)" : "var(--color-foreground-sec)",
transition: "all 120ms",
}}>
{p.label}
</button>
<HelpTooltip key={p.h} text={`Show power analytics for the last ${p.label}.`}>
<button onClick={() => setHours(p.h)} style={{
padding: "4px 10px", borderRadius: 7, fontSize: "10pt", fontWeight: 500, cursor: "pointer",
border: `1px solid ${hours === p.h ? "var(--color-blue)" : "var(--color-secondary)"}`,
background: hours === p.h ? "color-mix(in srgb, var(--color-blue) 14%, transparent)" : "transparent",
color: hours === p.h ? "var(--color-blue)" : "var(--color-foreground-sec)",
transition: "all 120ms",
}}>
{p.label}
</button>
</HelpTooltip>
))}
</div>
</div>
</div>
{/* Summary cards */}