@@ -145,13 +155,13 @@ function SpeedSubChart({ results, showLabel }: { results: SpeedtestTrackerResult
);
}
-function PingSubChart({ results }: { results: SpeedtestTrackerResult[] }) {
+function PingSubChart({ results, uppercaseLabels }: { results: SpeedtestTrackerResult[]; uppercaseLabels: boolean }) {
const t = useI18n("widget.speedtestTracker");
const { ref, height } = useElementSize
();
return (
-
{t("recentResultsPing")}
+
{t("recentResultsPing")}
diff --git a/packages/widgets/src/speedtest-tracker/section-label.tsx b/packages/widgets/src/speedtest-tracker/section-label.tsx
index ce7e306d2..d18cdc1a5 100644
--- a/packages/widgets/src/speedtest-tracker/section-label.tsx
+++ b/packages/widgets/src/speedtest-tracker/section-label.tsx
@@ -1,9 +1,15 @@
import type { ReactNode } from "react";
import { Text } from "@mantine/core";
-export function SectionLabel({ children }: { children: ReactNode }) {
+export function SectionLabel({ children, uppercase = false }: { children: ReactNode; uppercase?: boolean }) {
return (
-
+
{children}
);
diff --git a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
index af475bfbe..7372be195 100644
--- a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
+++ b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
@@ -13,9 +13,17 @@ export interface SpeedStatCardProps {
value: string;
label: string;
compact?: boolean;
+ legacySurface?: boolean;
}
-export function SpeedStatCard({ icon: Icon, color, value, label, compact = false }: SpeedStatCardProps) {
+export function SpeedStatCard({
+ icon: Icon,
+ color,
+ value,
+ label,
+ compact = false,
+ legacySurface = false,
+}: SpeedStatCardProps) {
const { ref, height, width } = useElementSize();
const board = useRequiredBoard();
const isWide = width > height + 20;
@@ -23,7 +31,8 @@ export function SpeedStatCard({ icon: Icon, color, value, label, compact = false
const surfaceColor = `var(--mantine-color-${color}-filled)`;
const accentColor = `var(--mantine-color-${color}-5)`;
const surfaceAlpha = compact ? 0.1 : 0.14;
- const surfaceBackground = `rgb(from ${surfaceColor} r g b / calc(var(--opacity, 1) * ${surfaceAlpha}))`;
+ const modernBackground = `rgb(from ${surfaceColor} r g b / calc(var(--opacity, 1) * ${surfaceAlpha}))`;
+ const surfaceBackground = legacySurface ? `var(--mantine-color-${color}-light)` : modernBackground;
const surfaceBorder = "rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45))";
return (
@@ -32,7 +41,7 @@ export function SpeedStatCard({ icon: Icon, color, value, label, compact = false
ref={ref}
p={compact ? "xs" : "sm"}
radius={board.itemRadius}
- withBorder
+ withBorder={!legacySurface}
bg={surfaceBackground}
h="100%"
style={{ flex: 1, minWidth: 0, borderColor: surfaceBorder }}
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 9e7cf4d67..2fe0c9829 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -1,7 +1,7 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Card, Group, ScrollArea, SimpleGrid, Text, Tooltip } from "@mantine/core";
+import { Box, Card, Group, ScrollArea, SimpleGrid, Text, Tooltip, useComputedColorScheme } from "@mantine/core";
import { clientApi } from "@homarr/api/client";
import { useRequiredBoard } from "@homarr/boards/context";
@@ -28,12 +28,12 @@ const advancedColumnBreakpoints = [
{ minimumWidth: 0, columns: 1 },
] as const;
-const getSystemDisksLayout = (width: number, height: number, diskCount: number, isAdvanced: boolean) => {
+const getSystemDisksLayout = (width: number, diskCount: number, isAdvanced: boolean) => {
if (!isAdvanced) {
return {
columns: 1,
- showSecondaryText: height >= 160 && width >= 260,
- showTemperature: height >= 100 && width >= 220,
+ showSecondaryText: false,
+ showTemperature: true,
};
}
@@ -113,6 +113,7 @@ const SystemDiskCard = ({
showTemperature,
}: SystemDiskCardProps) => {
const board = useRequiredBoard();
+ const colorScheme = useComputedColorScheme("light");
const t = useI18n("widget.systemDisks");
const valueRef = useRef(null);
const [valueFits, setValueFits] = useState(true);
@@ -149,6 +150,10 @@ const SystemDiskCard = ({
.join(" · ");
const backgroundColor = "rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
const borderColor = "rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.45))";
+ const legacyBackground = colorScheme === "dark" ? "dark.7" : "gray.1";
+ const cardBackground = isAdvanced ? backgroundColor : legacyBackground;
+ const progressBackground = healthy ? "var(--mantine-color-green-light)" : "var(--mantine-color-red-light)";
+ const legacyProgressColor = healthy ? "green" : "red";
return (
-
+
{deviceName}
{integrationName && (
@@ -174,7 +179,11 @@ const SystemDiskCard = ({
{integrationName}
)}
-
+
{displayText}
{!healthy && {unhealthyLabel}}
@@ -195,10 +204,13 @@ const SystemDiskCard = ({
)}
- {showTemperature && (hasTemperature || isAdvanced) ? {temperatureText} : null}
+ {showTemperature && (hasTemperature || isAdvanced) ? (
+ {temperatureText}
+ ) : null}
@@ -219,7 +231,6 @@ export default function SystemResources({
integrationIds,
options,
width,
- height,
displayMode,
}: WidgetComponentProps<"systemDisks">) {
const t = useI18n("widget.systemDisks");
@@ -247,8 +258,8 @@ export default function SystemResources({
});
const isAdvanced = displayMode === "advanced";
const layout = useMemo(
- () => getSystemDisksLayout(width, height, disks.length, isAdvanced),
- [disks.length, height, isAdvanced, width],
+ () => getSystemDisksLayout(width, disks.length, isAdvanced),
+ [disks.length, isAdvanced, width],
);
const queryIndicators = (
diff --git a/packages/widgets/src/system-resources/chart/combined-network-traffic.tsx b/packages/widgets/src/system-resources/chart/combined-network-traffic.tsx
index 7d168fcc7..756c7e65b 100644
--- a/packages/widgets/src/system-resources/chart/combined-network-traffic.tsx
+++ b/packages/widgets/src/system-resources/chart/combined-network-traffic.tsx
@@ -11,6 +11,7 @@ export const CombinedNetworkTrafficChart = ({
usageOverTime,
hasShadow,
labelDisplayMode,
+ advanced = false,
}: {
usageOverTime: {
up: number;
@@ -18,6 +19,7 @@ export const CombinedNetworkTrafficChart = ({
}[];
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
+ advanced?: boolean;
}) => {
const chartData = usageOverTime.map((usage, index) => ({ index, up: usage.up, down: usage.down }));
const t = useI18n("widget.systemResources.card");
@@ -35,6 +37,7 @@ export const CombinedNetworkTrafficChart = ({
yAxisProps={{ domain: [0, "dataMax"] }}
chartType={hasShadow ? "area" : "line"}
labelDisplayMode={labelDisplayMode}
+ advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
return (
diff --git a/packages/widgets/src/system-resources/chart/common-chart.tsx b/packages/widgets/src/system-resources/chart/common-chart.tsx
index 121cd1182..7902b8705 100644
--- a/packages/widgets/src/system-resources/chart/common-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/common-chart.tsx
@@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
import type { AreaChartSeries } from "@mantine/charts";
import { AreaChart, LineChart } from "@mantine/charts";
-import { Card, Center, Group, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Card, Center, Group, Stack, Text, useComputedColorScheme, useMantineTheme } from "@mantine/core";
import { useElementSize, useHover, useMergedRef } from "@mantine/hooks";
import type { TooltipProps, YAxisProps } from "recharts";
@@ -23,6 +23,7 @@ export const CommonChart = ({
yAxisProps,
lastValue,
chartType = "line",
+ advanced = false,
}: {
data: Record[];
dataKey: string;
@@ -34,30 +35,32 @@ export const CommonChart = ({
yAxisProps?: Omit;
lastValue?: string;
chartType?: "line" | "area";
+ advanced?: boolean;
}) => {
const { ref: elementSizeRef, height } = useElementSize();
const theme = useMantineTheme();
+ const colorScheme = useComputedColorScheme("light");
const board = useRequiredBoard();
const { hovered, ref: hoverRef } = useHover();
const ref = useMergedRef(elementSizeRef, hoverRef);
- const backgroundColor = "rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
- const borderColor = "rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.45))";
+ const opacity = board.opacity / 100;
+ let backgroundColor = colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
+ const cardStyle: CSSProperties = { overflow: "hidden" };
+ const chartRootStyle: CSSProperties = { padding: 5, borderRadius: theme.radius[board.itemRadius] };
+ if (advanced) {
+ backgroundColor = "rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
+ cardStyle.border =
+ "1px solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.45))";
+ chartRootStyle.backgroundColor = backgroundColor;
+ }
const ChartComponent = chartType === "line" ? LineChart : AreaChart;
const showIcon = labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
const showText = labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
return (
-
+
{data.length > 1 && height > 40 && !hovered && (
- {showIcon && 100 ? 20 : 14)} stroke={1.5} />}
+ {showIcon && (
+ 100 ? 20 : 14)}
+ stroke={1.5}
+ />
+ )}
{showText && (
100 ? "md" : "xs"} fw={"bold"}>
{title}
@@ -83,7 +92,7 @@ export const CommonChart = ({
)}
)}
- {data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
+ {advanced && data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
{lastValue}
@@ -93,13 +102,19 @@ export const CommonChart = ({
{data.length <= 1 ? (
- {showIcon && 100 ? 20 : 14)} stroke={1.5} />}
+ {showIcon && (
+ 100 ? 20 : 14)}
+ stroke={1.5}
+ />
+ )}
{showText && (
100 ? "md" : "xs"} fw={"bold"} ta="center">
{title}
)}
- {lastValue && (
+ {advanced && lastValue && (
100 ? "md" : "xs"} fw={600} ta="center">
{lastValue}
@@ -119,15 +134,14 @@ export const CommonChart = ({
withYAxis={false}
withDots={false}
bg={backgroundColor}
- styles={{
- root: {
- padding: 5,
- borderRadius: theme.radius[board.itemRadius],
- backgroundColor,
- },
- }}
+ styles={{ root: chartRootStyle }}
tooltipAnimationDuration={200}
- tooltipProps={tooltipProps}
+ tooltipProps={{
+ // Render via portal so the tooltip isn't clipped by the card's overflow:hidden
+ // (needed to stop the chart line itself bleeding past its rounded corners).
+ portal: typeof document !== "undefined" ? document.body : undefined,
+ ...tooltipProps,
+ }}
withTooltip={height >= 64}
yAxisProps={yAxisProps}
fillOpacity={chartType === "area" ? 0.3 : undefined}
diff --git a/packages/widgets/src/system-resources/chart/cpu-chart.tsx b/packages/widgets/src/system-resources/chart/cpu-chart.tsx
index 572a90b51..2922b737a 100644
--- a/packages/widgets/src/system-resources/chart/cpu-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/cpu-chart.tsx
@@ -10,10 +10,12 @@ export const SystemResourceCPUChart = ({
cpuUsageOverTime,
hasShadow,
labelDisplayMode,
+ advanced = false,
}: {
cpuUsageOverTime: number[];
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
+ advanced?: boolean;
}) => {
const chartData = cpuUsageOverTime.map((usage, index) => ({ index, usage }));
@@ -31,6 +33,7 @@ export const SystemResourceCPUChart = ({
chartType={hasShadow ? "area" : "line"}
yAxisProps={{ domain: [0, 100] }}
labelDisplayMode={labelDisplayMode}
+ advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
diff --git a/packages/widgets/src/system-resources/chart/gpu-chart.tsx b/packages/widgets/src/system-resources/chart/gpu-chart.tsx
index 40cf6ea2f..51d7ea9e5 100644
--- a/packages/widgets/src/system-resources/chart/gpu-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/gpu-chart.tsx
@@ -10,10 +10,12 @@ export const SystemResourceGPUChart = ({
gpuUsageOverTime,
hasShadow,
labelDisplayMode,
+ advanced = false,
}: {
gpuUsageOverTime: number[];
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
+ advanced?: boolean;
}) => {
const chartData = gpuUsageOverTime.map((usage, index) => ({ index, usage }));
@@ -31,6 +33,7 @@ export const SystemResourceGPUChart = ({
chartType={hasShadow ? "area" : "line"}
yAxisProps={{ domain: [0, 100] }}
labelDisplayMode={labelDisplayMode}
+ advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
diff --git a/packages/widgets/src/system-resources/chart/memory-chart.tsx b/packages/widgets/src/system-resources/chart/memory-chart.tsx
index d636b8fc9..187ecb670 100644
--- a/packages/widgets/src/system-resources/chart/memory-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/memory-chart.tsx
@@ -12,11 +12,13 @@ export const SystemResourceMemoryChart = ({
totalCapacityInBytes,
hasShadow,
labelDisplayMode,
+ advanced = false,
}: {
memoryUsageOverTime: number[];
totalCapacityInBytes: number;
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
+ advanced?: boolean;
}) => {
const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
const t = useI18n("widget.systemResources.card");
@@ -35,6 +37,7 @@ export const SystemResourceMemoryChart = ({
title={t("memory")}
icon={IconBrain}
labelDisplayMode={labelDisplayMode}
+ advanced={advanced}
yAxisProps={{ domain: [0, totalCapacityInBytes] }}
lastValue={percentageUsed !== undefined ? `${Math.round(percentageUsed * 100)}%` : undefined}
chartType={hasShadow ? "area" : "line"}
diff --git a/packages/widgets/src/system-resources/chart/network-traffic.tsx b/packages/widgets/src/system-resources/chart/network-traffic.tsx
index 3881923c5..44d81b17e 100644
--- a/packages/widgets/src/system-resources/chart/network-traffic.tsx
+++ b/packages/widgets/src/system-resources/chart/network-traffic.tsx
@@ -12,11 +12,13 @@ export const NetworkTrafficChart = ({
isUp,
hasShadow,
labelDisplayMode,
+ advanced = false,
}: {
usageOverTime: number[];
isUp: boolean;
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
+ advanced?: boolean;
}) => {
const chartData = usageOverTime.map((usage, index) => ({ index, usage }));
const t = useI18n("widget.systemResources.card");
@@ -36,6 +38,7 @@ export const NetworkTrafficChart = ({
lastValue={formatByteRate(Math.round(latest))}
chartType={hasShadow ? "area" : "line"}
labelDisplayMode={labelDisplayMode}
+ advanced={advanced}
tooltipProps={{
content: ({ payload }) => {
const value = payload[0] ? Number(payload[0].value) : 0;
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index f17b1cfab..e91bc2978 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -19,6 +19,15 @@ const COMPACT_HISTORY_SIZE = 15;
const ADVANCED_HISTORY_SIZE = 60;
const ALL_SYSTEM_CHARTS = ["cpu", "memory", "gpu", "network"] as const;
+const ADVANCED_CHART_COLUMN_BREAKPOINTS = [
+ { minWidth: 1100, columns: 4 },
+ { minWidth: 560, columns: 2 },
+ { minWidth: 0, columns: 1 },
+] as const;
+
+const getAdvancedChartColumns = (width: number): number =>
+ ADVANCED_CHART_COLUMN_BREAKPOINTS.find(({ minWidth }) => width >= minWidth)?.columns ?? 1;
+
type SystemChart = WidgetComponentProps<"systemResources">["options"]["visibleCharts"][number];
type ChartItem = {
@@ -59,7 +68,7 @@ export const getVisibleSystemCharts = ({
configuredCharts,
hasGpu,
hasNetwork,
- height,
+ height: _height,
isAdvanced,
}: {
configuredCharts: readonly SystemChart[];
@@ -72,7 +81,7 @@ export const getVisibleSystemCharts = ({
const availableCharts = selectedCharts.filter(
(chart) => (chart !== "gpu" || !isAdvanced || hasGpu) && (chart !== "network" || hasNetwork),
);
- return isAdvanced ? [...availableCharts] : availableCharts.slice(0, getCompactChartBudget(height));
+ return [...availableCharts];
};
export default function SystemResources({
@@ -110,14 +119,13 @@ export default function SystemResources({
lastUpdatedAt.current = dataUpdatedAt;
setHistoryByIntegration((previous) =>
Object.fromEntries(
- data.map((entry) => [
- entry.integrationId,
- appendBoundedHistory(
- previous[entry.integrationId] ?? [],
- toChartItem(entry.healthInfo),
- ADVANCED_HISTORY_SIZE,
- ),
- ]),
+ data.map((entry) => {
+ const currentItem = toChartItem(entry.healthInfo);
+ // Seed with the current item when there's no history yet, so the first real
+ // update lands at 2 points instead of dropping back to the single-value fallback.
+ const seed = previous[entry.integrationId] ?? [currentItem];
+ return [entry.integrationId, appendBoundedHistory(seed, currentItem, ADVANCED_HISTORY_SIZE)];
+ }),
),
);
}, [dataUpdatedAt, data]);
@@ -126,7 +134,9 @@ export default function SystemResources({
const panelWidth = width / panelColumns;
const renderCharts = (entry: (typeof data)[number], availableWidth: number, availableHeight: number) => {
const currentItem = toChartItem(entry.healthInfo);
- const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem];
+ // Duplicate the first point so the chart has two points to draw a line from
+ // immediately, instead of showing the single-value fallback until the next poll.
+ const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem, currentItem];
const history = isAdvanced ? fullHistory : fullHistory.slice(-COMPACT_HISTORY_SIZE);
return (
@@ -225,20 +235,24 @@ const SystemCharts = ({
const showNetwork = visibleCharts.includes("network");
const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
const chartCount = visibleCharts.length;
- const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
+ const chartColumns = useMemo(() => (isAdvanced ? getAdvancedChartColumns(width) : 1), [isAdvanced, width]);
const compactChartGap = 8;
+ const compactRowHeight = 56;
const chartHeight = isAdvanced
- ? 180
- : `calc((100% - ${Math.max(0, chartCount - 1) * compactChartGap}px) / ${Math.max(1, chartCount)})`;
+ ? 110
+ : Math.max(
+ 28,
+ Math.min(compactRowHeight, (height - Math.max(0, chartCount - 1) * compactChartGap) / Math.max(1, chartCount)),
+ );
return (
-
+
{showTitle && (
{integrationName}
)}
-
+
{chartCount === 0 && (
@@ -252,6 +266,7 @@ const SystemCharts = ({
cpuUsageOverTime={items.map((item) => item.cpu)}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
+ advanced={isAdvanced}
/>
)}
@@ -262,6 +277,7 @@ const SystemCharts = ({
totalCapacityInBytes={memoryCapacityInBytes}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
+ advanced={isAdvanced}
/>
)}
@@ -271,6 +287,7 @@ const SystemCharts = ({
gpuUsageOverTime={items.map((item) => item.gpu)}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
+ advanced={isAdvanced}
/>
)}
@@ -282,12 +299,14 @@ const SystemCharts = ({
isUp={false}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
+ advanced={isAdvanced}
/>
network.up)}
isUp
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
+ advanced={isAdvanced}
/>
) : (
@@ -296,6 +315,7 @@ const SystemCharts = ({
usageOverTime={networkItems}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
+ advanced={isAdvanced}
/>
))}
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index 784dbd1cd..16fd607b6 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -65,17 +65,12 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, he
const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
const isAdvanced = displayMode === "advanced";
const isDense = !isAdvanced && (width < 300 || height < 160);
- const showTitle = isAdvanced || height >= 112;
- const showLine = isAdvanced || width >= 200;
- const showPlatform = isAdvanced || width >= 320;
return (
- {showTitle && (
-
- {t("title", { station: station.label })}
-
- )}
+
+ {t("title", { station: station.label })}
+
{compactStaleWarning && displayMode === "compact" && (
))
@@ -144,23 +137,11 @@ interface TimetableEntryView {
platform: { name: string; hasChanged: boolean } | null;
}
-function DepartureRow({
- entry,
- dense,
- showLine,
- showPlatform,
- locale,
-}: {
- entry: TimetableEntryView;
- dense: boolean;
- showLine: boolean;
- showPlatform: boolean;
- locale: string;
-}) {
+function DepartureRow({ entry, dense, locale }: { entry: TimetableEntryView; dense: boolean; locale: string }) {
return (
- {showLine && entry.line && (
+ {entry.line && (
- {showPlatform && entry.platform && (
-
+ {entry.platform && (
+
{entry.platform.name}
)}
diff --git a/packages/widgets/src/tracearr/component.spec.ts b/packages/widgets/src/tracearr/component.spec.ts
index 3a678fc2f..c289f04e8 100644
--- a/packages/widgets/src/tracearr/component.spec.ts
+++ b/packages/widgets/src/tracearr/component.spec.ts
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vitest";
-import { getAdvancedColumnWidth, getCompactSectionVisibility, getTracearrSectionVisibility } from "./component";
+import { getAdvancedColumnWidth, getTracearrSectionVisibility } from "./component";
import { attachTracearrSource } from "./source";
describe("Tracearr source ownership", () => {
@@ -30,32 +30,6 @@ describe("Tracearr advanced layout", () => {
});
});
-describe("Tracearr compact disclosure", () => {
- it("keeps urgent violations visible in a short widget", () => {
- expect(
- getCompactSectionVisibility({
- height: 160,
- showStreams: true,
- showViolations: true,
- hasViolations: true,
- showRecentActivity: true,
- }),
- ).toEqual({ violations: true, recentActivity: false });
- });
-
- it("reveals secondary history as height becomes available", () => {
- expect(
- getCompactSectionVisibility({
- height: 400,
- showStreams: true,
- showViolations: true,
- hasViolations: false,
- showRecentActivity: true,
- }),
- ).toEqual({ violations: true, recentActivity: true });
- });
-});
-
describe("Tracearr advanced disclosure", () => {
it("shows all sections even when compact presentation toggles are disabled", () => {
expect(
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index 74d5542d5..b2793cbc7 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -33,54 +33,27 @@ export const getTracearrSectionVisibility = (options: TracearrSectionOptions, is
recentActivity: isAdvanced || options.showRecentActivity,
});
-export const getCompactSectionVisibility = ({
- height,
- showStreams,
- showViolations,
- hasViolations,
- showRecentActivity,
-}: {
- height: number;
- showStreams: boolean;
- showViolations: boolean;
- hasViolations: boolean;
- showRecentActivity: boolean;
-}) => ({
- violations: showViolations && (hasViolations || height >= 240 || !showStreams),
- recentActivity: showRecentActivity && (height >= 360 || (!showStreams && (!showViolations || !hasViolations))),
-});
-
export default function TracearrWidget({
options,
integrationIds,
width,
- height,
displayMode = "compact",
}: WidgetComponentProps<"tracearr">) {
if (integrationIds.length === 0) {
throw new NoIntegrationDataError();
}
- return (
-
- );
+ return ;
}
interface TracearrContentProps {
integrationIds: string[];
options: WidgetComponentProps<"tracearr">["options"];
width: number;
- height: number;
displayMode: "compact" | "advanced";
}
-function TracearrContent({ integrationIds, options, width, height, displayMode }: TracearrContentProps) {
+function TracearrContent({ integrationIds, options, width, displayMode }: TracearrContentProps) {
const t = useI18n("widget.tracearr");
const dashboardQuery = clientApi.widget.tracearr.getDashboard.useQuery({ integrationIds });
const dashboardData = getUsableWidgetQueryData(dashboardQuery) ?? [];
@@ -157,7 +130,6 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
const sectionVisibility = getTracearrSectionVisibility(options, isAdvanced);
const noSectionsEnabled = Object.values(sectionVisibility).every((isVisible) => !isVisible);
- const compactLimit = height < 220 ? 2 : height < 360 ? 4 : 8;
const sourcedStreams = successfulDashboards.flatMap(({ integrationId, integrationName, dashboard }) =>
attachTracearrSource(dashboard.streams.data, { integrationId, integrationName }),
);
@@ -167,15 +139,7 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
const sourcedRecentActivity = successfulDashboards.flatMap(({ integrationId, integrationName, dashboard }) =>
attachTracearrSource(dashboard.recentActivity?.data ?? [], { integrationId, integrationName }),
);
- const streams = isAdvanced ? sourcedStreams : sourcedStreams.slice(0, compactLimit);
const showSource = isAdvanced || dashboardData.length > 1;
- const compactSections = getCompactSectionVisibility({
- height,
- showStreams: sectionVisibility.streams,
- showViolations: sectionVisibility.violations,
- hasViolations: sourcedViolations.length > 0,
- showRecentActivity: sectionVisibility.recentActivity,
- });
if (isAdvanced) {
const isTwoColumn = width >= ADVANCED_GRID_BREAKPOINT;
@@ -196,18 +160,18 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
{successfulDashboards.map(({ integrationName }) => integrationName).join(" · ")}
{sectionVisibility.stats && (
-
+
)}
{sectionVisibility.streams && (
-
+
)}
{sectionVisibility.violations && (
-
+
)}
{sectionVisibility.recentActivity && (
-
+
)}
@@ -231,12 +195,10 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
{sectionVisibility.stats && (
)}
- {compactSections.violations && (
-
- )}
- {sectionVisibility.streams && }
- {compactSections.recentActivity && (
-
+ {sectionVisibility.streams && }
+ {sectionVisibility.violations && }
+ {sectionVisibility.recentActivity && (
+
)}
{noSectionsEnabled && (
diff --git a/packages/widgets/src/tracearr/recent-activity-section.tsx b/packages/widgets/src/tracearr/recent-activity-section.tsx
index b52c5f1cc..011fcde6f 100644
--- a/packages/widgets/src/tracearr/recent-activity-section.tsx
+++ b/packages/widgets/src/tracearr/recent-activity-section.tsx
@@ -10,16 +10,18 @@ type SourcedTracearrHistorySession = SourcedTracearrItem
export function RecentActivityList({
sessions,
showSource,
+ transparent = false,
}: {
sessions: SourcedTracearrHistorySession[];
showSource: boolean;
+ transparent?: boolean;
}) {
const t = useI18n("widget.tracearr");
const locale = useCurrentIntlLocale();
return (
-
+
{t("recentActivity.title")}
{sessions.length === 0 ? (
@@ -35,7 +37,7 @@ export function RecentActivityList({
: session.mediaTitle;
return (
-
+
diff --git a/packages/widgets/src/tracearr/stats-section.tsx b/packages/widgets/src/tracearr/stats-section.tsx
index 94648306b..d95e8ccf7 100644
--- a/packages/widgets/src/tracearr/stats-section.tsx
+++ b/packages/widgets/src/tracearr/stats-section.tsx
@@ -8,10 +8,12 @@ export function StatsBar({
stats,
summary,
width,
+ transparent = false,
}: {
stats: TracearrDashboardData["stats"];
summary: TracearrDashboardData["streams"]["summary"];
width: number;
+ transparent?: boolean;
}) {
const t = useI18n("widget.tracearr");
const cols = width > 400 ? 4 : width > 250 ? 2 : 1;
@@ -22,29 +24,43 @@ export function StatsBar({
icon={}
label={t("stats.activeStreams")}
value={stats.activeStreams}
+ transparent={transparent}
/>
}
label={t("stats.totalUsers")}
value={stats.totalUsers}
+ transparent={transparent}
/>
}
label={t("stats.transcodes")}
value={`${summary.transcodes}/${summary.total}`}
+ transparent={transparent}
/>
}
label={t("stats.bandwidth")}
value={summary.totalBitrate}
+ transparent={transparent}
/>
);
}
-function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: string | number }) {
+function StatCard({
+ icon,
+ label,
+ value,
+ transparent,
+}: {
+ icon: React.ReactNode;
+ label: string;
+ value: string | number;
+ transparent: boolean;
+}) {
return (
-
+
{icon}
diff --git a/packages/widgets/src/tracearr/streams-section.tsx b/packages/widgets/src/tracearr/streams-section.tsx
index 6a4096146..8d4388491 100644
--- a/packages/widgets/src/tracearr/streams-section.tsx
+++ b/packages/widgets/src/tracearr/streams-section.tsx
@@ -13,10 +13,12 @@ export function StreamsList({
streams,
width,
showSource,
+ transparent = false,
}: {
streams: SourcedTracearrStream[];
width: number;
showSource: boolean;
+ transparent?: boolean;
}) {
const t = useI18n("widget.tracearr");
@@ -31,7 +33,13 @@ export function StreamsList({
return (
{streams.map((stream) => (
-
+
))}
);
@@ -41,10 +49,12 @@ function StreamCard({
stream,
compact,
showSource,
+ transparent,
}: {
stream: SourcedTracearrStream;
compact: boolean;
showSource: boolean;
+ transparent: boolean;
}) {
const t = useI18n("widget.tracearr");
const progressPercent =
@@ -65,7 +75,12 @@ function StreamCard({
: null;
return (
-
+
{stream.posterUrl && (
;
export function ViolationsList({
violations,
showSource,
+ transparent = false,
}: {
violations: SourcedTracearrViolation[];
showSource: boolean;
+ transparent?: boolean;
}) {
const t = useI18n("widget.tracearr");
const locale = useCurrentIntlLocale();
return (
-
+
{t("violations.title")}
{violations.length === 0 ? (
@@ -30,7 +32,7 @@ export function ViolationsList({
) : (
{violations.map((violation) => (
-
+
{
});
describe("Traefik advanced disclosure", () => {
- test("shows every protocol regardless of compact toggles and height", () => {
- expect(getTraefikProtocolKeys({ showTcp: false, showUdp: false }, 100, true)).toEqual(["http", "tcp", "udp"]);
+ test("shows every protocol in advanced mode regardless of compact toggles", () => {
+ expect(getTraefikProtocolKeys({ showTcp: false, showUdp: false }, true)).toEqual(["http", "tcp", "udp"]);
});
test("shows every unique entry point regardless of compact width limits", () => {
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index b2320f4b6..725ce5c3d 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -79,12 +79,11 @@ export const getTraefikSourceDetails = (sources: readonly TraefikDashboardSource
export function getTraefikProtocolKeys(
options: Pick["options"], "showTcp" | "showUdp">,
- height: number,
isAdvanced: boolean,
): ProtocolKey[] {
const protocols: ProtocolKey[] = ["http"];
- if (isAdvanced || (options.showTcp && height >= 220)) protocols.push("tcp");
- if (isAdvanced || (options.showUdp && height >= 300)) protocols.push("udp");
+ if (isAdvanced || options.showTcp) protocols.push("tcp");
+ if (isAdvanced || options.showUdp) protocols.push("udp");
return protocols;
}
@@ -105,7 +104,6 @@ function TraefikWidgetContent({
integrationIds,
options,
width,
- height,
displayMode = "compact",
}: WidgetComponentProps<"traefik">) {
const t = useI18n("widget.traefik");
@@ -143,7 +141,7 @@ function TraefikWidgetContent({
combined.failedEndpoints.length;
const totalWarnings =
getProtocolWarnings(combined.http) + getProtocolWarnings(combined.tcp) + getUdpWarnings(combined.udp);
- const protocolKeys = getTraefikProtocolKeys(options, height, isAdvanced);
+ const protocolKeys = getTraefikProtocolKeys(options, isAdvanced);
const entryPoints = getVisibleTraefikEntryPoints(combined.entryPoints, width, isAdvanced);
const displayedVersion = successfulData.length === 1 ? successfulData[0]?.dashboard.version : null;
@@ -194,7 +192,7 @@ function TraefikWidgetContent({
))}
{entryPoints.map((entryPoint) => (
diff --git a/packages/widgets/src/umami/umami-layout.spec.ts b/packages/widgets/src/umami/umami-layout.spec.ts
index b03f5af51..0875696b0 100644
--- a/packages/widgets/src/umami/umami-layout.spec.ts
+++ b/packages/widgets/src/umami/umami-layout.spec.ts
@@ -6,13 +6,9 @@ describe("Umami layout", () => {
test.each([
{ width: 260, height: 119, property: "isDense" as const, expected: true },
{ width: 260, height: 120, property: "isDense" as const, expected: false },
- { width: 260, height: 139, property: "showXAxis" as const, expected: false },
- { width: 260, height: 140, property: "showXAxis" as const, expected: true },
- { width: 260, height: 95, property: "showSecondaryStats" as const, expected: false },
- { width: 260, height: 96, property: "showSecondaryStats" as const, expected: true },
- { width: 259, height: 150, property: "showDetailedStats" as const, expected: false },
- { width: 260, height: 149, property: "showDetailedStats" as const, expected: false },
- { width: 260, height: 150, property: "showDetailedStats" as const, expected: true },
+ { width: 100, height: 80, property: "showXAxis" as const, expected: true },
+ { width: 100, height: 80, property: "showSecondaryStats" as const, expected: true },
+ { width: 100, height: 80, property: "showDetailedStats" as const, expected: true },
])("sets $property to $expected at $width x $height", ({ width, height, property, expected }) => {
expect(getUmamiLayout({ width, height, displayMode: "compact" })[property]).toBe(expected);
});
diff --git a/packages/widgets/src/umami/umami-layout.ts b/packages/widgets/src/umami/umami-layout.ts
index 05f02140f..37d8124f0 100644
--- a/packages/widgets/src/umami/umami-layout.ts
+++ b/packages/widgets/src/umami/umami-layout.ts
@@ -8,9 +8,9 @@ export const getUmamiLayout = ({ width, height, displayMode }: UmamiLayoutInput)
const isAdvanced = displayMode === "advanced";
return {
isDense: !isAdvanced && height < 120,
- showXAxis: isAdvanced || height >= 140,
- showSecondaryStats: isAdvanced || height >= 96,
- showDetailedStats: isAdvanced || (width >= 260 && height >= 150),
+ showXAxis: true,
+ showSecondaryStats: true,
+ showDetailedStats: true,
stackAdvancedContent: isAdvanced && width < 900,
};
};
diff --git a/packages/widgets/src/uptime-kuma/aggregate.spec.ts b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
index 4982f5331..c4aaf9f18 100644
--- a/packages/widgets/src/uptime-kuma/aggregate.spec.ts
+++ b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
@@ -1,7 +1,6 @@
import { describe, expect, it } from "vitest";
import { aggregateUptimeKumaDashboards } from "./aggregate";
-import { getCompactStatLimit, getCompactStatPriority } from "./component";
describe("aggregateUptimeKumaDashboards", () => {
it("weights uptime by monitors instead of integrations", () => {
@@ -30,26 +29,3 @@ describe("aggregateUptimeKumaDashboards", () => {
expect(combined.averageUptimePercent).toBe(25);
});
});
-
-describe("getCompactStatLimit", () => {
- it("reserves compact height for the uptime summary", () => {
- expect(getCompactStatLimit(150, true, 4)).toBe(0);
- expect(getCompactStatLimit(220, true, 4)).toBe(2);
- });
-
- it("uses the space for metrics when the summary is disabled", () => {
- expect(getCompactStatLimit(100, false, 4)).toBe(2);
- expect(getCompactStatLimit(240, false, 4)).toBe(4);
- });
-});
-
-describe("getCompactStatPriority", () => {
- it("puts active failures before healthy totals", () => {
- expect(getCompactStatPriority("downCount", 2)).toBeLessThan(getCompactStatPriority("totalMonitors", 10));
- expect(getCompactStatPriority("pausedCount", 1)).toBeLessThan(getCompactStatPriority("upCount", 8));
- });
-
- it("moves zero-value problem states behind healthy totals", () => {
- expect(getCompactStatPriority("downCount", 0)).toBeGreaterThan(getCompactStatPriority("upCount", 8));
- });
-});
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index d21a89b13..908d8ed52 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -79,25 +79,6 @@ const heroVariantByRing = {
false: classes.heroTextOnly,
} as const;
-export function getCompactStatLimit(height: number, showHero: boolean, statCount: number): number {
- if (showHero) {
- if (height < 180) return 0;
- if (height < 260) return Math.min(2, statCount);
- if (height < 340) return Math.min(4, statCount);
- } else {
- if (height < 130) return Math.min(2, statCount);
- if (height < 220) return Math.min(4, statCount);
- }
- return statCount;
-}
-
-export function getCompactStatPriority(statKey: keyof typeof statIcons, value: number): number {
- if (statKey === "downCount") return value > 0 ? 0 : 4;
- if (statKey === "pausedCount") return value > 0 ? 1 : 5;
- if (statKey === "totalMonitors") return 2;
- return 3;
-}
-
export default function UptimeKumaWidget({
integrationIds,
options,
@@ -158,16 +139,8 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
.map(([, statKey]) => statKey);
const showHero = isAdvanced || options.showAverageUptime;
- const showRing = isAdvanced || (options.showUptimeRing && width >= 170 && height >= 110);
- const prioritizedStatKeys = isAdvanced
- ? enabledStatKeys
- : enabledStatKeys.toSorted(
- (left, right) => getCompactStatPriority(left, combined[left]) - getCompactStatPriority(right, combined[right]),
- );
- const visibleStatKeys = prioritizedStatKeys.slice(
- 0,
- isAdvanced ? prioritizedStatKeys.length : getCompactStatLimit(height, showHero, prioritizedStatKeys.length),
- );
+ const showRing = isAdvanced || options.showUptimeRing;
+ const visibleStatKeys = enabledStatKeys;
const hasContent = showHero || visibleStatKeys.length > 0;
const heroLayoutClass =
@@ -227,24 +200,6 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
})}
)}
- {displayMode === "compact" && height >= 300 && combined.downCount > 0 && (
-
- {monitors
- .filter((monitor) => monitor.status === "down")
- .slice(0, 3)
- .map((monitor) => (
-
-
- {monitor.name}
-
-
- {t("status.down")} ·{" "}
- {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
-
-
- ))}
-
- )}