feat: Display how many conversations are considered for the metric calculation (#4273)

* feat: Display how many conversations are considered for the metric calculation

app/javascript/dashboard/components/widgets/chart/BarChart.js

@@ -3,7 +3,7 @@ import { Bar } from 'vue-chartjs';
 const fontFamily =
   '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
 
-const chartOptions = {
+const defaultChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
   legend: {
@@ -11,10 +11,14 @@ const chartOptions = {
       fontFamily,
     },
   },
+  datasets: {
+    bar: {
+      barPercentage: 1.0,
+    },
+  },
   scales: {
     xAxes: [
       {
-        barPercentage: 1.1,
         ticks: {
           fontFamily,
         },
@@ -39,8 +43,20 @@ const chartOptions = {
 
 export default {
   extends: Bar,
-  props: ['collection'],
+  props: {
+    collection: {
+      type: Object,
+      default: () => {},
+    },
+    chartOptions: {
+      type: Object,
+      default: () => {},
+    },
+  },
   mounted() {
-    this.renderChart(this.collection, chartOptions);
+    this.renderChart(this.collection, {
+      ...defaultChartOptions,
+      ...this.chartOptions,
+    });
   },
 };