{"id":18331641,"url":"https://github.com/yagolopez/ng-dashboard","last_synced_at":"2025-04-06T03:33:20.464Z","repository":{"id":82896599,"uuid":"92763378","full_name":"YagoLopez/ng-dashboard","owner":"YagoLopez","description":":bar_chart: Dashboard for Angular (versions 4 +)","archived":false,"fork":false,"pushed_at":"2018-06-04T12:46:30.000Z","size":3388,"stargazers_count":59,"open_issues_count":1,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-21T16:12:34.453Z","etag":null,"topics":["angular","angular-component","angular-leaflet","angular2","angular4","chart","charting-library","component","dashboard","leaflet","maps"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YagoLopez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-05-29T18:01:00.000Z","updated_at":"2024-01-05T15:29:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"29aa5708-0786-4052-9523-176852089ba2","html_url":"https://github.com/YagoLopez/ng-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fng-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fng-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fng-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fng-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YagoLopez","download_url":"https://codeload.github.com/YagoLopez/ng-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430837,"owners_count":20937873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-component","angular-leaflet","angular2","angular4","chart","charting-library","component","dashboard","leaflet","maps"],"created_at":"2024-11-05T19:33:59.614Z","updated_at":"2025-04-06T03:33:19.357Z","avatar_url":"https://github.com/YagoLopez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"src/assets/img/about9.jpg\" style=\"width: 580px; height: 325px\"\u003e\u003c/p\u003e\n\n\u003ch1\u003e\u003cp align=\"center\"\u003eNG Dashboard\u003c/p\u003e\u003c/h1\u003e\n\u003cb\u003e\u003cp align=\"center\"\u003eDashboard for Angular (versions 4 +)\u003c/p\u003e\u003c/b\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cb\u003eIf you find this project useful and are going to use it, please give a star in the repo and credits to the author.\u003c/b\u003e\n\u003c/p\u003e\n\n## Features\n\n- Use of asynchrony for responsiveness and fast rendering. Data loading is executed \n  in **asynchronous** and **sequential** code blocks. This frees the main thread for rendering the user interface \n  without blocking it, and allows fast TTI (Time To Interactive)\n- Includes **MG Chart**. An Angular component based on \u003ca href=\"http://metricsgraphicsjs.org\" target=\"_blank\"\u003eMetrics Graphics JS\u003c/a\u003e\n- Includes **LMap**. An Angular Directive based on \u003ca href=\"http://leafletjs.com\" target=\"_blank\"\u003eLeaflet JS\u003c/a\u003e\n- UI was quickly assembled based on this component library: \u003ca href=\"https://github.com/YagoLopez/material-light\" target=\"_blank\"\u003eMaterial Light\u003c/a\u003e\n- ChartJS Component will be added soon. \u003ca href=\"http://www.chartjs.org/\" target=\"_blank\"\u003e(ChartJS Website)\u003c/a\u003e\n\n## Demo\n\n- \u003ca href=\"https://yagolopez.github.io/ng-dashboard/dist\" target=\"_blank\"\u003eFull Screen (For Mobile)\u003c/a\u003e\n\n- \u003ca href=\"http://mobiletest.me/htc_one_emulator/?u=https://yagolopez.github.io/ng-dashboard/dist\" target=\"_blank\"\u003eMobile Simulator (For Desktop).\u003c/a\u003e\n\u003cb style=\"color: red\"\u003e Warning:\u003c/b\u003e Content in iframes may have javascript restrictions for\nsecurity reasons (i. e. alert dialogs). Run the full screen version for unrestricted features.\n\n\n## Requirements\n\n- Latest versions of node, npm/yarn\n- Latest versions of Angular-CLI\n\n## Installation and Use\n\n- To install in a existing project generated with Angular-CLI, run: `npm install YagoLopez/ng-dashboard --save`\n- To copy and run this project: Clone or fork the repository\n- Install dependencies running `npm install`\n- \u003cb\u003eIMPORTANT\u003c/b\u003e: Adjust the `basePath` in \n  \u003ca href=\"https://github.com/YagoLopez/ng-dashboard/blob/master/src/app/ngDashboardAppMod.ts#L25\" target=\"_blank\"\u003e\n  ngDashboardAppMod.ts\u003c/a\u003e to your environment\n- Run: `ng serve` from project directory\n- Metrics Graphics Chart Component is located in `mgChart` folder.\n  - If you want to use this component, you can copy this folder to your `app` folder and import `mgChartMod` \n  in your own module or \n  - Import it directily from `/node_modules/ng-dashboard/src/app/mgChart/mgChartMod.ts`. \n  \u003cb\u003eIMPORTANT\u003c/b\u003e: `d3.js` must be in your root `/src` directory. This requirement is harcoded in `metricsgraphics.js`. \n  It doesn't depend on this project.\n- Leaflet Map Directive is located in `leafletMap` folder. If you want to use this directive:\n  - Copy this folder to your `app` folder and import `NgLMapDir` in your own component or \n  - Import it directily from `/node_modules/ng-dashboard/src/app/leafletMap/ngLMapDir.ts`.\n\n## MetricsGraphics Chart Component API\n\n```html\n\u003cmg-chart [urlData]=\"urlDataString\" [data]=\"dataArray\" [request-options]=\"requestOptionsObject\" \n  [config]=\"configObject\" [preprocess-fn]=\"preprocessFn\" [delay]=\"delayNumber\"\u003e\u003c/mg-chart\u003e\n```\n\n- There are two ways to pass data into a chart and both are mutually exclusive\n  1. \u003cb\u003e[urlData]:\u003c/b\u003e Url pointing to a local/remote json file with data (Remote data might have CORS restrictions)\n  2. \u003cb\u003e[data]:\u003c/b\u003e Array of javascript objects with X and Y coordinates, typically coming from a service.\n- \u003cb\u003e[request-options]:\u003c/b\u003e javascript object of type: \n  \u003ca href=\"https://angular.io/api/http/RequestOptions\" target=\"_blank\"\u003eRequestOptions\u003c/a\u003e Used for customized headers, etc.\n- \u003cb\u003e[config]:\u003c/b\u003e Javascript object implementing \n  \u003ca href=\"https://github.com/YagoLopez/ng-dashboard/blob/master/src/app/mgChart/mgConfigInterface.ts\" target=\"_blank\"\u003e\n  IMGConfig interface\u003c/a\u003e. It contains configuration values for MetricsGraphics charts. \n  (\u003ca href=\"https://github.com/mozilla/metrics-graphics/wiki/List-of-Options\" target=\"_blank\"\u003eFull list of MG Chart Options\u003c/a\u003e)\n- \u003cb\u003e[preprocess-Fn]:\u003c/b\u003e Applies Javascript transformations to input data (for example format dates, etc.)\n- \u003cb\u003e[delay]:\u003c/b\u003e Delay the loading of data (ms). It could be useful when having serveral charts in same page\n- To use MetricsGraphics global object in your component class: `declare var MG: any`\n\n## Leaflet Map Directive API\n\n```html\n\u003cdiv l-map [l-token]=\"tokenString\" [l-center]=\"centerTuple\" [l-zoom]=\"zoomNumber\" [l-options]=\"optionsObject\"\u003e\u003c/div\u003e\n```\n\n- \u003cb\u003e[l-token]:\u003c/b\u003e String with access token (Get a token in Leaflet website).\n- \u003cb\u003e[l-center]:\u003c/b\u003e Tuple of type `[number, number]` with the coordinates of the map center (latitude and longitude)\n- \u003cb\u003e[l-zoom]:\u003c/b\u003e Number with initial zoom\n- \u003cb\u003e[l-options]:\u003c/b\u003e (Optional) Javascript object with additional configuration options. Check \n\u003ca href=\"http://leafletjs.com/reference-1.0.3.html\" target=\"_blank\"\u003eLeaflet documentation\u003c/a\u003e \nfor more information on map options\n\n## Testing\n\n\u003cdiv\u003eTests with the colaboration of:\u003c/div\u003e\n\u003ca href=\"https://www.browserstack.com/\" target=\"_blank\"\u003e\u003cimg src=\"browserstack-logo.png\" height=\"90px\"\u003e\u003c/a\u003e\n\n\u003ca href=\"#\"\u003eBack to top\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyagolopez%2Fng-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyagolopez%2Fng-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyagolopez%2Fng-dashboard/lists"}