components/plots/plots.component.ts
Dynamic hazard plots.
selector | app-plots |
imports |
NshmpPlotsContainerComponent
NshmpPlotComponent
NshmpHazardDesignCodeWarningComponent
NshmpAppMetadataComponent
MatAccordion
MatExpansionPanel
MatExpansionPanelHeader
MatExpansionPanelTitle
MatDivider
ParameterSummaryComponent
|
templateUrl | ./plots.component.html |
styleUrl | ./plots.component.scss |
Properties |
Methods |
constructor(service: AppService)
|
||||||
Defined in components/plots/plots.component.ts:50
|
||||||
Parameters :
|
onHazardLegendClick | ||||||
onHazardLegendClick(plotData: Partial
|
||||||
Defined in components/plots/plots.component.ts:75
|
||||||
Parameters :
Returns :
void
|
onSourcesLegendClick | ||||||
onSourcesLegendClick(plotData: Partial
|
||||||
Defined in components/plots/plots.component.ts:54
|
||||||
Parameters :
Returns :
void
|
onSpectrumLegendClick | ||||||
onSpectrumLegendClick(plotData: Partial
|
||||||
Defined in components/plots/plots.component.ts:64
|
||||||
Parameters :
Returns :
void
|
controls |
Default value : this.service.formGroup.controls
|
Defined in components/plots/plots.component.ts:50
|
hazardPlotData |
Default value : this.service.hazardPlotData
|
Defined in components/plots/plots.component.ts:40
|
Hazard plot data |
repositories |
Default value : computed(() => this.service.usage()?.metadata.repositories)
|
Defined in components/plots/plots.component.ts:43
|
Repo metadata |
sourcesPlotData |
Default value : this.service.sourcesPlotData
|
Defined in components/plots/plots.component.ts:45
|
spectrumPlotData |
Default value : this.service.spectrumPlotData
|
Defined in components/plots/plots.component.ts:48
|
Spectra plot data |
import {Component, computed} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {
MatAccordion,
MatExpansionPanel,
MatExpansionPanelHeader,
MatExpansionPanelTitle,
} from '@angular/material/expansion';
import {NshmpHazardDesignCodeWarningComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {NshmpPlotComponent, NshmpPlotsContainerComponent} from '@ghsc/nshmp-lib-ng/plot';
import {Imt} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
import {PlotData} from 'plotly.js';
import {AppService} from '../../services/app.service';
import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component';
/**
* Dynamic hazard plots.
*/
@Component({
imports: [
NshmpPlotsContainerComponent,
NshmpPlotComponent,
NshmpHazardDesignCodeWarningComponent,
NshmpAppMetadataComponent,
MatAccordion,
MatExpansionPanel,
MatExpansionPanelHeader,
MatExpansionPanelTitle,
MatDivider,
ParameterSummaryComponent,
],
selector: 'app-plots',
styleUrl: './plots.component.scss',
templateUrl: './plots.component.html',
})
export class PlotsComponent {
/** Hazard plot data */
hazardPlotData = this.service.hazardPlotData;
/** Repo metadata */
repositories = computed(() => this.service.usage()?.metadata.repositories);
sourcesPlotData = this.service.sourcesPlotData;
/** Spectra plot data */
spectrumPlotData = this.service.spectrumPlotData;
controls = this.service.formGroup.controls;
constructor(private service: AppService) {}
onSourcesLegendClick(plotData: Partial<PlotData>): void {
const {sourceType} = this.service.formGroup.getRawValue();
if (plotData.uid && sourceType !== plotData.uid) {
this.service.formGroup.patchValue({
sourceType: plotData.uid,
});
}
}
onSpectrumLegendClick(plotData: Partial<PlotData>): void {
const {returnPeriod} = this.service.formGroup.getRawValue();
if (plotData.uid && returnPeriod.toString() !== plotData.uid) {
this.service.formGroup.patchValue({
commonReturnPeriods: Number.parseFloat(plotData.uid),
returnPeriod: Number.parseFloat(plotData.uid),
});
}
}
onHazardLegendClick(plotData: Partial<PlotData>): void {
const {imt} = this.service.formGroup.getRawValue();
if (plotData.uid && plotData.uid !== imt.toString()) {
this.service.formGroup.patchValue({
imt: plotData.uid as Imt,
});
}
}
}
<nshmp-plots-container>
<nshmp-hazard-design-code-warning />
<mat-accordion multi>
<!-- Hazard plot -->
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>Hazard</mat-panel-title>
</mat-expansion-panel-header>
<mat-divider />
<nshmp-plot
class="hazard-plot"
[plot]="hazardPlotData()"
(legendClick)="onHazardLegendClick($event)"
[legendSelectUid]="controls.imt.value"
/>
</mat-expansion-panel>
<!-- Sources plot -->
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>Sources</mat-panel-title>
</mat-expansion-panel-header>
<mat-divider />
<nshmp-plot
class="sources-plot"
[plot]="sourcesPlotData()"
(legendClick)="onSourcesLegendClick($event)"
[legendSelectUid]="controls.sourceType.value"
/>
</mat-expansion-panel>
<!-- Spectra plot -->
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>Spectra</mat-panel-title>
</mat-expansion-panel-header>
<mat-divider />
<nshmp-plot
class="spectra-plot"
[plot]="spectrumPlotData()"
(legendClick)="onSpectrumLegendClick($event)"
[legendSelectUid]="controls.returnPeriod.value.toString()"
/>
</mat-expansion-panel>
<!-- Parameter summary -->
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>Parameter Summary</mat-panel-title>
</mat-expansion-panel-header>
<mat-divider />
<app-parameter-summary />
</mat-expansion-panel>
<!-- App metadata -->
<mat-expansion-panel expanded>
<mat-expansion-panel-header>
<mat-panel-title>Application Metadata</mat-panel-title>
</mat-expansion-panel-header>
<mat-divider />
<nshmp-app-metadata [repositories]="repositories()" />
</mat-expansion-panel>
</mat-accordion>
</nshmp-plots-container>