diff --git a/src/app/demo/demo.module.ts b/src/app/demo/demo.module.ts index b9dec5f..98ccb2b 100644 --- a/src/app/demo/demo.module.ts +++ b/src/app/demo/demo.module.ts @@ -8,8 +8,8 @@ import * as PlotlyJS from 'plotly.js/dist/plotly.js'; import { HomeComponent } from './home/home.component'; import { DemoComponent } from './demo.component'; -import { PlotlyModule } from '../plotly/plotly.module'; -// import { PlotlyViaCDNModule } from '../plotly-via-cdn/plotly-via-cdn.module'; +// import { PlotlyModule } from '../plotly/plotly.module'; +import { PlotlyViaCDNModule } from '../plotly-via-cdn/plotly-via-cdn.module'; // import { PlotlyViaWindowModule } from '../plotly-via-window/plotly-via-window.module'; // Examples @@ -38,15 +38,16 @@ const demoRoutes: Routes = [ ]; -PlotlyModule.plotlyjs = PlotlyJS; -// PlotlyViaCDNModule.plotlyVersion = 'latest'; +// PlotlyModule.plotlyjs = PlotlyJS; +PlotlyViaCDNModule.plotlyVersion = '1.5.0'; +// PlotlyViaCDNModule.plotlyBundle = 'cartesian'; @NgModule({ imports: [ CommonModule, HttpClientModule, - PlotlyModule, - // PlotlyViaCDNModule, + // PlotlyModule, + 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 f12c999..09f85df 100644 --- a/src/app/plotly-via-cdn/plotly-via-cdn.module.ts +++ b/src/app/plotly-via-cdn/plotly-via-cdn.module.ts @@ -18,12 +18,17 @@ export class PlotlyViaCDNModule { private static _plotlyVersion: string = 'latest'; static plotlyBundleNames: PlotlyBundleName[] = ['basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox', 'finance']; + constructor(public plotlyService: PlotlyService) { + PlotlyService.setModuleName('ViaCDN'); + } + static set plotlyVersion(version: string) { const isOk = version === 'latest' || /^\d\.\d{1,2}\.\d{1,2}$/.test(version); if (!isOk) { throw new Error(`Invalid plotly version. Please set 'latest' or version number (i.e.: 1.4.3)`); } + PlotlyViaCDNModule.loadViaCDN(); PlotlyViaCDNModule._plotlyVersion = version; } @@ -39,33 +44,38 @@ export class PlotlyViaCDNModule { static loadViaCDN() { PlotlyService.setPlotly('waiting'); - const src = PlotlyViaCDNModule._plotlyBundle == null - ? `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyVersion}.min.js` - : `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyBundle}-${PlotlyViaCDNModule._plotlyBundle}.min.js`; - - const script: HTMLScriptElement = document.createElement('script'); - script.type = 'text/javascript'; - script.src = src; - script.onerror = () => console.error(`Error loading plotly.js library from ${src}`); - - const head: HTMLHeadElement = document.getElementsByTagName('head')[0]; - head.appendChild(script); - - let counter = 200; // equivalent of 10 seconds... - - const fn = () => { - const plotly = (window as any).Plotly; - if (plotly) { - PlotlyService.setPlotly(plotly); - } else if (counter > 0) { - counter --; - setTimeout(fn, 50); - } else { - throw new Error(`Error loading plotly.js library from ${src}. Timeout.`); - } + + const init = () => { + const src = PlotlyViaCDNModule._plotlyBundle == null + ? `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyVersion}.min.js` + : `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule._plotlyBundle}-${PlotlyViaCDNModule._plotlyVersion}.min.js`; + + const script: HTMLScriptElement = document.createElement('script'); + script.type = 'text/javascript'; + script.src = src; + script.onerror = () => console.error(`Error loading plotly.js library from ${src}`); + + const head: HTMLHeadElement = document.getElementsByTagName('head')[0]; + head.appendChild(script); + + let counter = 200; // equivalent of 10 seconds... + + const fn = () => { + const plotly = (window as any).Plotly; + if (plotly) { + PlotlyService.setPlotly(plotly); + } else if (counter > 0) { + counter --; + setTimeout(fn, 50); + } else { + throw new Error(`Error loading plotly.js library from ${src}. Timeout.`); + } + }; + + fn(); }; - fn(); + setTimeout(init); } static forRoot(config: Partial<{version: string}>): never { diff --git a/src/app/shared/plotly.service.ts b/src/app/shared/plotly.service.ts index 6fa6eff..58d9f8e 100644 --- a/src/app/shared/plotly.service.ts +++ b/src/app/shared/plotly.service.ts @@ -1,6 +1,8 @@ import { Injectable } from '@angular/core'; import { Plotly } from './plotly.interface'; +type PlotlyName = 'Plotly' | 'ViaCDN' | 'ViaWindow'; + @Injectable({ providedIn: 'root' @@ -8,6 +10,11 @@ import { Plotly } from './plotly.interface'; export class PlotlyService { protected static instances: Plotly.PlotlyHTMLElement[] = []; protected static _plotly?: any = undefined; + protected static _moduleName?: PlotlyName; + + public static setModuleName(moduleName: PlotlyName) { + PlotlyService._moduleName = moduleName; + } public static setPlotly(plotly: any) { PlotlyService._plotly = plotly; @@ -40,7 +47,11 @@ export class PlotlyService { public getPlotly() { if (typeof PlotlyService._plotly === 'undefined') { - throw new Error(`Peer dependency plotly.js isn't installed`); + const msg = PlotlyService._moduleName === 'ViaCDN' + ? `Error loading Peer dependency plotly.js from CDN url` + : `Peer dependency plotly.js isn't installed`; + + throw new Error(msg); } return PlotlyService._plotly;