@sgits/dynamic-dashboards
v1.0.6
Published
## Installation
Downloads
13
Readme
dynamic-dashboards
Installation
To install this library, run:
$npm install @sgits/dynamic-dashboards --save
Consuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
$npm install @sgits/dynamic-dashboards
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { DynamicDashboardsModule } from '@sgits/dynamic-dashboards';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
DynamicDashboardsModule.forRoot('http://www.my.api/')
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once your library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use your library component in app.component.html -->
<h1>
{{title}}
</h1>
<dynamic-dashboards></dynamic-dashboards>
Alternativly you can route directly to the required components:
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
data: { roles: [], url: '/login', title: 'Login', icon: 'exit_to_app', show: false, seq: 0 }
},
{
path: '',
component: MainComponent,
canActivate: [RouteGuard],
children: [
{
path: '',
component: DynamicDashboardsContainerComponent,
canActivate: [RouteGuard],
data: { roles: [], url: '/', title: 'Dashboards', icon: 'widgets', show: true, seq: 1 }
},
{
path: 'widget-detail',
component: DynamicWidgetDetailComponent,
canActivate: [RouteGuard],
data: { roles: [], url: '', title: 'Widget Detail', icon: '', show: false, seq: 0 }
}
]
},
{
path: '**',
component: PageNotFoundComponent
}
];
Configure amcharts3-angular
This module requires the angular amcharts npm package to be installed and configured as per:
https://github.com/amcharts/amcharts3-angular2
Add amcharts to your index.html
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/gauge.js"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/dark.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/tools/polarScatter/polarScatter.min.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap_amcharts_extension.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/continentsLow.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
License
Supergroup © Martin Klasen