- Notifications
You must be signed in to change notification settings - Fork94
This is a JSON driven angular x based dashboard framework that is inspired by JIRA's dashboard implementation andhttps://github.com/raulgomis/angular-dashboard-framework
License
catalogicsoftware/ngx-dynamic-dashboard-framework
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The following JSON document describes a single board along with its layout, gadgets and their properites.
{"board": [ {"title":"Board Sample 1","structure":"3-6-3","id":9,"boardInstanceId":1,"rows": [ {"columns": [ {"styleClass":"three wide","gadgets": [ {"componentType":"NewsGadgetComponent","name":"News","description":"What's new","icon":"images/news.png","instanceId":1500253814523,"tags": [ {"facet":"Informational","name":"news" }, {"facet":"List","name":"news" } ],"config": {"propertyPages": [ {"displayName":"Run","groupId":"run","position":10,"properties": [ {"value":"news","key":"endpoint","label":"News URL","required":false,"order":3,"controlType":"dynamicdropdown" }, {"value":"News","key":"title","label":"Title","required":false,"order":1,"controlType":"textbox" }, {"value":2,"key":"instanceId","required":false,"order":-1,"controlType":"hidden" } ] } ] } } ] }, {"styleClass":"six wide","gadgets": [ {"componentType":"CPUGadgetComponent","name":"CPU Chart","description":"Monitors CPU utilization for application.","icon":"images/cpu.png","instanceId":1499912922910,"tags": [ {"facet":"Performance","name":"real-time" }, {"facet":"Chart","name":"bar" } ],"config": {"propertyPages": [ {"displayName":"Run","groupId":"run","position":10,"properties": [ {"value":"CPU Utilization","key":"title","label":"Title","required":false,"order":1,"controlType":"textbox" }, {"value":"Carlosappliance - Process Monitor","key":"endpoint","label":"API Endpoints","required":false,"order":3,"controlType":"dynamicdropdown" }, {"value":999,"key":"instanceId","required":false,"order":-1,"controlType":"hidden" } ] }, {"displayName":"Chart","groupId":"chart","position":11,"properties": [ {"value":true,"key":"chart_properties","label":"Show chart details","required":false,"order":3,"controlType":"checkbox" } ] } ] } }, {"componentType":"TrendGadgetComponent","name":"Trend","description":"General trends.","icon":"images/trend.png","instanceId":1499912901569,"tags": [ {"facet":"Performance","name":"trend" }, {"facet":"Chart","name":"area" } ],"config": {"propertyPages": [ {"displayName":"Run","groupId":"run","position":10,"properties": [ {"value":"Devappliance","key":"endpoint","label":"API Endpoints","required":false,"order":2,"controlType":"dynamicdropdown" }, {"value":"Trend","key":"title","label":"Title","required":false,"order":1,"controlType":"textbox" }, {"value":2,"key":"instanceId","required":false,"order":-1,"controlType":"hidden" } ] }, {"displayName":"Chart","groupId":"chart","position":11,"properties": [ {"value":true,"key":"chart_properties","label":"Show chart details","required":false,"order":3,"controlType":"checkbox" } ] } ] } } ] }, {"styleClass":"three wide","gadgets": [] } ] } ] } ]}
Note: This project is under heavy construction and is not intended for general production use yet. As such, we are not accepting bugs at the moment and documentation is quite lacking.
This is an angular (ngx) based dashboard framework that is inspired by JIRA's dashboard implementation andhttps://github.com/angular-dashboard-framework/angular-dashboard-framework
The primary projects leveraged:
- Angular -https://angularjs.org/
- ngx-charts (angular based d3 charts) -https://github.com/swimlane/ngx-charts
- Semantic-UI -https://semantic-ui.com/
- ng2-dnd drag and drop -https://github.com/akserg/ng2-dnd
- AI Natural Language Processing - The board includes two options for AI, Wit.Ai and IBM Watson.
- Wit.ai - Natural Language Processing site has been integrated via JSONP
- IBM Watson - IBM Watson does not support JSONP so the code relies on a backend implementation of the IBM Watson SDK.I offer sample backend code based on Spring Boot within the comments of the Runtime Service
Features:
- Leverages Angular's dynamic data driven forms approach for gadget property pages and properties -https://angular.io/guide/dynamic-form
- Dynamic component strategy for creating gadget instances during runtime -https://angular.io/guide/dynamic-component-loader
- Faceted gadget search approach leveraging tags
- Support multiple board creation
- Drag and Drop support
- Multiple Data Source/Endpoint management
- Web Socket support
- Completely customizable and configurable
The code includes a very simple Todo gadget that can be used as an example for getting started developing your own gadget. The following steps uses that Todo Gadget as a reference. You focus on defining the gadget and the rest of the framework will deal with making it available to the Add Gadget Modal, drag and drop, instance creation, tracking, persistence and cleanup, etc.
- Todo Componenttodo-gadget.component.ts
- Todo Viewview.html
- Todo Serviceservice.ts
- Sample mock service datatodo-model.json
The model is used to dynamically create and render the gadget and its property page forms. This model is an entry into a model array used for all gadgets. You will simply add an entry to the model's array. See the Todo entry.Add an entry for the gadget in the library model arraygadget-library-model.json
Add an entry for your gadget in the factory gadget classgadget-factory.ts
Define an image/icon for your gadgettodo.png
- Import the gadget's component into the board moduleboard.module.ts
- Import the gadget's service into the grid modulegrid.module.ts
- Import the gadget's component and service into the gadget modulegadget.module.ts
This project was generated withAngular CLI version 7.x.
Clone this repository then runnpm install
Runng serve for a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files.
Runng build to build the project. The build artifacts will be stored in thedist/ directory. Use the--aot --prod flag for ahead of time compilation and production mode.
The title of that issue suggests an issue with AOT but in my testing--prod seems to be the problem.
Runng test to execute the unit tests viaKarma.
Runng e2e to execute the end-to-end tests viaProtractor.Before running the tests make sure you are serving the app viang serve.
This project uses the compodoc project :https://github.com/compodoc/compodoc
Runnpm install -g @compodoc/compodoc to install compodoc globallyRuncompodoc -p tsconfig.json -n 'NGX Dynamic Dashboard Framework' to generate the documentation. It will be placed in the documentation folderRuncompodoc -s to serve up the documentation site athttp://localhost:8080
There is an accompanying java based backend project that serves up some of the endpoints used by the board.
https://github.com/catalogicsoftware/ngx-dynamic-dashboard-framework-microservice
It is a maven based project so you will need to do the following:
- Install and configure Maven.
- Copy the dist directory produced from this project's build into the
staticfolder of the microservice project. - Build the microservice project using
<directory path to maven bin folder>/mvn installfrom within the project's root directory. - Launch the microservice over the default port:
http://localhost:8080usingjava -jar <path to the microservice root folder>/target/ngxdd-x.y.z.jar
To get more help on the Angular CLI useng help or go check out theAngular CLI README.
About
This is a JSON driven angular x based dashboard framework that is inspired by JIRA's dashboard implementation andhttps://github.com/raulgomis/angular-dashboard-framework
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.