Moved chart initialization to Plotter

jirkapok · Apr 2, 2024 · 3c8bf5c · 3c8bf5c
1 parent d6d1bb3
commit 3c8bf5c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 41 deletions.
diff --git a/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts b/projects/planner/src/app/diff/profilechart/diff-profilechart.component.ts
@@ -22,19 +22,8 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
     public icon = faChartArea;
     private readonly elementName = 'diveplot';
     private chartElement: any; // prevent typescript type gymnastic
-
-    private options = {
-        displaylogo: false,
-        displayModeBar: false,
-        responsive: true,
-        // staticPlot: true,
-        autosize: true,
-        scrollZoom: false,
-        editable: false
-    };
-
-    private cursor1: Partial<Plotly.Shape> = ChartPlotterFactory.createCursor(ChartPlotterFactory.depthLineColorA);
-
+    private options: Partial<Plotly.Config>;
+    private cursor1: Partial<Plotly.Shape>;
     private layout: Partial<Plotly.Layout>;
     private resampling: ResamplingService;
     private profileAChartPlotter: ChartPlotter;
@@ -46,33 +35,12 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
         private profileComparatorService: ProfileComparatorService) {
         super();
         this.resampling = new ResamplingService(units);
+        const chartPlotterFactory = new ChartPlotterFactory(this.resampling, this.units);
 
-        this.layout = {
-            autosize: true,
-            showlegend: false,
-            xaxis: {
-                fixedrange: true,
-                title: {
-                    text: 'Time [min]'
-                }
-            },
-            yaxis: {
-                fixedrange: true,
-                autorange: 'reversed',
-                title: {
-                    text: `Depth [${units.length}]`
-                }
-            },
-            margin: { l: 40, r: 10, b: 40, t: 10 },
-            hovermode: 'x unified',
-            hoverlabel: {
-                bgcolor: 'rgba(200, 200, 200, 0.25)',
-                bordercolor: 'rgba(200, 200, 200, 0.25)'
-            },
-            shapes: []
-        };
+        this.cursor1 = chartPlotterFactory.createCursor();
+        this.layout = chartPlotterFactory.createLayout();
+        this.options = chartPlotterFactory.createOptions();
 
-        const chartPlotterFactory = new ChartPlotterFactory(this.resampling, this.units);
         this.profileAChartPlotter = chartPlotterFactory.wthNamePrefix('Profile A ').create(this.profileA);
         this.profileBChartPlotter = chartPlotterFactory
             .wthNamePrefix('Profile B ')
@@ -182,7 +150,7 @@ export class ProfileDifferenceChartComponent extends Streamed implements OnInit
     }
 
     private updateLayoutThickFormat(): void {
-        // setting to string instead expected d3 formtting function causes warning in console = want fix
+        // setting to string instead expected d3 formatting function causes warning in console = want fix
         this.layout.xaxis!.tickformat = DateFormats.selectChartTimeFormat(this.profileA.totalDuration);
     }
 }
diff --git a/projects/planner/src/app/shared/chartPlotter.ts b/projects/planner/src/app/shared/chartPlotter.ts
@@ -17,7 +17,19 @@ export class ChartPlotterFactory {
     constructor(private resampling: ResamplingService, private units: UnitConversion) {
     }
 
-    public static createCursor(lineColor: string): Partial<Plotly.Shape> {
+    public createOptions(): Partial<Plotly.Config> {
+        return {
+            displaylogo: false,
+            displayModeBar: false,
+            responsive: true,
+            // staticPlot: true,
+            autosizable: true,
+            scrollZoom: false,
+            editable: false
+        };
+    }
+
+    public createCursor(): Partial<Plotly.Shape> {
         return {
             type: 'line',
             // x-reference is assigned to the x-values
@@ -30,12 +42,39 @@ export class ChartPlotterFactory {
             y1: 1,
             fillcolor: '#d3d3d3',
             line: {
-                color: lineColor,
+                color: ChartPlotterFactory.depthLineColorA,
                 width: 5
             }
         };
     }
 
+    public createLayout(): Partial<Plotly.Layout> {
+        return {
+            autosize: true,
+            showlegend: false,
+            xaxis: {
+                fixedrange: true,
+                title: {
+                    text: 'Time [min]'
+                }
+            },
+            yaxis: {
+                fixedrange: true,
+                autorange: 'reversed',
+                title: {
+                    text: `Depth [${this.units.length}]`
+                }
+            },
+            margin: { l: 40, r: 10, b: 40, t: 10 },
+            hovermode: 'x unified',
+            hoverlabel: {
+                bgcolor: 'rgba(200, 200, 200, 0.25)',
+                bordercolor: 'rgba(200, 200, 200, 0.25)'
+            },
+            shapes: []
+        };
+    }
+
     public wthNamePrefix(prefix: string): ChartPlotterFactory {
         this.namePrefix = prefix;
         return this;