diff --git a/BUILD.bazel b/BUILD.bazel
index 865151427..ce69cfa65 100644
--- a/BUILD.bazel
+++ b/BUILD.bazel
@@ -1,7 +1,5 @@
package(default_visibility = ["//visibility:public"])
-exports_files(["tsconfig.json"])
-
# NOTE: this will move to node_modules/BUILD in a later release
filegroup(
name = "node_modules",
@@ -25,6 +23,7 @@ filegroup(
"*.d.ts",
]] + [
"node_modules/http-server/**",
+ "node_modules/d3/build/*",
]),
)
@@ -67,3 +66,10 @@ filegroup(
"//:node_modules/zone.js/dist/jasmine-patch.js",
],
)
+
+filegroup(
+ name = "vendor_scripts",
+ srcs = [
+ "//:node_modules/d3/build/d3.min.js",
+ ],
+)
diff --git a/package.json b/package.json
index 7c8954d10..07426e265 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@angular/common": "5.2.2",
"@angular/core": "5.2.2",
"@angular/platform-browser": "5.2.2",
+ "d3": "^4.12.2",
"rxjs": "5.5.6",
"zone.js": "0.8.20"
},
@@ -18,6 +19,7 @@
"@angular/platform-browser-dynamic": "5.2.2",
"@bazel/benchmark-runner": "0.1.0",
"@bazel/ibazel": "0.3.1",
+ "@types/d3": "^4.12.0",
"@types/jasmine": "2.8.6",
"clang-format": "1.2.2",
"concurrently": "3.5.1",
diff --git a/src/BUILD.bazel b/src/BUILD.bazel
index ed9c113da..f4f6db4cf 100644
--- a/src/BUILD.bazel
+++ b/src/BUILD.bazel
@@ -1,6 +1,12 @@
package(default_visibility = ["//visibility:public"])
load("@angular//:index.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_library")
+
+ts_library(
+ name = "typings",
+ srcs = ["typings.d.ts"],
+)
ng_module(
name = "src",
@@ -18,6 +24,13 @@ genrule(
cmd = "cp $< $@",
)
+genrule(
+ name = "d3.js",
+ srcs = ["//:node_modules/d3/build/d3.min.js"],
+ outs = ["d3.min.js"],
+ cmd = "cp $< $@",
+)
+
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
ts_devserver(
@@ -27,6 +40,7 @@ ts_devserver(
serving_path = "/bundle.min.js",
static_files = [
":zone.js",
+ ":d3.js",
"index.html",
],
deps = ["//src"],
@@ -46,6 +60,7 @@ nodejs_binary(
data = [
"index.html",
":bundle",
+ ":d3.js",
":zone.js",
],
entry_point = "http-server/bin/http-server",
diff --git a/src/hello-world/BUILD.bazel b/src/hello-world/BUILD.bazel
index 590192bcf..7ee00dd29 100644
--- a/src/hello-world/BUILD.bazel
+++ b/src/hello-world/BUILD.bazel
@@ -19,9 +19,13 @@ ng_module(
"hello-world.component.ts",
"hello-world.module.ts",
],
- assets = [":hello-world-styles"],
+ assets = [
+ ":hello-world-styles",
+ ":hello-world.component.html",
+ ],
tsconfig = "//src:tsconfig.json",
deps = [
+ "//src:typings",
"//src/lib",
"@rxjs",
],
@@ -36,7 +40,10 @@ ts_library(
ts_web_test(
name = "test",
- bootstrap = ["//:angular_bootstrap_scripts"],
+ bootstrap = [
+ "//:angular_bootstrap_scripts",
+ "//:vendor_scripts",
+ ],
deps = [
":test_lib",
"//:angular_bundles",
diff --git a/src/hello-world/hello-world.component.html b/src/hello-world/hello-world.component.html
new file mode 100644
index 000000000..1cac41881
--- /dev/null
+++ b/src/hello-world/hello-world.component.html
@@ -0,0 +1,3 @@
+Hello {{ name }}
+
+
diff --git a/src/hello-world/hello-world.component.scss b/src/hello-world/hello-world.component.scss
index 057a25061..0ca5c63c8 100644
--- a/src/hello-world/hello-world.component.scss
+++ b/src/hello-world/hello-world.component.scss
@@ -9,4 +9,10 @@ html {
color: $example-red;
}
}
-}
\ No newline at end of file
+}
+
+.d3-chart-container {
+ overflow-x: hidden;
+ width: 500px;
+ height: 500px;
+}
diff --git a/src/hello-world/hello-world.component.ts b/src/hello-world/hello-world.component.ts
index e2864ed7b..686c8b1f1 100644
--- a/src/hello-world/hello-world.component.ts
+++ b/src/hello-world/hello-world.component.ts
@@ -1,14 +1,30 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, ElementRef, NgModule, ViewChild} from '@angular/core';
+
import {msg} from '../lib/file';
@Component({
selector: 'hello-world-app',
- template: `
- Hello {{ name }}
-
- `,
+ templateUrl: 'hello-world.component.html',
styleUrls: ['./hello-world-styles.css']
})
export class HelloWorldComponent {
name: string = msg;
+ @ViewChild('chart') public chartContainer: ElementRef;
+ private chart: any;
+
+ ngAfterViewInit() {
+ const element = this.chartContainer.nativeElement;
+
+ this.chart = d3.select(element)
+ .select('svg')
+ .attr('width', element.offsetWidth)
+ .attr('height', element.offsetWidth)
+ .select('g')
+ .append('circle')
+ .attr('class', 'node')
+ .attr('cy', 10)
+ .attr('cx', 10)
+ .attr('r', 10)
+ .style('stroke', 'gray');
+ }
}
diff --git a/src/index.html b/src/index.html
index f93345a0a..b77b183b9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,6 +17,8 @@
-->
+
+