Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-26 16:30:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(system-resources-widget): add has-shadow option (#4093)

Browse Source
This commit is contained in:
Meier Lukas
2025-09-19 16:58:46 +02:00
committed by GitHub
parent 312e084e2c
commit 3c2e6a852f
10 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -87,6 +87,7 @@
"nanoid@>=4.0.0 <5.0.9": ">=5.1.5",
"prismjs@<1.30.0": ">=1.30.0",
"proxmox-api>undici": "7.16.0",
"react-is": "^19.1.1",
"rollup@>=4.0.0 <4.22.4": ">=4.50.1",
"sha.js@<=2.4.11": ">=2.4.12",
"tar-fs@>=3.0.0 <3.0.9": ">=3.1.0",

3
packages/translation/src/lang/en.json
View File

@@ -2503,6 +2503,9 @@
"name": "System resources",
"description": "CPU, Memory, Disk and other hardware usage of your system",
"option": {
"hasShadow": {
"label": "Enable chart shading"
},
"visibleCharts": {
"label": "Visible charts",
"description": "Select the charts you want to be visible.",

3
packages/widgets/src/system-resources/chart/combined-network-traffic.tsx
View File

@@ -9,12 +9,14 @@ import { CommonChart } from "./common-chart";
export const CombinedNetworkTrafficChart = ({
usageOverTime,
hasShadow,
labelDisplayMode,
}: {
usageOverTime: {
up: number;
down: number;
}[];
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
}) => {
const chartData = usageOverTime.map((usage, index) => ({ index, up: usage.up, down: usage.down }));
@@ -31,6 +33,7 @@ export const CombinedNetworkTrafficChart = ({
title={t("network")}
icon={IconNetwork}
yAxisProps={{ domain: [0, "dataMax"] }}
chartType={hasShadow ? "area" : "line"}
labelDisplayMode={labelDisplayMode}
tooltipProps={{
content: ({ payload }) => {

12
packages/widgets/src/system-resources/chart/common-chart.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { ReactNode } from "react";
import type { LineChartSeries } from "@mantine/charts";
import { LineChart } from "@mantine/charts";
import type { AreaChartSeries } from "@mantine/charts";
import { AreaChart, LineChart } from "@mantine/charts";
import { Card, Center, Group, Loader, Stack, Text, useMantineColorScheme, useMantineTheme } from "@mantine/core";
import { useElementSize, useHover, useMergedRef } from "@mantine/hooks";
import type { TooltipProps, YAxisProps } from "recharts";
@@ -21,16 +21,18 @@ export const CommonChart = ({
tooltipProps,
yAxisProps,
lastValue,
chartType = "line",
}: {
data: Record<string, any>[];
dataKey: string;
series: LineChartSeries[];
series: AreaChartSeries[];
title: ReactNode;
icon: TablerIcon;
labelDisplayMode: LabelDisplayModeOption;
tooltipProps?: TooltipProps<number, any>;
yAxisProps?: Omit<YAxisProps, "ref">;
lastValue?: string;
chartType?: "line" | "area";
}) => {
const { ref: elementSizeRef, height } = useElementSize();
const theme = useMantineTheme();
@@ -43,6 +45,7 @@ export const CommonChart = ({
const backgroundColor =
scheme.colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
const ChartComponent = chartType === "line" ? LineChart : AreaChart;
const showIcon = labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
const showText = labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
@@ -88,7 +91,7 @@ export const CommonChart = ({
</Stack>
</Center>
) : (
<LineChart
<ChartComponent
data={data}
dataKey={dataKey}
h={"100%"}
@@ -105,6 +108,7 @@ export const CommonChart = ({
tooltipProps={tooltipProps}
withTooltip={height >= 64}
yAxisProps={yAxisProps}
fillOpacity={chartType === "area" ? 0.3 : undefined}
/>
)}
</Card>

5
packages/widgets/src/system-resources/chart/cpu-chart.tsx
View File

@@ -3,14 +3,16 @@ import { IconCpu } from "@tabler/icons-react";
import { useScopedI18n } from "@homarr/translation/client";
import { LabelDisplayModeOption } from "..";
import type { LabelDisplayModeOption } from "..";
import { CommonChart } from "./common-chart";
export const SystemResourceCPUChart = ({
cpuUsageOverTime,
hasShadow,
labelDisplayMode,
}: {
cpuUsageOverTime: number[];
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
}) => {
const chartData = cpuUsageOverTime.map((usage, index) => ({ index, usage }));
@@ -27,6 +29,7 @@ export const SystemResourceCPUChart = ({
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
cpuUsageOverTime.length > 0 ? `${Math.round(cpuUsageOverTime[cpuUsageOverTime.length - 1]!)}%` : undefined
}
chartType={hasShadow ? "area" : "line"}
yAxisProps={{ domain: [0, 100] }}
labelDisplayMode={labelDisplayMode}
tooltipProps={{

3
packages/widgets/src/system-resources/chart/memory-chart.tsx
View File

@@ -10,10 +10,12 @@ import { CommonChart } from "./common-chart";
export const SystemResourceMemoryChart = ({
memoryUsageOverTime,
totalCapacityInBytes,
hasShadow,
labelDisplayMode,
}: {
memoryUsageOverTime: number[];
totalCapacityInBytes: number;
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
}) => {
const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
@@ -35,6 +37,7 @@ export const SystemResourceMemoryChart = ({
labelDisplayMode={labelDisplayMode}
yAxisProps={{ domain: [0, totalCapacityInBytes] }}
lastValue={percentageUsed !== undefined ? `${Math.round(percentageUsed * 100)}%` : undefined}
chartType={hasShadow ? "area" : "line"}
tooltipProps={{
content: ({ payload }) => {
if (!payload) {

3
packages/widgets/src/system-resources/chart/network-traffic.tsx
View File

@@ -10,10 +10,12 @@ import { CommonChart } from "./common-chart";
export const NetworkTrafficChart = ({
usageOverTime,
isUp,
hasShadow,
labelDisplayMode,
}: {
usageOverTime: number[];
isUp: boolean;
hasShadow: boolean;
labelDisplayMode: LabelDisplayModeOption;
}) => {
const chartData = usageOverTime.map((usage, index) => ({ index, usage }));
@@ -31,6 +33,7 @@ export const NetworkTrafficChart = ({
icon={isUp ? IconArrowUp : IconArrowDown}
yAxisProps={{ domain: [0, upperBound] }}
lastValue={`${humanFileSize(Math.round(max))}/s`}
chartType={hasShadow ? "area" : "line"}
labelDisplayMode={labelDisplayMode}
tooltipProps={{
content: ({ payload }) => {

5
packages/widgets/src/system-resources/component.tsx
View File

@@ -59,6 +59,7 @@ export default function SystemResources({ integrationIds, options }: WidgetCompo
<Box h={rowHeight}>
<SystemResourceCPUChart
cpuUsageOverTime={items.map((item) => item.cpu)}
hasShadow={options.hasShadow}
labelDisplayMode={options.labelDisplayMode}
/>
</Box>
@@ -68,6 +69,7 @@ export default function SystemResources({ integrationIds, options }: WidgetCompo
<SystemResourceMemoryChart
memoryUsageOverTime={items.map((item) => item.memory)}
totalCapacityInBytes={memoryCapacityInBytes}
hasShadow={options.hasShadow}
labelDisplayMode={options.labelDisplayMode}
/>
</Box>
@@ -79,6 +81,7 @@ export default function SystemResources({ integrationIds, options }: WidgetCompo
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
usageOverTime={items.map((item) => item.network!.down)}
isUp={false}
hasShadow={options.hasShadow}
labelDisplayMode={options.labelDisplayMode}
/>
@@ -86,6 +89,7 @@ export default function SystemResources({ integrationIds, options }: WidgetCompo
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
usageOverTime={items.map((item) => item.network!.up)}
isUp
hasShadow={options.hasShadow}
labelDisplayMode={options.labelDisplayMode}
/>
</Group>
@@ -94,6 +98,7 @@ export default function SystemResources({ integrationIds, options }: WidgetCompo
<CombinedNetworkTrafficChart
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
usageOverTime={items.map((item) => item.network!)}
hasShadow={options.hasShadow}
labelDisplayMode={options.labelDisplayMode}
/>
</Box>

1
packages/widgets/src/system-resources/index.ts
View File

@@ -17,6 +17,7 @@ export const { definition, componentLoader } = createWidgetDefinition("systemRes
supportedIntegrations: ["dashDot", "openmediavault", "truenas"],
createOptions() {
return optionsBuilder.from((factory) => ({
hasShadow: factory.switch({ defaultValue: true }),
visibleCharts: factory.multiSelect({
options: (["cpu", "memory", "network"] as const).map((key) => ({
value: key,

16
pnpm-lock.yaml generated
View File

@@ -17,6 +17,7 @@ overrides:
nanoid@>=4.0.0 <5.0.9: '>=5.1.5'
prismjs@<1.30.0: '>=1.30.0'
proxmox-api>undici: 7.16.0
react-is: ^19.1.1
rollup@>=4.0.0 <4.22.4: '>=4.50.1'
sha.js@<=2.4.11: '>=2.4.12'
tar-fs@>=3.0.0 <3.0.9: '>=3.1.0'
@@ -8897,11 +8898,8 @@ packages:
peerDependencies:
react: ^16.8.4 || ^17.0.0 || ^18.0.0
react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
react-is@18.3.1:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
react-is@19.1.1:
resolution: {integrity: sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==}
react-markdown@10.1.0:
resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
@@ -17874,7 +17872,7 @@ snapshots:
dependencies:
loose-envify: 1.4.0
object-assign: 4.1.1
react-is: 16.13.1
react-is: 19.1.1
proper-lockfile@4.1.2:
dependencies:
@@ -18133,9 +18131,7 @@ snapshots:
dependencies:
react: 19.1.1
react-is@16.13.1: {}
react-is@18.3.1: {}
react-is@19.1.1: {}
react-markdown@10.1.0(@types/react@19.1.13)(react@19.1.1):
dependencies:
@@ -18314,7 +18310,7 @@ snapshots:
lodash: 4.17.21
react: 19.1.1
react-dom: 19.1.1(react@19.1.1)
react-is: 18.3.1
react-is: 19.1.1
react-smooth: 4.0.4(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
recharts-scale: 0.4.5
tiny-invariant: 1.3.3