administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-01 19:17:41 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improve graph axis colors

Browse Source
This commit is contained in:
Nicolas Mowen 2025-06-04 13:36:24 -06:00
parent ad4a3dc29c
commit ee368cca9c
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/graph/LineGraph.tsx
View File

@ -106,6 +106,9 @@ export function CameraLineGraph({
labels: { labels: {
rotate: 0, rotate: 0,
formatter: formatTime, formatter: formatTime,
style: {
colors: "#6B6B6B",
},
}, },
axisBorder: { axisBorder: {
show: false, show: false,
@ -118,6 +121,9 @@ export function CameraLineGraph({
show: true, show: true,
labels: { labels: {
formatter: (val: number) => Math.ceil(val).toString(), formatter: (val: number) => Math.ceil(val).toString(),
style: {
colors: "#6B6B6B",
},
}, },
min: 0, min: 0,
}, },
@ -138,7 +144,7 @@ export function CameraLineGraph({
className="size-2" className="size-2"
style={{ color: GRAPH_COLORS[labelIdx] }} style={{ color: GRAPH_COLORS[labelIdx] }}
/> />
<div className="text-xs text-muted-foreground"> <div className="text-xs text-secondary-foreground">
{t("cameras.label." + label)} {t("cameras.label." + label)}
</div> </div>
<div className="text-xs text-primary"> <div className="text-xs text-primary">
@ -243,6 +249,9 @@ export function EventsPerSecondsLineGraph({
labels: { labels: {
rotate: 0, rotate: 0,
formatter: formatTime, formatter: formatTime,
style: {
colors: "#6B6B6B",
},
}, },
axisBorder: { axisBorder: {
show: false, show: false,
@ -255,6 +264,9 @@ export function EventsPerSecondsLineGraph({
show: true, show: true,
labels: { labels: {
formatter: (val: number) => Math.ceil(val).toString(), formatter: (val: number) => Math.ceil(val).toString(),
style: {
colors: "#6B6B6B",
},
}, },
min: 0, min: 0,
}, },
@ -268,7 +280,7 @@ export function EventsPerSecondsLineGraph({
return ( return (
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div className="text-xs text-muted-foreground">{name}</div> <div className="text-xs text-secondary-foreground">{name}</div>
<div className="text-xs text-primary"> <div className="text-xs text-primary">
{lastValue} {lastValue}
{unit} {unit}

8
web/src/components/graph/SystemGraph.tsx
View File

@ -138,6 +138,9 @@ export function ThresholdBarGraph({
labels: { labels: {
rotate: 0, rotate: 0,
formatter: formatTime, formatter: formatTime,
style: {
colors: "#6B6B6B",
},
}, },
axisBorder: { axisBorder: {
show: false, show: false,
@ -150,6 +153,9 @@ export function ThresholdBarGraph({
show: true, show: true,
labels: { labels: {
formatter: (val: number) => Math.ceil(val).toString(), formatter: (val: number) => Math.ceil(val).toString(),
style: {
colors: "#6B6B6B",
},
}, },
min: 0, min: 0,
max: yMax, max: yMax,
@ -180,7 +186,7 @@ export function ThresholdBarGraph({
return ( return (
<div className="flex w-full flex-col"> <div className="flex w-full flex-col">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<div className="text-xs text-muted-foreground">{name}</div> <div className="text-xs text-secondary-foreground">{name}</div>
<div className="text-xs text-primary"> <div className="text-xs text-primary">
{lastValue} {lastValue}
{unit} {unit}