chore(ec-payment-methods-chart): minor tooltips and layout improves

Author: leomp12

src/components/cards/EcPaymentMethodsChart.vue

@@ -1,20 +1,17 @@
 <template>
-  <div class="ec-payment-methods-graph">
-    <div
-      class="mx-auto mb-5"
-      style="max-width: 350px"
-    >
+  <div
+    class="ec-payment-methods-chart mx-auto"
+    style="max-width: 500px"
+  >
+    <div class="mb-5">
       <canvas
         ref="canva-pie"
-        width="350"
-        height="350"
+        width="400"
+        height="300"
       ></canvas>
     </div>
 
-    <div
-      class="mx-auto"
-      style="max-width: 500px"
-    >
+    <div>
       <canvas
         ref="canva-bar"
         width="400"

src/components/cards/js/EcPaymentMethodsChart.js

@@ -103,6 +103,11 @@ export default {
               }
             }]
           }
+        } else {
+          options.tooltips.callbacks.beforeLabel = ({ index }) => {
+            const { _id } = aggregation[index]
+            return i19PaymentMethodCodes[_id]
+          }
         }
         aggregation = aggregation.sort((a, b) => a.color > b.color ? 1 : -1)
         return new Chart(this.$refs[ref], {