Add dummy data generator to Table_11.vue

src/components/Pages/Gangguan/Table_11.vue

@@ -147,7 +147,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
@@ -191,125 +191,79 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const data = [
+const poskoOptions = ['POSKO A', 'POSKO B', 'POSKO C', 'POSKO D', 'POSKO E'];
-    {
+
-        no: 1,
+const createDummy = () => {
-        posko: 'POSKO CONDET',
+    var dummy = data.value;
+    for (let i = 1; i <= 50; i++) {
+        const randomPosko = poskoOptions[Math.floor(Math.random() * poskoOptions.length)];
+
+        const totalLaporan = Math.floor(Math.random() * 21);
+        const laporanSelesai = Math.floor(Math.random() * (totalLaporan + 1));
+        const laporanBelumSelesai = totalLaporan - laporanSelesai;
+
+        const responseTimeTotal = Math.floor(Math.random() * 31);
+        const responseTimeRataRata = (Math.random() * 21) + 10;
+        const responseTimeMax = responseTimeRataRata + Math.floor(Math.random() * 11);
+        const responseTimeMin = responseTimeRataRata - Math.floor(Math.random() * 11);
+
+        const responseTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
+        const responseTimeKurangSla = laporanSelesai - responseTimeLebihSla;
+
+        const recoveryTimeTotal = Math.floor(Math.random() * 31);
+        const recoveryTimeRataRata = (Math.random() * 21) + 10;
+        const recoveryTimeMax = recoveryTimeRataRata + Math.floor(Math.random() * 11);
+        const recoveryTimeMin = recoveryTimeRataRata - Math.floor(Math.random() * 11);
+
+        const recoveryTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
+        const recoveryTimeKurangSla = laporanSelesai - recoveryTimeLebihSla;
+
+        const entry = {
+            no: i,
+            posko: randomPosko,
             laporan: {
-            total: 10,
+                total: totalLaporan,
                 sudahSelesai: {
-                jml: 5,
+                    jml: laporanSelesai,
-                persen: 50,
+                    persen: (laporanSelesai / totalLaporan) * 100,
                 },
                 belumSelesai: {
-                jml: 5,
+                    jml: laporanBelumSelesai,
-                persen: 50,
+                    persen: (laporanBelumSelesai / totalLaporan) * 100,
                 },
             },
             responseTime: {
                 menit: {
-                total: 10,
+                    total: responseTimeTotal,
-                rataRata: 10,
+                    rataRata: responseTimeRataRata,
-                max: 10,
+                    max: responseTimeMax,
-                min: 10,
+                    min: responseTimeMin,
                 },
                 laporan: {
-                lebihSla: 5,
+                    lebihSla: responseTimeLebihSla,
-                kurangSla: 5,
+                    kurangSla: responseTimeKurangSla,
                 },
             },
             recoveryTime: {
                 menit: {
-                total: 10,
+                    total: recoveryTimeTotal,
-                rataRata: 10,
+                    rataRata: recoveryTimeRataRata,
-                max: 10,
+                    max: recoveryTimeMax,
-                min: 10,
+                    min: recoveryTimeMin,
                 },
                 laporan: {
-                lebihSla: 5,
+                    lebihSla: recoveryTimeLebihSla,
-                kurangSla: 5,
+                    kurangSla: recoveryTimeKurangSla,
                 },
             }
-    },
+        };
-    {
+
-        no: 2,
+        dummy.push(entry);
-        posko: 'POSKO CONDET',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
     }
-    },
+    data.value = dummy;
-    {
+}
-        no: 3,
+
-        posko: 'POSKO ANGKREK',
+const data = ref<any[]>([])
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50,
-            },
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10,
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5,
-            },
-        }
-    },
-]
 
 onMounted(() => {
     const filters = useFiltersStore()
@@ -318,5 +272,6 @@ onMounted(() => {
         type: 'type-8',
         reportButton: true
     })
+    createDummy()
 })
 </script>