first step to show plot on dashboard

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html

@@ -14,7 +14,7 @@
 </style>
 <h1 mat-dialog-title>Add Plot</h1>
 
-<pdb-visualization-page mat-dialog-content></pdb-visualization-page>
+<pdb-visualization-page mat-dialog-content #plot></pdb-visualization-page>
 
 <div mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>

pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
+import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component';
 
 @Component({
   selector: 'app-add-plot-dialog',
@@ -8,10 +9,13 @@ import { MatDialogRef } from '@angular/material/dialog';
 })
 export class AddPlotDialogComponent {
 
+  @ViewChild("plot") plotElement! :VisualizationPageComponent;
+
   constructor(public dialogRef: MatDialogRef<string>){
   }
 
   onSaveClick(): void {
-    this.dialogRef.close("todo");
+    const config = this.plotElement.createPlotConfig();
+    this.dialogRef.close(config);
   }
 }

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -1,3 +1,20 @@
+<style>
+  :host {
+    width: 100%;
+    height: 100%;
+    
+  }
+  .spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .content {
+    padding: 0.5em;
+  }
+</style>
 <div *ngIf="dashboard === undefined" class="spinner">
   <mat-spinner></mat-spinner>
 </div>
@@ -11,4 +28,5 @@
   <p>{{dashboard.description}}</p>
 
   <app-text-widget *ngFor="let textWidget of dashboard.texts" [text]="textWidget.text"></app-text-widget>
+  <app-plot-widget *ngFor="let plotWidget of dashboard.plots" [data]="plotWidget"></app-plot-widget>
 </div>

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.scss

@@ -1,15 +0,0 @@
-:host {
-  width: 100%;
-  height: 100%;
-  
-}
-.spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.content {
-  padding: 0.5em;
-}

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts

@@ -2,14 +2,14 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
 import { ActivatedRoute } from '@angular/router';
-import { Dashboard, DashboardService, TextWidget } from 'src/app/dashboard.service';
+import { Dashboard, DashboardService, PlotWidget, TextWidget } from 'src/app/dashboard.service';
+import { PlotConfig } from 'src/app/plot.service';
 import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
 import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
 
 @Component({
   selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss']
+  templateUrl: './dashboard.component.html'
 })
 export class DashboardComponent implements OnInit {
 
@@ -34,9 +34,9 @@ export class DashboardComponent implements OnInit {
   addPlot() {
     this.dialog.open(AddPlotDialogComponent,{
       width: 'calc(100% - 1em)',
-      //height: 'calc(100% - 1em)'
-    }).afterClosed().subscribe((text: string) => {
-      //this.dashboard!.texts.push(new TextWidget('MEDIUM', text)); 
+      height: 'calc(100% - 1em)'
+    }).afterClosed().subscribe((config: PlotConfig) => {
+      this.dashboard!.plots.push(new PlotWidget('MEDIUM', config));
     });
   }
 

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html

@@ -0,0 +1,4 @@
+<style>
+
+</style>
+<p>{{data.config.query}}</p>

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotWidgetComponent } from './plot-widget.component';
+
+describe('PlotWidgetComponent', () => {
+  let component: PlotWidgetComponent;
+  let fixture: ComponentFixture<PlotWidgetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PlotWidgetComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlotWidgetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { PlotWidget } from 'src/app/dashboard.service';
+
+@Component({
+  selector: 'app-plot-widget',
+  templateUrl: './plot-widget.component.html'
+})
+export class PlotWidgetComponent {
+  @Input("data")
+  data!: PlotWidget;
+
+  
+}