Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

fix(widgets): restore compact v1 surfaces (#6710)

Browse Source
This commit is contained in:
Thomas authored and GitHub committed 2026-08-27 11:08:17 +02:00
1 parent 1b2f1bd720
commit 643ecf3df7
105 files changed
+1603 -1285
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/widgets/src/system-resources/chart/combined-network-traffic.tsx
+3
View File
@@ -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 (
packages/widgets/src/system-resources/chart/common-chart.tsx
+33 -24
View File
@@ -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<string, any>[];
dataKey: string;
@@ -34,30 +35,32 @@ export const CommonChart = ({
yAxisProps?: Omit<YAxisProps, "ref">;
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 (
<Card
ref={ref}
h={"100%"}
pos={"relative"}
style={{ overflow: "hidden", border: `1px solid ${borderColor}` }}
p={0}
bg={backgroundColor}
radius={board.itemRadius}
>
<Card ref={ref} h={"100%"} pos={"relative"} style={cardStyle} p={0} bg={backgroundColor} radius={board.itemRadius}>
{data.length > 1 && height > 40 && !hovered && (
<Group
pos={"absolute"}
@@ -70,7 +73,13 @@ export const CommonChart = ({
style={{ zIndex: 2, pointerEvents: "none" }}
align="center"
>
{showIcon && <Icon color={"var(--mantine-color-dimmed)"} style={zoomCompensatedSize(height > 100 ? 20 : 14)} stroke={1.5} />}
{showIcon && (
<Icon
color="var(--mantine-color-dimmed)"
style={zoomCompensatedSize(height > 100 ? 20 : 14)}
stroke={1.5}
/>
)}
{showText && (
<Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
{title}
@@ -83,7 +92,7 @@ export const CommonChart = ({
)}
</Group>
)}
{data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
{advanced && data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
<Center pos="absolute" w="100%" h="100%" style={{ zIndex: 2, pointerEvents: "none" }}>
<Text size="xs" fw={600}>
{lastValue}
@@ -93,13 +102,19 @@ export const CommonChart = ({
{data.length <= 1 ? (
<Center pos="absolute" w="100%" h="100%">
<Stack px={"xs"} align={"center"} gap={4}>
{showIcon && <Icon color={"var(--mantine-color-dimmed)"} style={zoomCompensatedSize(height > 100 ? 20 : 14)} stroke={1.5} />}
{showIcon && (
<Icon
color="var(--mantine-color-dimmed)"
style={zoomCompensatedSize(height > 100 ? 20 : 14)}
stroke={1.5}
/>
)}
{showText && (
<Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"} ta="center">
{title}
</Text>
)}
{lastValue && (
{advanced && lastValue && (
<Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
{lastValue}
</Text>
@@ -119,13 +134,7 @@ 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={{
// Render via portal so the tooltip isn't clipped by the card's overflow:hidden
packages/widgets/src/system-resources/chart/cpu-chart.tsx
+3
View File
@@ -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;
packages/widgets/src/system-resources/chart/gpu-chart.tsx
+3
View File
@@ -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;
packages/widgets/src/system-resources/chart/memory-chart.tsx
+3
View File
@@ -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"}
packages/widgets/src/system-resources/chart/network-traffic.tsx
+3
View File
@@ -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;
packages/widgets/src/system-resources/component.tsx
+9 -6
View File
@@ -68,7 +68,7 @@ export const getVisibleSystemCharts = ({
configuredCharts,
hasGpu,
hasNetwork,
height,
height: _height,
isAdvanced,
}: {
configuredCharts: readonly SystemChart[];
@@ -81,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({
@@ -235,10 +235,7 @@ const SystemCharts = ({
const showNetwork = visibleCharts.includes("network");
const labelDisplayMode = isAdvanced ? "textWithIcon" : options.labelDisplayMode;
const chartCount = visibleCharts.length;
const chartColumns = useMemo(
() => (isAdvanced ? getAdvancedChartColumns(width) : 1),
[isAdvanced, width],
);
const chartColumns = useMemo(() => (isAdvanced ? getAdvancedChartColumns(width) : 1), [isAdvanced, width]);
const compactChartGap = 8;
const compactRowHeight = 56;
const chartHeight = isAdvanced
@@ -269,6 +266,7 @@ const SystemCharts = ({
cpuUsageOverTime={items.map((item) => item.cpu)}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
advanced={isAdvanced}
/>
</Box>
)}
@@ -279,6 +277,7 @@ const SystemCharts = ({
totalCapacityInBytes={memoryCapacityInBytes}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
advanced={isAdvanced}
/>
</Box>
)}
@@ -288,6 +287,7 @@ const SystemCharts = ({
gpuUsageOverTime={items.map((item) => item.gpu)}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
advanced={isAdvanced}
/>
</Box>
)}
@@ -299,12 +299,14 @@ const SystemCharts = ({
isUp={false}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
advanced={isAdvanced}
/>
<NetworkTrafficChart
usageOverTime={networkItems.map((network) => network.up)}
isUp
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
advanced={isAdvanced}
/>
</Group>
) : (
@@ -313,6 +315,7 @@ const SystemCharts = ({
usageOverTime={networkItems}
hasShadow={options.hasShadow}
labelDisplayMode={labelDisplayMode}
advanced={isAdvanced}
/>
</Box>
))}