Use labels to calculate BarWidgetUI margin (#444)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Use labels to calculate BarWidgetUI margin [#444](https://github.com/CartoDB/carto-react/pull/444)
+
 ## 1.3
 
 ### 1.3.0-beta.4 (2022-07-01)

packages/react-ui/src/widgets/BarWidgetUI.js

@@ -86,8 +86,9 @@ function BarWidgetUI(props) {
 
   // xAxis
   const xAxisDataWithLabels = useMemo(
-    () => xAxisData.map((name) => labels[name] || name),
-    [xAxisData, labels]
+    () =>
+      xAxisData.map((name) => processFormatterRes(xAxisFormatter(labels[name] || name))),
+    [xAxisData, labels, xAxisFormatter]
   );
 
   const xAxisOptions = useMemo(
@@ -101,12 +102,11 @@ function BarWidgetUI(props) {
       },
       axisLabel: {
         ...theme.typography.charts,
-        padding: [theme.spacing(0.5), 0, 0, 0],
-        formatter: (v) => processFormatterRes(xAxisFormatter(v))
+        padding: [theme.spacing(0.5), 0, 0, 0]
       },
       data: xAxisDataWithLabels
     }),
-    [theme, xAxisDataWithLabels, xAxisFormatter]
+    [theme, xAxisDataWithLabels]
   );
 
   // yAxis
@@ -204,18 +204,15 @@ function BarWidgetUI(props) {
     () => ({
       grid: {
         left:
-          xAxisData.length >= 4
-            ? calculateMargin(
-                processFormatterRes(xAxisFormatter(xAxisData[0])),
-                xAxisData.length
-              )
+          xAxisDataWithLabels.length >= 4
+            ? calculateMargin(xAxisDataWithLabels[0], xAxisDataWithLabels.length)
             : 0,
         top: theme.spacing(2),
         right:
-          xAxisData.length >= 4
+          xAxisDataWithLabels.length >= 4
             ? calculateMargin(
-                processFormatterRes(xAxisFormatter(xAxisData[xAxisData.length - 1])),
-                xAxisData.length
+                xAxisDataWithLabels[xAxisDataWithLabels.length - 1],
+                xAxisDataWithLabels.length
               )
             : 0,
         bottom: theme.spacing(0),
@@ -233,14 +230,13 @@ function BarWidgetUI(props) {
       series: seriesOptions
     }),
     [
-      xAxisData,
+      xAxisDataWithLabels,
       theme,
       colors,
       tooltipOptions,
       xAxisOptions,
       yAxisOptions,
-      seriesOptions,
-      xAxisFormatter
+      seriesOptions
     ]
   );