make the legend movable

The legend ("key" in Gnuplot speak) is no longer part of the image.
Instead it is a floating&movable overlay.

In the gallery we still use the legend/key in the image.

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

@@ -1,15 +1,16 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions  } from '../plot.service';
+import { Component, Output, EventEmitter } from '@angular/core';
+import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions, DataSeriesStats, DashTypeAndColor  } from '../plot.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import * as moment from 'moment';
 import { WidgetDimensions } from '../dashboard.service';
+import { Overlay } from "@angular/cdk/overlay";
 
 @Component({
   selector: 'pdb-plot-view',
   templateUrl: './plot-view.component.html',
   styleUrls: ['./plot-view.component.scss']
 })
-export class PlotViewComponent implements OnInit {
+export class PlotViewComponent {
 
   readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
 
@@ -18,6 +19,7 @@ export class PlotViewComponent implements OnInit {
   readonly gnuplotTMargin = 57; // The top margin configured for gnuplot
   readonly gnuplotBMargin = 76; // The bottom margin configured for gnuplot
 
+  isOpen = false;
 
   imageUrl! : string;
   stats: PlotResponseStats | null = null;
@@ -47,10 +49,9 @@ export class PlotViewComponent implements OnInit {
 
   config? : PlotConfig;
 
-  constructor(private service : PlotService, private snackBar: MatSnackBar) { }
+  legendInitialPosition = {x:115,y:60};
 
-  ngOnInit() {
-  }
+  constructor(private service : PlotService, private snackBar: MatSnackBar, private overlay: Overlay) { }
 
 
   showError(message:string) {
@@ -283,7 +284,7 @@ export class PlotViewComponent implements OnInit {
         'main': new RenderOptions(actualDimension.height, actualDimension.width, false, true)
       });
     return request;
- }
+  }
 
  /**
    * Zoom in/out by zoomFaktor, so that the anchorInPercentOfDateRange keeps the same position.
@@ -335,6 +336,18 @@ export class PlotViewComponent implements OnInit {
      duration: moment.duration(endDate.diff(startDate))
    };
   }
+
+
+
+  dataSeries(): Array<DataSeriesStats> {
+    return this.stats ? this.stats.dataSeriesStats : [];
+  }
+
+  pointTypeClass(typeAndColor: DashTypeAndColor): string {
+    return "plot-details-plotType"
+      +" plot-details-plotType_"+typeAndColor.pointType
+      +" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
+  } 
 }
 
 export class SelectionRange {