File
Description
Table with disaggregation contributions from service response.
|
showExportButton
|
Default value : true
|
|
|
|
Readonly
componentData
|
Default value : input.required<DisaggComponentData | null>()
|
|
|
Disaggregation component data state
|
|
form
|
Default value : this.service.formGroup
|
|
|
|
|
|
service
|
Default value : inject(AppService)
|
|
|
|
serviceResponse
|
Default value : this.service.serviceResponse
|
|
|
Disaggregation service response state
|
|
Readonly
showExportButton
|
Default value : true
|
|
|
|
Readonly
sources
|
Type : Signal<DisaggSourceEpsilon[]>
|
Default value : computed(() => {
const componentData = this.componentData();
if (componentData) {
return componentData?.sources.map(source => ({
...source,
epsilon: source.ε,
}));
} else {
return [];
}
})
|
|
|
import {DecimalPipe, NgClass} from '@angular/common';
import {ChangeDetectionStrategy, Component, computed, inject, input, Signal} 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/nshmp';
import {
DisaggComponentData,
DisaggSource,
} from '@ghsc/nshmp-utils-ts/libs/nshmp-haz/www/disagg-service';
import {AppService} from '../../services/app.service';
interface DisaggSourceEpsilon extends DisaggSource {
epsilon: number;
}
/**
* Table with disaggregation contributions from service response.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
host: {id: 'hazard-disagg-disagg-contributors'},
imports: [
DecimalPipe,
FormatLatitudePipe,
FormatLongitudePipe,
MatButton,
MatDivider,
MatIcon,
NgClass,
],
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 | null>();
readonly showExportButton = input(true);
readonly sources: Signal<DisaggSourceEpsilon[]> = computed(() => {
const componentData = this.componentData();
if (componentData) {
return componentData?.sources.map(source => ({
...source,
epsilon: source.ε,
}));
} else {
return [];
}
});
/** Form field state */
form = this.service.formGroup;
/** Disaggregation service response state */
serviceResponse = this.service.serviceResponse;
}
<!-- Disagg contributions -->
@let disaggComponentData = componentData();
@if (disaggComponentData && disaggComponentData.sources.length > 0) {
<div class="disagg-contributions">
@if (serviceResponse()) {
@if (showExportButton()) {
<div class="print-display-none">
<button
matButton="elevated"
class="primary"
(click)="service.saveContributions(componentData(), form.getRawValue())"
>
<mat-icon>file_save</mat-icon>
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 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>{{ data?.epsilon | 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