Fix issue 4216: grid padding calculation to support array of stroke w…

…idths

This commit adjusts the `plotCoords` method to correctly handle cases where the stroke width (`stroke.width`) is provided as an array of values, which corresponds to different series in the visualization. Previously, the code assumed a single numeric value, leading to incorrect grid padding calculations when multiple series with different stroke widths were present. 

Now, the method checks if `stroke.width` is an array and uses the maximum value from this array for setting grid padding, ensuring that the largest stroke width is properly accommodated. This fix improves the rendering of visual elements in the chart by preventing clipping and ensuring consistent padding.

Changes include:
- Adding a condition to determine whether `stroke.width` is an array.
- Using `Math.max(...)` to find the maximum stroke width when necessary.
- Applying this maximum value to adjust `gridPad.top` and `gridPad.bottom`.

src/modules/dimensions/Dimensions.js

@@ -41,55 +41,54 @@ export default class Dimensions {
 
     this.lgRect = this.dimHelpers.getLegendsRect()
 
+    const maxStrokeWidth = Array.isArray(w.config.stroke.width) ? Math.max(...w.config.stroke.width) : w.config.stroke.width;
+
     if (this.isSparkline) {
       if (w.config.markers.discrete.length > 0 || w.config.markers.size > 0) {
         Object.entries(this.gridPad).forEach(([k, v]) => {
           this.gridPad[k] = Math.max(
             v,
-            this.w.globals.markers.largestSize / 1.5
+            gl.markers.largestSize / 1.5
           )
         })
       }
 
-      this.gridPad.top = Math.max(w.config.stroke.width / 2, this.gridPad.top)
-      this.gridPad.bottom = Math.max(
-        w.config.stroke.width / 2,
-        this.gridPad.bottom
-      )
+      this.gridPad.top = Math.max(maxStrokeWidth / 2, this.gridPad.top);
+      this.gridPad.bottom = Math.max(maxStrokeWidth / 2, this.gridPad.bottom);
     }
 
     if (gl.axisCharts) {
-      // for line / area / scatter / column
-      this.setDimensionsForAxisCharts()
+      // For line / area / scatter / column
+      this.setDimensionsForAxisCharts();
     } else {
-      // for pie / donuts / circle
-      this.setDimensionsForNonAxisCharts()
+      // For pie / donuts / circle
+      this.setDimensionsForNonAxisCharts();
     }
 
-    this.dimGrid.gridPadFortitleSubtitle()
-
-    // after calculating everything, apply padding set by user
-    gl.gridHeight = gl.gridHeight - this.gridPad.top - this.gridPad.bottom
+    this.dimGrid.gridPadFortitleSubtitle();
 
+    // After calculating everything, apply padding set by user
+    gl.gridHeight = gl.gridHeight - this.gridPad.top - this.gridPad.bottom;
     gl.gridWidth =
       gl.gridWidth -
       this.gridPad.left -
       this.gridPad.right -
       this.xPadRight -
-      this.xPadLeft
+      this.xPadLeft;
 
-    let barWidth = this.dimGrid.gridPadForColumnsInNumericAxis(gl.gridWidth)
+    let barWidth = this.dimGrid.gridPadForColumnsInNumericAxis(gl.gridWidth);
 
-    gl.gridWidth = gl.gridWidth - barWidth * 2
+    gl.gridWidth = gl.gridWidth - barWidth * 2;
 
     gl.translateX =
       gl.translateX +
       this.gridPad.left +
       this.xPadLeft +
-      (barWidth > 0 ? barWidth + 4 : 0)
-    gl.translateY = gl.translateY + this.gridPad.top
+      (barWidth > 0 ? barWidth + 4 : 0);
+    gl.translateY = gl.translateY + this.gridPad.top;
   }
 
+
   setDimensionsForAxisCharts() {
     let w = this.w
     let gl = w.globals
@@ -126,8 +125,8 @@ export default class Dimensions {
     gl.translateXAxisY = w.globals.rotateXLabels ? this.xAxisHeight / 8 : -4
     gl.translateXAxisX =
       w.globals.rotateXLabels &&
-      w.globals.isXNumeric &&
-      w.config.xaxis.labels.rotate <= -45
+        w.globals.isXNumeric &&
+        w.config.xaxis.labels.rotate <= -45
         ? -this.xAxisWidth / 4
         : 0
 
@@ -231,8 +230,8 @@ export default class Dimensions {
 
     const type =
       cnf.chart.type === 'pie' ||
-      cnf.chart.type === 'polarArea' ||
-      cnf.chart.type === 'donut'
+        cnf.chart.type === 'polarArea' ||
+        cnf.chart.type === 'donut'
         ? 'pie'
         : 'radialBar'