Feat: Show elapsed time in HeartbeatBar

[chakflying]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

Show the beginning and end elapsed time under the HearbeatBar. Time should be timezone corrected. On the right, an tolerance of monitor.interval * 2 is considered as "now".

Type of change

Please delete any options that are not relevant.

• User interface (UI)

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas
  (including JSDoc for methods)
• My changes generate no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

[ItsCryptic]

This is useful, I would love for this to be merged.

[louislam]

I think the ui will be a bit clear without the line. What do you think?

[chakflying]

This is a tough one, personally I think having the line connects the left and right element, making the design more cohesive. But maybe I'm biased.

[louislam]

I added the option to choose the style.

Also dimmed the line a little bit.

A line is actually hard to be handled in modern browsers and monitors. For example, with 125% dpi, the browser will "enlarge" 1px to 1.25px, but eventually monitors can display integer pixel only, it will be rounded down to 1px, but sometimes I don't know why it's rounded up to 2px like the image below. Tried different units such as em, rem, % which didn't help.

Possible follow up in the future:

• Add this option individually in status pages.

[rohith1312]

Hello,

I have recently upgraded to this version and am able to see the heart bar, but only for the past 3 hours. How can I increase the time frame?

[CommanderStorm]

No the timeframe of this diagram is currently not configurable
PRs appreciated, see https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md