components/disagg-contributors/disagg-contributors.component.ts
Table with disaggregation contributions from service response.
| selector | app-disagg-contributors |
| imports |
MatButton
MatDivider
NgClass
DecimalPipe
FormatLatitudePipe
FormatLongitudePipe
MatIcon
|
| templateUrl | ./disagg-contributors.component.html |
| styleUrl | ./disagg-contributors.component.scss |
Properties |
|
Methods |
Inputs |
| componentData | |
| Required : true | |
|
Disaggregation component data state |
|
| showExportButton | |
Default value : true
|
|
| dataEpsilon | ||||||
dataEpsilon(data: DisaggSource)
|
||||||
|
Parameters :
Returns :
number
|
| Readonly componentData |
|
Disaggregation component data state |
| form |
Default value : this.service.formGroup
|
|
Form field state |
| service |
Default value : inject(AppService)
|
| serviceResponse |
Default value : this.service.serviceResponse
|
|
Disaggregation service response state |
| Readonly showExportButton |
Default value : true
|
import {DecimalPipe, NgClass} from '@angular/common';
import {Component, inject, 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 {
service = inject(AppService);
/** 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;
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
class="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>
}
}