Skip to content

feat(dashboards-ng): support widgets as standalone component #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(dashboards-ng): support widgets as standalone component #1036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions projects/dashboards-demo/src/app/widgets/charts/charts-widget.module.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion projects/dashboards-demo/src/app/widgets/charts/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* SPDX-License-Identifier: MIT
*/
export * from './cartesian/cartesian.component';
export * from './charts-widget.module';
export * from './circle/circle.component';
export * from './gauge/gauge.component';
export * from './list-widget.component';
Expand Down
25 changes: 9 additions & 16 deletions projects/dashboards-demo/src/app/widgets/charts/widget-descriptors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/
import { Widget } from '@siemens/dashboards-ng';

const loaderFunction = (name: string): Promise<any> => {
const loaderFunction = async (name: string): Promise<any> => {
if (
name === 'CircleComponent' ||
name === 'CartesianComponent' ||
Expand All @@ -14,7 +14,7 @@ const loaderFunction = (name: string): Promise<any> => {
name === 'ListWidgetComponent' ||
name === 'TimelineWidgetComponent'
) {
return import('../../widgets/charts/index');
return import('../../widgets/charts/index').then(m => m[name as keyof typeof m]);
} else {
throw new Error(`Unknown component to be loaded ${name}`);
}
Expand All @@ -29,8 +29,7 @@ export const LINE_CHART_DESC: Widget = {
iconClass: 'element-trend',
componentFactory: {
componentName: 'CartesianComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 6,
Expand All @@ -54,8 +53,7 @@ export const BAR_CHART_DESC: Widget = {
iconClass: 'element-trend',
componentFactory: {
componentName: 'CartesianComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 12,
Expand All @@ -79,8 +77,7 @@ export const CIRCLE_CHART_DESC: Widget = {
iconClass: 'element-trend',
componentFactory: {
componentName: 'CircleComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand All @@ -106,8 +103,7 @@ export const GAUGE_CHART_DESC: Widget = {
iconClass: 'element-trend',
componentFactory: {
componentName: 'GaugeComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand All @@ -132,8 +128,7 @@ export const VALUE_WIDGET: Widget = {
componentFactory: {
componentName: 'ValueWidgetComponent',
editorComponentName: 'ValueWidgetEditorComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand All @@ -158,8 +153,7 @@ export const LIST_WIDGET: Widget = {
iconClass: 'element-trend',
componentFactory: {
componentName: 'ListWidgetComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand All @@ -175,8 +169,7 @@ export const TIMELINE_WIDGET: Widget = {
iconClass: 'element-trend',
componentFactory: {
componentName: 'TimelineWidgetComponent',
moduleName: 'ChartsWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand Down
7 changes: 3 additions & 4 deletions projects/dashboards-demo/src/app/widgets/contact-widget/contact-descriptors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
*/
import { Widget } from '@siemens/dashboards-ng';

const loaderFunction = (name: string): Promise<any> => {
const loaderFunction = async (name: string): Promise<any> => {
if (name === 'ContactWidgetComponent' || name === 'ContactWidgetEditorComponent') {
return import('./index');
return import('./index').then(m => m[name as keyof typeof m]);
} else {
throw new Error(`Unknown component to be loaded ${name}`);
}
Expand All @@ -20,8 +20,7 @@ export const WIZARD_WIDGET_DESCRIPTOR: Widget = {
componentFactory: {
componentName: 'ContactWidgetComponent',
editorComponentName: 'ContactWidgetEditorComponent',
moduleName: 'ContactWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand Down
22 changes: 0 additions & 22 deletions projects/dashboards-demo/src/app/widgets/contact-widget/contact-widget.module.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion projects/dashboards-demo/src/app/widgets/contact-widget/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,3 @@
*/
export * from './contact-widget.component';
export * from './contact-widget-editor.component';
export * from './contact-widget.module';
16 changes: 0 additions & 16 deletions projects/dashboards-demo/src/app/widgets/hello-widget/hello-widget.module.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion projects/dashboards-demo/src/app/widgets/hello-widget/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,3 @@
*/
export * from './hello-widget.component';
export * from './hello-widget-editor.component';
export * from './hello-widget.module';
7 changes: 3 additions & 4 deletions projects/dashboards-demo/src/app/widgets/hello-widget/widget-descriptors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
*/
import { Widget } from '@siemens/dashboards-ng';

const loaderFunction = (name: string): Promise<any> => {
const loaderFunction = async (name: string): Promise<any> => {
if (name === 'HelloWidgetComponent' || name === 'HelloWidgetEditorComponent') {
return import('../../widgets/hello-widget/index');
return import('./index').then(m => m[name as keyof typeof m]);
} else {
throw new Error(`Unknown component to be loaded ${name}`);
}
Expand All @@ -21,8 +21,7 @@ export const HELLO_DESCRIPTOR: Widget = {
componentName: 'HelloWidgetComponent',
editorComponentName: 'HelloWidgetEditorComponent',
editorModalClass: 'modal-sm',
moduleName: 'HelloWidgetModule',
moduleLoader: loaderFunction
componentLoader: loaderFunction
},
defaults: {
width: 4,
Expand Down
12 changes: 6 additions & 6 deletions projects/dashboards-ng/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ npm install --save @siemens/dashboards-ng gridstack

### Add libraries to your project

The library supports standalone components and modules. However, the widgets when not using web components
or module federation still need a module definition.
The library supports standalone components and modules.

### Standalone

Expand Down Expand Up @@ -165,13 +164,14 @@ TranslateModule.forRoot({
### Widget development

You can develop your own widgets that are managed by the dashboard. One or multiple widgets
have to be provided by an Angular module and described by a `Widget` object, that includes
have to be provided by an Angular module or as standalone and described by a `Widget` object, that includes
the meta information and the Angular widget instance component and editor names that are
used to instantiate the widget at runtime.

The widget instance component has to implement the `WidgetInstance` interface and the
editor has to implement the `WidgetInstanceEditor` interface. You have to provide a
module loader function that is used to load the widget when needed.
The widget instance component must implement the `WidgetInstance` interface and the
editor must implement the `WidgetInstanceEditor` interface. You must provide either
a module loader function with module name or a component loader function for standalone components
that is used to load the widget when needed.

The library ships with a [hello-widget](./src/app/widgets/hello-widget/) example for illustration.

Expand Down
Loading
Loading