1063 fe hardware montioring monitor gauge

[jennifer-gan]

• Implemented Gauge component as per issue required based on https://recharts.org/en-US/api/RadialBarChart
• Configurable props:
  • progressValue: the value for hardware monitoring usage percentage
  • displayText: for hardware monitoring type such as CPU, MEM etc
  • gaugeHeader: optional font size for the header, default to 9px
  • gaugeHeader: optional font size for the sub header, default to 11px
  • containerHeight: optional height in number, default to 160px, this has to be provided and be a number
    for the gauge to be shown
• see screencast for reference

Screencast.from.2024-11-05.10-12-18.webm

[marcelluscaio]

Good work on this, @jennifer-gan ! I will take a closer look to the implementation soon

[ajhollid]

Component looks good!

If we can refactor all the hardcoded colors and fonts to use the theme, or add them to the theme of needed I think we're good to go.

[ajhollid]

Thanks for refactoring values to the theme!

I'm wondering if we can make them a bit more reusable though rather than have them defined solely for the gauges?

I think we'll probably be using those font sizes / colors for other charts as well.

It might be nice to make the colors values that can be passed in as props as well to make the component a bit more flexible?

[gorkem-bwl]

The design and the micro interaction looks very good!

[ajhollid]

In my previous review I was suggesting passing the colors in as props so the component can be reused with different colors easily, I don't think we achieve that by passing in the theme? Let me know if I've missed something

[marcelluscaio]

I am not sure what should be analyzed in the video provided in the comment. This PR creates, but does not implement the component, did I get it right?

[jennifer-gan]

I am not sure what should be analyzed in the video provided in the comment. This PR creates, but does not implement the component, did I get it right?

in the video, the component was implemented and rendered at the bottom (75% gauge)

[jennifer-gan]

I am not sure what should be analyzed in the video provided in the comment. This PR creates, but does not implement the component, did I get it right?

I have attached a new one , to demo the new gauge component, this time on top of page, hope this is easier to see and understand

<Stack>
		<Gauge progressValue={75} displayText="cpu"  ></Gauge>
</Stack>

[marcelluscaio]

@jennifer-gan can you please delete the code rabbit and llama comments that do not apply? If any of them apply, you can make the changes, then delete

[jennifer-gan]

@jennifer-gan can you please delete the code rabbit and llama comments that do not apply? If any of them apply, you can make the changes, then delete

yes, tried delete or hide some for both type of AI code reviews, but seems many of them does not allow to delete or hide

[jennifer-gan]

In my previous review I was suggesting passing the colors in as props so the component can be reused with different colors easily, I don't think we achieve that by passing in the theme? Let me know if I've missed something

resolved in: 94e4d1b

[ajhollid]

I've pushed a commit to decouple the light and dark themes as I don't believe it is a good idea to have one dependent on the other.

I also added JSdocs and added some _ to var names for clariry. Please remember to include JSdocs and example usage in future so we know how to use the component 👍

There are some changes that I think could improve the component, but we can refactor at a later date. I think it's time to merge in this component and move onward.