D3 external as script

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",
+    ],
+)

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",

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",

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",

src/hello-world/hello-world.component.html

@@ -0,0 +1,3 @@
+<div>Hello {{ name }}</div>
+<input type="text" [value]="name" (input)="name = $event.target.value"/>
+<div class="d3-chart-container" #chart><svg><g></g></svg></div>

src/hello-world/hello-world.component.scss

@@ -9,4 +9,10 @@ html {
       color: $example-red;
     }
   }
-}
+}
+
+.d3-chart-container {
+  overflow-x: hidden;
+  width: 500px;
+  height: 500px;
+}

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: `
-    <div>Hello {{ name }}</div>
-    <input type="text" [value]="name" (input)="name = $event.target.value"/>
-  `,
+  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');
+  }
 }

src/index.html

@@ -17,6 +17,8 @@
     -->
     <script src="/zone.min.js"></script>
 
+    <script src="/d3.min.js"></script>
+
     <!--
       For development mode, this script will be bundled on-the-fly by
       the devserver, based on the latest JS files built by Bazel.

src/typings.d.ts

@@ -0,0 +1,9 @@
+import * as _d3 from 'd3';
+
+// External libraries that are included as scripts such as D3 are declared as globals
+// here with their appropriate types. This typings files is compiled into
+// any ts_library or ng_module that requires these types and it makes them available
+// as global variables that are properly typed in typescript.
+declare global {
+  const d3: typeof _d3;
+}