fix(custom-chart-web): apply conditional layout config

Author: rahmanunver

packages/pluggableWidgets/custom-chart-web/src/controllers/ChartPropsController.ts

@@ -84,14 +84,18 @@ export class ChartPropsController implements ReactiveController {
             height: this.sizeProvider.height,
             autosize: true,
             font: {
-                family: "Open Sans, sans-serif",
-                size: Math.max(12 * (this.sizeProvider.width / 1000), 8)
+                family: this.layout.font?.family ? this.layout.font.family : "Open Sans, sans-serif",
+                size: this.layout.font?.size
+                    ? this.layout.font.size
+                    : Math.max(12 * (this.sizeProvider.width / 1000), 8)
             },
             legend: {
                 ...this.layout.legend,
                 font: {
                     ...this.layout.legend?.font,
-                    size: Math.max(10 * (this.sizeProvider.width / 1000), 7)
+                    size: this.layout.legend?.font?.size
+                        ? this.layout.legend.font.size
+                        : Math.max(10 * (this.sizeProvider.width / 1000), 7)
                 },
                 itemwidth: Math.max(10 * (this.sizeProvider.width / 1000), 3),
                 itemsizing: "constant"
@@ -100,23 +104,27 @@ export class ChartPropsController implements ReactiveController {
                 ...this.layout.xaxis,
                 tickfont: {
                     ...this.layout.xaxis?.tickfont,
-                    size: Math.max(10 * (this.sizeProvider.width / 1000), 7)
+                    size: this.layout.xaxis?.tickfont?.size
+                        ? this.layout.xaxis.tickfont.size
+                        : Math.max(10 * (this.sizeProvider.width / 1000), 7)
                 }
             },
             yaxis: {
                 ...this.layout.yaxis,
                 tickfont: {
                     ...this.layout.yaxis?.tickfont,
-                    size: Math.max(10 * (this.sizeProvider.width / 1000), 7)
+                    size: this.layout.yaxis?.tickfont?.size
+                        ? this.layout.yaxis.tickfont.size
+                        : Math.max(10 * (this.sizeProvider.width / 1000), 7)
                 }
             },
             margin: {
                 ...this.layout.margin,
-                l: 60,
-                r: 60,
-                t: 60,
-                b: 60,
-                pad: 10
+                l: this.layout.margin?.l ? this.layout.margin.l : 60,
+                r: this.layout.margin?.r ? this.layout.margin.r : 60,
+                t: this.layout.margin?.t ? this.layout.margin.t : 60,
+                b: this.layout.margin?.b ? this.layout.margin.b : 60,
+                pad: this.layout.margin?.pad ? this.layout.margin.pad : 10
             }
         };
     }