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

Improve tick rendering (#15999)

Browse source 
Move to 24h-based time formatting and unambiguous date formats. Also add
more details to the default formatting of each tick instead of only showing
e.g. minutes/seconds at rollover ticks for the shorter breakpoints.

Fixes https://github.com/prometheus/prometheus/issues/15913

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2025-02-10 13:19:56 +01:00 committed by GitHub
parent b0d82e4c24
commit 402fa38e84
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
web/ui/mantine-ui/src/pages/query/uPlotChartHelpers.ts
View file

@ -332,6 +332,7 @@ export const getUPlotOptions = (
axes: [
// X axis (time).
{
space: 80,
labelSize: 20,
stroke: light ? "#333" : "#eee",
ticks: {
@ -343,6 +344,33 @@ export const getUPlotOptions = (
width: 2,
dash: [],
},
values: [
// See https://github.com/leeoniya/uPlot/tree/master/docs#axis--grid-opts and https://github.com/leeoniya/uPlot/issues/83.
//
// We want to achieve 24h-based time formatting instead of the default AM/PM-based time formatting.
// We also want to render dates in an unambiguous format that uses the abbreviated month name instead of a US-centric DD/MM/YYYY format.
//
// The "tick incr" column defines the breakpoint in seconds at which the format changes.
// The "default" column defines the default format for a tick at this breakpoint.
// The "year"/"month"/"day"/"hour"/"min"/"sec" columns define additional values to display for year/month/day/... rollovers occurring around a tick.
// The "mode" column value "1" means that rollover values will be concatenated with the default format (instead of replacing it).
//
// tick incr default year month day hour min sec mode
// prettier-ignore
[3600 * 24 * 365, "{YYYY}", null, null, null, null, null, null, 1],
// prettier-ignore
[3600 * 24 * 28, "{MMM}", "\n{YYYY}", null, null, null, null, null, 1],
// prettier-ignore
[3600 * 24, "{MMM} {D}", "\n{YYYY}", null, null, null, null, null, 1],
// prettier-ignore
[3600, "{HH}:{mm}", "\n{MMM} {D} '{YY}", null, "\n{MMM} {D}", null, null, null, 1],
// prettier-ignore
[60, "{HH}:{mm}", "\n{MMM} {D} '{YY}", null, "\n{MMM} {D}", null, null, null, 1],
// prettier-ignore
[1, "{HH}:{mm}:{ss}", "\n{MMM} {D} '{YY}", null, "\n{MMM} {D}", null, null, null, 1],
// prettier-ignore
[0.001, "{HH}:{mm}:{ss}.{fff}", "\n{MMM} {D} '{YY}", null, "\n{MMM} {D}", null, null, null, 1],
],
},
// Y axis (sample value).
{
@ -382,7 +410,10 @@ export const getUPlotOptions = (
(self: uPlot) => {
// Disallow sub-second zoom as this cause inconsistenices in the X axis in uPlot.
const leftVal = self.posToVal(self.select.left, "x");
const rightVal = Math.max(self.posToVal(self.select.left + self.select.width, "x"), leftVal + 1);
const rightVal = Math.max(
self.posToVal(self.select.left + self.select.width, "x"),
leftVal + 1
);
onSelectRange(leftVal, rightVal);
},