fix: grouping, aligntment and summary in monalisa rekap keluhan recovery time

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue

@@ -43,6 +43,52 @@
       />
       <DxColumnFixing :enabled="true" />
 
+      <!-- <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        name="namaULP"
+        cell-template="formatText"
+      /> -->
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Nama Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_uid"
+        caption="Nama UID"
+        css-class="custom-table-column"
+        :group-index="1"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        css-class="custom-table-column"
+        :group-index="2"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        :group-index="3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -53,39 +99,6 @@
         name="namaULP"
         cell-template="formatText"
       />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama ULP"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn
         alignment="center"
         caption="Jumlah RCT Kali Keluhan"
@@ -99,6 +112,7 @@
             data-type="number"
             :caption="`${getMonthName(currentMonth)} ${lastYear}`"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -107,6 +121,7 @@
             data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="70"
@@ -115,7 +130,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
-            cell-template="percent"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -126,6 +141,7 @@
             data-type="number"
             :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -134,6 +150,7 @@
             data-type="number"
             :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="70"
@@ -142,11 +159,134 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
-            cell-template="percent"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
-      <template #percent="{ data }"> {{ data.text }}% </template>
+
+      <DxSummary>
+        <DxGroupItem
+          :align-by-column="true"
+          column="mom_bulan_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :align-by-column="true"
+          column="mom_bulan_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :align-by-column="true"
+          column="persen_mom"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :align-by-column="true"
+          column="yoy_tahun_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :align-by-column="true"
+          column="yoy_tahun_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :align-by-column="true"
+          column="persen_yoy"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="namaULP"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          :align-by-column="true"
+          column="mom_bulan_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          :align-by-column="true"
+          column="mom_bulan_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          :align-by-column="true"
+          column="persen_mom"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          :align-by-column="true"
+          column="yoy_tahun_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          :align-by-column="true"
+          column="yoy_tahun_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          :align-by-column="true"
+          column="persen_yoy"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatText="{ data }">
+        <p class="!text-left">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -154,7 +294,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -164,7 +304,10 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxGroupItem,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -174,6 +317,8 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -182,8 +327,7 @@ const data = ref<any[]>([])
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
-const dataDetail = ref<any>()
+
-const showDetail = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -216,27 +360,31 @@ const onExporting = (e: any) => {
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.keluhan.rekap.recoveryTimeKeluhan,
   {
-    regional: '',
+    // regional: 0,
-    idUlp: 0,
-    idUid: 0,
     idUp3: 0,
-    bulan: 10,
+    idUid: 0,
-    tahun: 2023
+    idUlp: 0,
+    bulan: currentMonth.value,
+    tahun: currentYear.value
   }
 )
+
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
+
   refetch({
-    regional: regional,
+    // regional: regional,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    bulan: bulan ? bulan.id : 10,
+    bulan: bulan ? bulan.id : currentMonth.value,
-    tahun: bulan ? tahun.id : 2023
+    tahun: bulan ? tahun.id : currentYear.value
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.monalisaRecoveryTimeKeluhan
@@ -245,14 +393,279 @@ const filterData = (params: any) => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
 }
+
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
 
 const filters = ref()
+
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        nama_regional: null,
+        id_uid: 0,
+        nama_uid: '',
+        id_up3: 0,
+        nama_up3: '',
+        id_ulp: 0,
+        nama_ulp: '',
+        mom_bulan_ini: 12443791,
+        mom_bulan_kemarin: 9182428,
+        persen_mom: -35.517436129093525,
+        yoy_tahun_ini: 139773892,
+        yoy_tahun_kemarin: 168209007,
+        persen_yoy: 16.904632817908496
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12102,
+        nama_ulp: 'ULP LIMA PULUH',
+        mom_bulan_ini: 16186,
+        mom_bulan_kemarin: 112331,
+        persen_mom: 85.59079862192984,
+        yoy_tahun_ini: 354676,
+        yoy_tahun_kemarin: 624303,
+        persen_yoy: 43.18848379713056
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41230,
+        nama_ulp: 'ULP BACAN',
+        mom_bulan_ini: 384375,
+        mom_bulan_kemarin: 22976,
+        persen_mom: -1572.9413300835654,
+        yoy_tahun_ini: 1643180,
+        yoy_tahun_kemarin: 492691,
+        persen_yoy: -233.51126771140534
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        mom_bulan_ini: 914842,
+        mom_bulan_kemarin: 585884,
+        persen_mom: -56.14729195540414,
+        yoy_tahun_ini: 8072389,
+        yoy_tahun_kemarin: 11055796,
+        persen_yoy: 26.985004064836215
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31500,
+        nama_up3: 'UP3 TOLITOLI',
+        id_ulp: 31530,
+        nama_ulp: 'ULP BANGKIR',
+        mom_bulan_ini: 43840,
+        mom_bulan_kemarin: 59012,
+        persen_mom: 25.710025079644815,
+        yoy_tahun_ini: 1098120,
+        yoy_tahun_kemarin: 2481724,
+        persen_yoy: 55.751727428191046
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 154,
+        nama_up3: 'UP3 SITUBONDO',
+        id_ulp: 51654,
+        nama_ulp: 'ULP WONOSARI',
+        mom_bulan_ini: 796862,
+        mom_bulan_kemarin: 673478,
+        persen_mom: -18.32042026614084,
+        yoy_tahun_ini: 6845897,
+        yoy_tahun_kemarin: 7566389,
+        persen_yoy: 9.522270134406254
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 116,
+        nama_up3: 'UP3 SIGLI',
+        id_ulp: 11662,
+        nama_ulp: 'ULP MEUREUDU',
+        mom_bulan_ini: 787315,
+        mom_bulan_kemarin: 264692,
+        persen_mom: -197.44571048614995,
+        yoy_tahun_ini: 7747710,
+        yoy_tahun_kemarin: 7916066,
+        persen_yoy: 2.12676347064312
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 329,
+        nama_up3: 'UP3 BALI UTARA',
+        id_ulp: 55340,
+        nama_ulp: 'ULP GILIMANUK',
+        mom_bulan_ini: 505036,
+        mom_bulan_kemarin: 413603,
+        persen_mom: -22.10646441152506,
+        yoy_tahun_ini: 7155021,
+        yoy_tahun_kemarin: 5869321,
+        persen_yoy: -21.905429946666743
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13300,
+        nama_up3: 'UP3 SOLOK',
+        id_ulp: 13334,
+        nama_ulp: 'ULP SILUNGKANG',
+        mom_bulan_ini: 160505,
+        mom_bulan_kemarin: 379378,
+        persen_mom: 57.69259155776033,
+        yoy_tahun_ini: 1509396,
+        yoy_tahun_kemarin: 3844624,
+        persen_yoy: 60.740087977393884
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2220,
+        nama_up3: 'UP3 BARABAI',
+        id_ulp: 22230,
+        nama_ulp: 'ULP AMUNTAI',
+        mom_bulan_ini: 181058,
+        mom_bulan_kemarin: 395103,
+        persen_mom: 54.17448108467918,
+        yoy_tahun_ini: 2039104,
+        yoy_tahun_kemarin: 5170462,
+        persen_yoy: 60.56244103524985
+      },
+      {
+        id: 10,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31700,
+        nama_up3: 'UP3 KOTAMOBAGU',
+        id_ulp: 31730,
+        nama_ulp: 'ULP MODAYAG',
+        mom_bulan_ini: 83184,
+        mom_bulan_kemarin: 144261,
+        persen_mom: 42.337845987481025,
+        yoy_tahun_ini: 1111887,
+        yoy_tahun_kemarin: 2440181,
+        persen_yoy: 54.4342407386993
+      },
+      {
+        id: 11,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 546,
+        nama_up3: 'UP3 TASIKMALAYA',
+        id_ulp: 53231,
+        nama_ulp: 'ULP CIAMIS',
+        mom_bulan_ini: 843557,
+        mom_bulan_kemarin: 1369703,
+        persen_mom: 38.41314503947206,
+        yoy_tahun_ini: 8579030,
+        yoy_tahun_kemarin: 16227325,
+        persen_yoy: 47.13219831364689
+      },
+      {
+        id: 12,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 157,
+        nama_up3: 'UP3 SURABAYA UTARA',
+        id_ulp: 51101,
+        nama_ulp: 'ULP INDRAPURA',
+        mom_bulan_ini: 433495,
+        mom_bulan_kemarin: 404500,
+        persen_mom: -7.168108776266996,
+        yoy_tahun_ini: 4905051,
+        yoy_tahun_kemarin: 4976204,
+        persen_yoy: 1.4298650135725948
+      },
+      {
+        id: 13,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 414,
+        nama_up3: 'UP3 MASOHI',
+        id_ulp: 41430,
+        nama_ulp: 'ULP MASOHI',
+        mom_bulan_ini: 97727,
+        mom_bulan_kemarin: 75563,
+        persen_mom: -29.331815835792654,
+        yoy_tahun_ini: 1842074,
+        yoy_tahun_kemarin: 686794,
+        persen_yoy: -168.21346721142
+      },
+      {
+        id: 14,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        mom_bulan_ini: 483861,
+        mom_bulan_kemarin: 1000406,
+        persen_mom: 51.63353678406567,
+        yoy_tahun_ini: 5168384,
+        yoy_tahun_kemarin: 8611936,
+        persen_yoy: 39.98580574681465
+      },
+      {
+        id: 15,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 153,
+        nama_up3: 'UP3 SIDOARJO',
+        id_ulp: 51182,
+        nama_ulp: 'ULP PORONG',
+        mom_bulan_ini: 1657675,
+        mom_bulan_kemarin: 973693,
+        persen_mom: -70.246165885962,
+        yoy_tahun_ini: 16774614,
+        yoy_tahun_kemarin: 12737494,
+        persen_yoy: -31.694774498029204
+      }
+    ]
+  }
+})
 </script>