diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.html b/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.html index 82c4428f83b00ccbf07715e68a374dbce1dce312..c9f84b1b31374d3e866c741b98c57736e9e6369f 100644 --- a/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.html +++ b/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.html @@ -1,4 +1,23 @@ <nshmp-lib-ng-plots-container> + <nshmp-lib-ng-alert title="Calculations"> + This application currently performs the RTGM calculation for a single + intensity measure (IM) hazard curve at a time. For bulk calculation of RTGMs + for a larger number of IM hazard curves, please refer to + <a + target="_blank" + href="https://earthquake.usgs.gov/ws/nshmp/designmaps/rtgm/" + > + https://earthquake.usgs.gov/ws/nshmp/designmaps/rtgm/ + </a> + or + <a + target="_blank" + href="https://code.usgs.gov/ghsc/erp/erp-rtgm-calculator" + > + https://code.usgs.gov/ghsc/erp/erp-rtgm-calculator + </a> + </nshmp-lib-ng-alert> + <mat-accordion multi> @for (plot of plots(); track $index) { <mat-expansion-panel expanded> diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.ts b/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.ts index d916030011d1e2a53c1cb3f80529ffd25363b68c..220132002d36ea70fb30096cd596f9193b26527b 100644 --- a/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.ts +++ b/projects/nshmp-apps/src/app/designmaps/rtgm/components/plots/plots.component.ts @@ -1,7 +1,10 @@ import {Component, computed, OnDestroy, OnInit} from '@angular/core'; import {MatDivider} from '@angular/material/divider'; import {MatExpansionModule} from '@angular/material/expansion'; -import {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp'; +import { + NshmpLibNgAlertComponent, + NshmpLibNgAppMetadataComponent, +} from '@ghsc/nshmp-lib-ng/nshmp'; import { NshmpLibNgPlotComponent, NshmpLibNgPlotsContainerComponent, @@ -18,6 +21,7 @@ import {RtgmSummaryComponent} from '../rtgm-summary/rtgm-summary.component'; NshmpLibNgPlotsContainerComponent, NshmpLibNgPlotComponent, NshmpLibNgAppMetadataComponent, + NshmpLibNgAlertComponent, MatExpansionModule, MatDivider, ParameterSummaryComponent, diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/services/app.service.ts b/projects/nshmp-apps/src/app/designmaps/rtgm/services/app.service.ts index 60c6214fcfa6c0b8709c97fd54dea45f19c6f8cd..cc8b8f5e6a754e766db950f518d47d787421bc0a 100644 --- a/projects/nshmp-apps/src/app/designmaps/rtgm/services/app.service.ts +++ b/projects/nshmp-apps/src/app/designmaps/rtgm/services/app.service.ts @@ -35,7 +35,6 @@ interface DefaultPlotProps { title: string; xLabel: string; yLabel: string; - xRange?: number[]; xType?: AxisType; yRange?: number[]; @@ -301,6 +300,25 @@ export class AppService } } + private colorScale(iterations: RtgmIteration[]): readonly string[] { + const ncolor = iterations.length % 9; + + const colors: (readonly string[])[] = [ + [], + ['#084081'], + ['#2b8cbe', '#084081'], + ['#7bccc4', '#2b8cbe', '#084081'], + ['#ccebc5', '#7bccc4', '#2b8cbe', '#084081'], + ['#f7fcf0', '#ccebc5', '#7bccc4', '#2b8cbe', '#084081'], + d3Color.schemeGnBu[6], + d3Color.schemeGnBu[7], + d3Color.schemeGnBu[8], + d3Color.schemeGnBu[9], + ]; + + return colors[ncolor]; + } + private createDerivativeFragilityPlot( iterations: IterationPlotData ): NshmpPlot { @@ -351,7 +369,7 @@ export class AppService yRange: number[] ): Partial<PlotData>[] { const fragilitySlices: Partial<PlotData>[] = []; - const colors = d3Color.schemeCategory10; + const colors = this.colorScale(iterations); iterations.forEach((iteration, index) => { const color = colors[index % iterations.length]; @@ -463,7 +481,11 @@ export class AppService const hazardFragilityPlotData: Partial<PlotData>[] = []; const integralHazardFragilityPlotData: Partial<PlotData>[] = []; + const colors = this.colorScale(iterations); + iterations.forEach((iteration, index) => { + const color = colors[index % iterations.length]; + const name = index === iterations.length - 1 ? 'Final Iteration' @@ -471,6 +493,9 @@ export class AppService fragilityPlotData.push({ hovertemplate: '%{x} g, %{y}', + line: { + color, + }, mode: 'lines+markers', name, x: imls, @@ -479,6 +504,9 @@ export class AppService derivativeFragilityPlotData.push({ hovertemplate: '%{x} g, %{y}', + line: { + color, + }, mode: 'lines+markers', name, x: imls, @@ -487,6 +515,9 @@ export class AppService hazardFragilityPlotData.push({ hovertemplate: '%{x} g, %{y}', + line: { + color, + }, mode: 'lines+markers', name, x: imls, @@ -495,6 +526,9 @@ export class AppService integralHazardFragilityPlotData.push({ hovertemplate: '%{x} g, %{y}', + line: { + color, + }, mode: 'lines+markers', name, x: imls,