WIP
This commit is contained in:
Chris Chen
@@ -0,0 +1,294 @@
|
||||
<main
|
||||
class="k-px-2 k-px-sm-4.5 k-px-md-6 k-px-lg-4 k-px-xl-7.5 k-py-2 k-py-sm-4.5 k-py-md-6 k-py-lg-4 k-py-xl-7.5 k-pt-8 k-bg-light">
|
||||
<h1 class="k-h1 k-color-primary-emphasis k-overflow-hidden k-text-ellipsis">Dashboard</h1>
|
||||
<div class="k-d-grid k-grid-cols-12 k-gap-4 k-py-4">
|
||||
|
||||
<!-- Start of CMPCTCARD-1 -->
|
||||
<div *ngFor="let card of compactCards; let i = index;"
|
||||
class="{{cardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
|
||||
<kendo-svgicon [icon]="card.svgIcon" themeColor="primary" size="xxlarge"></kendo-svgicon>
|
||||
<div class="k-d-flex k-flex-col">
|
||||
<span
|
||||
class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">{{card.title}}</span>
|
||||
<span class="k-font-size-sm k-line-height-lg k-color-subtle">{{card.info}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of CMPCTCARD-1 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-10 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
|
||||
<div class="k-d-flex k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Calendar</span>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3 k-d-flex k-justify-content-center">
|
||||
<kendo-calendar [showOtherMonthDays]="false" type="classic" [(ngModel)]="date2">
|
||||
</kendo-calendar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-10 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Bed
|
||||
Occupancy</span>
|
||||
<kendo-datepicker format="yyyy" [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164"
|
||||
[clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart style="height: 257px;">
|
||||
<kendo-chart-category-axis>
|
||||
<kendo-chart-category-axis-item
|
||||
[categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']">
|
||||
</kendo-chart-category-axis-item>
|
||||
</kendo-chart-category-axis>
|
||||
<kendo-chart-value-axis>
|
||||
<kendo-chart-value-axis-item [max]="100" [min]="0" [majorTicks]="{step: 10}">
|
||||
</kendo-chart-value-axis-item>
|
||||
</kendo-chart-value-axis>
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item type="column" name="Occupied" [spacing]="0"
|
||||
[legendItem]="{type: 'line' }" [data]="[67, 78, 47, 41, 38, 33]">
|
||||
</kendo-chart-series-item>
|
||||
<kendo-chart-series-item type="column" name="Free" [legendItem]="{type: 'line' }"
|
||||
[data]="[21, 10, 44, 40, 48, 60]">
|
||||
</kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
<kendo-chart-legend position="bottom" orientation="horizontal" align="start"></kendo-chart-legend>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-1 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-3">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Staff</span>
|
||||
<kendo-dropdownlist [data]="ddlData" [value]="ddlValue" fillMode="flat" [style.width.px]="164"
|
||||
[attr.aria-label]="'Select'"></kendo-dropdownlist>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3">
|
||||
<kendo-listview [data]="listItems" layout="flex" flexDirection="col" [bordered]="false">
|
||||
<ng-template kendoListViewItemTemplate let-dataItem>
|
||||
<div
|
||||
class="k-d-flex k-border-b k-border-b-solid k-border-border k-gap-3 k-p-2 k-align-items-center">
|
||||
<kendo-badge-container>
|
||||
<kendo-avatar [imageSrc]="dataItem.imageSrc"></kendo-avatar>
|
||||
<kendo-badge rounded="medium" position="inside" [align]="badgeAlignBottomEnd"
|
||||
themeColor="success"></kendo-badge>
|
||||
</kendo-badge-container>
|
||||
<div class="k-d-flex k-flex-col">
|
||||
<div class="k-font-size-lg">{{dataItem.name}}</div>
|
||||
<div class="k-font-size-sm k-color-subtle">{{dataItem.specialty}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</kendo-listview>
|
||||
</div>
|
||||
<div class="k-p-3">
|
||||
<button kendoButton fillMode="flat" themeColor="primary">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-1 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-4 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-md-6 k-col-span-lg-7">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span
|
||||
class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Appointments</span>
|
||||
<kendo-datepicker [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164" [clearButton]="true"
|
||||
[inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
|
||||
</div>
|
||||
<div class="k-d-grid k-grid-cols-12 k-p-4 k-gap-2">
|
||||
<div *ngFor="let appointment of appointments; let last = last"
|
||||
[ngClass]="{ 'k-d-none k-d-lg-block' : last }"
|
||||
class=" k-col-span-12 k-col-span-lg-4 k-bg-light k-border k-border-solid k-border-border k-rounded-sm k-d-flex k-flex-col k-flex-1">
|
||||
<div class="k-d-flex k-justify-content-between k-p-1.5 k-h-12">
|
||||
<span class="k-font-medium">{{appointment.doctor}}</span>
|
||||
<div class="k-flex-shrink-0">
|
||||
<span class="k-badge k-badge-md k-badge-solid k-badge-solid-primary k-rounded-full">
|
||||
{{appointment.start}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-d-flex k-flex-col k-flex-1 k-gap-1.5 k-px-1.5">
|
||||
<div>Appointment with {{appointment.patient.name}}.</div>
|
||||
<div class="k-font-size-sm">
|
||||
<div class="k-color-subtle k-d-flex k-gap-1 k-align-items-center k-line-height-lg">
|
||||
<kendo-svgicon [icon]="envelopeIcon"></kendo-svgicon>
|
||||
<a class="k-color-inherit" href="#">{{appointment.patient.phone}}</a>
|
||||
</div>
|
||||
<div class="k-color-subtle k-d-flex k-gap-1 k-align-items-center k-line-height-lg">
|
||||
<kendo-svgicon [icon]="envelopeIcon"></kendo-svgicon>
|
||||
<a class="k-color-inherit" href="#">{{appointment.patient.email}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-d-flex k-flex-shrink-0 k-p-1.5">
|
||||
<button kendoButton fillMode="clear" themeColor="primary">Edit</button>
|
||||
<button kendoButton fillMode="clear">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="k-p-3">
|
||||
<button kendoButton fillMode="clear" themeColor="primary">View all appointments</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-4 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Infection
|
||||
Rate</span>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart [style.height.px]="240">
|
||||
<kendo-chart-x-axis>
|
||||
<kendo-chart-x-axis-item [labels]="{rotation: -45}"></kendo-chart-x-axis-item>
|
||||
</kendo-chart-x-axis>
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item
|
||||
*ngFor="let dataSet of ['RSV', 'CDC', 'Measles', 'Influenza', 'Campylobacteriosis', 'Hepatitis']"
|
||||
type="heatmap" [data]="heatmapData(dataSet)" xField="a" yField="b"
|
||||
valueField="value"></kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Equipment
|
||||
Availability</span>
|
||||
<kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
|
||||
[clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart [style.height.px]="240">
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item [autoFit]="true" type="donut" [holeSize]="50" [data]="donutData"
|
||||
categoryField="kind" field="share">
|
||||
<kendo-chart-series-item-labels position="outsideEnd" color="#000"
|
||||
[content]="chartLabelContent"></kendo-chart-series-item-labels>
|
||||
</kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
<kendo-chart-legend [visible]="false"></kendo-chart-legend>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-7">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Average Length of
|
||||
Stay</span>
|
||||
<kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
|
||||
[clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart [style.height.px]="240">
|
||||
<kendo-chart-category-axis>
|
||||
<kendo-chart-category-axis-item [categories]="departments">
|
||||
</kendo-chart-category-axis-item>
|
||||
</kendo-chart-category-axis>
|
||||
<kendo-chart-value-axis>
|
||||
<kendo-chart-value-axis-item [max]="14" [majorUnit]="1">
|
||||
</kendo-chart-value-axis-item>
|
||||
</kendo-chart-value-axis>
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item type="bar" [data]="averageStay">
|
||||
</kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Hospital
|
||||
Visits</span>
|
||||
<kendo-datepicker [(ngModel)]="date" format="yyyy" [fillMode]="'flat'" [style.width.px]="164"
|
||||
[clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart [style.height.px]="330">
|
||||
<kendo-chart-category-axis>
|
||||
<kendo-chart-category-axis-item [categories]="hours" baseUnit="hours"
|
||||
[labels]="{rotation: 270, position: 'start', format: 'h:mm'}">
|
||||
</kendo-chart-category-axis-item>
|
||||
</kendo-chart-category-axis>
|
||||
<kendo-chart-value-axis>
|
||||
<kendo-chart-value-axis-item [max]="100">
|
||||
</kendo-chart-value-axis-item>
|
||||
</kendo-chart-value-axis>
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item type="line" [data]="hospitalVisits">
|
||||
</kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-5">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Satisfaction
|
||||
Score</span>
|
||||
<kendo-dropdownlist [value]="'2023'" [fillMode]="'flat'" [style.width.px]="164"
|
||||
[attr.aria-label]="'Select'"></kendo-dropdownlist>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart [style.height.px]="288">
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item type="pie" [legendItem]="{type: 'line' }" [data]="satisfaction"
|
||||
categoryField="kind" field="share" [padding]="10" [border]="{width: 3, color: '#fff'}">
|
||||
<kendo-chart-series-item-labels position="center">
|
||||
</kendo-chart-series-item-labels>
|
||||
</kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
<kendo-chart-legend position="bottom"></kendo-chart-legend>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
|
||||
<!-- Start of DASHBRDCARD-11 -->
|
||||
<div class="{{dashboardClasses}} k-col-span-12 k-col-span-lg-7">
|
||||
<div class="k-d-flex k-justify-content-between k-align-items-center k-p-3">
|
||||
<span class="k-font-size-lg k-line-height-lg k-font-semibold k-color-primary-emphasis">Mortality
|
||||
Rate</span>
|
||||
<kendo-datepicker format="yyyy" [(ngModel)]="date" [fillMode]="'flat'" [style.width.px]="164"
|
||||
[clearButton]="true" [inputAttributes]="{'aria-label': 'Select date'}"></kendo-datepicker>
|
||||
</div>
|
||||
<div class="k-flex-1 k-px-3 k-pb-3">
|
||||
<kendo-chart [style.height.px]="288">
|
||||
<kendo-chart-category-axis>
|
||||
<kendo-chart-category-axis-item [categories]="mortalityCauses">
|
||||
</kendo-chart-category-axis-item>
|
||||
</kendo-chart-category-axis>
|
||||
<kendo-chart-value-axis>
|
||||
<kendo-chart-value-axis-item [max]="100" [min]="0"
|
||||
[majorTicks]="{step: 10}"></kendo-chart-value-axis-item>
|
||||
</kendo-chart-value-axis>
|
||||
<kendo-chart-series>
|
||||
<kendo-chart-series-item type="bar" [legendItem]="{type: 'line' }" name="Male"
|
||||
[data]="[25, 35, 36, 42, 85, 12, 4, 17, 19, 49, 28]">
|
||||
</kendo-chart-series-item>
|
||||
<kendo-chart-series-item type="bar" [legendItem]="{type: 'line' }" name="Female"
|
||||
[data]="[23, 40, 38, 30, 81, 18, 3, 21, 22, 45, 24]">
|
||||
</kendo-chart-series-item>
|
||||
</kendo-chart-series>
|
||||
<kendo-chart-legend position="bottom" orientation="horizontal" align="start"></kendo-chart-legend>
|
||||
</kendo-chart>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End of DASHBRDCARD-11 -->
|
||||
</div>
|
||||
</main>
|
||||
Reference in New Issue
Block a user