enhancement: add support for granular styling of circle meter with onhover/click

[danielm-hpe]

It is a common pattern to highlight hovered data in a visualization, giving it more visual prominence. For status dashboards, we would like to use the circle meter to represent status, and show the number of devices in a status on hover. In order to do this, there need to be some visual cues of what is happening.

The desired enhancement is to add support to the circle meter to specify an increased thickness for the section that is being hovered. In addition, support for specifying the thicknesses of other sections when hovered and not hovered is desired. For example, critical status could default to receiving a thicker treatment, but when hovering warning the critical line would be shown as narrower and the warning line as thicker.

Expected Behavior

Here is an example of the desired kind of control over styling that is desired from the HPE OneView dashboard

In the example the critical status line segments are shown as thicker by default, but the actively hovered sections diminish other sections and instead increase the line thickness for the hovered section.

Actual Behavior

Here is an example of the circle meter styling today

There is no ability to specify different thicknesses for the circle sections.

URL, screen shot, or Codepen exhibiting the issue

See above screenshots- this is a feature enhancement request, not a defect.

Steps to Reproduce

See above

Your Environment

• Grommet version: 2.36.1
• Browser Name and version: chrome
• Operating System and version (desktop or mobile): Windows 10