Nonchalant Programming Master

    ak-dashboard
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Dashboard Builder

    Dashboard component to build angular UI interface.

    Getting started

    Import DashboardModule with components libraries

    import { DashboardModule } from 'ak-dashboard';
    
    imports: [
    	DashboardModule.forRoot({
          navigationRegister: new NavigationRegister(),
          collapseRegister: new CollapseRegister(),
          widgetRegisters: new WidgetRegisters(),
        }),
    ]

    Widget register example

    import { WidgetRegister } from './widget-register';
    import { Register, Widget } from 'ak-dashboard';
    
    export class WidgetRegisters extends Map<string, Register<Widget>> {
      constructor() {
        super();
        this.set('my_first_key', new WidgetRegister());
      }
    }
    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 main component

    <!-- component.html -->
    
    <ak-dashboard #dashboard [nodes]="nodes" ($event)="onEvent($event)" [options]="options"></ak-dashboard>
    // component.ts
    
    import { DashboardComponent, DashboardOptions, UINode } from 'ak-dashboard';
    
    @ViewChild('dashboard', { static: false }) dashboard: DashboardComponent;
    
    options: DashboardOptions = {
        activeWidgetParam: 'focusedWidget', // Optional
        navsParam: 'tabs', // Optional
        data: {...} // Optional custom data
        fieldOptions: { // 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, then... 
            this.dashboard.updateNode(updatedNode);// ...save changes
            break;
          }
          case EventType.DELETE: {
            // Show confirmation dialog then...
            this.dashboard.deleteNode(node); // ...delete node or not
            break;
          }
          case EventType.DROP: {
            // Do something...
            break;
          }
            etc....
        }
    }

    Install

    npm i ak-dashboard

    DownloadsWeekly Downloads

    32

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    1.17 MB

    Total Files

    131

    Last publish

    Collaborators

    • andykamga