Feature: Add legend to chart, timestamps to heartbeat bar

[jwgatt]

This completes one of the tasks for #2521

Added legend, title and labels to the graph on the status page.

• User interface (UI)

[chakflying]

FYI the same bar chart also handles pending and maintenance status.

[jwgatt]

The time on the right displays when the monitor started, and the time on the left counts the current duration of uptime. These should make the beats bar more user friendly.

[mabed-fr]

For http it is possible to print the return status code legend or type of error ?

[jwgatt]

For http it is possible to print the return status code legend or type of error ?

Could you clarify a bit, I'm not sure I understand. There is a status code printed on the table below the chart if that's what your looking for.

[WaiserHai]

Maybe you could be implementing all the stuff that's in the backend and the admin/owner of the status page can enable to show the content or not. Of course for every monitor that's in the status page.. That would be nice to.

you could theoretically put a dropdown arrow at the end of the bar and if you press it, the status will open. kind of like an accordion. and inside there you can display the ping and the availability etc. below that just the chart. and down there stop the starus display if there is a problem right now. As you have it in the backed. the picture follows now.

i hope u understand me and know what i mean =)

[jwgatt]

Is something like this what you were after?

[WaiserHai]

Hi, I was thinking about the Status page for the viewer. I will show you what I mean, but I think am in the wrong Feature discussion heheh.

example 1:

example 2:

Edit: or maybe someone comes up with another idea how to display it :)

[jwgatt]

@louislam Could we merge this PR?

[mabed-fr]

For http it is possible to print the return status code legend or type of error ?

Could you clarify a bit, I'm not sure I understand. There is a status code printed on the table below the chart if that's what your looking for.

---

Hello,

I clarify.

Is it possible to add the HTTP return rating (200, 503, 404 ...) on the chart on mouseover? (HTTP PROBES)

[louislam]

• I might accept the legend first only, the timestamp change may need to pull out.
• https://github.com/louislam/uptime-kuma/pull/2537#issuecomment-1373131231 @chakflying's is still not fixed. In case you don't know, we have 4 possible status: https://github.com/louislam/uptime-kuma/blob/ce82ad1c12f221ce940549994c26648c46179ca5/src/util.ts#L15-L18
• Please keep the original color, I feel the red is too bright.