New metrics dashboard

[alexjustesen]

📃 Description

This PR implements the new metrics dashboard.

🪵 Changelog

➕ Added

• 🆕 packet loss chart
• stat cards to each data section
  • closes [Feature] Add "Average" Cards to dashboard #2552
• custom date ranges
  • closes More granular Time Selection #448
• clicking on a point in a chart opens the results list.
• benchmark health % to stats where we're recording that
  • closes Display percentage of times when threshold is not hit #1786
  • closes [Feature] Show Threshold (Lines) on Dashboard instead of (just) average #2475
• failed results will render on the chart and show a "ringing" point but only on the speed chart
  • closes Graphical representation of failure to make a speed test #509
• show/hide and sort sections, this is stored to the browser's localStorage so it's persisted until cleared or reset

✏️ Changed

• when a benchmark fails for a KPI the point on the speed and ping charts will have a "ringing" animation

🔧 Fixed

• closes [Question] Rendered charts shrink on Android Chrome  #2402

📷 Screenshots

Dark mode	Light mode

[homelab-alpha]

Hi alexjustesen,

I was impatient to see how the new metrics dashboard would look using my dataset, so I converted the production database to SQLite and explored the new metrics dashboard.

Overall, the daily charts look great. The weekly speed chart is starting to feel a bit cluttered, and the monthly speed chart is unfortunately difficult to read at a glance.

I’ve attached screenshots of the daily, weekly, and monthly charts for reference.

screenshots Daily (click to expand)

screenshots Weekly (click to expand)

screenshots Monthly (click to expand)

I hope this information is helpful. If this causes any inconvenience, please let me know.

[alexjustesen]

Really helpful, I haven't gotten to testing more than a week yet. I sort of figured that benchmark points would be useless at longer ranges so I'm going to be removing that.

[alexjustesen]

@homelab-alpha feel free to poke around from the latest commit, few things changed.

1. Points are now hidden when the date range is > 8 days
2. Vertical bars are shown when a Result has a status of Failed
3. Added packet loss chart
4. Sections are now sortable
5. DEFAULT_CHART_RANGE config works again

[homelab-alpha]

Hi @alexjustesen,

Thanks for blinding me with light mode in the middle of the night 😉. You made changes to the dark and light modes, but it seems that the system mode is no longer present. Was this intentional, or was it accidentally not added back?

I have a few points that might be handled differently or made clearer.

• The calendar option is oké, but I’m not sure if this is the right format. Maybe you could take inspiration from how UniFi implemented this (see screenshots Reference: Calendar view from UniFi).

• The new packet loss graph looks good. However, when there is a lot of packet loss, the graph becomes somewhat cluttered due to the large number of points (see screenshots Monthly).

• All graphs display time blocks, but the time blocks are inconsistent across the graphs (see screenshots Weekly). This issue appears in most graphs. I have highlighted the sections in orange.

  Time block weekly dates and times:

  • Dec 15 12:05 AM
  • Dec 16 02:05 AM
  • Dec 17 01:05 AM
  • Dec 17 10:14 AM
  • Dec 18 04:05 AM
  • Dec 19 06:05 AM
  • Dec 20 08:05 AM
  • Dec 21 10:05 AM

• The message There are failed speed test in this date ranges. In my opinion, this should only be visible when you are logged in as a user or admin, and not on the public dashboard.

Reference: Calendar view from UniFi (click to expand)

Day (Dec 22 - Dec 22) (click to expand)

Daily (click to expand)

Weekly (click to expand)

Monthly (click to expand)

Edit:

• Added a reference screenshot from the UniFi calendar.
• Removed the Home Assistant suggestion, as the UniFi suggestion better aligns with the project.

[alexjustesen]

Thanks for blinding me with light mode in the middle of the night 😉.

Got to watch out for flash bangs, I'm testing a different light/dark mode picker. It was supposed to default to the system but didn't

[pixo2000]

really looking foreward to seeing the failed speedtests in the graph. will there also be an indicator for the packet loss?

Ty for coding this awesome tool 🔥