From 5345cd3d44dbe967f2a3dc39b28dac35261cf283 Mon Sep 17 00:00:00 2001 From: Greg Magolan Date: Sun, 28 Jan 2018 09:07:38 -0800 Subject: [PATCH 1/3] d3 external as script --- BUILD.bazel | 10 +- package.json | 2 + src/BUILD.bazel | 8 + src/hello-world/BUILD.bazel | 11 +- src/hello-world/hello-world.component.html | 3 + src/hello-world/hello-world.component.scss | 8 +- src/hello-world/hello-world.component.ts | 26 +- src/index.html | 2 + src/typings/BUILD.bazel | 8 + src/typings/shims.d.ts | 5 + yarn.lock | 416 ++++++++++++++++++++- 11 files changed, 486 insertions(+), 13 deletions(-) create mode 100644 src/hello-world/hello-world.component.html create mode 100644 src/typings/BUILD.bazel create mode 100644 src/typings/shims.d.ts 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..6d142f2d2 100644 --- a/src/BUILD.bazel +++ b/src/BUILD.bazel @@ -18,6 +18,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 +34,7 @@ ts_devserver( serving_path = "/bundle.min.js", static_files = [ ":zone.js", + ":d3.js", "index.html", ], deps = ["//src"], diff --git a/src/hello-world/BUILD.bazel b/src/hello-world/BUILD.bazel index 590192bcf..54a5e4257 100644 --- a/src/hello-world/BUILD.bazel +++ b/src/hello-world/BUILD.bazel @@ -19,10 +19,14 @@ 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/lib", + "//src/typings", "@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 @@ --> + +