fix: CSAT chart showing incorrect data (#7152)

* fix: computation of data for csat chart

* fix: make horizontal chart reactive

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

@@ -45,6 +45,14 @@ export default {
       default: () => {},
     },
   },
+  watch: {
+    collection() {
+      this.renderChart(this.collection, {
+        ...chartOptions,
+        ...this.chartOptions,
+      });
+    },
+  },
   mounted() {
     this.renderChart(this.collection, {
       ...chartOptions,

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue

@@ -60,9 +60,9 @@ export default {
     chartData() {
       return {
         labels: ['Rating'],
-        datasets: CSAT_RATINGS.map((rating, index) => ({
+        datasets: CSAT_RATINGS.map(rating => ({
           label: rating.emoji,
-          data: [this.ratingPercentage[index + 1]],
+          data: [this.ratingPercentage[rating.value]],
           backgroundColor: rating.color,
         })),
       };