ng-adf v0.0.1
Angular 4 plus Dashboard Framework
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 4+ based dashboard framework that is inspired by JIRA's dashboard implementation and https://github.com/angular-dashboard-framework/angular-dashboard-framework
The primary projects leveraged:
- angular 4 plus - 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
- angular material
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
Sample Board 1
Sample Board 2
Add Gadget
Add Board/Drag and Drop
Facet Filter
NgADF
This project was generated with Angular CLI version 1.3.0.
Setup
Clone this repository then run npm install
Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.
Build
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Running unit tests
Run ng test to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.