first step to show plot on dashboard

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

@@ -1,13 +1,7 @@
 
 
 <div id="main-toolbar">
-  <!--
-    <a href="/">Home</a>
-    <a href="/"><img src="assets/img/home.svg" aria-hidden="false" aria-label="go to home page" /></a>
-    <a href="/vis" aria-label="go to visualization page">Visualization</a>
-    <a href="/dashboard" aria-label="go to dashboard page">Dashboards</a>
-  -->
-  <button mat-button [routerLink]="['/']"><img src="assets/img/home.svg"  aria-hidden="false" aria-label="go to home page" /></button>
+  <button mat-button [routerLink]="['/']"><img src="assets/img/scatter-chart2.svg"  aria-hidden="false" aria-label="go to home page" /> Plotilio</button>
   <button mat-button [routerLink]="['/vis']">Visualization</button>
   <button mat-button [routerLink]="['/dashboard']">Dashboards</button>
 </div>

pdb-js/src/app/app.module.ts

@@ -37,6 +37,7 @@ import { DashboardComponent } from './dashboard-page/dashboard/dashboard.compone
 import { AddTextDialogComponent } from './dashboard-page/dashboard/add-text-dialog/add-text-dialog.component';
 import { TextWidgetComponent } from './dashboard-page/dashboard/text-widget/text-widget.component';
 import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component';
+import { PlotWidgetComponent } from './dashboard-page/dashboard/plot-widget/plot-widget.component';
 
 @NgModule({
   declarations: [
@@ -59,7 +60,8 @@ import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dial
     DashboardComponent,
     AddTextDialogComponent,
     TextWidgetComponent,
-    AddPlotDialogComponent
+    AddPlotDialogComponent,
+    PlotWidgetComponent
   ],
   imports: [
     BrowserModule,

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;
+
+  
+}

pdb-js/src/app/dashboard.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { PlotConfig } from './plot.service';
 
 @Injectable({
   providedIn: 'root'
@@ -32,7 +33,7 @@ export class DashboardCreationData{
 }
 
 export class Dashboard{
-  constructor(public id: string, public name: string, public description: string, public texts: [TextWidget]){}
+  constructor(public id: string, public name: string, public description: string, public texts: TextWidget[], public plots: PlotWidget[]){}
 }
 
 export class DashboardList{
@@ -49,7 +50,7 @@ export class TextWidget  extends BaseWidget {
   }
 }
 export class PlotWidget extends BaseWidget {
-  constructor(override size: 'SMALL'|'MEDIUM'|'LARGE') {
+  constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public config: PlotConfig) {
     super('PLOT', size);
   }
 }

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

@@ -1,7 +1,7 @@
 :host{
   font-weight: bold;
   width: 100%;
-  height: calc(100% - 29px);
+  height: calc(100% - 43px);
   position: absolute;
   display: grid;
 }

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

@@ -180,15 +180,14 @@ export class VisualizationPageComponent implements OnInit {
       }
     });
   }
-  
-  createPlotRequest(): PlotRequest {
+
+  createPlotConfig(): PlotConfig {
     const aggregates = new Array<string>();
     this.selectedPlotType.forEach(a => aggregates.push(a.id));
     
     const y1 = this.y1AxisDefinitionComponent.getAxisDefinition();
     const y2 = this.y2AxisDefinitionComponent ? this.y2AxisDefinitionComponent.getAxisDefinition() : undefined;
-    const results = document.getElementById("results");
-    
+   
     const config = new PlotConfig(
       this.query.query,
       this.groupBy.map(o => o.name),
@@ -202,6 +201,13 @@ export class VisualizationPageComponent implements OnInit {
       this.intervalValue,
       this.renderBarChartTickLabels, 
     );
+    return config;
+  }
+  
+  createPlotRequest(): PlotRequest {
+     const results = document.getElementById("results");
+    
+    const config = this.createPlotConfig();
 
     const request = new PlotRequest(
       results != null ? results.offsetHeight-1: 1024,