feat: add borderRadius prop to Background and PlotOptionsSolidGauge (#8223)

Add new property for `Background` and `PlotOptionsSolidGauge` to enable
setting `borderRadius`. The property was introduced in Highcharts V11.

Also, adjust the `SolidGauge` example to use the new property and make
it look better by increasing the pane size to better use the available
space of the chart area.

Author: DiegoCardoso

vaadin-charts-flow-parent/vaadin-charts-flow-integration-tests/src/main/java/com/vaadin/flow/component/charts/examples/other/SolidGauge.java

@@ -33,14 +33,16 @@ public void initDemo() {
         Configuration configuration = chart.getConfiguration();
 
         Pane pane = configuration.getPane();
-        pane.setCenter(new String[] { "50%", "50%" });
+        pane.setCenter(new String[] { "50%", "85%" });
+        pane.setSize("140%");
         pane.setStartAngle(-90);
         pane.setEndAngle(90);
 
         Background paneBackground = new Background();
         paneBackground.setInnerRadius("60%");
         paneBackground.setOuterRadius("100%");
         paneBackground.setShape(BackgroundShape.ARC);
+        paneBackground.setBorderRadius("5");
         pane.setBackground(paneBackground);
 
         YAxis yAxis = configuration.getyAxis();
@@ -53,6 +55,7 @@ public void initDemo() {
         yAxis.setMax(200);
 
         PlotOptionsSolidgauge plotOptionsSolidgauge = new PlotOptionsSolidgauge();
+        plotOptionsSolidgauge.setBorderRadius("5");
 
         DataLabels dataLabels = plotOptionsSolidgauge.getDataLabels();
         dataLabels.setY(5);

vaadin-charts-flow-parent/vaadin-charts-flow/src/main/java/com/vaadin/flow/component/charts/model/Background.java

@@ -21,6 +21,7 @@
 public class Background extends AbstractConfigurationObject {
     private Color backgroundColor;
     private Color borderColor;
+    private String borderRadius;
     private Number borderWidth;
     private String className;
     private String outerRadius;
@@ -59,6 +60,27 @@ public void setBorderColor(Color borderColor) {
         this.borderColor = borderColor;
     }
 
+    /**
+     * Returns the border radius of the background.
+     *
+     * @see #setBorderRadius(String)
+     * @return The border radius of the background.
+     */
+    public String getBorderRadius() {
+        return borderRadius;
+    }
+
+    /**
+     * The border radius of the pane background when the shape is
+     * {@link BackgroundShape#ARC}. Can be a number (pixels) or a percentage
+     * string.
+     *
+     * @param borderRadius
+     */
+    public void setBorderRadius(String borderRadius) {
+        this.borderRadius = borderRadius;
+    }
+
     /**
      * @see #setBorderWidth(Number)
      */

vaadin-charts-flow-parent/vaadin-charts-flow/src/main/java/com/vaadin/flow/component/charts/model/PlotOptionsSolidgauge.java

@@ -22,6 +22,7 @@ public class PlotOptionsSolidgauge extends GaugeOptions {
 
     private Boolean animation;
     private Number animationLimit;
+    private String borderRadius;
     private String className;
     private Boolean clip;
     private Boolean colorByPoint;
@@ -93,6 +94,24 @@ public void setAnimationLimit(Number animationLimit) {
         this.animationLimit = animationLimit;
     }
 
+    /**
+     * @see #setBorderRadius(String)
+     */
+    public String getBorderRadius() {
+        return borderRadius;
+    }
+
+    /**
+     * The corner radius of the border surrounding solid gauge. A number
+     * signifies pixels and percentage string, like for example 50%, signifies a
+     * relative size.
+     *
+     * @param borderRadius
+     */
+    public void setBorderRadius(String borderRadius) {
+        this.borderRadius = borderRadius;
+    }
+
     /**
      * @see #setClassName(String)
      */