https://github.com/yagolopez/ng-dashboard

:bar_chart: Dashboard for Angular (versions 4 +)
https://github.com/yagolopez/ng-dashboard

angular angular-component angular-leaflet angular2 angular4 chart charting-library component dashboard leaflet maps

Last synced: 9 days ago
JSON representation

:bar_chart: Dashboard for Angular (versions 4 +)

• Host: GitHub
• URL: https://github.com/yagolopez/ng-dashboard
• Owner: YagoLopez
• License: mit
• Created: 2017-05-29T18:01:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-04T12:46:30.000Z (over 6 years ago)
• Last Synced: 2024-05-01T11:29:33.739Z (7 months ago)
• Topics: angular, angular-component, angular-leaflet, angular2, angular4, chart, charting-library, component, dashboard, leaflet, maps
• Language: TypeScript
• Homepage:
• Size: 3.23 MB
• Stars: 59
• Watchers: 4
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        


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

```html

```

- 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

```html



```


- [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