Add total_durasi_response and total_durasi_recovery fields to api.graphql.ts

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -139,6 +139,19 @@
             css-class="custom-table-column"
             cell-template="formatNumber"
           />
+          <DxColumn
+            :visible="false"
+            :width="150"
+            alignment="center"
+            data-field="count_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+            :calculate-cell-value="
+              (rowData: any) => rowData.total_durasi_response * rowData.avg_durasi_response
+            "
+          />
           <DxColumn
             :width="150"
             alignment="center"
@@ -199,6 +212,19 @@
             css-class="custom-table-column"
             cell-template="formatNumber"
           />
+          <DxColumn
+            :visible="false"
+            :width="150"
+            alignment="center"
+            data-field="count_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+            :calculate-cell-value="
+              (rowData: any) => rowData.total_durasi_recovery * rowData.avg_durasi_recovery
+            "
+          />
           <DxColumn
             :width="150"
             alignment="center"
@@ -249,58 +275,64 @@
         </DxColumn>
       </DxColumn>
 
-      <DxSummary>
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
         <DxTotalItem
-          summary-type="sum"
           display-format="Total"
           show-in-column="kelompok"
           css-class="text-white !text-left"
         />
         <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
+          summary-type="custom"
+          name="total"
           column="total"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
+          summary-type="custom"
+          name="total_selesai"
           column="total_selesai"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
+          summary-type="custom"
+          name="persen_selesai"
           column="persen_selesai"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
+          summary-type="custom"
+          name="total_inproses"
           column="total_inproses"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
+          summary-type="custom"
+          name="persen_inproses"
           column="persen_inproses"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
+          summary-type="custom"
+          name="total_durasi_response"
           column="total_durasi_response"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
+          summary-type="custom"
+          name="count_durasi_response"
+          column="count_durasi_response"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          summary-type="custom"
+          name="avg_durasi_response"
           column="avg_durasi_response"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -334,15 +366,22 @@
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
+          summary-type="custom"
+          name="total_durasi_recovery"
           column="total_durasi_recovery"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
-          summary-type="avg"
-          display-format="{0}"
+          summary-type="custom"
+          name="count_durasi_recovery"
+          column="count_durasi_recovery"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxTotalItem
+          summary-type="custom"
+          name="avg_durasi_recovery"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
@@ -785,7 +824,6 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPaging,
   DxPager,
   DxSummary,
@@ -835,6 +873,116 @@ const reportMeta = ref({
   groupBy: false
 })
 
+let total = 0
+let total_selesai = 0
+let total_inproses = 0
+let count_durasi_response = 0
+let total_durasi_response = 0
+let total_durasi_recovery = 0
+let count_durasi_recovery = 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
+    }
+  }
+
+  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 === 'total_durasi_response') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_response += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_response
+    }
+  }
+
+  if (options.name === 'count_durasi_response') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_response += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_response
+    }
+  }
+
+  if (options.name === 'avg_durasi_response') {
+    if (options.summaryProcess === 'start') {
+      total_durasi_response = 0
+      count_durasi_response = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_response / total_durasi_response
+    }
+  }
+
+  if (options.name === 'count_durasi_recovery') {
+    if (options.summaryProcess === 'calculate') {
+      count_durasi_recovery += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_recovery
+    }
+  }
+
+  if (options.name === 'total_durasi_recovery') {
+    if (options.summaryProcess === 'calculate') {
+      total_durasi_recovery += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_durasi_recovery
+    }
+  }
+
+  if (options.name === 'avg_durasi_recovery') {
+    if (options.summaryProcess === 'start') {
+      count_durasi_recovery = 0
+      total_durasi_recovery = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = count_durasi_recovery / total_durasi_recovery
+    }
+  }
+}
+
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
   progressSelected.value = progress