FE - Hardware Monitoring - Line Graph

bluewave-labs / bluewave-uptime

BlueWave Uptime is an open-source, self-hosted monitoring tool built with React.js, Node.js, and MongoDB, designed to track server uptime, response times, and incidents in real-time with beautiful visualizations. Get powerful insights and proactive alerts to keep your services running smoothly.

https://uptime-demo.bluewavelabs.ca/

GNU Affero General Public License v3.0

611 stars 64 forks source link

FE - Hardware Monitoring - Line Graph #1069

Closed ajhollid closed 2 days ago

ajhollid commented 1 month ago

There should be a reusable graph component for Hardware Monitors

[ ] It should display time on the x axis
[ ] It should display an arbitrary unit on the y axis
[ ] It should be responsive
[ ] It should use the Recharts library as we use that for charting already

ofaruk84 commented 1 month ago

Working on this !

gorkem-bwl commented 1 month ago

Hi @ofaruk84 - go ahead. Please check the look & feel, and general design of the graph component we use throughout the platform. If there is a relevant component, you can also use it.

ofaruk84 commented 4 weeks ago

Hi @gorkem-bwl @ajhollid ,

Implementation PR: https://github.com/bluewave-labs/bluewave-uptime/pull/1077

Thanks!

gorkem-bwl commented 4 weeks ago

Thanks Faruk. We need to sync the design with the chart under Page Insights. Can you ensure the styling, look & feel of your charts is the same as the one under Page Insights? (e.g background lines, colors, mouse over effects etc).

ofaruk84 commented 4 weeks ago

Thanks Faruk. We need to sync the design with the chart under Page Insights. Can you ensure the styling, look & feel of your charts is the same as the one under Page Insights? (e.g background lines, colors, mouse over effects etc).

For just clearence, do you mean Figma designs ? Cause I could not found Page Insights in any directory.

gorkem-bwl commented 4 weeks ago

Sure, let me explain. By page insights (slightly off the name) I meant "Pagespeed monitoring" which you can find here: https://bluewavelabs.gitbook.io/uptime-manager/users-guide/pagespeed-monitoring

When you install BlueWave Uptime on localhost and add a site, you can examine how it looks like.

Hope it is a bit more clear now?

ajhollid commented 4 weeks ago

Hi @ofaruk84 ,

Thanks for your contribution here!

We have pretty specific design guidelines to follow for this issue.

Please see the existing MonitorDetailsAreaGraph to see what a line chart for our application should look like.

The component for this issue and that component are very similar and probably should in fact be refactored to either be the same component, or have a base components that each individual chart will then extend.