Appointment/appointments_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard

Browse Source
This commit is contained in:
Smart 2023-04-17 16:05:50 +05:30
parent d16ea75801
commit ee70bc3724
2 changed files with 84 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ng-seed/src/app/dashboard/dashboard.component.html
View File

@ -1 +1,64 @@
<h1>welcome</h1> <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>

22
ng-seed/src/app/dashboard/dashboard.component.ts
View File

@ -1,12 +1,30 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { single, multi } from './charts.data';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'] styleUrls: ['./dashboard.component.scss']
}) })
export class DashboardComponent { export class DashboardComponent {
public single: any[];
public multi: any[];
public showXAxis = true;
public showYAxis = true;
public gradient = false;
public showLegend = false;
public showXAxisLabel = false;
public xAxisLabel = 'Year';
public showYAxisLabel = false;
public yAxisLabel = 'Population';
public colorScheme = {
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
};
public autoScale = true;
constructor() { constructor() {
// this.fetch((data) => { this.rows = data; });
Object.assign(this, {single, multi})
}
onSelect(event) {
console.log(event);
} }
} }