sartography
/
uva-covid19-testing-frontend
mirror of https://github.com/sartography/uva-covid19-testing-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css changes

This commit is contained in:
Nile Walker 2021-01-29 21:37:42 -05:00
parent a022259aed
commit 70e73a4925
3 changed files with 121 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/graphs/graphs.component.css
View File

@ -1,5 +1,8 @@
/* https://css-tricks.com/dont-overthink-flexbox-grids/ */
.flex-grid { .flex-grid {
display: flex; display: flex;
align-items: center;
} }
.flex-grid .col { .flex-grid .col {
flex: 1; flex: 1;
@ -24,8 +27,6 @@
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }

230
src/app/graphs/graphs.component.html
View File

@ -39,138 +39,144 @@
</mat-card> </mat-card>
</div> </div>
<mat-card class="row"> <mat-card>
<mat-card-header>
<div class="flex-grid">
<h1 class="col">Search</h1>
<div class="col">
<button mat-raised-button class="btn-lg" color="primary" (click)="searchToday()">Today</button>
</div>
<div class="col">
<button mat-raised-button class="btn-lg" color="primary" (click)="searchAll()">All</button>
</div>
<div class="col">
<button mat-raised-button class="btn-lg" color="primary" (click)="updateGraphData()">Run</button>
</div>
</div>
</mat-card-header>
<div class="flex-grid"> <div class="flex-grid">
<mat-form-field class="col"> <div class="col">
<mat-date-range-input [rangePicker]="picker"> <h1>Search</h1>
<input matStartDate [(ngModel)]="start_date"> </div>
<input matEndDate [(ngModel)]="end_date"> <div class="col">
</mat-date-range-input> <button mat-raised-button class="btn-lg" color="primary" (click)="searchToday()">Today</button>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> </div>
<mat-date-range-picker #picker></mat-date-range-picker> <div class="col">
</mat-form-field> <button mat-raised-button class="btn-lg" color="primary" (click)="searchAll()">All</button>
</div>
<div class="col">
<button mat-raised-button class="btn-lg" color="primary" (click)="updateGraphData()">Run</button>
</div>
<mat-form-field class="col"> <div class="col">
<mat-label>Location ID(s)</mat-label> <mat-form-field>
<textarea matInput [(ngModel)]="form.location" placeholder="Location Codes"></textarea> <mat-date-range-input [rangePicker]="picker">
</mat-form-field> <input matStartDate [(ngModel)]="start_date">
<input matEndDate [(ngModel)]="end_date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
</div>
<div class="col">
<mat-form-field>
<mat-label>Location ID(s)</mat-label>
<textarea matInput [(ngModel)]="form.location" placeholder="Location Codes"></textarea>
</mat-form-field>
</div>
<mat-form-field class="col"> <div class="col">
<mat-label>Student ID(s)</mat-label> <mat-form-field>
<textarea matInput [(ngModel)]="form.student_id" placeholder="Ex. It makes me feel..."></textarea> <mat-label>Student ID(s)</mat-label>
</mat-form-field> <textarea matInput [(ngModel)]="form.student_id" placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field>
</div>
<div class="col">
<mat-form-field>
<mat-label>Compute ID(s)</mat-label>
<textarea matInput [(ngModel)]="form.compute_id" placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field>
</div>
</div>
</mat-card>
<div class="flex-grid">
<mat-card class="col">
<mat-card-header>
<h1>{{ChartName}}</h1>
</mat-card-header>
<div style="display: block">
<canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions"
[legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
</canvas></div>
</mat-card>
<mat-card class="col">
<mat-card-header>
<h1>Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h1>
</mat-card-header>
<div style="display: block">
<canvas baseChart [datasets]="weekdayChartsData" [labels]="weekdayChartLabels" [options]="barChartOptions"
[legend]=false chartType="horizontalBar">
</canvas>
</div>
</mat-card>
<mat-card class="col">
<mat-card-header>
<h1>Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h1>
</mat-card-header>
<div style="display: block">
<canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions"
[legend]=false chartType="horizontalBar">
</canvas>
</div>
</mat-card>
<mat-form-field class="col">
<mat-label>Compute ID(s)</mat-label>
<textarea matInput [(ngModel)]="form.compute_id" placeholder="Ex. It makes me feel..."></textarea>
</mat-form-field>
</div> </div>
</mat-card> <mat-card>
<div class="flex-grid row">
<mat-card class="col">
<mat-card-header> <mat-card-header>
<h1>{{ChartName}}</h1> <h3 class="mb-0">Records to be processed </h3>
</mat-card-header> </mat-card-header>
<canvas baseChart [datasets]="dailyChartsData" [labels]="dailyChartLabels" [options]="barChartOptions" <table mat-table [dataSource]="searchResult" class="mat-elevation-z8">
[legend]="true" chartType="bar" (chartClick)="chartClicked($event)">
</canvas>
</mat-card>
<mat-card class="col"> <!--- Note that these columns can bea defined in any order.
<mat-card-header>
<h1>Average Count By Weekday For {{form.start_date | date}} - {{form.end_date | date}}</h1>
</mat-card-header>
<div style="display: block">
<canvas baseChart [datasets]="weekdayChartsData" [labels]="weekdayChartLabels" [options]="barChartOptions"
[legend]=false chartType="horizontalBar">
</canvas>
</div>
</mat-card>
<mat-card class="col">
<mat-card-header>
<h1>Average Count By Hour For {{form.start_date | date}} - {{form.end_date | date}}</h1>
</mat-card-header>
<div style="display: block">
<canvas baseChart [datasets]="hourlyChartsData" [labels]="hourlyChartLabels" [options]="barChartOptions"
[legend]=false chartType="horizontalBar">
</canvas>
</div>
</mat-card>
</div>
<mat-card>
<mat-card-header>
<h3 class="mb-0">Records to be processed </h3>
</mat-card-header>
<table mat-table [dataSource]="searchResult" class="mat-elevation-z8">
<!--- Note that these columns can bea defined in any order.
The actual rendered columns are set as a property on the row definition" --> The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column --> <!-- Position Column -->
<ng-container matColumnDef="position"> <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Barcode </th> <th mat-header-cell *matHeaderCellDef> Barcode </th>
<td mat-cell *matCellDef="let sample; let i = index;"> {{sample.barcode}} </td> <td mat-cell *matCellDef="let sample; let i = index;"> {{sample.barcode}} </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Date </th> <th mat-header-cell *matHeaderCellDef> Date </th>
<td mat-cell *matCellDef="let sample; let i = index;"> {{sample.date}}</td> <td mat-cell *matCellDef="let sample; let i = index;"> {{sample.date}}</td>
</ng-container> </ng-container>
<!-- Weight Column --> <!-- Weight Column -->
<ng-container matColumnDef="weight"> <ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Location </th> <th mat-header-cell *matHeaderCellDef> Location </th>
<td mat-cell *matCellDef="let sample; let i = index;"> Location: {{sample.location}}<br>Station: <td mat-cell *matCellDef="let sample; let i = index;"> Location: {{sample.location}}<br>Station:
{{sample.station}}</td> {{sample.station}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="email"> <ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> IDs </th> <th mat-header-cell *matHeaderCellDef> IDs </th>
<td mat-cell *matCellDef="let sample; let i = index;"> <td mat-cell *matCellDef="let sample; let i = index;">
Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}} Compute ID: {{sample.compute_id}}<br>Student ID: {{sample.student_id}}
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="text"> <ng-container matColumnDef="text">
<th mat-header-cell *matHeaderCellDef> Contacts </th> <th mat-header-cell *matHeaderCellDef> Contacts </th>
<td mat-cell *matCellDef="let sample; let i = index;"> <td mat-cell *matCellDef="let sample; let i = index;">
Phone: {{sample.phone}}<br>Email: {{sample.email}} Phone: {{sample.phone}}<br>Email: {{sample.email}}
</td> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </table>
</mat-card> </mat-card>
</div> </div>

6
src/app/graphs/graphs.component.ts
View File

@ -8,12 +8,6 @@ import { SearchForm } from '../models/search_form'
import {PageEvent} from '@angular/material/paginator' import {PageEvent} from '@angular/material/paginator'
import * as pluginDataLabels from 'chartjs-plugin-datalabels'; import * as pluginDataLabels from 'chartjs-plugin-datalabels';
export interface Tile {
color: string;
cols: number;
rows: number;
text: string;
}
@Component({ @Component({
selector: 'app-graphs', selector: 'app-graphs',