From 3bdc29202986c09e58786424b8dccd4db0bb24f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Farzat?= Date: Sun, 24 Mar 2019 20:07:42 -0300 Subject: [PATCH 1/4] Creating the 'plotlyjs' property on PlotlyModule --- README.md | 3 ++ package-lock.json | 41 ++++++++++++++----- src/app/demo/demo.module.ts | 8 +++- .../plotly-via-cdn/plotly-via-cdn.module.ts | 2 +- src/app/plotly/plotly.module.ts | 22 ++++++---- 5 files changed, 54 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index eb47161..0fa7132 100644 --- a/README.md +++ b/README.md @@ -43,8 +43,11 @@ Add the `PlotlyModule` into the main app module of your project import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import * as PlotlyJS from 'plotly.js/dist/plotly.js'; import { PlotlyModule } from 'angular-plotly.js'; +PlotlyModule.plotlyjs = PlotlyJS; + @NgModule({ imports: [CommonModule, PlotlyModule], ... diff --git a/package-lock.json b/package-lock.json index 63d53fa..5d852e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5360,7 +5360,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5381,12 +5382,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5401,17 +5404,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5528,7 +5534,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5540,6 +5547,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5554,6 +5562,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5561,12 +5570,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5585,6 +5596,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5665,7 +5677,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5677,6 +5690,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5762,7 +5776,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5798,6 +5813,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5817,6 +5833,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5860,12 +5877,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/app/demo/demo.module.ts b/src/app/demo/demo.module.ts index a6a790d..b6e0821 100644 --- a/src/app/demo/demo.module.ts +++ b/src/app/demo/demo.module.ts @@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule, Routes } from '@angular/router'; +import * as PlotlyJS from 'plotly.js/dist/plotly.js'; + import { HomeComponent } from './home/home.component'; import { DemoComponent } from './demo.component'; @@ -33,12 +35,16 @@ const demoRoutes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, ]; + +PlotlyModule.plotlyjs = PlotlyJS; +// PlotlyViaCDNModule.plotlyVersion = 'latest'; + @NgModule({ imports: [ CommonModule, HttpClientModule, PlotlyModule, - // PlotlyViaCDNModule.forRoot({version: 'latest'}), + // PlotlyViaCDNModule, // PlotlyViaWindowModule, RouterModule.forRoot(demoRoutes, { enableTracing: true }), ], diff --git a/src/app/plotly-via-cdn/plotly-via-cdn.module.ts b/src/app/plotly-via-cdn/plotly-via-cdn.module.ts index 96b4818..32f1557 100644 --- a/src/app/plotly-via-cdn/plotly-via-cdn.module.ts +++ b/src/app/plotly-via-cdn/plotly-via-cdn.module.ts @@ -51,7 +51,7 @@ export class PlotlyViaCDNModule { fn(); } - static forRoot(config: Partial<{version: string}>): ModuleWithProviders { + static forRoot(config: Partial<{version: string}>): ModuleWithProviders { if (config.version === undefined) { console.warn(`It's strongly recommended that you set a plotly version when using via CDN.`); config.version = 'latest'; diff --git a/src/app/plotly/plotly.module.ts b/src/app/plotly/plotly.module.ts index 8128aea..8279507 100644 --- a/src/app/plotly/plotly.module.ts +++ b/src/app/plotly/plotly.module.ts @@ -1,8 +1,6 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import * as PlotlyJS from 'plotly.js/dist/plotly.js'; - import { PlotComponent } from '../shared/plot/plot.component'; import { PlotlyService } from '../shared/plotly.service'; import { SharedModule } from '../shared/shared.module'; @@ -14,14 +12,20 @@ import { SharedModule } from '../shared/shared.module'; exports: [PlotComponent] }) export class PlotlyModule { + public static plotlyjs: any; + constructor() { - PlotlyService.setPlotly(PlotlyJS); + if (!this.isValid()) { + const msg = "Invalid PlotlyJS object. Please check https://github.com/plotly/angular-plotly.js#quick-start" + + " to see how to add PlotlyJS to your project."; + throw new Error(msg); + } + + PlotlyService.setPlotly(PlotlyModule.plotlyjs); } - static forRoot(): ModuleWithProviders { - return { - ngModule: PlotlyModule, - providers: [PlotlyService] - }; + private isValid(): boolean { + return PlotlyModule.plotlyjs !== undefined + && typeof PlotlyModule.plotlyjs.plot === 'function'; } } From e98bc68de31f78671b517cc6625992f0c131281e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Farzat?= Date: Sun, 24 Mar 2019 20:14:58 -0300 Subject: [PATCH 2/4] Adding tests for plotly.module --- src/app/plotly/plotly.module.spec.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/app/plotly/plotly.module.spec.ts diff --git a/src/app/plotly/plotly.module.spec.ts b/src/app/plotly/plotly.module.spec.ts new file mode 100644 index 0000000..d387385 --- /dev/null +++ b/src/app/plotly/plotly.module.spec.ts @@ -0,0 +1,25 @@ +import { PlotlyModule } from "./plotly.module"; + + + +describe('PlotlyModule', () => { + + it('should create', () => { + const fn = () => { + const mod = new PlotlyModule(); + }; + + const msg = "Invalid PlotlyJS object. Please check https://github.com/plotly/angular-plotly.js#quick-start" + + " to see how to add PlotlyJS to your project."; + expect(fn).toThrowError(msg); + + + const fn2 = () => { + PlotlyModule.plotlyjs = {plot: function() { }}; + const mod = new PlotlyModule(); + }; + + expect(fn2).not.toThrowError(msg); + }); + +}); From 53c4dedad65d100ee235999bcc88dbe3dd52116d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Farzat?= Date: Sun, 24 Mar 2019 20:35:20 -0300 Subject: [PATCH 3/4] Adding initial value to PlotlyModule.plotlyjs --- src/app/plotly/plotly.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/plotly/plotly.module.ts b/src/app/plotly/plotly.module.ts index 8279507..eccf2ae 100644 --- a/src/app/plotly/plotly.module.ts +++ b/src/app/plotly/plotly.module.ts @@ -12,7 +12,7 @@ import { SharedModule } from '../shared/shared.module'; exports: [PlotComponent] }) export class PlotlyModule { - public static plotlyjs: any; + public static plotlyjs: any = {}; constructor() { if (!this.isValid()) { From e8923817139f32b287ac385a21c536bed16761ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Farzat?= Date: Sun, 24 Mar 2019 20:58:56 -0300 Subject: [PATCH 4/4] Adding quick test --- src/app/shared/plot/plot.component.spec.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/app/shared/plot/plot.component.spec.ts b/src/app/shared/plot/plot.component.spec.ts index 1f56678..f03473e 100644 --- a/src/app/shared/plot/plot.component.spec.ts +++ b/src/app/shared/plot/plot.component.spec.ts @@ -141,6 +141,17 @@ describe('PlotComponent', () => { }, 13); }); + it('should fail when plotlyInstance is undefined', () => { + component.plotlyInstance = undefined; + + const error = new Error(`Plotly component wasn't initialized`); + const fn = () => { + component.updatePlot(); + }; + + expect(fn).toThrow(error); + }); + it('should add handler into window.resize when useResizeHandler=true', () => { spyOn(component, 'getWindow').and.callFake(() => windowSpy);