using gridstack native Component constructor to populate grid dynamic…

…allly (from JSON spec)

change all widgets to depend on dashboard-widget.

frontend/src/app/components/gridstack/gridstack.component.ts

@@ -11,6 +11,16 @@ import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridSta
 
 import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
 import {CommonModule} from '@angular/common';
+import {WidgetsModule} from '../../widgets/widgets.module';
+import {ComplexLineWidgetComponent} from '../../widgets/complex-line-widget/complex-line-widget.component';
+import {DashboardWidgetComponent} from '../../widgets/dashboard-widget/dashboard-widget.component';
+import {DonutChartWidgetComponent} from '../../widgets/donut-chart-widget/donut-chart-widget.component';
+import {DualGaugesWidgetComponent} from '../../widgets/dual-gauges-widget/dual-gauges-widget.component';
+import {GroupedBarChartWidgetComponent} from '../../widgets/grouped-bar-chart-widget/grouped-bar-chart-widget.component';
+import {PatientVitalsWidgetComponent} from '../../widgets/patient-vitals-widget/patient-vitals-widget.component';
+import {SimpleLineChartWidgetComponent} from '../../widgets/simple-line-chart-widget/simple-line-chart-widget.component';
+import {TableWidgetComponent} from '../../widgets/table-widget/table-widget.component';
+import {DashboardWidgetComponentInterface} from '../../widgets/dashboard-widget-component-interface';
 
 /** events handlers emitters signature for different events */
 export type eventCB = {event: Event};
@@ -21,6 +31,7 @@ export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: Gri
 /** extends to store Ng Component selector, instead/inAddition to content */
 export interface NgGridStackWidget extends GridStackWidget {
  type?: string; // component type to create as content
+ widgetConfig?: any;
 }
 export interface NgGridStackNode extends GridStackNode {
  type?: string; // component type to create as content
@@ -43,7 +54,7 @@ export type SelectorToType = {[key: string]: Type<Object>};
  */
 @Component({
  standalone: true,
- imports: [CommonModule, GridstackItemComponent],
+ imports: [CommonModule, GridstackItemComponent, WidgetsModule],
  selector: 'gridstack',
  template: `
  <!-- content to show when when grid is empty, like instructions on how to add widgets -->
@@ -124,6 +135,22 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
  // private readonly cd: ChangeDetectorRef,
  private readonly elementRef: ElementRef<GridCompHTMLElement>,
  ) {
+
+ // register all our dynamic components created in the grid
+ GridstackComponent.addComponentToSelectorType([
+ ComplexLineWidgetComponent,
+ DashboardWidgetComponent,
+ DonutChartWidgetComponent,
+ DualGaugesWidgetComponent,
+ GroupedBarChartWidgetComponent,
+ PatientVitalsWidgetComponent,
+ SimpleLineChartWidgetComponent,
+ TableWidgetComponent,
+ ]);
+ // set globally our method to create the right widget type
+ GridStack.addRemoveCB = gsCreateNgComponents;
+ GridStack.saveCB = gsSaveAdditionalNgInfo;
+
  this.el._gridComp = this;
  }
 
@@ -226,7 +253,12 @@ export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w:
  const selector = (w as NgGridStackWidget).type;
  const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
  if (!w.subGridOpts && type) {
- gridItem?.container?.createComponent(type);
+ let componentRef = gridItem?.container?.createComponent<DashboardWidgetComponentInterface>(type as Type<DashboardWidgetComponentInterface>);
+ let widgetConfig = (w as NgGridStackWidget)?.widgetConfig
+ if(widgetConfig){
+ componentRef.instance.widgetConfig = widgetConfig
+ }
+ // componentRef.instance.markForCheck()
  }
 
  return gridItem?.el;

frontend/src/app/models/widget/dashboard-config.ts

@@ -0,0 +1,10 @@
+import {DashboardWidgetConfig} from './dashboard-widget-config';
+
+export class DashboardConfig {
+ id: string
+ schema_version: string //increment this number when the config schema changes, not controlled by user.
+ title: string
+ description?: string
+
+ widgets: DashboardWidgetConfig[]
+}

frontend/src/app/models/widget/dashboard-widget-config.ts

@@ -1,10 +1,8 @@
 import {DashboardWidgetQuery} from './dashboard-widget-query';
 
 export class DashboardWidgetConfig {
- schema_version: number //increment this number when the config schema changes, not controlled by user.
  id: string
- item_type: "bar_chart" | "bubble_chart" | "doughnut_chart" | "line_chart" | "pie_chart" | "scatter_chart" | "calendar" | "striped_table" | "basic_table"
-
+ item_type: "complex-line-widget" | "donut-chart-widget" | "dual-gauges-widget" | "grouped-bar-chart-widget" | "patient-vitals-widget" | "simple-line-chart-widget" | "table-widget"
 
  title_text: string
  description_text: string
@@ -21,8 +19,8 @@ export class DashboardWidgetConfig {
 
 
  //used for display purposes within the Dashboard, not for the actual chart
- minWidth?: number
- minHeight?: number
+ // minWidth?: number
+ // minHeight?: number
  width: number
  height: number
  x?: number

frontend/src/app/pages/dashboard/dashboard.component.html

@@ -55,52 +55,7 @@ <h6>All Sources</h6>
  </div>
  </div>
 
- <gridstack id="gridstack" #gridComp [options]="gridOptions">
- <gridstack-item class="grid-stack-item" gs-w="8" gs-h="5" gs-x="0" gs-y="0">
- <app-complex-line-widget></app-complex-line-widget>
- </gridstack-item>
-
-
- <gridstack-item class="grid-stack-item" gs-w="2" gs-h="2" gs-x="8" gs-y="0">
- <app-simple-line-chart-widget></app-simple-line-chart-widget>
- </gridstack-item>
-
- <gridstack-item class="grid-stack-item" gs-w="2" gs-h="2" gs-x="10" gs-y="0">
- <app-simple-line-chart-widget [widgetConfig]="heightWidgetConfig"></app-simple-line-chart-widget>
- </gridstack-item>
-
- <gridstack-item class="grid-stack-item" gs-w="4" gs-h="3" gs-x="8" gs-y="2">
- <app-grouped-bar-chart-widget></app-grouped-bar-chart-widget>
- </gridstack-item>
-
- <gridstack-item class="grid-stack-item" gs-w="4" gs-h="5" gs-x="0" gs-y="5">
- <app-patient-vitals-widget></app-patient-vitals-widget>
- </gridstack-item>
-
- <gridstack-item class="grid-stack-item" gs-w="8" gs-h="5" gs-x="4" gs-y="5">
- <app-donut-chart-widget></app-donut-chart-widget>
- </gridstack-item>
-
- <gridstack-item class="grid-stack-item" gs-w="4" gs-h="2" gs-x="0" gs-y="10">
- <app-dual-gauges-widget></app-dual-gauges-widget>
- </gridstack-item>
-
- <gridstack-item class="grid-stack-item" gs-w="8" gs-h="4" gs-x="4" gs-y="10">
- <app-table-widget></app-table-widget>
- </gridstack-item>
-
-
- <gridstack-item *ngFor="let item of dashboardItems" class="grid-stack-item"
- [attr.gs-w]="item.width"
- [attr.gs-h]="item.height"
- [attr.gs-x]="item.x"
- [attr.gs-y]="item.y"
- [attr.gs-min-w]="item.minWidth"
- [attr.gs-min-h]="item.minHeight"
- >
- <app-dashboard-widget [widgetConfig]="item"></app-dashboard-widget>
- </gridstack-item>
- </gridstack>
+ <gridstack id="gridstack" #gridComp [options]="gridOptions"></gridstack>
 
 
  </div><!-- az-content-body -->

frontend/src/app/pages/dashboard/dashboard.component.ts

@@ -8,9 +8,11 @@ import {FastenApiService} from '../../services/fasten-api.service';
 import {Summary} from '../../models/fasten/summary';
 import {LighthouseService} from '../../services/lighthouse.service';
 import { GridStack, GridStackOptions, GridStackWidget } from 'gridstack';
-import { GridstackComponent } from '../../components/gridstack/gridstack.component';
+import {GridstackComponent, NgGridStackOptions} from '../../components/gridstack/gridstack.component';
 import {DashboardWidgetComponent} from '../../widgets/dashboard-widget/dashboard-widget.component';
 import {DashboardWidgetConfig} from '../../models/widget/dashboard-widget-config';
+import exampleDashboardConfig from "./example_dashboard.json";
+import {DashboardConfig} from '../../models/widget/dashboard-config';
 
 
 // unique ids sets for each item for correct ngFor updating
@@ -32,29 +34,6 @@ export class DashboardComponent implements OnInit {
 
  metadataSource: { [name: string]: MetadataSource }
 
- heightWidgetConfig: DashboardWidgetConfig = {
- description_text: '',
- height: 0,
- item_type: undefined,
- queries: [
- //https://healthedata1.github.io/IG-Sampler/Observation-example.html
- {
- q: {
- // use?: string
- select: ["valueQuantity.value as data"],
- from: "Observation",
- where: [
- "(code.coding.where(system = 'https://loinc.org' and code = '29463-7') | code.coding.where(system = 'https://loinc.org' and code = '3141-9')).exists()"
- ]
- }
- }
- ],
- schema_version: 0,
- title_text: 'Custom Height',
- width: 0,
- id: "1"
- }
-
  @ViewChild(GridstackComponent) gridComp?: GridstackComponent;
 
  constructor(
@@ -102,6 +81,17 @@ export class DashboardComponent implements OnInit {
  });
 
 
+ (exampleDashboardConfig as DashboardConfig).widgets.forEach((widgetConfig) => {
+ this.gridOptions.children.push({
+ x: widgetConfig.x,
+ y: widgetConfig.y,
+ w: widgetConfig.width,
+ h: widgetConfig.height,
+ type: widgetConfig.item_type,
+ widgetConfig: widgetConfig.item_type == "simple-line-chart-widget" ? widgetConfig : undefined,
+ })
+ })
+
  }
 
  selectSource(selectedSource: Source){
@@ -131,7 +121,8 @@ export class DashboardComponent implements OnInit {
 
  public gridEditDisabled = true;
 
- public gridOptions: GridStackOptions = {
+
+ public gridOptions: NgGridStackOptions = {
  margin: 5,
  float: false,
  minRow: 1,
@@ -141,11 +132,7 @@ export class DashboardComponent implements OnInit {
  //these 2 options can be used to enable/disable editability
  // disableDrag: true,
  // disableResize: true
- // children: [
- // // {x: 0, y: 0, minW: 2},
- // // {x: 1, y: 1},
- // // {x: 2, y: 2},
- // ],
+ children: [],
  }
 
  public toggleEditableGrid() {
@@ -156,51 +143,23 @@ export class DashboardComponent implements OnInit {
 
  }
 
- public dashboardItems: DashboardWidgetConfig[] = []
  /**
  * TEST dynamic grid operations - uses grid API directly (since we don't track structure that gets out of sync)
  */
- public add(gridComp: GridstackComponent) {
- // TODO: BUG the content doesn't appear until widget is moved around (or another created). Need to force
- // angular detection changes...
- // gridComp.grid?.addWidget({x:3, y:0, w:2, content:`item ${ids}`, id:String(ids++)});
-
- this.dashboardItems.push({x:3, y:0, width:4, height:3, id:String(ids++)} as DashboardWidgetConfig)
-
- // this.makeWidget(gridComp);
- }
- public delete(gridComp: GridstackComponent) {
- gridComp.grid?.removeWidget(gridComp.grid.engine.nodes[0]?.el!);
- }
- public modify(gridComp: GridstackComponent) {
- gridComp.grid?.update(gridComp.grid.engine.nodes[0]?.el!, {w:3})
- }
- public newLayout(gridComp: GridstackComponent) {
- this.dashboardItems = [
- {x:0, y:0, id:'1', width:4, height: 4, item_type: "calendar"}, // new size/constrain
- {x:4, y:0, id:'2', width:4, height: 4, item_type: "basic_table"},
- {x:8, y:0, id:'3', width:3, height: 3, item_type: "line_chart"}, // delete item
- {x:3, y:5, w:2, width:4, height:3}, // new item
- ] as DashboardWidgetConfig[];
- }
-
-
+ // public add(gridComp: GridstackComponent) {
+ // // TODO: BUG the content doesn't appear until widget is moved around (or another created). Need to force
+ // // angular detection changes...
+ // // gridComp.grid?.addWidget({x:3, y:0, w:2, content:`item ${ids}`, id:String(ids++)});
  //
- // getRootNodeFromParsedComponent(component: any) {
- // const componentFactory =
- // this.componentFactoryResolver.resolveComponentFactory(component);
- // let ref = this.vcRef?.createComponent(componentFactory);
+ // this.dashboardItems.push({x:3, y:0, width:4, height:3, id:String(ids++)} as DashboardWidgetConfig)
  //
- // const hostView = <EmbeddedViewRef<any>>ref?.hostView;
- // return hostView.rootNodes[0];
+ // // this.makeWidget(gridComp);
  // }
- //
- // makeWidget(gridComp: GridstackComponent) {
- // console.log('called makeWidget');
- //
- // gridComp.grid?.el.appendChild(
- // this.getRootNodeFromParsedComponent(DashboardItemComponent)
- // );
- // gridComp.grid?.makeWidget('#widget1');
+ // public delete(gridComp: GridstackComponent) {
+ // gridComp.grid?.removeWidget(gridComp.grid.engine.nodes[0]?.el!);
  // }
+ // public modify(gridComp: GridstackComponent) {
+ // gridComp.grid?.update(gridComp.grid.engine.nodes[0]?.el!, {w:3})
+ // }
+
 }