ngx-dashboard designer


$3

$3

$3

Install

npm install ngx-dashboard-designer --save

To add library using schematics
ng add ngx-dashboard-designer -- specify version if required (eg: ng add ngx-dashboard-designer@2.0.14)

To add example module in your project using schematics
ng g ngx-dashboard-designer:ngx-dashboard-component --name dashboard -- 'dashboard' is the name of the new module

npm install ngx-dashboard-designer --save

create new widget application and add module federation
ng add @angular-architects/module-federation

Should work out of the box with webpack, respectively angular-cli.

``javascript
import { NgxDashboardDesignerModule } from 'ngx-dashboard-designer';

const dashboardConfig: DashboardModuleConfigModel = {
baseAssetsPath: 'assets/dashboard-designer/',
fontBaseUrl: 'assets/dashboard-designer/',
isDynamicFontLoading: false,
isRemoteUrlLangEnabled: false
};

@NgModule({
imports: [ NgxDashboardDesignerModule.forRoot(dashboardConfig) ],
...
})
`

Browser support

What Angular supports here

How to use dashboard designer

$3

`html
Save Layout


`

Initialize a simple dashboard:

`typescript
@ViewChild(NgxDashboardDesigner) ngxDashboardDesigner: NgxDashboardDesigner;
widgetOptions: IDashboardWidgetOption = {
mfeWidgetTypes: [
{
isMfeWidget: true,
displayName: 'Bar Chart',
icon: 'bar-chart',
description: 'Bar Chart',
//'http://127.0.0.1:5555/dashboard-widgets/remoteEntry.js',
// hostUrl: 'http://localhost:5203/remoteEntry.js',
hostUrl:
'https://linoymalakkaran.github.io/ngx-dashboard-designer-demo/widgetsv13/remoteEntry.js',
componentName: 'BarchartWidgetComponent',
type: 'module',
exposedModule: './BarChartWidget'
}
]
};

constructor(private dashboardService: DashboardService) {}

saveLayout() {
const layout = this.ngxDashboardDesigner.getDashboardData;
this.dashboardService.layoutData = layout;
alert(
'Saved successfully, please click on viewer link to see the preview.'
);
console.log(layout);
}
`

$3

`html
[dashboardLayout]="dashboardLayout"
[lang]="'en'"
>
`

Initialize a simple dashboard:

`typescript
dashboardLayout: IGridLayOutInstance;

constructor() {}

ngOnInit(): void {
this.dashboardLayout = layoutData;
}

export const layoutData: GridLayOutInstance = {
options: {
gridType: 'fit',
compactType: 'none',
margin: 10,
outerMargin: true,
outerMarginTop: null,
outerMarginRight: null,
outerMarginBottom: null,
outerMarginLeft: null,
useTransformPositioning: true,
mobileBreakpoint: 640,
useBodyForBreakpoint: false,
minCols: 1,
maxCols: 100,
minRows: 1,
maxRows: 100,
maxItemCols: 100,
minItemCols: 1,
maxItemRows: 100,
minItemRows: 1,
maxItemArea: 2500,
minItemArea: 1,
defaultItemCols: 1,
defaultItemRows: 1,
fixedColWidth: 105,
fixedRowHeight: 105,
keepFixedHeightInMobile: false,
keepFixedWidthInMobile: false,
scrollSensitivity: 10,
scrollSpeed: 20,
enableEmptyCellClick: false,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: false,
enableOccupiedCellDrop: false,
emptyCellDragMaxCols: 50,
emptyCellDragMaxRows: 50,
ignoreMarginInRow: false,
draggable: {
enabled: true
},
resizable: {
enabled: true
},
swap: false,
pushItems: true,
disablePushOnDrag: false,
disablePushOnResize: false,
pushDirections: {
north: true,
east: true,
south: true,
west: true
},
pushResizeItems: false,
displayGrid: 'always',
disableWindowResize: false,
disableWarnings: false,
scrollToNewItems: false,
api: {}
},
layoutName: 'Layout8',
layoutDescription: '',
layoutId: 'Layout8',
properties: {},
dashboardItems: [
{
x: 0,
y: 0,
cols: 3,
rows: 1,
hasContent: true,
widgetOption: {
isMfeWidget: true,
displayName: 'Bar Chart',
icon: 'bar-chart',
description: 'Bar Chart',
hostUrl:
'https://linoymalakkaran.github.io/ngx-dashboard-designer-demo/widgetsv13/remoteEntry.js',
componentName: 'BarchartWidgetComponent',
type: 'module',
exposedModule: './BarChartWidget'
}
},
{
x: 0,
y: 1,
cols: 1,
rows: 2,
hasContent: true,
widgetOption: {
isMfeWidget: true,
displayName: 'Bar Chart',
icon: 'bar-chart',
description: 'Bar Chart',
hostUrl:
'https://linoymalakkaran.github.io/ngx-dashboard-designer-demo/widgetsv13/remoteEntry.js',
componentName: 'BarchartWidgetComponent',
type: 'module',
exposedModule: './BarChartWidget'
}
},
{
x: 1,
y: 1,
cols: 1,
rows: 2,
hasContent: true
},
{
x: 2,
y: 1,
cols: 1,
rows: 2,
hasContent: true
}
]
};

``

##### Note: The dashboard designer will take all the available space from the parent. It will not size depending on content. The parent of the component needs to have a size.

$3

you can interact dashboard with drag and drop.

$3

$3

The MIT License

Copyright (c) 2022 Linoy Pappachan Malakkaran

Commit format for contributers (husky)

eg: type: your commit message

- type must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]