From 0bcc926b6a1683ca38e3b93f4ad6ac90599341be Mon Sep 17 00:00:00 2001
From: Henry Jonas <jonathan.quispe@processmaker.com>
Date: Fri, 30 May 2025 11:42:56 -0400
Subject: [PATCH] FOUR-24335: S12: POC about the TCE dashboard, search a
 library

---
 package.json                                  |   2 +
 .../components/home/Apexchart.js              | 292 ++++++++++++++++++
 .../components/home/CustomHomeScreen.vue      |  61 ++--
 resources/js/processes-catalogue/index.js     |   5 +
 4 files changed, 333 insertions(+), 27 deletions(-)
 create mode 100644 resources/js/processes-catalogue/components/home/Apexchart.js

diff --git a/package.json b/package.json
index 897089782d..fd1f664cf5 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
         "@processmaker/vue-form-elements": "0.65.0",
         "@processmaker/vue-multiselect": "2.3.0",
         "@tinymce/tinymce-vue": "2.0.0",
+        "apexcharts": "^4.7.0",
         "axios": "^0.27.2",
         "bootstrap": "^4.5.3",
         "bootstrap-vue": "^2.18.1",
@@ -103,6 +104,7 @@
         "tooltip.js": "^1.3.3",
         "v-tooltip": "^2.0.3",
         "vue": "^2.7.16",
+        "vue-apexcharts": "^1.7.0",
         "vue-chartjs": "^3.5.0",
         "vue-color": "^2.7.1",
         "vue-cookies": "^1.8.2",
diff --git a/resources/js/processes-catalogue/components/home/Apexchart.js b/resources/js/processes-catalogue/components/home/Apexchart.js
new file mode 100644
index 0000000000..8e68c4fa40
--- /dev/null
+++ b/resources/js/processes-catalogue/components/home/Apexchart.js
@@ -0,0 +1,292 @@
+export const dataA = {
+  series: [
+    {
+      data: [
+        21, 22, 10, 28, 16, 21, 13, 30, 21, 22, 10, 28, 16, 21, 13,
+        30,
+      ],
+    },
+  ],
+  chartOptions: {
+    chart: {
+      height: 350,
+      type: "bar",
+      events: {
+        click: function (chart, w, e) {
+          // console.log(chart, w, e)
+        },
+      },
+    },
+    colors: [
+      "#008FFB",
+      "#00E396",
+      "#FEB019",
+      "#FF4560",
+      "#775DD0",
+      "#00E396",
+      "#FEB019",
+      "#FF4560",
+      "#008FFB",
+      "#00E396",
+      "#FEB019",
+      "#FF4560",
+      "#775DD0",
+      "#00E396",
+      "#FEB019",
+      "#FF4560",
+    ],
+    plotOptions: {
+      bar: {
+        columnWidth: "80%",
+        distributed: true,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    legend: {
+      show: false,
+    },
+    xaxis: {
+      categories: [
+        ["John", "Doe"],
+        ["Joe", "Smith"],
+        ["Jake", "Williams"],
+        "Amber",
+        ["Peter", "Brown"],
+        ["Mary", "Evans"],
+        ["David", "Wilson"],
+        ["Lily", "Roberts"],
+        ["John", "Doe"],
+        ["Joe", "Smith"],
+        ["Jake", "Williams"],
+        "Amber",
+        ["Peter", "Brown"],
+        ["Mary", "Evans"],
+        ["David", "Wilson"],
+        ["Lily", "Roberts"],
+      ],
+      labels: {
+        style: {
+          colors: [
+            "#008FFB",
+            "#00E396",
+            "#FEB019",
+            "#FF4560",
+            "#775DD0",
+            "#00E396",
+            "#FEB019",
+            "#FF4560",
+            "#008FFB",
+            "#00E396",
+            "#FEB019",
+            "#FF4560",
+            "#775DD0",
+            "#00E396",
+            "#FEB019",
+            "#FF4560",
+          ],
+          fontSize: "12px",
+        },
+      },
+    },
+  },
+};
+
+export const dataB = {
+  series: [
+    {
+      name: "Actual",
+      data: [
+        {
+          x: "2011",
+          y: 12,
+          goals: [
+            {
+              name: "Expected",
+              value: 14,
+              strokeWidth: 2,
+              strokeDashArray: 2,
+              strokeColor: "#775DD0",
+            },
+          ],
+        },
+        {
+          x: "2012",
+          y: 44,
+          goals: [
+            {
+              name: "Expected",
+              value: 54,
+              strokeWidth: 5,
+              strokeHeight: 10,
+              strokeColor: "#775DD0",
+            },
+          ],
+        },
+        {
+          x: "2013",
+          y: 54,
+          goals: [
+            {
+              name: "Expected",
+              value: 52,
+              strokeWidth: 10,
+              strokeHeight: 0,
+              strokeLineCap: "round",
+              strokeColor: "#775DD0",
+            },
+          ],
+        },
+        {
+          x: "2014",
+          y: 66,
+          goals: [
+            {
+              name: "Expected",
+              value: 61,
+              strokeWidth: 10,
+              strokeHeight: 0,
+              strokeLineCap: "round",
+              strokeColor: "#775DD0",
+            },
+          ],
+        },
+        {
+          x: "2015",
+          y: 81,
+          goals: [
+            {
+              name: "Expected",
+              value: 66,
+              strokeWidth: 10,
+              strokeHeight: 0,
+              strokeLineCap: "round",
+              strokeColor: "#775DD0",
+            },
+          ],
+        },
+        {
+          x: "2016",
+          y: 67,
+          goals: [
+            {
+              name: "Expected",
+              value: 70,
+              strokeWidth: 5,
+              strokeHeight: 10,
+              strokeColor: "#775DD0",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  chartOptions: {
+    chart: {
+      height: 350,
+      type: "bar",
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+      },
+    },
+    colors: ["#00E396"],
+    dataLabels: {
+      formatter: function (val, opt) {
+        const goals =
+          opt.w.config.series[opt.seriesIndex].data[
+            opt.dataPointIndex
+          ].goals;
+
+        if (goals && goals.length) {
+          return `${val} / ${goals[0].value}`;
+        }
+        return val;
+      },
+    },
+    legend: {
+      show: true,
+      showForSingleSeries: true,
+      customLegendItems: ["Actual", "Expected"],
+      markers: {
+        fillColors: ["#00E396", "#775DD0"],
+      },
+    },
+  },
+};
+
+function generateData(baseval, count, yrange) {
+  let i = 0;
+  const series = [];
+  while (i < count) {
+    const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
+    const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+    const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
+
+    series.push({
+      x,
+      y,
+      z
+    });
+    i++;
+  }
+  return series;
+}
+
+
+export const dataC = {
+  series: [
+    {
+      name: "Bubble1",
+      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
+    },
+    {
+      name: "Bubble2",
+      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
+    },
+    {
+      name: "Bubble3",
+      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
+    },
+    {
+      name: "Bubble4",
+      data: generateData(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
+    },
+  ],
+  chartOptions: {
+    chart: {
+      height: 350,
+      type: "bubble",
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      opacity: 0.8,
+    },
+    title: {
+      text: "Simple Bubble Chart",
+    },
+    xaxis: {
+      tickAmount: 12,
+      type: "category",
+    },
+    yaxis: {
+      max: 70,
+    },
+  },
+};
diff --git a/resources/js/processes-catalogue/components/home/CustomHomeScreen.vue b/resources/js/processes-catalogue/components/home/CustomHomeScreen.vue
index 265a741ab4..bb964911cc 100644
--- a/resources/js/processes-catalogue/components/home/CustomHomeScreen.vue
+++ b/resources/js/processes-catalogue/components/home/CustomHomeScreen.vue
@@ -1,17 +1,34 @@
 <template>
-  <div class="tw-flex tw-flex-col tw-space-y-4 tw-h-full tw-w-full">
-    <component
-      :is="view"
-      :process="process"
-      @goBackCategory="emit('goBackCategory')" />
+  <div class="tw-flex tw-flex-col tw-space-y-4 tw-h-full tw-w-full tw-py-4">
+    <div class="tw-grid tw-grid-cols-1 tw-gap-4">
+      <div class="tw-bg-white tw-p-4 tw-rounded-lg tw-shadow">
+        <apexchart type="bar" height="350" :options="dataA.chartOptions" :series="dataA.series"></apexchart>
+      </div>
+    </div>
+    <div class="tw-grid tw-grid-cols-4">
+      <div class="tw-bg-white tw-col-span-3 tw-p-4 tw-rounded-lg tw-shadow">
+        <BaseCardButtonGroup v-if="data.length > 0" :key="dataKey + 'button'" :data="data"/>
+      </div>
+    </div>
+
+    <div class="tw-grid tw-grid-cols-2">
+      <div class="tw-bg-white tw-p-4 tw-rounded-lg tw-shadow">
+        <apexchart type="bar" height="300" :options="dataB.chartOptions" :series="dataB.series"></apexchart>
+      </div>
+
+      <div class="tw-bg-white tw-p-4 tw-rounded-lg tw-shadow">
+        <apexchart type="bubble" height="300" :options="dataC.chartOptions" :series="dataC.series"></apexchart>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
-import TceDistributionStudent from "./TceDistributionStudent.vue";
-import TceDistributionCollege from "./TceDistributionCollege.vue";
-import TceDistributionGrants from "./TceDistributionGrants.vue";
+import { ref, onMounted } from "vue";
+import { dataA, dataB, dataC } from "./Apexchart";
+import { getMetrics } from "../api";
+import { buildMetrics } from "./config/metrics";
+import BaseCardButtonGroup from "./ButtonGroup/BaseCardButtonGroup.vue";
 
 const props = defineProps({
   process: {
@@ -20,24 +37,14 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["goBackCategory"]);
-
-const view = computed(() => {
-  let screenId = 0;
-  const unparseProperties = props.process?.launchpad?.properties || null;
-  if (unparseProperties !== null) {
-    screenId = JSON.parse(unparseProperties)?.screen_id || 0;
-  }
+const data = ref([]);
+const dataKey = ref(0);
 
-  switch (screenId) {
-    case "tce-student":
-      return TceDistributionStudent;
-    case "tce-college":
-      return TceDistributionCollege;
-    case "tce-grants":
-      return TceDistributionGrants;
-    default:
-      return TceDistributionStudent;
-  }
+const hookMetrics = async () => {
+  const metricsResponse = await getMetrics({ processId: props.process.id });
+  data.value = buildMetrics(metricsResponse.data);
+};
+onMounted(() => {
+  hookMetrics();
 });
 </script>
diff --git a/resources/js/processes-catalogue/index.js b/resources/js/processes-catalogue/index.js
index b548e11f59..bb3a661c61 100644
--- a/resources/js/processes-catalogue/index.js
+++ b/resources/js/processes-catalogue/index.js
@@ -2,6 +2,11 @@ import Vue from "vue";
 import Process from "./components/Process";
 import ProcessesCatalogue from "./components/ProcessesCatalogue";
 import ProcessListing from "./components/ProcessListing";
+import VueApexCharts from 'vue-apexcharts';
+
+Vue.use(VueApexCharts);
+
+Vue.component('apexchart', VueApexCharts);
 
 export const EventBus = new Vue();
 Vue.use(VueRouter);