andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

replace legacy component

Browse Source
This commit is contained in:
Andreas Huber
2023-03-08 19:09:30 +01:00
parent 62cb88e505
commit 6474b5e3c6
12 changed files with 85 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pdb-js/src/app/app.module.ts
View File

@@ -11,17 +11,17 @@ import { HelpPageComponent } from './help-page/help-page.component';
import { UploadPageComponent } from './upload-page/upload-page.component'; import { UploadPageComponent } from './upload-page/upload-page.component';
import { VisualizationPageComponent } from './visualization-page/visualization-page.component'; import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete'; import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button'; import {MatButtonModule} from '@angular/material/button';
import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox'; import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select'; import {MatSelectModule} from '@angular/material/select';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'; import { MatInputModule } from '@angular/material/input';
import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar'; import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatLegacyRadioModule as MatRadioModule} from '@angular/material/legacy-radio'; import {MatRadioModule} from '@angular/material/radio';
import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar'; import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component'; import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component';
import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component'; import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component';
import { LimitByComponent } from './limit-by/limit-by.component'; import { LimitByComponent } from './limit-by/limit-by.component';

2
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
View File

@@ -2,7 +2,7 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { Component, ElementRef, OnInit } from '@angular/core'; import { Component, ElementRef, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service'; import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service'; import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service';

2
pdb-js/src/app/gallery-view/gallery-view.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service'; import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service';
import { UtilService } from '../utils.service'; import { UtilService } from '../utils.service';

6
pdb-js/src/app/limit-by/limit-by.component.html
View File

@@ -1,3 +1,9 @@
<style>
:host {
display: flex;
}
</style>
<mat-form-field class="pdb-form-mid"> <mat-form-field class="pdb-form-mid">
<mat-label>Limit By:</mat-label> <mat-label>Limit By:</mat-label>
<mat-select [(value)]="limitBy"> <mat-select [(value)]="limitBy">

2
pdb-js/src/app/plot-view/plot-view.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions } from '../plot.service'; import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions } from '../plot.service';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import * as moment from 'moment'; import * as moment from 'moment';
import { WidgetDimensions } from '../dashboard.service'; import { WidgetDimensions } from '../dashboard.service';

1
pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss
View File

@@ -4,5 +4,6 @@
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 5px;
width: 100%;
} }

2
pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
View File

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core';
import {UntypedFormControl} from '@angular/forms'; import {UntypedFormControl} from '@angular/forms';
import {Observable} from 'rxjs'; import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators'; import {startWith, map} from 'rxjs/operators';
import {MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete'; import {MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service'; import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service';
@Component({ @Component({

10
pdb-js/src/app/visualization-page/visualization-page.component.html
View File

@@ -4,7 +4,7 @@
</div> </div>
<div id="date-box"> <div id="date-box">
<mat-form-field> <mat-form-field class="pdb-form-full-width">
<mat-label>Date Range:</mat-label> <mat-label>Date Range:</mat-label>
<input matInput id="search-date-range" value="dateRange" name="dates" /> <input matInput id="search-date-range" value="dateRange" name="dates" />
</mat-form-field> </mat-form-field>
@@ -14,16 +14,16 @@
<div id="filterpanel"> <div id="filterpanel">
<mat-form-field> <mat-form-field class="pdb-form-full-width">
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)"> <mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active"> <mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}} <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field class="pdb-form-full-width">
<mat-label>Group By:</mat-label> <mat-label>Group By:</mat-label>
<mat-select multiple [(value)]="groupBy"> <mat-select multiple [(value)]="groupBy">
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option> <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
@@ -54,7 +54,7 @@
<mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox> <mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
<mat-form-field *ngIf="enableGallery"> <mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
<mat-label>Split By:</mat-label> <mat-label>Split By:</mat-label>
<mat-select [(value)]="splitBy"> <mat-select [(value)]="splitBy">
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option> <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>

7
pdb-js/src/app/visualization-page/visualization-page.component.scss
View File

@@ -15,7 +15,7 @@
grid: grid:
"query-box query-box date-box" auto "query-box query-box date-box" auto
"filters results results" 1fr "filters results results" 1fr
/ 17.7em 3fr 21em; / 25.5em 3fr 24em;
} }
} }
@@ -43,9 +43,12 @@
#date-box{ #date-box{
grid-area: date-box; grid-area: date-box;
margin-right: 1em;
} }
#filters { #filters {
grid-area: filters; grid-area: filters;
overflow: auto; overflow: auto;

2
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap } from '../plot.service'; import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap } from '../plot.service';
import { UntypedFormControl, Validators } from '@angular/forms'; import { UntypedFormControl, Validators } from '@angular/forms';
import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { LimitByComponent } from '../limit-by/limit-by.component'; import { LimitByComponent } from '../limit-by/limit-by.component';
import { YAxisDefinitionComponent } from '../y-axis-definition/y-axis-definition.component'; import { YAxisDefinitionComponent } from '../y-axis-definition/y-axis-definition.component';
import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component'; import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';

52
pdb-js/src/app/y-axis-definition/y-axis-definition.component.html
View File

@@ -1,5 +1,5 @@
<div> <div>
<mat-form-field> <mat-form-field >
<mat-label>Y{{yIndex}}-Axis Scale:</mat-label> <mat-label>Y{{yIndex}}-Axis Scale:</mat-label>
<mat-select [(value)]="yAxisScale"> <mat-select [(value)]="yAxisScale">
<mat-option value="LOG10">Logarithm</mat-option> <mat-option value="LOG10">Logarithm</mat-option>
@@ -7,27 +7,31 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="pdb-form-mid"> <div>
<mat-label>Y{{yIndex}}-Axis Unit:</mat-label> <mat-form-field class="pdb-form-mid">
<mat-select [(value)]="yAxisUnit"> <mat-label>Y{{yIndex}}-Axis Unit:</mat-label>
<mat-optgroup label="⸺numbers⸺"> <mat-select [(value)]="yAxisUnit">
<mat-option value="AUTOMATIC_NUMBER">auto (number)</mat-option> <mat-optgroup label="⸺numbers⸺">
<mat-option value="NO_UNIT">no unit</mat-option> <mat-option value="AUTOMATIC_NUMBER">auto (number)</mat-option>
</mat-optgroup> <mat-option value="NO_UNIT">no unit</mat-option>
<mat-optgroup label="⸺time⸺"> </mat-optgroup>
<mat-option value="AUTOMATIC_TIME">auto (time)</mat-option> <mat-optgroup label="⸺time⸺">
<mat-option value="MILLISECONDS">millis</mat-option> <mat-option value="AUTOMATIC_TIME">auto (time)</mat-option>
<mat-option value="SECONDS">seconds</mat-option> <mat-option value="MILLISECONDS">millis</mat-option>
<mat-option value="MINUTES">minutes</mat-option> <mat-option value="SECONDS">seconds</mat-option>
<mat-option value="HOURS">hours</mat-option> <mat-option value="MINUTES">minutes</mat-option>
<mat-option value="DAYS">days</mat-option> <mat-option value="HOURS">hours</mat-option>
</mat-optgroup> <mat-option value="DAYS">days</mat-option>
</mat-select> </mat-optgroup>
</mat-form-field> </mat-select>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number"> </mat-form-field>
<input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue"> <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
</mat-form-field> <mat-label>Min:</mat-label>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number"> <input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue">
<input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue"> </mat-form-field>
</mat-form-field> <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
<mat-label>Max:</mat-label>
<input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue">
</mat-form-field>
</div>
</div> </div>

55
pdb-js/src/styles.scss
View File

@@ -13,9 +13,13 @@
// If you specify typography styles for the components you use elsewhere, you should delete this line. // If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles, // If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use: // you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` // `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
@include mat.all-legacy-component-typographies(); @include mat.all-legacy-component-typographies();
@include mat.all-component-typographies();
/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
@include mat.legacy-core(); @include mat.legacy-core();
@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -33,13 +37,17 @@ $candy-app-theme: mat.define-light-theme((
primary: $candy-app-primary, primary: $candy-app-primary,
accent: $candy-app-accent, accent: $candy-app-accent,
warn: $candy-app-warn, warn: $candy-app-warn,
) ),
//typography: mat.define-typography-config(),
density: -1,
)); ));
// Include theme styles for core and each component used in your app. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // that you are using.
/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
@include mat.all-legacy-component-themes($candy-app-theme); @include mat.all-legacy-component-themes($candy-app-theme);
@include mat.all-component-themes($candy-app-theme);
@@ -63,6 +71,14 @@ grey
*/ */
$background-color: #CBD7F4; $background-color: #CBD7F4;
.mat-mdc-option span.mdc-list-item__primary-text,
.mdc-list-item__primary-text {
font-size: 1rem;
}
mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
--mdc-typography-subtitle1-font-size: 14px;
}
*, body { *, body {
font-family: Arial; font-family: Arial;
font-size: 14px; font-size: 14px;
@@ -86,9 +102,6 @@ h2 {
height: 1em; height: 1em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.mat-button .mat-button-wrapper .icon-inline {
vertical-align: text-top;
}
button[disabled] .icon-inline { button[disabled] .icon-inline {
opacity: 0.5; opacity: 0.5;
@@ -128,18 +141,8 @@ button[disabled] .icon-inline {
height: 1.5em; height: 1.5em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.mat-option-disabled .icon-select {
opacity: 0.25;
}
mat-option.mat-option {
height: 2em;
line-height: 2em;
}
mat-option.mat-option.mat-active {
background-color: #ccc;
}
a ,a:visited { a ,a:visited {
color: blue; color: blue;
@@ -169,34 +172,24 @@ a.external-link:after {
right: 0; right: 0;
} }
body .mat-select-panel, body .mat-autocomplete-panel { mat-form-field.pdb-form-full-width {
max-height: 300px;
}
mat-form-field {
width: 100%; width: 100%;
margin-right: 1ex;
}
mat-form-field:last-child {
margin-right: 0ex;
} }
mat-form-field.pdb-form-number { mat-form-field.pdb-form-number {
width: 3.5em; width: 5.5em;
} }
mat-form-field.pdb-form-number-long { mat-form-field.pdb-form-number-long {
width: 7em; width: 7em;
} }
.pdb-form-icon-small {
display: inline-block;
width: 2em;
vertical-align: middle;
}
mat-form-field.pdb-form-mid { mat-form-field.pdb-form-mid {
width: 7.5em; width: 9.5em;
} }
mat-form-field.pdb-form-wide { mat-form-field.pdb-form-wide {
width: 10em; width: 10em;
} }
.mat-mdc-form-field-subscript-wrapper {
display: none;
}
.errorPanel { .errorPanel {
padding: 1ex; padding: 1ex;