NG Dashboard

Dashboard for Angular (versions 4 +)

If you find this project useful and are going to use it, please give a star in the repo and credits to the author.

Features

• Use of asynchrony for responsiveness and fast rendering. Data loading is executed in asynchronous and sequential code blocks. This frees the main thread for rendering the user interface without blocking it, and allows fast TTI (Time To Interactive)
• Includes MG Chart. An Angular component based on Metrics Graphics JS
• Includes LMap. An Angular Directive based on Leaflet JS
• UI was quickly assembled based on this component library: Material Light
• ChartJS Component will be added soon. (ChartJS Website)

Demo

• Full Screen (For Mobile)

• Mobile Simulator (For Desktop). Warning: Content in iframes may have javascript restrictions for security reasons (i. e. alert dialogs). Run the full screen version for unrestricted features.

Requirements

• Latest versions of node, npm/yarn
• Latest versions of Angular-CLI

Installation and Use

• To install in a existing project generated with Angular-CLI, run: npm install YagoLopez/ng-dashboard --save
• To copy and run this project: Clone or fork the repository
• Install dependencies running npm install
• IMPORTANT: Adjust the basePath in ngDashboardAppMod.ts to your environment
• Run: ng serve from project directory
• Metrics Graphics Chart Component is located in mgChart folder.
  • If you want to use this component, you can copy this folder to your app folder and import mgChartMod in your own module or
  • Import it directily from /node_modules/ng-dashboard/src/app/mgChart/mgChartMod.ts. IMPORTANT: d3.js must be in your root /src directory. This requirement is harcoded in metricsgraphics.js. It doesn't depend on this project.
• Leaflet Map Directive is located in leafletMap folder. If you want to use this directive:
  • Copy this folder to your app folder and import NgLMapDir in your own component or
  • Import it directily from /node_modules/ng-dashboard/src/app/leafletMap/ngLMapDir.ts.

MetricsGraphics Chart Component API

<mg-chart [urlData]="urlDataString" [data]="dataArray" [request-options]="requestOptionsObject" 
  [config]="configObject" [preprocess-fn]="preprocessFn" [delay]="delayNumber"></mg-chart>

• There are two ways to pass data into a chart and both are mutually exclusive
  1. [urlData]: Url pointing to a local/remote json file with data (Remote data might have CORS restrictions)
  2. [data]: Array of javascript objects with X and Y coordinates, typically coming from a service.
• [request-options]: javascript object of type: RequestOptions Used for customized headers, etc.
• [config]: Javascript object implementing IMGConfig interface. It contains configuration values for MetricsGraphics charts. (Full list of MG Chart Options)
• [preprocess-Fn]: Applies Javascript transformations to input data (for example format dates, etc.)
• [delay]: Delay the loading of data (ms). It could be useful when having serveral charts in same page
• To use MetricsGraphics global object in your component class: declare var MG: any

Leaflet Map Directive API

<div l-map [l-token]="tokenString" [l-center]="centerTuple" [l-zoom]="zoomNumber" [l-options]="optionsObject"></div>

• [l-token]: String with access token (Get a token in Leaflet website).
• [l-center]: Tuple of type [number, number] with the coordinates of the map center (latitude and longitude)
• [l-zoom]: Number with initial zoom
• [l-options]: (Optional) Javascript object with additional configuration options. Check Leaflet documentation for more information on map options

Testing

Tests with the colaboration of:

Back to top