Calendar graph

[akhileshsooji028]

⚠️⚠️⚠️ 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

Fixes #1984

Type of change

Please delete any options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• User interface (UI)
• New feature (non-breaking change which adds functionality)
• Breaking change (a fix or feature that would cause existing functionality to not work as expected)
• Other
• This change requires a documentation update

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 generates no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

[CommanderStorm]

From the changes you made I am mostly not getting the why and think that this PR was created somewhat accidentally (?):

• Why did you choose said libraries, was this not possible with chart.js?
• You seem to not have used tippy.js. Is this intentional?
• You commented out some code. Was this for testing purposes or is there a reason?
• Please do fill out the description we provide. I have added the template.

[akhileshsooji028]

1. In the Issue npm package calendar-graph was mentioned so the similar dedicated vue package has been used that is vue3-calendar-heatmap
2. Tippy.js is used to show the tooltip on hovering on the chart.

[CommanderStorm]

I have had the time to look over this PR and have made a few inline comments about some defects and other stuff.

In general:

• to be mergable, the design needs to fit into the current design. Currently, you are using blue accents. Please try to keep the design close to our
• Sorry if we were unclear about this part of the UI having to be configurable if significant changes like this one are made
• Have you tested that this works as intended? See my concearns about the ´shortBeatList´.
• While I like the way this looks, I am confused what a counts is. Please display normal metrics like daily uptime (in %) instead.

[CommanderStorm]

Here you removed the existing beat list.
Please make what is displayed configurable in the sidebars appreeance settings

[CommanderStorm]

A bit more context is needed on this one:
We already have popperjs installed.
Is there a reason why you chose this library?

[akhileshsooji028]

Yes, the Vue-Calendar-Heatmap has suggested to use it as mentioned in the documentation.

[CommanderStorm]

Can we use popperjs instead for these popups?

[DasWizardTales]

@CommanderStorm Tippy.js seems to be a peer dependency to the calendar heat-map package. As per their documentation this is a required dev dependency. I also tried disabling tooltip and removing the tippy.js dependency, that throw an error ERROR: Could not resolve "tippy.js". For now I have moved them to the dev dependency.

[CommanderStorm]

In my opinion, we should drop this feature as the Current Graph stand with the standard of Uptime Kuma UI and one of the features which gives clean look to Uptime Kuma.

As long as this is configurable and is well integrated, such an alternate display mode is fine by me.
This is the design decision we chose for the last few features, which were design related and might be considered controversial.

[CommanderStorm]

by "alternate display mode" I mean that in the sidebar appearance settings a setting should be added that allows switching between the bigger calendar graph and the shorter beats graph.

[CommanderStorm]

This has improved, but not to the level we require.
These points from my previous review are not resolved.

• Calendar graph #4419 (comment)
• Calendar graph #4419 (comment)

[CommanderStorm]

This is better (removing XY clounts), but still not what I meant when I said

in the sidebar appearance settings a setting should be added that allows switching between the bigger calendar graph and the shorter beats graph.

You switched all monitors to the calendar.
Please make this configurable either on

• a per monitor (see the show link feature and the badge generator) or
• per status page level.

[CommanderStorm]

@chakflying You have a better grasp at this (this is why the review-request).
Is this query correct? Should this not use stat_daily instead?

[chakflying]

Yes, in the near future, the heartbeats table will only keep data for the last 48 hours. The getDataArray function in UptimeCalculator should be used instead. The raw counts data can retrieved that way, and the precentage calculated in the front-end.

Since this was only implemented recently, with the only component utilizing it (PingChart) still in PR state (#4264), any feedback on the implementation is welcome.

[akhileshsooji028]

@chakflying correct me if i'm wrong, In near future ur gonna save only 48 hrs monitoring data right. so if I use getDataArray function, Will I get the last 365 days monitoring data?

[chakflying]

The getDataArray function does not use the heartbeats table, and instead uses the various stats_ tables. You can take a look at the function implementation as it is in master. We have no time limit when using the 'day' interval.

     getDataArray(num, type = "day") {
        if (type === "hour" && num > 24 * 30) {
            throw new Error("The maximum number of hours is 720");
        }
        if (type === "minute" && num > 24 * 60) {
            throw new Error("The maximum number of minutes is 1440");
        }
     ...