Commit 34a323cb authored by boncho vylkov's avatar boncho vylkov

add d3 node module with example

parent 29c03843
<div class="row">
<div class="row">
<div class="col-lg-12">
<nvd3 [options]="options" [data]="data"></nvd3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>ASP.NET Core</h2>
<ul>
......
import { Component } from '@angular/core';
import { NvD3Component } from "ng2-nvd3";
@Component({
moduleId: module.id,
......@@ -6,4 +7,58 @@
templateUrl: 'home.component.html'
})
export class HomeComponent { }
export class HomeComponent {
options: any;
data: any;
constructor() {
this.options = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
return d.key;
},
y: function (d) {
return d.y;
},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 5,
bottom: 5,
left: 0
}
}
}
};
this.data = [
{
key: "P60-1",
y: 256
},
{
key: "P60-2",
y: 445
},
{
key: "P40",
y: 225
},
{
key: "P73",
y: 127
},
{
key: "P71",
y: 128
}
];
}
}
......@@ -8,9 +8,13 @@ import { AppHeaderComponent } from './theme/app-header.component';
import { APP_DIRECTIVES } from '../../directives/index';
import { APP_PIPES } from '../../pipes/index';
import 'd3';
import 'nvd3'
import { NvD3Module } from 'ng2-nvd3';
@NgModule({
imports: [CommonModule, FormsModule, RouterModule],
imports: [CommonModule, FormsModule, RouterModule, NvD3Module],
declarations: [
AppFooterComponent,
AppHeaderComponent,
......@@ -27,7 +31,9 @@ import { APP_PIPES } from '../../pipes/index';
AppHeaderComponent,
APP_DIRECTIVES,
APP_PIPES
APP_PIPES,
NvD3Module
]
})
......
......@@ -8,7 +8,7 @@
<title>ASP.NET Core with Angular Template</title>
<link type="text/css" rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
<link href="lib/nvd3/css/nv.d3.min.css" rel="stylesheet" />
<!-- build:css css/app.min.css -->
<link href="css/site.css" rel="stylesheet" />
<!-- endbuild -->
......
......@@ -8,14 +8,21 @@
'app': 'app',
'rxjs': 'lib/rxjs',
'tslib': 'lib/tslib/tslib.js',
'zone.js': 'lib/zone.js/dist'
'zone.js': 'lib/zone.js/dist',
'd3': 'lib/d3/js/d3.min.js',
'nvd3': 'lib/nvd3/js/nv.d3.min.js',
'ng2-nvd3.component': 'lib/ng2-nvd3',
'ng2-nvd3': 'lib/ng2-nvd3/js/ng2-nvd3.module.js'
};
// how to load when no filename and/or no extension
var packages = {
'app': { main: 'main', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'zone.js': { main: 'zone', defaultExtension: 'js' }
'zone.js': { main: 'zone', defaultExtension: 'js' },
'ng2-nvd3.component': { main: 'js/ng2-nvd3.component.js', defaultExtension: 'js' }
};
[
......
......@@ -99,7 +99,12 @@ var jsSys = [
var jsLibs = [
'bootstrap/dist/js/bootstrap.js',
'jquery/dist/jquery.min.js'
'jquery/dist/jquery.min.js',
'd3/d3.min.js',
'nvd3/build/nv.d3.min.js',
'ng2-nvd3/build/lib/ng2-nvd3.component.js',
'ng2-nvd3/build/lib/ng2-nvd3.module.js'
];
/*
......@@ -142,7 +147,9 @@ gulp.task('setup-libs-js', function (done) {
gulp.task('setup-libs-css', function (done) {
var css = [
'node_modules/**/bootstrap/dist/css/bootstrap.css'
'node_modules/**/bootstrap/dist/css/bootstrap.css',
'node_modules/**/nvd3/build/nv.d3.min.css'
];
return gulp
......
......@@ -18,7 +18,8 @@
"rxjs": "5.5.5",
"systemjs": "0.20.19",
"tslib": "1.8.1",
"zone.js": "0.8.18"
"zone.js": "0.8.18",
"ng2-nvd3": "2.0.0"
},
"devDependencies": {
"@types/core-js": "0.9.43",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment