add custom color scale

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,10 @@ export class AppService
     }
   }
 
+  private colorScale(): readonly string[] {
+    return d3Color.schemeGnBu[9].slice(3, 8);
+  }
+
   private createDerivativeFragilityPlot(
     iterations: IterationPlotData
   ): NshmpPlot {
@@ -351,7 +354,7 @@ export class AppService
     yRange: number[]
   ): Partial<PlotData>[] {
     const fragilitySlices: Partial<PlotData>[] = [];
-    const colors = d3Color.schemeCategory10;
+    const colors = this.colorScale();
 
     iterations.forEach((iteration, index) => {
       const color = colors[index % iterations.length];
@@ -463,7 +466,11 @@ export class AppService
     const hazardFragilityPlotData: Partial<PlotData>[] = [];
     const integralHazardFragilityPlotData: Partial<PlotData>[] = [];
 
+    const colors = this.colorScale();
+
     iterations.forEach((iteration, index) => {
+      const color = colors[index % iterations.length];
+
       const name =
         index === iterations.length - 1
           ? 'Final Iteration'
@@ -471,6 +478,9 @@ export class AppService
 
       fragilityPlotData.push({
         hovertemplate: '%{x} g, %{y}',
+        line: {
+          color,
+        },
         mode: 'lines+markers',
         name,
         x: imls,
@@ -479,6 +489,9 @@ export class AppService
 
       derivativeFragilityPlotData.push({
         hovertemplate: '%{x} g, %{y}',
+        line: {
+          color,
+        },
         mode: 'lines+markers',
         name,
         x: imls,
@@ -487,6 +500,9 @@ export class AppService
 
       hazardFragilityPlotData.push({
         hovertemplate: '%{x} g, %{y}',
+        line: {
+          color,
+        },
         mode: 'lines+markers',
         name,
         x: imls,
@@ -495,6 +511,9 @@ export class AppService
 
       integralHazardFragilityPlotData.push({
         hovertemplate: '%{x} g, %{y}',
+        line: {
+          color,
+        },
         mode: 'lines+markers',
         name,
         x: imls,