diff --git a/beszel/site/src/components/charts/container-chart.tsx b/beszel/site/src/components/charts/container-chart.tsx
index b4661ee..78d8d27 100644
--- a/beszel/site/src/components/charts/container-chart.tsx
+++ b/beszel/site/src/components/charts/container-chart.tsx
@@ -170,7 +170,7 @@ export default memo(function ContainerChart({
content={}
/>
{Object.keys(chartConfig).map((key) => {
- const filtered = filter && !key.includes(filter)
+ const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
let fillOpacity = filtered ? 0.05 : 0.4
let strokeOpacity = filtered ? 0.1 : 1
return (
diff --git a/beszel/site/src/components/charts/temperature-chart.tsx b/beszel/site/src/components/charts/temperature-chart.tsx
index 2ac4dc5..df672eb 100644
--- a/beszel/site/src/components/charts/temperature-chart.tsx
+++ b/beszel/site/src/components/charts/temperature-chart.tsx
@@ -18,8 +18,11 @@ import {
} from "@/lib/utils"
import { ChartData } from "@/types"
import { memo, useMemo } from "react"
+import { $temperatureFilter } from "@/lib/stores"
+import { useStore } from "@nanostores/react"
export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
+ const filter = useStore($temperatureFilter)
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
if (chartData.systemStats.length === 0) {
@@ -86,22 +89,28 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
formatShortDate(data[0].payload.created)}
contentFormatter={(item) => decimalString(item.value) + " °C"}
- // indicator="line"
+ filter={filter}
/>
}
/>
- {colors.map((key) => (
-
- ))}
+ {colors.map((key) => {
+ const filtered = filter && !key.toLowerCase().includes(filter.toLowerCase())
+ let strokeOpacity = filtered ? 0.1 : 1
+ return (
+
+ )
+ })}
{colors.length < 12 && } />}
diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx
index 0fab3ca..5606e81 100644
--- a/beszel/site/src/components/routes/system.tsx
+++ b/beszel/site/src/components/routes/system.tsx
@@ -1,6 +1,15 @@
import { t } from "@lingui/core/macro"
import { Plural, Trans } from "@lingui/react/macro"
-import { $systems, pb, $chartTime, $containerFilter, $userSettings, $direction, $maxValues } from "@/lib/stores"
+import {
+ $systems,
+ pb,
+ $chartTime,
+ $containerFilter,
+ $userSettings,
+ $direction,
+ $maxValues,
+ $temperatureFilter,
+} from "@/lib/stores"
import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
import { ChartType, Os } from "@/lib/enums"
import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -219,7 +228,7 @@ export default function SystemDetail({ name }: { name: string }) {
cache.set(cs_cache_key, containerData)
}
if (containerData.length) {
- !containerFilterBar && setContainerFilterBar()
+ !containerFilterBar && setContainerFilterBar()
} else if (containerFilterBar) {
setContainerFilterBar(null)
}
@@ -557,6 +566,7 @@ export default function SystemDetail({ name }: { name: string }) {
grid={grid}
title={t`Temperature`}
description={t`Temperatures of system sensors`}
+ cornerEl={}
>
@@ -654,12 +664,12 @@ export default function SystemDetail({ name }: { name: string }) {
)
}
-function ContainerFilterBar() {
- const containerFilter = useStore($containerFilter)
+function FilterBar({ store = $containerFilter }: { store?: typeof $containerFilter }) {
+ const containerFilter = useStore(store)
const { t } = useLingui()
const handleChange = useCallback((e: React.ChangeEvent) => {
- $containerFilter.set(e.target.value)
+ store.set(e.target.value)
}, [])
return (
@@ -672,7 +682,7 @@ function ContainerFilterBar() {
size="icon"
aria-label="Clear"
className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
- onClick={() => $containerFilter.set("")}
+ onClick={() => store.set("")}
>
diff --git a/beszel/site/src/components/ui/chart.tsx b/beszel/site/src/components/ui/chart.tsx
index 83e105a..4446621 100644
--- a/beszel/site/src/components/ui/chart.tsx
+++ b/beszel/site/src/components/ui/chart.tsx
@@ -129,7 +129,7 @@ const ChartTooltipContent = React.forwardRef<
React.useMemo(() => {
if (filter) {
- payload = payload?.filter((item) => (item.name as string)?.includes(filter))
+ payload = payload?.filter((item) => (item.name as string)?.toLowerCase().includes(filter.toLowerCase()))
}
if (itemSorter) {
// @ts-ignore
diff --git a/beszel/site/src/lib/stores.ts b/beszel/site/src/lib/stores.ts
index 236ffa5..5efb692 100644
--- a/beszel/site/src/lib/stores.ts
+++ b/beszel/site/src/lib/stores.ts
@@ -38,6 +38,9 @@ $userSettings.subscribe((value) => {
/** Container chart filter */
export const $containerFilter = atom("")
+/** Temperature chart filter */
+export const $temperatureFilter = atom("")
+
/** Fallback copy to clipboard dialog content */
export const $copyContent = atom("")