Disaggregation Application
  1. Components
  2. PlotsComponent

File

components/plots/plots.component.ts

Description

Dynamic hazard plots.

Metadata

selector app-plots
imports NshmpPlotsContainerComponent NshmpPlotComponent NshmpHazardDesignCodeWarningComponent NshmpAppMetadataComponent MatAccordion MatExpansionPanel MatExpansionPanelHeader MatExpansionPanelTitle MatDivider ParameterSummaryComponent
templateUrl ./plots.component.html
styleUrl ./plots.component.scss

Index

Properties
Methods

Methods

onHazardLegendClick
onHazardLegendClick(plotData: Partial)
Defined in components/plots/plots.component.ts:67
Parameters :
Name Type Optional
plotData Partial<PlotData> No
Returns : void
onSourcesLegendClick
onSourcesLegendClick(plotData: Partial)
Defined in components/plots/plots.component.ts:46
Parameters :
Name Type Optional
plotData Partial<PlotData> No
Returns : void
onSpectrumLegendClick
onSpectrumLegendClick(plotData: Partial)
Defined in components/plots/plots.component.ts:56
Parameters :
Name Type Optional
plotData Partial<PlotData> No
Returns : void

Properties

controls
Default value : this.service.formGroup.controls
Defined in components/plots/plots.component.ts:44
repositories
Default value : computed(() => this.service.usage()?.metadata.repositories)
Defined in components/plots/plots.component.ts:42

Repo metadata
service
Default value : inject(AppService)
Defined in components/plots/plots.component.ts:39
 
import {Component, computed, inject} from '@angular/core';
import {MatDivider} from '@angular/material/divider';
import {
  MatAccordion,
  MatExpansionPanel,
  MatExpansionPanelHeader,
  MatExpansionPanelTitle,
} from '@angular/material/expansion';
import {NshmpHazardDesignCodeWarningComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {NshmpPlotComponent, NshmpPlotsContainerComponent} from '@ghsc/nshmp-lib-ng/plot';
import {Imt} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
import {PlotData} from 'plotly.js';

import {AppService} from '../../services/app.service';
import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component';

/**
 * Dynamic hazard plots.
 */
@Component({
  imports: [
    NshmpPlotsContainerComponent,
    NshmpPlotComponent,
    NshmpHazardDesignCodeWarningComponent,
    NshmpAppMetadataComponent,
    MatAccordion,
    MatExpansionPanel,
    MatExpansionPanelHeader,
    MatExpansionPanelTitle,
    MatDivider,
    ParameterSummaryComponent,
  ],
  selector: 'app-plots',
  styleUrl: './plots.component.scss',
  templateUrl: './plots.component.html',
})
export class PlotsComponent {
  service = inject(AppService);

  /** Repo metadata */
  repositories = computed(() => this.service.usage()?.metadata.repositories);

  controls = this.service.formGroup.controls;

  onSourcesLegendClick(plotData: Partial<PlotData>): void {
    const {sourceType} = this.service.formGroup.getRawValue();

    if (plotData.uid && sourceType !== plotData.uid) {
      this.service.formGroup.patchValue({
        sourceType: plotData.uid.replace('source-', ''),
      });
    }
  }

  onSpectrumLegendClick(plotData: Partial<PlotData>): void {
    const {returnPeriod} = this.service.formGroup.getRawValue();

    if (plotData.uid && returnPeriod.toString() !== plotData.uid) {
      this.service.formGroup.patchValue({
        commonReturnPeriods: Number.parseFloat(plotData.uid),
        returnPeriod: Number.parseFloat(plotData.uid),
      });
    }
  }

  onHazardLegendClick(plotData: Partial<PlotData>): void {
    const {imt} = this.service.formGroup.getRawValue();

    if (plotData.uid && plotData.uid !== imt.toString()) {
      this.service.formGroup.patchValue({
        imt: plotData.uid as Imt,
      });
    }
  }
}

<nshmp-plots-container>
  <nshmp-hazard-design-code-warning />

  <mat-accordion multi>
    <!-- Hazard plot -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Hazard</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider />

      <nshmp-plot
        class="hazard-plot"
        [plot]="service.hazardPlotState()"
        (legendClick)="onHazardLegendClick($event)"
        [legendSelectUid]="controls.imt.value"
      />
    </mat-expansion-panel>

    <!-- Sources plot -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Sources</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider />

      <nshmp-plot
        class="sources-plot"
        [plot]="service.sourcesPlotState()"
        (legendClick)="onSourcesLegendClick($event)"
        [legendSelectUid]="'source-' + controls.sourceType.value"
      />
    </mat-expansion-panel>

    <!-- Magnitudes plot -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Magnitudes</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider />

      <nshmp-plot class="magnitudes-plot" [plot]="service.magnitudesPlotState()" />
    </mat-expansion-panel>

    <!-- Spectra plot -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Spectra</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider />

      <nshmp-plot
        class="spectra-plot"
        [plot]="service.spectrumPlotState()"
        (legendClick)="onSpectrumLegendClick($event)"
        [legendSelectUid]="controls.returnPeriod.value.toString()"
      />
    </mat-expansion-panel>

    <!-- Parameter summary -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Parameter Summary</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider />
      <app-parameter-summary />
    </mat-expansion-panel>

    <!-- App metadata -->
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>Application Metadata</mat-panel-title>
      </mat-expansion-panel-header>

      <mat-divider />
      <nshmp-app-metadata [repositories]="repositories()" />
    </mat-expansion-panel>
  </mat-accordion>
</nshmp-plots-container>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""