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/ReportStatsCard.vue

@@ -5,7 +5,14 @@
     @click="onClick(index)"
   >
     <h3 class="heading">
-      {{ heading }}
+      <span>{{ heading }}</span>
+      <fluent-icon
+        v-if="infoText"
+        v-tooltip="infoText"
+        size="14"
+        icon="info"
+        class="info-icon"
+      />
     </h3>
     <div class="metric-wrap">
       <h4 class="metric">
@@ -22,6 +29,7 @@
 export default {
   props: {
     heading: { type: String, default: '' },
+    infoText: { type: String, default: '' },
     point: { type: [Number, String], default: '' },
     trend: { type: Number, default: null },
     index: { type: Number, default: null },

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,
+    });
   },
 };