
Angular5 & qdt-components
This is a simple Angular 5 template that was created by the Angular CLI.
It uses the Helpdesk App.
Loading...
High Priority Cases
Medium Priority Cases
Low Priority Cases
Loading...
Loading...
dashboard.component.html
<div class="row">
<div class="col-md-12 text-right">
<qdt-component [Component]="'QdtButton'" [props]="btn1props"></qdt-component>
</div>
</div>
<div class="row">
<div class="col-md-12">
<qdt-component [Component]="'QdtSelectionToolbar'"></qdt-component>
</div>
</div>
<div class="row">
<div class="col-md-12">
<qdt-component [Component]="'QdtViz'" [props]="viz3props"></qdt-component>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<h4>High Priority Cases</h4>
<h2><qdt-component [Component]="'QdtKpi'" [props]="kpi1props"></qdt-component></h2>
</div>
<div class="col-md-4 text-center">
<h4>Medium Priority Cases</h4>
<h2><qdt-component [Component]="'QdtKpi'" [props]="kpi2props"></qdt-component></h2>
</div>
<div class="col-md-4 text-center">
<h4>Low Priority Cases</h4>
<h2><qdt-component [Component]="'QdtKpi'" [props]="kpi3props"></qdt-component></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<qdt-component [Component]="'QdtViz'" [props]="viz1props"></qdt-component>
</div>
</div>
<div class="row">
<div class="col-md-12">
<qdt-component [Component]="'QdtViz'" [props]="viz2props"></qdt-component>
</div>
</div>
dashboard.component.ts
btn1props = {title:'Clear Selections', type:'clearSelections'};
viz1props = {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'};
viz2props = {id: '298bbd6d-f23d-4469-94a2-df243d680e0c', height:'300px'};
viz3props = {id: 'ycppXj', height:'200px'};
kpi1props = {cols: [null,"=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )"]};
kpi2props = {cols: [null,"=Count( {$<Priority={'Medium'}, Status -={'Closed'} >} Distinct %CaseId )"]};
kpi3props = {cols: [null,"=Count( {$<Priority={'Low'}, Status -={'Closed'} >} Distinct %CaseId )"]};