appointments_frontend/ng-seed/src/app/dashboard/dashboard.component.html
2023-04-17 16:05:50 +05:30

64 lines
2.9 KiB
HTML

<div fxLayout="row wrap">
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
<mat-card>
<div class="card-wheather grad-blue">
<div class="city">New Orders</div>
<div class="date">This Week</div>
<div class="weather">
<div class="sun d-flex justify-content-between">
<i class="fa fa-shopping-bag fa-3x align-self-center"></i>
<div class="temp align-self-center">190</div>
</div>
</div>
</div>
</mat-card>
</div>
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
<mat-card>
<div class="card-wheather grad-green">
<div class="city">Total Profit</div>
<div class="date">This Week</div>
<div class="weather">
<div class="sun d-flex justify-content-between">
<i class="fa fa fa-users fa-3x align-self-center"></i>
<div class="temp align-self-center">987</div>
</div>
</div>
</div>
</mat-card>
</div>
<div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
<mat-card>
<div class="card-wheather grad-red">
<div class="city">Email</div>
<div class="date">This Week</div>
<div class="weather">
<div class="sun d-flex justify-content-between">
<i class="fa fa-inbox fa-3x align-self-center"></i>
<div class="temp align-self-center">236</div>
</div>
</div>
</div>
</mat-card>
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap">
<mat-card>
<mat-card-title fxLayout="row" fxLayoutAlign="start center">
Total Sales &nbsp;
<span fxFlex></span>
<!-- <button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
<mat-icon>more_vert</mat-icon>
</button> -->
</mat-card-title>
<hr>
<mat-card-content>
<div class="w-100 h-300px">
<ngx-charts-area-chart [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" (select)="onSelect($event)">
</ngx-charts-area-chart>
</div>
</mat-card-content>
</mat-card>
</div>
</div>