mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Implement dark theme for uPlot graphs

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-07-23 01:31:06 +02:00
parent a526a7ae53
commit d6f4d3a00b
3 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/ui/mantine-ui/src/pages/query/Graph.tsx
View file

@ -143,7 +143,7 @@ const Graph: FC<GraphProps> = ({
zIndex={1000} zIndex={1000}
h={570} h={570}
overlayProps={{ radius: "sm", blur: 0.5 }} overlayProps={{ radius: "sm", blur: 0.5 }}
loaderProps={{ type: "dots", color: "gray" }} loaderProps={{ type: "dots", color: "gray.6" }}
// loaderProps={{ // loaderProps={{
// children: <Skeleton m={0} w="100%" h="100%" />, // children: <Skeleton m={0} w="100%" h="100%" />,
// }} // }}

36
web/ui/mantine-ui/src/pages/query/UPlotChart.tsx
View file

@ -11,6 +11,8 @@ import { formatTimestamp } from "../../lib/formatTime";
import { computePosition, shift, flip, offset } from "@floating-ui/dom"; import { computePosition, shift, flip, offset } from "@floating-ui/dom";
import { colorPool } from "./ColorPool"; import { colorPool } from "./ColorPool";
import { useSettings } from "../../state/settingsSlice"; import { useSettings } from "../../state/settingsSlice";
import { useComputedColorScheme } from "@mantine/core";
import { fill } from "lodash";
const formatYAxisTickValue = (y: number | null): string => { const formatYAxisTickValue = (y: number | null): string => {
if (y === null) { if (y === null) {
@ -236,6 +238,7 @@ const getOptions = (
width: number, width: number,
result: RangeSamples[], result: RangeSamples[],
useLocalTime: boolean, useLocalTime: boolean,
light: boolean,
onSelectRange: (_start: number, _end: number) => void onSelectRange: (_start: number, _end: number) => void
): uPlot.Options => ({ ): uPlot.Options => ({
width: width - 30, width: width - 30,
@ -264,7 +267,7 @@ const getOptions = (
_u: uPlot, _u: uPlot,
seriesIdx: number seriesIdx: number
): CSSStyleDeclaration["borderColor"] => { ): CSSStyleDeclaration["borderColor"] => {
return colorPool[seriesIdx % colorPool.length]; return colorPool[(seriesIdx - 1) % colorPool.length];
}, },
}, },
}, },
@ -278,10 +281,13 @@ const getOptions = (
// X axis (time). // X axis (time).
{ {
labelSize: 20, labelSize: 20,
stroke: "#333", stroke: light ? "#333" : "#eee",
ticks: {
stroke: light ? "#333" : "#eee",
},
grid: { grid: {
show: false, show: false,
stroke: "#eee", stroke: light ? "#eee" : "#333",
width: 2, width: 2,
dash: [], dash: [],
}, },
@ -289,14 +295,23 @@ const getOptions = (
// Y axis (sample value). // Y axis (sample value).
{ {
values: (_u: uPlot, splits: number[]) => splits.map(formatYAxisTickValue), values: (_u: uPlot, splits: number[]) => splits.map(formatYAxisTickValue),
border: { // border: {
// show: true,
// stroke: light ? "#00000010" : "#ffffff10",
// width: 2,
// },
ticks: {
stroke: light ? "#00000010" : "#ffffff10",
},
grid: {
show: true, show: true,
stroke: "#333", stroke: light ? "#00000010" : "#ffffff10",
width: 1, width: 2,
dash: [],
}, },
labelGap: 8, labelGap: 8,
labelSize: 8 + 12 + 8, labelSize: 8 + 12 + 8,
stroke: "#333", stroke: light ? "#333" : "#eee",
size: autoPadLeft, size: autoPadLeft,
}, },
], ],
@ -396,14 +411,17 @@ const UPlotChart: FC<UPlotChartProps> = ({
}) => { }) => {
const [options, setOptions] = useState<uPlot.Options | null>(null); const [options, setOptions] = useState<uPlot.Options | null>(null);
const { useLocalTime } = useSettings(); const { useLocalTime } = useSettings();
const theme = useComputedColorScheme();
useEffect(() => { useEffect(() => {
if (width === 0) { if (width === 0) {
return; return;
} }
setOptions(getOptions(width, data, useLocalTime, onSelectRange)); setOptions(
}, [width, data, useLocalTime, onSelectRange]); getOptions(width, data, useLocalTime, theme === "light", onSelectRange)
);
}, [width, data, useLocalTime, theme, onSelectRange]);
const seriesData: uPlot.AlignedData = normalizeData( const seriesData: uPlot.AlignedData = normalizeData(
data, data,

11
web/ui/mantine-ui/src/pages/query/uplot.css
View file

@ -31,6 +31,10 @@
width: min-content; width: min-content;
} }
.u-under {
background-color: light-dark(unset, #1f1f1f);
}
.u-over { .u-over {
box-shadow: 0px 0px 0px 0.5px #ccc; box-shadow: 0px 0px 0px 0.5px #ccc;
cursor: crosshair; cursor: crosshair;
@ -57,9 +61,10 @@
color: var(--mantine-color-gray-1); */ color: var(--mantine-color-gray-1); */
/* background: rgba(0, 0, 0, 0.8); */ /* background: rgba(0, 0, 0, 0.8); */
/* color: #fff; */ /* color: #fff; */
background: rgba(255, 255, 255, 0.95); background: light-dark(rgba(255, 255, 255, 0.95), rgba(25, 25, 25, 0.95));
border: 2px solid var(--mantine-color-gray-6); color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-5));
color: var(--mantine-color-gray-9); border: 2px solid
light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-6));
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
padding: 0.8em 1.5em; padding: 0.8em 1.5em;