feat: Add CSAT reports (#2608)

app/javascript/dashboard/components/index.js

@@ -1,14 +1,14 @@
 /* eslint no-plusplus: 0 */
-/* eslint-env browser */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
 import Button from './ui/WootButton';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
-import DeleteModal from './widgets/modal/DeleteModal.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
+import DeleteModal from './widgets/modal/DeleteModal.vue';
 import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
@@ -28,12 +28,14 @@ const WootUIKit = {
   Button,
   Code,
   ColorPicker,
+  ConfirmDeleteModal,
   DeleteModal,
   DropdownItem,
   DropdownMenu,
+  HorizontalBar,
   Input,
-  LoadingState,
   Label,
+  LoadingState,
   Modal,
   ModalHeader,
   ReportStatsCard,
@@ -43,7 +45,6 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
-  ConfirmDeleteModal,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

app/javascript/dashboard/components/widgets/ReportStatsCard.vue

@@ -1,12 +1,21 @@
 <template>
-  <div class="small-2 report-card" :class="{ 'active': selected }" v-on:click="onClick(index)">
-    <h3 class="heading">{{heading}}</h3>
-    <h4 class="metric">{{point}}</h4>
-    <p class="desc">{{desc}}</p>
+  <div
+    class="small-2 report-card"
+    :class="{ active: selected }"
+    @click="onClick(index)"
+  >
+    <h3 class="heading">
+      {{ heading }}
+    </h3>
+    <h4 class="metric">
+      {{ point }}
+    </h4>
+    <p class="desc">
+      {{ desc }}
+    </p>
   </div>
 </template>
 <script>
-
 export default {
   props: {
     heading: String,

app/javascript/dashboard/components/widgets/UserAvatarWithName.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="row--user-block">
+    <thumbnail
+      :src="user.thumbnail"
+      :size="size"
+      :username="user.name"
+      :status="user.availability_status"
+    />
+    <h6 class="text-block-title text-truncate text-capitalize">
+      {{ user.name }}
+    </h6>
+  </div>
+</template>
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  props: {
+    user: {
+      type: Object,
+      default: () => {},
+    },
+    size: {
+      type: String,
+      default: '20px',
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.row--user-block {
+  align-items: center;
+  display: flex;
+  text-align: left;
+
+  .user-name {
+    margin: 0;
+    text-transform: capitalize;
+  }
+  .user-thumbnail-box {
+    margin-right: var(--space-small);
+  }
+}
+</style>

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

@@ -0,0 +1,54 @@
+import { HorizontalBar } from 'vue-chartjs';
+
+const chartOptions = {
+  responsive: true,
+  legend: {
+    display: false,
+  },
+  title: {
+    display: false,
+  },
+  tooltips: {
+    enabled: false,
+  },
+  scales: {
+    xAxes: [
+      {
+        gridLines: {
+          offsetGridLines: false,
+        },
+        display: false,
+        stacked: true,
+      },
+    ],
+    yAxes: [
+      {
+        gridLines: {
+          offsetGridLines: false,
+        },
+        display: false,
+        stacked: true,
+      },
+    ],
+  },
+};
+
+export default {
+  extends: HorizontalBar,
+  props: {
+    collection: {
+      type: Object,
+      default: () => {},
+    },
+    chartOptions: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  mounted() {
+    this.renderChart(this.collection, {
+      ...chartOptions,
+      ...this.chartOptions,
+    });
+  },
+};