From 150519dc4f212382ecc8d76f748bc96d853885c3 Mon Sep 17 00:00:00 2001
From: Avery Lee <averyl@netflix.com>
Date: Thu, 23 Jan 2025 13:21:13 -0800
Subject: [PATCH] Add case priority bar chart to Case dashboard.

---
 .../src/dashboard/case/CaseOverview.vue       |  11 +-
 .../case/CasePriorityBarChartCard.vue         | 132 ++++++++++++++++++
 2 files changed, 142 insertions(+), 1 deletion(-)
 create mode 100644 src/dispatch/static/dispatch/src/dashboard/case/CasePriorityBarChartCard.vue

diff --git a/src/dispatch/static/dispatch/src/dashboard/case/CaseOverview.vue b/src/dispatch/static/dispatch/src/dashboard/case/CaseOverview.vue
index 5754491a72bd..cebf7c2e6b69 100644
--- a/src/dispatch/static/dispatch/src/dashboard/case/CaseOverview.vue
+++ b/src/dispatch/static/dispatch/src/dashboard/case/CaseOverview.vue
@@ -40,7 +40,7 @@
       </v-col>
       <!-- Widgets Ends -->
       <!-- Statistics Start -->
-      <v-col cols="12" sm="6">
+      <v-col cols="12">
         <case-type-bar-chart-card
           v-model="groupedItems"
           :loading="loading"
@@ -54,6 +54,13 @@
           @details-selected="detailsSelected($event)"
         />
       </v-col>
+      <v-col cols="12" sm="6">
+        <case-priority-bar-chart-card
+          v-model="groupedItems"
+          :loading="loading"
+          @details-selected="detailsSelected($event)"
+        />
+      </v-col>
       <v-col cols="12" sm="6">
         <case-new-triage-average-time-card v-model="groupedItems" :loading="loading" />
       </v-col>
@@ -83,6 +90,7 @@ import CaseDialogFilter from "@/dashboard/case/CaseDialogFilter.vue"
 import CaseEscalatedClosedAverageTimeCard from "@/dashboard/case/CaseEscalatedClosedAverageTimeCard.vue"
 import CaseNewClosedAverageTimeCard from "@/dashboard/case/CaseNewClosedAverageTimeCard.vue"
 import CaseNewTriageAverageTimeCard from "@/dashboard/case/CaseNewTriageAverageTimeCard.vue"
+import CasePriorityBarChartCard from "@/dashboard/case/CasePriorityBarChartCard.vue"
 import CaseSeverityBarChartCard from "@/dashboard/case/CaseSeverityBarChartCard.vue"
 import CaseTriageEscalatedAverageTimeCard from "@/dashboard/case/CaseTriageEscalatedAverageTimeCard.vue"
 import CaseTypeBarChartCard from "@/dashboard/case/CaseTypeBarChartCard.vue"
@@ -96,6 +104,7 @@ export default {
     CaseEscalatedClosedAverageTimeCard,
     CaseNewClosedAverageTimeCard,
     CaseNewTriageAverageTimeCard,
+    CasePriorityBarChartCard,
     CaseSeverityBarChartCard,
     CaseTriageEscalatedAverageTimeCard,
     CaseTypeBarChartCard,
diff --git a/src/dispatch/static/dispatch/src/dashboard/case/CasePriorityBarChartCard.vue b/src/dispatch/static/dispatch/src/dashboard/case/CasePriorityBarChartCard.vue
new file mode 100644
index 000000000000..b1c6a410bb6b
--- /dev/null
+++ b/src/dispatch/static/dispatch/src/dashboard/case/CasePriorityBarChartCard.vue
@@ -0,0 +1,132 @@
+<template>
+  <dashboard-card
+    :loading="loading"
+    type="bar"
+    :options="chartOptions"
+    :series="series"
+    title="Priorities"
+  />
+</template>
+
+<script>
+import { map, sortBy } from "lodash"
+
+import DashboardCard from "@/dashboard/DashboardCard.vue"
+import DashboardUtils from "@/dashboard/utils"
+import CasePriorityApi from "@/case/priority/api"
+
+export default {
+  name: "CasePriorityBarChartCard",
+
+  props: {
+    modelValue: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    loading: {
+      type: [String, Boolean],
+      default: function () {
+        return false
+      },
+    },
+  },
+
+  components: {
+    DashboardCard,
+  },
+
+  data() {
+    return {
+      priorities: [],
+    }
+  },
+
+  created: function () {
+    let filterOptions = {
+      itemsPerPage: -1,
+    }
+    CasePriorityApi.getAll(filterOptions).then((response) => {
+      this.priorities = [
+        ...new Set(
+          map(
+            sortBy(response.data.items, function (value) {
+              return value.view_order
+            }),
+            "name"
+          )
+        ),
+      ]
+    })
+  },
+
+  computed: {
+    chartOptions() {
+      return {
+        chart: {
+          type: "bar",
+          height: 350,
+          stacked: true,
+          animations: {
+            enabled: false,
+          },
+          events: {
+            dataPointSelection: (event, chartContext, config) => {
+              var data = config.w.config.series[config.seriesIndex].data[config.dataPointIndex]
+              this.$emit("detailsSelected", data.items)
+            },
+          },
+        },
+        // colors: DashboardUtils.defaultColorTheme(),
+        responsive: [
+          {
+            options: {
+              legend: {
+                position: "top",
+              },
+            },
+          },
+        ],
+        colors: [
+          function ({ seriesIndex, w }) {
+            for (let i = 0; i < w.config.series[seriesIndex].data.length; i++) {
+              if (w.config.series[seriesIndex].data[i].items.length > 0) {
+                if (w.config.series[seriesIndex].data[i].items[0].case_priority.color) {
+                  return w.config.series[seriesIndex].data[i].items[0].case_priority.color
+                }
+              }
+            }
+            return "#008FFB"
+          },
+        ],
+        xaxis: {
+          categories: this.categoryData || [],
+          title: {
+            text: "Month",
+          },
+        },
+        fill: {
+          opacity: 1,
+        },
+        legend: {
+          position: "top",
+        },
+      }
+    },
+    // series() {
+    //   return DashboardUtils.createCountedSeriesData(this.modelValue, "case_type.name", this.types)
+    // },
+    series() {
+      return DashboardUtils.createCountedSeriesData(
+        this.modelValue,
+        "case_priority.name",
+        this.priorities
+      )
+    },
+    categoryData() {
+      return Object.keys(this.modelValue)
+    },
+  },
+}
+</script>