<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular2 playground</title>
<base href>
</head>
<body>
<dashboard>Loading...</dashboard>
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script src="config.js"></script>
<!-- Angular2 import -->
<script src="https://code.angularjs.org/2.0.0-alpha.37/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.37/router.dev.js"></script>
<script src="http://code.angularjs.org/2.0.0-alpha.37/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdn.rawgit.com/pablomolnar/radial-progress-chart/master/dist/radial-progress-chart.min.js"></script>
<script>
//bootstrap the Angular2 application
System.import('app').catch(console.log.bind(console));
</script>
</body>
</html>
import {
Component,
View,
bootstrap,
Directive,
LifecycleEvent,
Injectable,
Inject,
ElementRef,
CORE_DIRECTIVES
} from 'angular2/angular2';
import {RouteConfig, ROUTER_BINDINGS, ROUTER_DIRECTIVES, Router} from 'angular2/router'
import 'rx';
import 'rxlite';
@Directive({
selector: 'radial-chart',
properties: ['data'],
})
export class RadialChart {
data: number
progress: any;
constructor(@Inject(ElementRef)private elementRef: ElementRef) {
var el: any = elementRef.nativeElement;
this.progress = new RadialProgressChart(el, { series: [0], center: function(p) { return p + '%' }});
}
onChanges(changes){
if (!this.data) return;
console.log("onChange %s", changes, this.data)
this.progress.update(this.data);
}
onInit(){
console.log("init")
}
onDestroy(){
console.log("destroy")
var el = this.elementRef.nativeElement;
el.removeChild(el.querySelector("svg"))
}
}
@Component({
selector: 'analysis'
})
@View({
directives: [RadialChart],
template: `<radial-chart bind-data=graphData></radial-chart>`
})
export class Analysis {
graphData:number;
constructor() {
Rx.Observable.interval(1000).
map((x) => x).
subscribe((x) => {
this.graphData = x; console.log(x);
})
}
}
@Component({
selector: 'home'
})
@View({
directives: [
CORE_DIRECTIVES,
ROUTER_DIRECTIVES],
template: `Home`
})
export class Home {
}
@Component({
selector: 'dashboard'
})
@View({
directives: [
CORE_DIRECTIVES,
ROUTER_DIRECTIVES],
template: `<nav>
<a [router-link]="['/analysis']">Analyse</a>
<a [router-link]="['/home']" >home</a>
<nav/>
<router-outlet></router-outlet>`
})
@RouteConfig([
{ path: '/', redirectTo: '/home' },
{ path: '/home', as: 'home', component: Home },
{ path: '/analysis', as: 'analysis', component: Analysis },
])
export class Dashboard {
constructor( private router: Router){
router.navigate('/analysis');
}
}
}
bootstrap(Dashboard,[ROUTER_BINDINGS]);
System.config({
defaultJSExtensions: true,
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
typescript: 'https://cdn.rawgit.com/robwormald/9883afae87bffa2f4e00/raw/8bca570a696c47a4f8dd03a52c98734676e94cea/typescript.js',
'rx' : 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.all.min.js',
'rxlite' : 'https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.lite.compat.min.js',
'radial-progress-chart': 'https://raw.githubusercontent.com/pablomolnar/radial-progress-chart/master/dist/radial-progress-chart.min.js',
'd3':'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js',
},
paths: {
app: 'src'
},
packages: {
app: {
main: 'app.ts',
defaultExtension: 'ts',
}
}
});