Feat dashboards

frontend/datacat-ui/package.json

@@ -23,6 +23,8 @@
     "@primeng/themes": "^19.0.3",
     "angular-gridster2": "^18.0.1",
     "chart.js": "^4.4.7",
+    "chartjs-adapter-luxon": "^1.3.1",
+    "luxon": "^3.6.1",
     "primeicons": "^7.0.0",
     "primeng": "^18.0.2",
     "rxjs": "~7.8.0",

frontend/datacat-ui/src/features/dashboards/edit-panel/edit-panel.component.html

@@ -2,11 +2,7 @@
   <div class="preview">
     <p-panel header="Preview">
       <div class="visualization">
-        <datacat-panel-vizualization
-          [data]="data"
-          [visualizationType]="visualizationType"
-          [visualizationSettings]="visualizationSettings"
-        />
+        <datacat-panel-chart />
       </div>
     </p-panel>
     <form class="form" [formGroup]="editForm">
@@ -40,9 +36,5 @@
       />
     </form>
   </div>
-  <datacat-panel-visualization-options
-    (onOptionsChange)="
-      visualizationType = $event[0]; visualizationSettings = $event[1]
-    "
-  />
+  <datacat-chart-options />
 </div>

frontend/datacat-ui/src/features/dashboards/edit-panel/edit-panel.component.ts

@@ -1,5 +1,4 @@
 import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
-import { PanelVisualizationComponent } from '../../../shared/ui/panel-visualization';
 import { PanelVisualizationOptionsComponent } from '../../../shared/ui/panel-visualization-options';
 import { PanelModule } from 'primeng/panel';
 import {
@@ -25,41 +24,41 @@ import {
 import { ApiService } from '../../../shared/services/datacat-generated-client';
 import { ToastLoggerService } from '../../../shared/services/toast-logger.service';
 import { ButtonModule } from 'primeng/button';
-import { finalize } from 'rxjs';
+import { finalize, timer } from 'rxjs';
 import { TimeSeries } from '../../../entities/dashboards/data.types';
 import { PanelDataService } from '../panels-grid/panel-data.service';
 import { TimeRangeSelectComponent } from '../../../shared/ui/time-range-select/time-range-select.component';
 import { TimeRange } from '../../../entities/dashboards/etc.types';
+import { PanelChartComponent } from '../../../shared/ui/charts/panel-chart/panel-chart.component';
+import { ChartService } from '../../../shared/ui/charts/chart.service';
+import { ChartOptionsComponent } from '../../../shared/ui/charts/options/options.component';
 
 @Component({
   standalone: true,
   selector: 'datacat-edit-panel',
   templateUrl: './edit-panel.component.html',
   styleUrl: './edit-panel.component.scss',
   imports: [
-    PanelVisualizationComponent,
-    PanelVisualizationOptionsComponent,
     PanelModule,
     ReactiveFormsModule,
     InputTextModule,
     TextareaModule,
     DataSourceSelectComponent,
     ButtonModule,
     TimeRangeSelectComponent,
+    PanelChartComponent,
+    ChartOptionsComponent,
   ],
-  providers: [PanelDataService],
+  providers: [ChartService],
 })
-export class EditPanelComponent implements AfterViewInit {
+export class EditPanelComponent {
   private _panelId?: string;
 
   @Input() public set panelId(id: string | undefined) {
     this._panelId = id;
     this.refresh();
   }
 
-  @ViewChild(PanelVisualizationOptionsComponent)
-  optionsComponent?: PanelVisualizationOptionsComponent;
-
   protected panel?: Panel;
 
   protected data: TimeSeries[] | null = null;
@@ -70,10 +69,15 @@ export class EditPanelComponent implements AfterViewInit {
     step: '00:30:00',
     from: (() => {
       const date = new Date();
-      date.setMinutes(date.getMinutes() - 360);
+      date.setTime(date.getTime() - 4 * 60 * 60 * 1000);
+      date.setMilliseconds(0);
+      return date;
+    })(),
+    to: (() => {
+      const date = new Date();
+      date.setMilliseconds(0);
       return date;
     })(),
-    to: new Date(),
   });
 
   protected editForm = new FormGroup({
@@ -88,37 +92,27 @@ export class EditPanelComponent implements AfterViewInit {
   constructor(
     private api: ApiService,
     private logger: ToastLoggerService,
-    private panelDataService: PanelDataService,
+    private chartService: ChartService,
   ) {
-    this.panelDataService.data$.subscribe((v) => (this.data = v));
     this.timeRangeControl.valueChanges.subscribe((tr) => {
-      if (tr) this.panelDataService.loadTimeRange(tr);
+      this.refreshPreview();
     });
     this.editForm.get('dataSourceId')?.valueChanges.subscribe((id) => {
       if (id && this.panel) {
         this.panel.dataSource!.id = id;
-        this.panelDataService.panel = this.panel;
+        this.chartService.setDataSourceName(this.panel.dataSource!.name);
         this.refreshPreview();
       }
     });
     this.editForm.get('query')?.valueChanges.subscribe((q) => {
       if (q && this.panel) {
         this.panel.query = q;
-        this.panelDataService.panel = this.panel;
+        this.chartService.setQuery(this.panel.query);
         this.refreshPreview();
       }
     });
   }
 
-  ngAfterViewInit() {
-    if (this.panel) {
-      this.optionsComponent?.setVisualizationSettings(
-        this.panel.visualizationType!,
-        this.panel.visualizationSettings!,
-      );
-    }
-  }
-
   protected refresh() {
     if (!this._panelId) return;
 
@@ -140,14 +134,12 @@ export class EditPanelComponent implements AfterViewInit {
             data.styleConfiguration!,
           ) as VisualizationSettings,
         };
-        this.panelDataService.panel = this.panel;
+        this.chartService.setType(this.panel.visualizationType!);
+        this.chartService.setQuery(this.panel.query);
+        this.chartService.setDataSourceName(this.panel.dataSource!.name);
+        this.chartService.updateStyle(this.panel.visualizationSettings);
         this.refreshPreview();
 
-        this.optionsComponent?.setVisualizationSettings(
-          this.panel.visualizationType!,
-          this.panel.visualizationSettings!,
-        );
-
         this.editForm.setValue({
           title: this.panel.title,
           dataSourceId: this.panel.dataSource?.id,
@@ -161,21 +153,24 @@ export class EditPanelComponent implements AfterViewInit {
   }
 
   protected refreshPreview() {
-    this.panelDataService.loadTimeRange(this.timeRangeControl.getRawValue()!);
+    const timeRange = this.timeRangeControl.getRawValue()!;
+    this.chartService.loadTimeRange(
+      timeRange.from,
+      timeRange.to,
+      timeRange.step,
+    );
   }
 
   protected saveChanges() {
     if (!this.panel) return;
 
     const request: any = {
       title: this.editForm.get('title')?.value || '',
-      type: encodeVisualizationType(this.visualizationType),
+      type: encodeVisualizationType(this.chartService.type),
       rawQuery: this.editForm.get('query')?.value || '',
       dataSourceId: this.editForm.get('dataSourceId')?.value || '',
       layout: serializeLayout(this.panel.layout),
-      styleConfiguration: encodeVisualizationSettings(
-        this.visualizationSettings,
-      ),
+      styleConfiguration: encodeVisualizationSettings(this.chartService.style),
     };
 
     this.editForm.disable();

frontend/datacat-ui/src/features/dashboards/panels-grid/panel-in-grid/panel-in-grid.component.html

@@ -24,11 +24,7 @@
     @if (isError) {
       <p class="text-secondary">Loading error</p>
     } @else {
-      <datacat-panel-vizualization
-        [data]="data"
-        [visualizationType]="_panel?.visualizationType"
-        [visualizationSettings]="_panel?.visualizationSettings"
-      />
+      <datacat-panel-chart />
     }
   </div>
 </p-panel>
@@ -45,10 +41,6 @@
       <textarea pTextarea [disabled]="true">{{ _panel?.query }}</textarea>
     </div>
     <p-divider></p-divider>
-    <datacat-panel-vizualization
-      [data]="data"
-      [visualizationType]="_panel?.visualizationType"
-      [visualizationSettings]="_panel?.visualizationSettings"
-    />
+    <datacat-panel-chart />
   </div>
 </p-dialog>

frontend/datacat-ui/src/features/dashboards/panels-grid/panel-in-grid/panel-in-grid.component.ts

@@ -1,16 +1,16 @@
 import { Component, Input } from '@angular/core';
 import { PanelModule } from 'primeng/panel';
-import { PanelVisualizationComponent } from '../../../../shared/ui/panel-visualization/panel-visualization.component';
 import { Panel } from '../../../../entities';
 import { ButtonModule } from 'primeng/button';
 import { Router } from '@angular/router';
 import * as urls from '../../../../shared/common/urls';
-import { TimeSeries } from '../../../../entities/dashboards/data.types';
 import { DialogModule } from 'primeng/dialog';
 import { TextareaModule } from 'primeng/textarea';
 import { DividerModule } from 'primeng/divider';
-import { PanelDataService } from '../panel-data.service';
 import { DashboardService } from '../dashboard.service';
+import { PanelChartComponent } from '../../../../shared/ui/charts/panel-chart/panel-chart.component';
+import { ChartService } from '../../../../shared/ui/charts/chart.service';
+import { TimeSeries } from '../../../../shared/ui/charts/chart.types';
 
 @Component({
   standalone: true,
@@ -19,20 +19,26 @@ import { DashboardService } from '../dashboard.service';
   styleUrl: './panel-in-grid.component.scss',
   imports: [
     PanelModule,
-    PanelVisualizationComponent,
+    PanelChartComponent,
     ButtonModule,
     DialogModule,
     TextareaModule,
     DividerModule,
   ],
-  providers: [PanelDataService],
+  providers: [ChartService],
 })
 export class PanelInGridComponent {
   @Input() set panel(p: Panel | undefined) {
     this._panel = p;
-    this.panelDataService.panel = p;
+    if (p) {
+      this.chartService.setType(p.visualizationType!);
+      this.chartService.setQuery(p.query);
+      this.chartService.setDataSourceName(p.dataSource!.name);
+      this.chartService.updateStyle(p.visualizationSettings);
+    }
     if (this.dashboardService.timeRange) {
-      this.panelDataService.loadTimeRange(this.dashboardService.timeRange);
+      const tr = this.dashboardService.timeRange;
+      this.chartService.loadTimeRange(tr.from, tr.to, tr.step);
     }
   }
 
@@ -43,13 +49,13 @@ export class PanelInGridComponent {
 
   constructor(
     private router: Router,
-    private panelDataService: PanelDataService,
     private dashboardService: DashboardService,
+    private chartService: ChartService,
   ) {
-    this.panelDataService.data$.subscribe((v) => (this.data = v));
-    this.panelDataService.error$.subscribe((v) => (this.isError = v));
+    this.chartService.data$.subscribe((v) => (this.data = v));
+    this.chartService.error$.subscribe((v) => (this.isError = v));
     this.dashboardService.timeRange$.subscribe((tr) => {
-      if (tr) this.panelDataService.loadTimeRange(tr);
+      if (tr) this.chartService.loadTimeRange(tr.from, tr.to, tr.step);
     });
   }
 

frontend/datacat-ui/src/features/dashboards/panels-grid/panels-grid.component.ts

@@ -82,6 +82,7 @@ export class PanelsGridComponent {
     resizable: {
       enabled: true,
     },
+    outerMargin: false,
     enableBoundaryControl: true,
     itemChangeCallback: this.handleGridsterItemChange.bind(this),
   };

frontend/datacat-ui/src/features/dashboards/panels-grid/panels-grid.consts.ts

@@ -14,8 +14,13 @@ export const DEFAULT_TIME_RANGE: TimeRange = {
   step: '00:30:00',
   from: (() => {
     const date = new Date();
-    date.setMinutes(date.getMinutes() - 360);
+    date.setTime(date.getTime() - 4 * 60 * 60 * 1000);
+    date.setMilliseconds(0);
+    return date;
+  })(),
+  to: (() => {
+    const date = new Date();
+    date.setMilliseconds(0);
     return date;
   })(),
-  to: new Date(),
 };

frontend/datacat-ui/src/shared/ui/charts/bar/bar.component.html

@@ -0,0 +1,9 @@
+<div [style]="{ resize: 'both', overflow: 'auto' }">
+  @if (isError) {
+    <p>Error</p>
+  } @else if (!hasData()) {
+    <p>No data</p>
+  } @else {
+    <p-chart type="bar" [options]="chartjsOptions" [data]="chartjsData" />
+  }
+</div>

frontend/datacat-ui/src/shared/ui/charts/bar/bar.component.scss

@@ -0,0 +1,4 @@
+p {
+  text-align: center;
+  color: var(--p-surface-400);
+}