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

More uPlot coloring improvements/fixes

Browse source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-07-23 19:59:42 +02:00
parent 3ecc13b330
commit de1cb93cb1
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -337,7 +337,7 @@ const getOptions = (
// see https://github.com/leeoniya/uPlot/issues/973. // see https://github.com/leeoniya/uPlot/issues/973.
drawOrder: ["series", "axes"], drawOrder: ["series", "axes"],
focus: { focus: {
alpha: 0.4, alpha: 1,
}, },
axes: [ axes: [
// X axis (time). // X axis (time).
@ -345,7 +345,7 @@ const getOptions = (
labelSize: 20, labelSize: 20,
stroke: light ? "#333" : "#eee", stroke: light ? "#333" : "#eee",
ticks: { ticks: {
stroke: light ? "#333" : "#eee", stroke: light ? "#00000010" : "#ffffff20",
}, },
grid: { grid: {
show: false, show: false,
@ -357,17 +357,12 @@ 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: {
// show: true,
// stroke: light ? "#00000010" : "#ffffff10",
// width: 2,
// },
ticks: { ticks: {
stroke: light ? "#00000010" : "#ffffff10", stroke: light ? "#00000010" : "#ffffff20",
}, },
grid: { grid: {
show: true, show: true,
stroke: light ? "#00000010" : "#ffffff10", stroke: light ? "#00000010" : "#ffffff20",
width: 2, width: 2,
dash: [], dash: [],
}, },

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

@ -101,3 +101,17 @@
height: 10px; height: 10px;
} }
} }
.u-select {
background: rgba(255, 200, 150, 0.2);
}
.u-hz .u-cursor-x,
.u-vt .u-cursor-y {
border-right: 1px dashed light-dark(#607d8b, #90adbc);
}
.u-hz .u-cursor-y,
.u-vt .u-cursor-x {
border-bottom: 1px dashed light-dark(#607d8b, #90adbc);
}