Add client activity histogram to dashboard

[A2Wolverin3]

Prerequisites

• I have checked the Wiki and Discussions and found no answer

• I have searched other issues and found no duplicates

• I want to request a feature or enhancement and not ask a question

The problem

When making the decision between AdGuard Home and PiHole for my home network, the available features were overwhelmingly in favor of AGH. But one of the features of PiHole that I miss is the client activity histogram on their dashboard that gives me a big picture summary of what's happening on my network at a glance. I initially investigated options with grafana and such to develop such a graph on the side, but the setup of those options was getting complicated and hacky. Plus, the graph wouldn't be available right there in the dashboard for an easy quick glance. So I figured I would just take a stab at it myself.

I've got a branch off of 107.45 that I'm using on my home network. I figured others might be interested so I should check with you guys to see if you wanted the contribution. https://github.com/A2Wolverin3/AdGuardHome/tree/v0.107.45-flowerbug

It does add a new array of 'client_activity' stats to the /control/stats API endpoint, but the underlying stats are already available in unitdb. (My branch also begins with one commit that contains an adjustment to how "daily" stats are rolled up to change the meaning of "daily" to correspond with actual days instead of the previous 24 hours, and the previous 24 hours before that, etc. It makes more sense for me, since the histogram bars get labeled with " [AM|PM]" for long periods of data.)

Hovering on each bar gives the associated time and client it represents in a tooltip, and clicking the bar will take you to the activity log filtered for that client.

Here's a glimpse at what it looks like. (I've been playing with a lot of different things on my network, so I only had AGH actively in use for a day, which is why it looks sparse. My settings are to collect 30-days of data, which would result in 60 histogram bars to fill the canvas across the page eventually.)

Proposed solution

A histogram chart on the dashboard displaying the recent activity of clients.

Alternatives considered and additional information

External dashboards. Too unreliable, not integrated, not easily configured, and would have required a lot of effort that I directed towards an integrated solution instead.

[A2Wolverin3]

Played around with this a bit more to clean up the view on my dashboard. This is my only time ever working with react/redux, so I'm sure it could use some cleaning up. But since my first post above, in my personal repo I've:

• Rebased to v0.107.51
• Added a "Report Interval" selector
• Added a "Client Activity Filter"

The "activity filter" applies only to the Client activity chart as that's really the only data that can be filtered and sliced on the client side. Thus the form controls for that exist in that box. The chart can be filtered by client name/IP and limited to the top N clients to cut down on noise.

The "report interval" might change the time units used for reporting between hours and days, so it really needs to go back to the server to fetch new data. Thus, it's control is positioned at the top. NOTE: This does not change the configured stats collection interval. It only allows you to drill down to a smaller time range on the dashboard report. (Perhaps this in a round-about way kind of addresses #6595?)

New screenshot (with a full view now that AGH has been running for a while - though I zoomed in to 5-days for demonstration):

As a non-AGH/non-react developer, I wouldn't presume to know what priorities are or how the team would envision implementing stuff like this. So I wouldn't suppose to create a PR on my own. Feel free to request a PR or just take any parts that feel right though.