show image in dashboard

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest  } from '../plot.service';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import * as moment from 'moment';
+import { WidgetDimensions } from '../dashboard.service';
 
 @Component({
   selector: 'pdb-plot-view',
@@ -46,8 +47,6 @@ export class PlotViewComponent implements OnInit {
 
   config? : PlotConfig;
 
-  submitterId = crypto.randomUUID();
-
   constructor(private service : PlotService, private snackBar: MatSnackBar) { }
 
   ngOnInit() {
@@ -221,13 +220,36 @@ export class PlotViewComponent implements OnInit {
     this.showStats = false;
   }
 
+  getAxes(): AxesTypes{
+    const plotTypes = this.service.getPlotTypes();
+    
+    this.config?.aggregates
+
+    const x = new Array<DataType>();
+    const y = new Array<DataType>();
+    
+    for(var i = 0; i < this.config!.aggregates.length; i++){
+      const aggregateType = this.config?.aggregates[i];
+      const plotType = plotTypes.find((p) => p.id == aggregateType);
+      if (plotType) {
+        if (!x.includes(plotType.xAxis)) {
+          x.push(plotType.xAxis);
+        }
+        if (!y.includes(plotType.yAxis)) {
+          y.push(plotType.yAxis);
+        }
+      }
+    }
+    
+    return new AxesTypes(x,y);
+  }
 
 
-  plot(config : PlotConfig, axes: AxesTypes){
+  plot(config : PlotConfig, dimension: WidgetDimensions | (()=>WidgetDimensions)){
     this.config = config;
-    this.axes = axes;
+    this.axes = this.getAxes();
 
-    const request = this.createPlotRequest();
+    const request = this.createPlotRequest(dimension);
     
     this.loadingEvent.emit(new LoadingEvent(true));
     const x = this.service.sendPlotRequest(request).subscribe({
@@ -247,21 +269,20 @@ export class PlotViewComponent implements OnInit {
     });
   }
 
-  createPlotRequest(): PlotRequest {
-    const results = document.getElementById("results");
-   
-   
+  createPlotRequest( dimension: WidgetDimensions | (()=>WidgetDimensions)): PlotRequest {
+  
+    const actualDimension = typeof dimension === "function" ? dimension() : dimension;
 
-   const request = new PlotRequest(
-     results != null ? results.offsetHeight-1: 1024,
-     results != null ? results.offsetWidth-1 : 1024,
-     300, // thumbnailMaxWidth
-     200, // thumbnailMaxHeight
-     false, // keyOutside
-     false, // generateThumbnail
-     this.submitterId,
-     this.config!);
-   return request;
+    const request = new PlotRequest(
+      actualDimension.height,
+      actualDimension.width,
+      300, // thumbnailMaxWidth
+      200, // thumbnailMaxHeight
+      false, // keyOutside
+      false, // generateThumbnail
+      (<any>window).submitterId,
+      this.config!);
+    return request;
  }
 
  /**