components/curve-data/curve-data.component.ts
Tables of static hazard data.
selector | app-curve-data |
imports |
NshmpLibNgExportDataTableComponent
NshmpLibNgDataTableComponent
MatAccordion
MatExpansionPanel
MatExpansionPanelHeader
MatDivider
MatExpansionPanelContent
|
templateUrl | ./curve-data.component.html |
styleUrl | ./curve-data.component.scss |
Properties |
Methods |
|
constructor(service: AppService, nshmpService: NshmpService)
|
|||||||||
Parameters :
|
hazardFilename |
hazardFilename()
|
Filename for hazard export CSV
Returns :
string
|
Private responseDataToTable | ||||||||||||
responseDataToTable(responseData: StaticResponseData[][], form: HazardControlForm)
|
||||||||||||
Convert response data to curve table data.
Parameters :
Returns :
StaticHazardCurveTable[]
|
Private tablesToTableData | ||||||||
tablesToTableData(tables: StaticHazardCurveTable[])
|
||||||||
Convert static curve tables to table data.
Parameters :
Returns :
TableData[]
|
dataPrecision |
Type : number
|
Default value : 4
|
The data precision |
formGroup |
Default value : this.service.formGroup
|
Public nshmpService |
Type : NshmpService
|
serviceResponse |
Default value : this.service.serviceResponse
|
Static hazard service reponse |
tableData |
Default value : computed(() => this.tablesToTableData(this.tables()))
|
Static hazard table data |
tables |
Default value : computed(() => {
if (this.serviceResponse() === null) {
return [];
}
this.service.plots();
return this.responseDataToTable(
this.serviceResponse().response,
this.service.formGroup.getRawValue(),
);
})
|
Static hazard curve tables |
import {Component, computed} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {
MatAccordion,
MatExpansionPanel,
MatExpansionPanelContent,
MatExpansionPanelHeader,
} from '@angular/material/expansion';
import {HazardControlForm, hazardUtils} from '@ghsc/nshmp-lib-ng/hazard';
import {
NshmpLibNgDataTableComponent,
NshmpLibNgExportDataTableComponent,
NshmpService,
TableData,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {Imt} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
import {
HazardResponseMetadata,
StaticResponseData,
} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-static/hazard-service';
import {StaticHazardCurveTable} from '../../models/curve-table.model';
import {AppService} from '../../services/app.service';
/**
* Tables of static hazard data.
*/
@Component({
imports: [
NshmpLibNgExportDataTableComponent,
NshmpLibNgDataTableComponent,
MatAccordion,
MatExpansionPanel,
MatExpansionPanelHeader,
MatDivider,
MatExpansionPanelContent,
],
selector: 'app-curve-data',
styleUrl: './curve-data.component.scss',
templateUrl: './curve-data.component.html',
})
export class CurveDataComponent {
/** The data precision */
dataPrecision = 4;
/** Static hazard service reponse */
serviceResponse = this.service.serviceResponse;
formGroup = this.service.formGroup;
/** Static hazard curve tables */
tables = computed(() => {
if (this.serviceResponse() === null) {
return [];
}
this.service.plots();
return this.responseDataToTable(
this.serviceResponse().response,
this.service.formGroup.getRawValue(),
);
});
/** Static hazard table data */
tableData = computed(() => this.tablesToTableData(this.tables()));
constructor(
private service: AppService,
public nshmpService: NshmpService,
) {}
/** Filename for hazard export CSV */
hazardFilename(): string {
const {latitude, longitude, model} = this.service.formGroup.getRawValue();
return `static-hazard-curves-${model}-(${longitude},${latitude}).csv`;
}
/**
* Convert response data to curve table data.
*
* @param responseData The response data
* @param form Form values
* @returns
*/
private responseDataToTable(
responseData: StaticResponseData<HazardResponseMetadata>[][],
form: HazardControlForm,
): StaticHazardCurveTable[] {
return responseData.map(response => {
const tableData = this.responseDataToTableData(response, form);
const siteClass = [...response].pop().metadata.siteClass;
return {
siteClass,
tableData,
};
});
}
/**
* Convert response data to table table.
*
* @param responseData The response data
* @param form Form values
*/
private responseDataToTableData(
responseData: StaticResponseData<HazardResponseMetadata>[],
form: HazardControlForm,
): TableData[] {
const tableData: TableData[] = [];
responseData.forEach((response, index) => {
const imt = response.metadata.imt.value as Imt;
const xy = hazardUtils.updateXySequence(form, response.data, imt);
const xData: TableData = {
label: response.metadata.imt.display,
td: xy.xs.map(x => (x ? x.toFixed(this.dataPrecision) : x)),
th: response.metadata.xLabel,
};
if (index === 0) {
xData.exportSectionBreakLabel = `Site class - ${response.metadata.siteClass}`;
}
tableData.push(xData);
tableData.push({
td: xy.ys.map(y => (y ? y.toExponential(this.dataPrecision) : y)),
th: response.metadata.yLabel,
});
});
return tableData;
}
/**
* Convert static curve tables to table data.
*
* @param tables The hazard curve table
*/
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 Curve Data -->
<nshmp-lib-ng-export-data-table
[table]="tableData()"
[filename]="hazardFilename()"
buttonText="Export Hazard as CSV"
/>
<div class="data-table-container">
@if (serviceResponse()) {
<mat-accordion>
@for (table of tables(); track table) {
<mat-expansion-panel
[expanded]="formGroup.value.siteClass === table.siteClass"
>
<mat-expansion-panel-header>
{{ table.siteClass }}
</mat-expansion-panel-header>
<mat-divider />
<ng-template matExpansionPanelContent>
<nshmp-lib-ng-data-table [table]="table.tableData" />
</ng-template>
</mat-expansion-panel>
}
</mat-accordion>
}
</div>