Skip to content

Commit 0c5e59b

Browse files
afarzat-edafarzat-ed
committed
Adding plotly-via-cdn.module
1 parent 20d1b9a commit 0c5e59b

File tree

4 files changed

+138
-15
lines changed

4 files changed

+138
-15
lines changed

‎projects/demo_app/src/app/app.module.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import * as PlotlyJS from 'plotly.js-dist';
4-
import { PlotlyModule } from 'angular-plotly.js';
4+
import { PlotlyModule } from '../../../plotly/src/lib/plotly.module';
5+
import { PlotlyViaCDNModule } from 'projects/plotly/src/lib/plotly-via-cdn.module';
56

67

78

89
import { AppComponent } from './app.component';
910

10-
PlotlyModule.plotlyjs = PlotlyJS;
1111

1212
@NgModule({
1313
declarations: [
1414
AppComponent
1515
],
1616
imports: [
1717
BrowserModule,
18-
PlotlyModule,
18+
// PlotlyModule.forRoot(PlotlyJS),
19+
PlotlyViaCDNModule.forRoot({version: '3.0.1'}),
1920
],
2021
providers: [],
2122
bootstrap: [AppComponent]

‎projects/plotly/src/lib/plotly-via-cdn.module.ts‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { ModuleWithProviders, NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { PlotlyService } from './plotly.service';
5+
import { PlotlyComponent } from './plotly.component';
6+
7+
8+
export type PlotlyBundleName = 'basic' | 'cartesian' | 'geo' | 'gl3d' | 'gl2d' | 'mapbox' | 'finance';
9+
export type PlotlyCDNProvider = 'plotly' | 'cloudflare' | 'custom';
10+
11+
export interface PlotlyModuleConfig {
12+
bundleName?: PlotlyBundleName;
13+
cdnProvider?: PlotlyCDNProvider;
14+
version?: string;
15+
customUrl?: string;
16+
}
17+
18+
19+
@NgModule({
20+
imports: [CommonModule, PlotlyComponent],
21+
providers: [PlotlyService],
22+
exports: [PlotlyComponent],
23+
})
24+
export class PlotlyViaCDNModule {
25+
constructor(public plotlyService: PlotlyService) {
26+
PlotlyService.setModuleName('ViaCDN');
27+
}
28+
29+
public static forRoot(config: PlotlyModuleConfig): ModuleWithProviders<PlotlyViaCDNModule> {
30+
config = Object.assign({
31+
bundleName: null,
32+
cdnProvider: 'plotly',
33+
version: 'latest',
34+
customUrl: ''
35+
}, config);
36+
37+
let isOk = config.version === 'latest' || /^(strict-)?\d\.\d{1,2}\.\d{1,2}$/.test(config.version);
38+
if (!isOk) {
39+
throw new Error(`Invalid plotly version. Please set 'latest' or version number (i.e.: 1.4.3) or strict version number (i.e.: strict-1.4.3)`);
40+
}
41+
42+
const plotlyBundleNames: PlotlyBundleName[] = ['basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox', 'finance']
43+
isOk = config.bundleName === null || !plotlyBundleNames.includes(config.bundleName);
44+
if (!isOk) {
45+
const names = plotlyBundleNames.map(n => `"${n}"`).join(', ');
46+
throw new Error(`Invalid plotly bundle. Please set to null for full or ${names} for a partial bundle.`);
47+
}
48+
49+
isOk = ['plotly', 'cloudflare', 'custom'].includes(config.cdnProvider);
50+
if (!isOk) {
51+
throw new Error(`Invalid CDN provider. Please set to 'plotly', 'cloudflare' or 'custom'.`);
52+
}
53+
54+
if (config.cdnProvider === 'custom' && !config.customUrl) {
55+
throw new Error(`Invalid or missing CDN URL. Please provide a CDN URL in case of custom provider.`);
56+
}
57+
58+
PlotlyViaCDNModule.loadViaCDN(config);
59+
60+
return {
61+
ngModule: PlotlyViaCDNModule,
62+
providers: [PlotlyService],
63+
};
64+
}
65+
66+
public static loadViaCDN(config: PlotlyModuleConfig): void {
67+
PlotlyService.setPlotly('waiting');
68+
69+
const init = () => {
70+
let src: string = '';
71+
switch (config.cdnProvider) {
72+
case 'cloudflare':
73+
if (config.version == 'latest') {
74+
throw new Error(`As cloudflare hosts version specific files, 'latest' as a version is not supported. Please specify a version or you can choose 'plotly' as a CDN provider.`);
75+
}
76+
src = config.bundleName == null
77+
? `https://cdnjs.cloudflare.com/ajax/libs/plotly.js/${config.version}/plotly.min.js`
78+
: `https://cdnjs.cloudflare.com/ajax/libs/plotly.js/${config.version}/plotly-${config.bundleName}.min.js`;
79+
break;
80+
case 'custom':
81+
src = config.customUrl;
82+
break;
83+
default:
84+
src = config.bundleName == null
85+
? `https://cdn.plot.ly/plotly-${config.version}.min.js`
86+
: `https://cdn.plot.ly/plotly-${config.bundleName}-${config.version}.min.js`;
87+
break;
88+
}
89+
90+
const script: HTMLScriptElement = document.createElement('script');
91+
script.type = 'text/javascript';
92+
script.src = src;
93+
script.onerror = () => console.error(`Error loading plotly.js library from ${src}`);
94+
95+
const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
96+
head.appendChild(script);
97+
98+
let counter = 200; // equivalent of 10 seconds...
99+
100+
const fn = () => {
101+
const plotly = (window as any).Plotly;
102+
if (plotly) {
103+
PlotlyService.setPlotly(plotly);
104+
} else if (counter > 0) {
105+
counter --;
106+
setTimeout(fn, 50);
107+
} else {
108+
throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);
109+
}
110+
};
111+
112+
fn();
113+
};
114+
115+
setTimeout(init);
116+
}
117+
}

‎projects/plotly/src/lib/plotly.module.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
1-
import { NgModule } from '@angular/core';
1+
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
22

33
import { PlotlyService } from './plotly.service';
44
import { PlotlyComponent } from './plotly.component';
55

66

7-
87
@NgModule({
98
imports: [PlotlyComponent],
109
providers: [PlotlyService],
1110
exports: [PlotlyComponent],
1211
})
1312
export class PlotlyModule {
14-
public static plotlyjs: any = {};
15-
16-
constructor() {
13+
constructor(){
1714
if (!this.isValid()) {
1815
const msg = 'Invalid PlotlyJS object. Please check https://github.com/plotly/angular-plotly.js#quick-start'
1916
+ ' to see how to add PlotlyJS to your project.';
2017
throw new Error(msg);
2118
}
22-
23-
PlotlyService.setPlotly(PlotlyModule.plotlyjs);
2419
}
2520

2621
private isValid(): boolean {
27-
return PlotlyModule.plotlyjs !== undefined
28-
&& (typeof PlotlyModule.plotlyjs.plot === 'function'
29-
|| typeof PlotlyModule.plotlyjs.newPlot === 'function');
22+
return PlotlyService.plotly !== undefined
23+
&& (typeof PlotlyService.plotly.plot === 'function'
24+
|| typeof PlotlyService.plotly.newPlot === 'function');
25+
}
26+
27+
public static forRoot(plotlyjs: any): ModuleWithProviders<PlotlyModule> {
28+
PlotlyService.setPlotly(plotlyjs);
29+
30+
return {
31+
ngModule: PlotlyModule,
32+
providers: [PlotlyService]
33+
};
3034
}
3135
}

‎projects/plotly/src/lib/plotly.service.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { Injectable } from '@angular/core';
22
import { Plotly } from './plotly.interface';
33

4-
type PlotlyName = 'Plotly' | 'ViaCDN' | 'ViaWindow' | undefined;
4+
type PlotlyName = 'PlotlyJS' | 'ViaCDN' | 'ViaWindow' | undefined;
55

66

77
@Injectable({
88
providedIn: 'root'
99
})
1010
export class PlotlyService {
1111
protected static instances: Plotly.PlotlyHTMLElement[] = [];
12-
protected static plotly?: any = undefined;
12+
public static plotly?: any = undefined;
1313
protected static moduleName?: PlotlyName = undefined;
1414

1515
public static setModuleName(moduleName: PlotlyName): void {
@@ -25,6 +25,7 @@ export class PlotlyService {
2525
throw new Error('Invalid plotly.js version. Please, use any version above 1.40.0');
2626
}
2727

28+
PlotlyService.moduleName = 'PlotlyJS';
2829
PlotlyService.plotly = plotly;
2930
}
3031

0 commit comments

Comments
 (0)