Add DxGrouping component and update templates in MonalisaGR_LaporUlang.vue
This commit is contained in:
Dede Fuji Abdul
parent
45e5273222
commit
27da05087c
@ -17,6 +17,7 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="true"
|
:word-wrap-enabled="true"
|
||||||
>
|
>
|
||||||
|
<DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
@ -113,105 +114,6 @@
|
|||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary>
|
|
||||||
<DxTotalItem
|
|
||||||
summary-type="sum"
|
|
||||||
display-format="Total"
|
|
||||||
show-in-column="nama_ulp"
|
|
||||||
css-class="text-white !text-left"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="false"
|
|
||||||
:align-by-column="true"
|
|
||||||
summary-type="sum"
|
|
||||||
show-in-column="mom_bulan_kemarin"
|
|
||||||
css-class="!text-right"
|
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
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()))"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="false"
|
|
||||||
:align-by-column="true"
|
|
||||||
summary-type="sum"
|
|
||||||
show-in-column="mom_bulan_ini"
|
|
||||||
css-class="!text-right"
|
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
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()))"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="false"
|
|
||||||
:align-by-column="true"
|
|
||||||
summary-type="sum"
|
|
||||||
show-in-column="persen_mom"
|
|
||||||
css-class="!text-right"
|
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
column="persen_mom"
|
|
||||||
summary-type="avg"
|
|
||||||
display-format="{0}"
|
|
||||||
css-class="text-white !text-right"
|
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="false"
|
|
||||||
:align-by-column="true"
|
|
||||||
summary-type="sum"
|
|
||||||
show-in-column="yoy_tahun_kemarin"
|
|
||||||
css-class="!text-right"
|
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
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()))"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="false"
|
|
||||||
:align-by-column="true"
|
|
||||||
summary-type="sum"
|
|
||||||
show-in-column="yoy_tahun_ini"
|
|
||||||
css-class="!text-right"
|
|
||||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
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()))"
|
|
||||||
/>
|
|
||||||
<DxGroupItem
|
|
||||||
:show-in-group-footer="false"
|
|
||||||
:align-by-column="true"
|
|
||||||
summary-type="sum"
|
|
||||||
show-in-column="persen_yoy"
|
|
||||||
css-class="!text-right"
|
|
||||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
|
||||||
/>
|
|
||||||
<DxTotalItem
|
|
||||||
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 }">
|
<template #formatNumber="{ data }">
|
||||||
<p class="text-right">
|
<p class="text-right">
|
||||||
{{
|
{{
|
||||||
@ -229,6 +131,113 @@
|
|||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<DxSummary>
|
||||||
|
<DxTotalItem
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="Total"
|
||||||
|
show-in-column="nama_ulp"
|
||||||
|
css-class="text-white !text-left"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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
|
||||||
|
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
|
||||||
|
column="persen_yoy"
|
||||||
|
summary-type="avg"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white !text-right"
|
||||||
|
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="false"
|
||||||
|
:align-by-column="true"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
show-in-column="mom_bulan_kemarin"
|
||||||
|
column="mom_bulan_kemarin"
|
||||||
|
css-class="!text-right"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="false"
|
||||||
|
:align-by-column="true"
|
||||||
|
summary-type="sum"
|
||||||
|
show-in-column="mom_bulan_ini"
|
||||||
|
column="mom_bulan_ini"
|
||||||
|
css-class="!text-right"
|
||||||
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="false"
|
||||||
|
:align-by-column="true"
|
||||||
|
summary-type="sum"
|
||||||
|
show-in-column="persen_mom"
|
||||||
|
column="persen_mom"
|
||||||
|
css-class="!text-right"
|
||||||
|
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="false"
|
||||||
|
:align-by-column="true"
|
||||||
|
summary-type="sum"
|
||||||
|
show-in-column="yoy_tahun_kemarin"
|
||||||
|
column="yoy_tahun_kemarin"
|
||||||
|
css-class="!text-right"
|
||||||
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="false"
|
||||||
|
:align-by-column="true"
|
||||||
|
summary-type="sum"
|
||||||
|
show-in-column="yoy_tahun_ini"
|
||||||
|
column="yoy_tahun_ini"
|
||||||
|
css-class="!text-right"
|
||||||
|
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="false"
|
||||||
|
:align-by-column="true"
|
||||||
|
summary-type="sum"
|
||||||
|
show-in-column="persen_yoy"
|
||||||
|
column="persen_yoy"
|
||||||
|
css-class="!text-right"
|
||||||
|
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||||
|
/>
|
||||||
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -243,6 +252,7 @@ import {
|
|||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxGroupItem,
|
DxGroupItem,
|
||||||
|
DxGrouping,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
|
|||||||
@ -439,8 +439,6 @@ export const queries = {
|
|||||||
avg_durasi_response
|
avg_durasi_response
|
||||||
min_durasi_response
|
min_durasi_response
|
||||||
max_durasi_response
|
max_durasi_response
|
||||||
total_durasi_response
|
|
||||||
total_durasi_recovery
|
|
||||||
total_dibawah_sla_response
|
total_dibawah_sla_response
|
||||||
total_diatas_sla_response
|
total_diatas_sla_response
|
||||||
avg_durasi_recovery
|
avg_durasi_recovery
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user