File
Description
Table with disaggregation contributions from service response.
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
componentData
|
|
Required : true
|
|
|
Disaggregation component data state
|
|
showExportButton
|
Default value : true
|
|
|
Methods
|
dataEpsilon
|
dataEpsilon(data: DisaggSource)
|
|
|
Parameters :
| Name |
Type |
Optional |
| data |
DisaggSource
|
No
|
|
|
Readonly
componentData
|
|
|
Disaggregation component data state
|
|
form
|
Default value : this.service.formGroup
|
|
|
|
|
|
serviceResponse
|
Default value : this.service.serviceResponse
|
|
|
Disaggregation service response state
|
|
Readonly
showExportButton
|
Default value : true
|
|
|
import {DecimalPipe, NgClass} from '@angular/common';
import {Component, input} from '@angular/core';
import {MatButton} from '@angular/material/button';
import {MatDivider} from '@angular/material/divider';
import {MatIcon} from '@angular/material/icon';
import {
FormatLatitudePipe,
FormatLongitudePipe,
} from '@ghsc/nshmp-lib-ng/hazard';
import {
DisaggComponentData,
DisaggSource,
} from '@ghsc/nshmp-utils-ts/libs/nshmp-haz/www/disagg-service';
import {AppService} from '../../services/app.service';
/**
* Table with disaggregation contributions from service response.
*/
@Component({
imports: [
MatButton,
MatDivider,
NgClass,
DecimalPipe,
FormatLatitudePipe,
FormatLongitudePipe,
MatIcon,
],
selector: 'app-disagg-contributors',
styleUrl: './disagg-contributors.component.scss',
templateUrl: './disagg-contributors.component.html',
})
export class DisaggContributorsComponent {
/** Disaggregation component data state */
readonly componentData = input.required<DisaggComponentData>();
readonly showExportButton = input(true);
/** Form field state */
form = this.service.formGroup;
/** Disaggregation service response state */
serviceResponse = this.service.serviceResponse;
constructor(public service: AppService) {}
dataEpsilon(data: DisaggSource): number {
return data?.ε;
}
}
<!-- Disagg contributions -->
@if (componentData()) {
@if (componentData()?.sources?.length > 0) {
<div class="disagg-contributions">
@if (serviceResponse()) {
@if (showExportButton()) {
<div class="print-display-none">
<button
mat-raised-button
color="primary"
(click)="
service.saveContributions(componentData(), form.getRawValue())
"
>
Export as CSV
</button>
</div>
<mat-divider />
}
<div class="horizontal-scrolling">
<div>
<table #table class="contributing-sources grid-col-12">
<thead>
<tr>
<th nowrap>
Source Set
<mat-icon class="down-arrow" aria-label="Down arrow icon">
subdirectory_arrow_right
</mat-icon>
Source
</th>
<th nowrap>Type</th>
<th nowrap title="Distance (km)">r</th>
<th nowrap title="Magnitude">m</th>
<th nowrap title="Epsilon (mean values)">ε<sub>0</sub></th>
<th nowrap title="Longitude">lon</th>
<th nowrap title="Latitude">lat</th>
<th nowrap title="Azimuth">az</th>
<th nowrap title="Percent contributed">%</th>
</tr>
</thead>
<tbody>
@for (data of componentData()?.sources; track data) {
<tr [ngClass]="{'contributor-set': data.type === 'SET'}">
@if (data.type === 'SET') {
<td nowrap>{{ data?.name }}</td>
<td nowrap>{{ data?.source }}</td>
<td colspan="6"></td>
} @else {
<td nowrap class="indent-name">{{ data?.name }}</td>
<td></td>
<td nowrap>{{ data?.r | number: '1.2-2' }}</td>
<td nowrap>{{ data?.m | number: '1.2-2' }}</td>
<td nowrap>{{ dataEpsilon(data) | number: '1.2-2' }}</td>
<td nowrap>{{ data?.longitude | formatLongitude }}</td>
<td nowrap>{{ data?.latitude | formatLatitude }}</td>
<td nowrap>{{ data?.azimuth | number: '1.2-2' }}</td>
}
<td nowrap>{{ data?.contribution }}</td>
</tr>
}
</tbody>
</table>
</div>
</div>
}
</div>
}
}
Legend
Html element with directive