diff --git a/package-lock.json b/package-lock.json
index 50f3a4fb0f31c6244117c019a2a970ed5184b143..5e51055e304525e5abc31184e74830b2eaba6720 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,8 +20,8 @@
"@angular/router": "18.1.1",
"@asymmetrik/ngx-leaflet": "^18.0.1",
"@compodoc/compodoc": "^1.1.25",
- "@ghsc/disagg-d3": "^0.12.0",
- "@ghsc/nshmp-lib-ng": "^18.15.0",
+ "@ghsc/disagg-d3": "^0.13.0",
+ "@ghsc/nshmp-lib-ng": "^18.16.2",
"@ghsc/nshmp-template": "^18.0.3",
"@ghsc/nshmp-utils-ts": "^3.8.1",
"angular-plotly.js": "^6.0.0",
@@ -4272,18 +4272,18 @@
"license": "MIT"
},
"node_modules/@ghsc/disagg-d3": {
- "version": "0.12.0",
- "resolved": "https://code.usgs.gov/api/v4/projects/4335/packages/npm/@ghsc/disagg-d3/-/@ghsc/disagg-d3-0.12.0.tgz",
- "integrity": "sha1-1CgSNTwwouZmtGiJnHTBbOd354k=",
+ "version": "0.13.0",
+ "resolved": "https://code.usgs.gov/api/v4/projects/4335/packages/npm/@ghsc/disagg-d3/-/@ghsc/disagg-d3-0.13.0.tgz",
+ "integrity": "sha1-GbctFNTMauhWJAVUv/LXf5hWD0M=",
"dependencies": {
"@ghsc/nshmp-utils-ts": "^3.0.0",
"d3": "^7.6.1"
}
},
"node_modules/@ghsc/nshmp-lib-ng": {
- "version": "18.15.0",
- "resolved": "https://code.usgs.gov/api/v4/projects/12416/packages/npm/@ghsc/nshmp-lib-ng/-/@ghsc/nshmp-lib-ng-18.15.0.tgz",
- "integrity": "sha1-3MS89MMp78znBiSMTqAki+PGrso=",
+ "version": "18.16.2",
+ "resolved": "https://code.usgs.gov/api/v4/projects/12416/packages/npm/@ghsc/nshmp-lib-ng/-/@ghsc/nshmp-lib-ng-18.16.2.tgz",
+ "integrity": "sha1-0CySSw0cRNOyHvKz5yn9gBi3zmQ=",
"dependencies": {
"tslib": "^2.3.0"
},
diff --git a/package.json b/package.json
index 8141a044bc2d724ed1758d2f996d243fb2aa010f..31930e1ee866af40bafa5c85d92dd7a28afb5d7d 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,8 @@
"@angular/router": "18.1.1",
"@asymmetrik/ngx-leaflet": "^18.0.1",
"@compodoc/compodoc": "^1.1.25",
- "@ghsc/disagg-d3": "^0.12.0",
- "@ghsc/nshmp-lib-ng": "^18.15.0",
+ "@ghsc/disagg-d3": "^0.13.0",
+ "@ghsc/nshmp-lib-ng": "^18.16.2",
"@ghsc/nshmp-template": "^18.0.3",
"@ghsc/nshmp-utils-ts": "^3.8.1",
"angular-plotly.js": "^6.0.0",
diff --git a/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts b/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts
index 07a2865292a2e917caed9ce48fb673a4e7345b67..02276f6306cbb03b410379eba9f8884cabfa6374 100644
--- a/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts
+++ b/projects/nshmp-apps/src/app/hazard/dynamic/services/app.service.ts
@@ -41,7 +41,6 @@ import {
import {NshmId} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/nshm';
import {Parameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import * as d3 from 'd3-scale-chromatic';
import deepEqual from 'deep-equal';
import {PlotData} from 'plotly.js';
import {environment} from 'projects/nshmp-apps/src/environments/environment';
@@ -381,7 +380,11 @@ export class AppService
form: DynamicHazardControlForm,
returnPeriod: number
): PlotlyPlot {
- const data = responseData.hazardCurves.map(response => {
+ const hazardCurves = responseData.hazardCurves.filter(
+ response => response.imt.value !== Imt.PGV.toString()
+ );
+
+ const data = hazardCurves.map((response, index) => {
const imt = response.imt.value as Imt;
const sourceTypeData = hazardUtils.getSourceTypeData(
@@ -396,12 +399,14 @@ export class AppService
const plotlyData: Partial<PlotData> = {
hovertemplate: '%{x} g, %{y} AFE',
+ line: {
+ color: hazardUtils.color(index, hazardCurves.length),
+ },
mode: 'lines+markers',
name:
imt === Imt.PGA || imt === Imt.PGV
? imt
: `${imtToPeriod(imt)} s ${imt.substring(0, 2)}`,
- visible: imt !== Imt.PGV,
x: xy.xs,
y: xy.ys,
};
@@ -527,10 +532,17 @@ export class AppService
const lines: Partial<PlotData>[] = [];
spectra.responseSpectrum.forEach((spectrum, iSpectra) => {
- let color = d3.schemeCategory10[iSpectra];
+ let lineWidth = 2;
+ let markerSize = 7;
+
+ const color = hazardUtils.color(
+ iSpectra,
+ spectra.responseSpectrum.length
+ );
if (spectrum.returnPeriod === returnPeriodValue) {
- color = 'black';
+ lineWidth = 4;
+ markerSize = 12;
}
const spectraX: number[] = [];
@@ -548,7 +560,7 @@ export class AppService
legendgroup: imt,
marker: {
color,
- size: 7,
+ size: markerSize,
symbol: 'square',
},
mode: 'markers',
@@ -567,6 +579,10 @@ export class AppService
hovertemplate: '%{y} g',
line: {
color,
+ width: lineWidth,
+ },
+ marker: {
+ size: markerSize,
},
mode: 'lines+markers',
name:
diff --git a/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts b/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts
index 4b74f773e5aa28c11358c9736a33f730694607e6..b184f2ca4073a6970e780039e1b14a7d410b60f0 100644
--- a/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts
+++ b/projects/nshmp-apps/src/app/hazard/static/services/app.service.ts
@@ -42,7 +42,6 @@ import {
import {StaticNshmMetadata} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-static/nshm-service';
import {Parameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import * as d3 from 'd3-scale-chromatic';
import deepEqual from 'deep-equal';
import {PlotData} from 'plotly.js';
import {environment} from 'projects/nshmp-apps/src/environments/environment';
@@ -414,28 +413,33 @@ export class AppService
form: HazardControlForm,
returnPeriod: number
): PlotlyPlot {
- let data = responseData
- .filter(response => response.metadata.imt.value !== Imt.PGV.toString())
- .map(response => {
- const imt = response.metadata.imt.value as Imt;
-
- const label = imt === Imt.PGA ? imt : `${imtToPeriod(imt)} s`;
-
- const xy = hazardUtils.updateXySequence(
- form,
- hazardUtils.cleanXySequence(response.data),
- imt
- );
- const plotlyData: Partial<PlotData> = {
- hovertemplate: '%{x} g, %{y} AFE',
- mode: 'lines+markers',
- name: label,
- x: xy.xs,
- y: xy.ys,
- };
-
- return plotlyData;
- });
+ const staticResponseData = responseData.filter(
+ response => response.metadata.imt.value !== Imt.PGV.toString()
+ );
+
+ let data = staticResponseData.map((response, index) => {
+ const imt = response.metadata.imt.value as Imt;
+
+ const label = imt === Imt.PGA ? imt : `${imtToPeriod(imt)} s`;
+
+ const xy = hazardUtils.updateXySequence(
+ form,
+ hazardUtils.cleanXySequence(response.data),
+ imt
+ );
+ const plotlyData: Partial<PlotData> = {
+ hovertemplate: '%{x} g, %{y} AFE',
+ line: {
+ color: hazardUtils.color(index, staticResponseData.length),
+ },
+ mode: 'lines+markers',
+ name: label,
+ x: xy.xs,
+ y: xy.ys,
+ };
+
+ return plotlyData;
+ });
const metadata = [...responseData].shift().metadata;
const layout = plotUtils.updatePlotLabels({
@@ -636,10 +640,13 @@ export class AppService
returnPeriods.forEach((returnPeriod, iReturnPeriod) => {
const spectrum = Maths.responseSpectrum(hazardCurves, returnPeriod);
- let color = d3.schemeCategory10[iReturnPeriod];
+ let lineWidth = 2;
+ let markerSize = 7;
+ const color = hazardUtils.color(iReturnPeriod, returnPeriods.length);
if (returnPeriod === returnPeriodValue) {
- color = 'black';
+ lineWidth = 4;
+ markerSize = 12;
}
const spectraX: number[] = [];
@@ -657,7 +664,7 @@ export class AppService
legendgroup: imt,
marker: {
color,
- size: 7,
+ size: markerSize,
symbol: 'square',
},
mode: 'markers',
@@ -676,6 +683,10 @@ export class AppService
hovertemplate: '%{y} g',
line: {
color,
+ width: lineWidth,
+ },
+ marker: {
+ size: markerSize,
},
mode: 'lines+markers',
name: returnPeriodAltName[returnPeriod] ?? `${returnPeriod} yr`,