<!DOCTYPE html>
<html>
<head>
<title>NGX Charts</title>
<link rel="stylesheet" href="style.css" />
<base href="" />
<script src="https://npmcdn.com/zone.js@0.8.5/dist/zone.js"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
<script src="https://npmcdn.com/typescript@2.1.1/lib/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
body{
font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
text-align: center;
font-style: normal;
font-weight: 300;
font-size: 1.4rem;
line-height: 2rem;
letter-spacing: 0.01rem;
color: #212121;
background-color: #f5f5f5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
margin:20px
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src",
'@angular/core': 'https://npmcdn.com/@angular/core@4.0.1/bundles/core.umd.js',
'@angular/compiler': 'https://npmcdn.com/@angular/compiler@4.0.1/bundles/compiler.umd.js',
'@angular/common': 'https://npmcdn.com/@angular/common@4.0.1/bundles/common.umd.js',
'@angular/animations/browser': "https://npmcdn.com/@angular/animations@4.0.1/bundles/animations-browser.umd.js",
'@angular/animations': "https://npmcdn.com/@angular/animations@4.0.1/bundles/animations.umd.js",
'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic@4.0.1/bundles/platform-browser-dynamic.umd.js',
'@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser@4.0.1/bundles/platform-browser.umd.js',
'@angular/platform-browser-animations': 'https://npmcdn.com/@angular/platform-browser@4.0.1/bundles/platform-browser-animations.umd.js',
'@angular/forms': 'https://npmcdn.com/@angular/forms@4.0.1/bundles/forms.umd.js',
'@angular/router': 'https://npmcdn.com/@angular/router@4.0.1/bundles/router.umd.js',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0',
'moment': 'https://npmcdn.com/moment',
'd3-array': 'https://npmcdn.com/d3-array',
'd3-brush': 'https://npmcdn.com/d3-brush',
'd3-shape': 'https://npmcdn.com/d3-shape',
'd3-selection': 'https://npmcdn.com/d3-selection',
'd3-color': 'https://npmcdn.com/d3-color',
'd3-drag': 'https://npmcdn.com/d3-drag',
'd3-transition': 'https://npmcdn.com/d3-transition',
'd3-format': 'https://npmcdn.com/d3-format',
'd3-force': 'https://npmcdn.com/d3-force',
'd3-dispatch': 'https://npmcdn.com/d3-dispatch',
'd3-path': 'https://npmcdn.com/d3-path',
'd3-ease': 'https://npmcdn.com/d3-ease',
'd3-timer': 'https://npmcdn.com/d3-timer',
'd3-quadtree': 'https://npmcdn.com/d3-quadtree',
'd3-interpolate': 'https://npmcdn.com/d3-interpolate',
'd3-scale': 'https://npmcdn.com/d3-scale',
'd3-time': 'https://npmcdn.com/d3-time',
'd3-collection': 'https://npmcdn.com/d3-collection',
'd3-time-format': 'https://npmcdn.com/d3-time-format',
'd3-hierarchy': 'https://npmcdn.com/d3-hierarchy',
'@swimlane/ngx-charts': 'https://npmcdn.com/@swimlane/ngx-charts@7'
},
//packages defines our app package
packages: {
app: {
main: './bootstrap.ts',
defaultExtension: 'ts'
},
'rxjs': {
main: './bundles/Rx.js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser-animations';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {multi} from '../data.ts';
@Component({
selector: 'my-app',
template: `
<ngx-charts-heat-map
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[legend]="showLegend"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-heat-map>
`
})
export class App {
single: any[];
multi: any[];
view: any[] = [700, 400];
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
constructor() {
Object.assign(this, {multi})
}
onSelect(event) {
console.log(event);
}
}
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, NgxChartsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
export var single = [
{
"name": "Germany",
"value": 8940000
},
{
"name": "USA",
"value": 5000000
},
{
"name": "France",
"value": 7200000
}
];
export var multi = [
{
"name": "Germany",
"series": [
{
"name": "2010",
"value": 7300000
},
{
"name": "2011",
"value": 8940000
}
]
},
{
"name": "USA",
"series": [
{
"name": "2010",
"value": 7870000
},
{
"name": "2011",
"value": 8270000
}
]
},
{
"name": "France",
"series": [
{
"name": "2010",
"value": 5000002
},
{
"name": "2011",
"value": 5800000
}
]
}
];