components/spectrum-data/spectrum-data.component.ts
Tables spectra data.
selector | app-spectrum-data |
imports |
NshmpLibNgExportDataTableComponent
NshmpLibNgDataTableComponent
MatAccordion
MatExpansionPanel
MatExpansionPanelHeader
|
templateUrl | ./spectrum-data.component.html |
styleUrl | ./spectrum-data.component.scss |
Properties |
Methods |
|
constructor(service: AppService)
|
||||||
Parameters :
|
spectraFilename |
spectraFilename()
|
Spectra export filename
Returns :
string
|
Private spectraToTableData | ||||||||
spectraToTableData(spectra: ResponseSpectra[])
|
||||||||
Convert response spectra data to table data.
Parameters :
Returns :
StaticHazardCurveTable[]
|
Private tablesToTableData | ||||||||
tablesToTableData(tables: StaticHazardCurveTable[])
|
||||||||
Convert static hazard curve tables to table data.
Parameters :
Returns :
TableData[]
|
formGroup |
Default value : this.service.formGroup
|
responseSpectra |
Default value : this.service.responseSpectra
|
The response spectra data |
tableData |
Default value : computed(() => this.tablesToTableData(this.tables()))
|
Static hazard table data |
tables |
Default value : computed(() => {
if (this.responseSpectra()) {
return this.spectraToTableData(this.responseSpectra());
} else {
return [];
}
})
|
Static hazard curve table |
import {Component, computed} from '@angular/core';
import {
MatAccordion,
MatExpansionPanel,
MatExpansionPanelHeader,
} from '@angular/material/expansion';
import {hazardUtils, ResponseSpectra} from '@ghsc/nshmp-lib-ng/hazard';
import {
NshmpLibNgDataTableComponent,
NshmpLibNgExportDataTableComponent,
TableData,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {StaticHazardCurveTable} from '../../models/curve-table.model';
import {AppService} from '../../services/app.service';
/**
* Tables spectra data.
*/
@Component({
imports: [
NshmpLibNgExportDataTableComponent,
NshmpLibNgDataTableComponent,
MatAccordion,
MatExpansionPanel,
MatExpansionPanelHeader,
],
selector: 'app-spectrum-data',
styleUrl: './spectrum-data.component.scss',
templateUrl: './spectrum-data.component.html',
})
export class SpectrumDataComponent {
/** The response spectra data */
responseSpectra = this.service.responseSpectra;
formGroup = this.service.formGroup;
/** Static hazard curve table */
tables = computed(() => {
if (this.responseSpectra()) {
return this.spectraToTableData(this.responseSpectra());
} else {
return [];
}
});
/** Static hazard table data */
tableData = computed(() => this.tablesToTableData(this.tables()));
constructor(private service: AppService) {}
/** Spectra export filename */
spectraFilename(): string {
const {latitude, longitude, model} = this.service.formGroup.getRawValue();
return `static-hazard-spectra-${model}-(${longitude},${latitude}).csv`;
}
/**
* Convert response spectra data to table data.
*
* @param spectra Response spectra data
*/
private spectraToTableData(
spectra: ResponseSpectra[],
): StaticHazardCurveTable[] {
return spectra.map(spectrum => {
const tableData = hazardUtils
.responseSpectraToTableData(spectrum)
.map((data, index) => {
if (index === 0) {
data.exportSectionBreakLabel = `Site Class - ${spectrum.siteClass}`;
}
return data;
});
return {
siteClass: spectrum.siteClass,
tableData,
};
});
}
/**
* Convert static hazard curve tables to table data.
*
* @param tables Curve tables
*/
private tablesToTableData(tables: StaticHazardCurveTable[]): TableData[] {
if (tables === null || tables.length === 0) {
return [];
}
return tables
.map(table => table.tableData)
.reduce((previouse, current) => [...previouse, ...current]);
}
}
<!-- Static Hazard Response Spectrum Data -->
<nshmp-lib-ng-export-data-table
[table]="tableData()"
[filename]="spectraFilename()"
buttonText="Export Spectra as CSV"
/>
<div class="data-table-container">
@if (responseSpectra()) {
<mat-accordion>
@for (table of tables(); track table) {
<mat-expansion-panel
[expanded]="formGroup.getRawValue().siteClass === table.siteClass"
>
<mat-expansion-panel-header>
{{ table.siteClass }}
</mat-expansion-panel-header>
<nshmp-lib-ng-data-table [table]="table.tableData" />
</mat-expansion-panel>
}
</mat-accordion>
}
</div>