ak-dashboard

Dashboard Builder

Dashboard component to build angular UI interface.

Getting started

Import DashboardModule

import { DashboardModule } from 'ak-dashboard';

imports: [DashboardModule]

Widget register example

import { DefaultWidgetComponent } from './default-widget/default-widget.component';
import { Widget, Register } from 'ak-dashboard';

export class WidgetRegister extends Register<Widget> {
  constructor() {
    super("MY_DEFAULT_KEY_WIDGET");
    this.add(
      new Widget(
        this.defaultComponentKey,
        'Default widget',
        'default-widget',
        DefaultWidgetComponent
      )
    );
  }
}

import { WidgetComponent, CollapseComponent, NavigationComponent } from 'ak-dashboard';

@Component({
  selector: 'ak-default-widget',
  templateUrl: './default-widget.component.html',
  styleUrls: ['./default-widget.component.scss'],
})
export class DefaultWidgetComponent extends WidgetComponent<any> {
}

Use in app component

<!-- component.html -->

<ak-dashboard #dashboard [nodes]="nodes" ($event)="onEvent($event)" [config]="config"></ak-dashboard>

// component.ts

import { DashboardComponent, DashboardConfig, UINode } from 'ak-dashboard';

@ViewChild('dashboard', { static: false }) dashboard: DashboardComponent;

config: DashboardConfig = {
    registers: new Registers({
      navigationRegister: new NavigationRegister(),
      collapseRegister: new CollapseRegister(),
      widgetRegister: new WidgetRegister(),
    }),
    activeWidgetParam: 'focusedWidget', // Optional
    navsParam: 'tabs', // Optional
    data: {...} // Optional custom data
    fieldConfig: { // To map custom UINode model -> use dot to select nested field
      componentKey: 'field.nestedField', // Optional
      name: 'myCustomUINodeNameField', // Optional
      icon: 'myCustomIconField', // Optional
    },
};

ngAfterViewInit(): void {
    // Example methods
	this.dashboard.enableEditMode(); 
 	this.dashboard.toggleDashedGrid();
	this.dashboard.disableEditMode();
	this.dashboard.getRegisteredNodes();
}

onEvent($event): void {
    switch ($event.eventType) {
      case EventType.SELECT: {
        const updatedNode = $event.node 
        // Do something on node... 
        this.dashboard.updateNode(updatedNode);// ...save changes
        break;
      }
      case EventType.DELETE: {
        // Do something... 
        this.dashboard.deleteNode(node); // ...delete node or not
        break;
      }
      case EventType.DROP: {
        // Do something...
        break;
      }
        etc....
    }
}