Add custom summary calculations to RGangguan_PerTanggal.vue
This commit is contained in:
Dede Fuji Abdul
parent
232ac14df1
commit
024844d9b7
@ -53,7 +53,7 @@
|
|||||||
:width="120"
|
:width="120"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
data-field="nama_uid"
|
data-field="nama_uid"
|
||||||
caption="Nama UID"
|
caption="UID"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
group-index="0"
|
group-index="0"
|
||||||
v-if="isGroupBy"
|
v-if="isGroupBy"
|
||||||
@ -296,6 +296,155 @@
|
|||||||
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</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>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -645,7 +794,9 @@ import {
|
|||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection,
|
||||||
|
DxSummary,
|
||||||
|
DxTotalItem
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
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(() => {
|
onMounted(() => {
|
||||||
if (import.meta.env.DEV) {
|
if (import.meta.env.DEV) {
|
||||||
data.value = [
|
data.value = [
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user