From 024844d9b76c320fe07d937b7b7f5235d1a46977 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 14:56:47 +0700
Subject: [PATCH] Add custom summary calculations to RGangguan_PerTanggal.vue

---
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 204 +++++++++++++++++-
 1 file changed, 202 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index cff22f2..51af73a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -53,7 +53,7 @@
         :width="120"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         group-index="0"
         v-if="isGroupBy"
@@ -296,6 +296,155 @@
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
+        <DxTotalItem
+          display-format="TOTAL"
+          show-in-column="tanggal"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          column="total"
+          name="total"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total_selesai"
+          name="total_selesai"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="persen_selesai"
+          name="persen_selesai"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_inproses"
+          name="total_inproses"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="persen_inproses"
+          name="persen_inproses"
+          summary-type="custom"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_durasi_response"
+          name="total_durasi_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="avg_durasi_response"
+          name="avg_durasi_response"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="max_durasi_response"
+          name="max_durasi_response"
+          summary-type="max"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+        <DxTotalItem
+          column="min_durasi_response"
+          name="min_durasi_response"
+          summary-type="min"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_diatas_sla_response"
+          name="total_diatas_sla_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total_dibawah_sla_response"
+          name="total_dibawah_sla_response"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_durasi_recovery"
+          name="total_durasi_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="avg_durasi_recovery"
+          name="avg_durasi_recovery"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="max_durasi_recovery"
+          name="max_durasi_recovery"
+          summary-type="max"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+        <DxTotalItem
+          column="min_durasi_recovery"
+          name="min_durasi_recovery"
+          summary-type="min"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatWaktu(e.value)"
+        />
+
+        <DxTotalItem
+          column="total_diatas_sla_recovery"
+          name="total_diatas_sla_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          column="total_dibawah_sla_recovery"
+          name="total_dibawah_sla_recovery"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 
@@ -645,7 +794,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
@@ -835,6 +986,55 @@ const filterData = async (params: any) => {
     })
 }
 
+let total = 0
+let total_selesai = 0
+let persen_selesai = 0
+let total_inproses = 0
+let persen_inproses = 0
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+    }
+  }
+
+  if (options.name === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+  }
+
+  if (options.name === 'total_inproses') {
+    if (options.summaryProcess === 'calculate') {
+      total_inproses += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_inproses
+    }
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_selesai = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_selesai / total) * 100
+    }
+  }
+
+  if (options.name === 'persen_inproses') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_inproses = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_inproses / total) * 100
+    }
+  }
+}
+
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [