Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0c5e59b

Browse files
committed
Adding plotly-via-cdn.module
1 parent20d1b9a commit0c5e59b

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*asPlotlyJSfrom'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]
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+
exporttypePlotlyBundleName='basic'|'cartesian'|'geo'|'gl3d'|'gl2d'|'mapbox'|'finance';
9+
exporttypePlotlyCDNProvider='plotly'|'cloudflare'|'custom';
10+
11+
exportinterfacePlotlyModuleConfig{
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+
exportclassPlotlyViaCDNModule{
25+
constructor(publicplotlyService:PlotlyService){
26+
PlotlyService.setModuleName('ViaCDN');
27+
}
28+
29+
publicstaticforRoot(config:PlotlyModuleConfig):ModuleWithProviders<PlotlyViaCDNModule>{
30+
config=Object.assign({
31+
bundleName:null,
32+
cdnProvider:'plotly',
33+
version:'latest',
34+
customUrl:''
35+
},config);
36+
37+
letisOk=config.version==='latest'||/^(strict-)?\d\.\d{1,2}\.\d{1,2}$/.test(config.version);
38+
if(!isOk){
39+
thrownewError(`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+
constplotlyBundleNames:PlotlyBundleName[]=['basic','cartesian','geo','gl3d','gl2d','mapbox','finance']
43+
isOk=config.bundleName===null||!plotlyBundleNames.includes(config.bundleName);
44+
if(!isOk){
45+
constnames=plotlyBundleNames.map(n=>`"${n}"`).join(', ');
46+
thrownewError(`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+
thrownewError(`Invalid CDN provider. Please set to 'plotly', 'cloudflare' or 'custom'.`);
52+
}
53+
54+
if(config.cdnProvider==='custom'&&!config.customUrl){
55+
thrownewError(`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+
publicstaticloadViaCDN(config:PlotlyModuleConfig):void{
67+
PlotlyService.setPlotly('waiting');
68+
69+
constinit=()=>{
70+
letsrc:string='';
71+
switch(config.cdnProvider){
72+
case'cloudflare':
73+
if(config.version=='latest'){
74+
thrownewError(`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+
constscript: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+
consthead:HTMLHeadElement=document.getElementsByTagName('head')[0];
96+
head.appendChild(script);
97+
98+
letcounter=200;// equivalent of 10 seconds...
99+
100+
constfn=()=>{
101+
constplotly=(windowasany).Plotly;
102+
if(plotly){
103+
PlotlyService.setPlotly(plotly);
104+
}elseif(counter>0){
105+
counter--;
106+
setTimeout(fn,50);
107+
}else{
108+
thrownewError(`Error loading plotly.js library from${src}. Timeout.`);
109+
}
110+
};
111+
112+
fn();
113+
};
114+
115+
setTimeout(init);
116+
}
117+
}
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
exportclassPlotlyModule{
14-
publicstaticplotlyjs:any={};
15-
16-
constructor(){
13+
constructor(){
1714
if(!this.isValid()){
1815
constmsg='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
thrownewError(msg);
2118
}
22-
23-
PlotlyService.setPlotly(PlotlyModule.plotlyjs);
2419
}
2520

2621
privateisValid():boolean{
27-
returnPlotlyModule.plotlyjs!==undefined
28-
&&(typeofPlotlyModule.plotlyjs.plot==='function'
29-
||typeofPlotlyModule.plotlyjs.newPlot==='function');
22+
returnPlotlyService.plotly!==undefined
23+
&&(typeofPlotlyService.plotly.plot==='function'
24+
||typeofPlotlyService.plotly.newPlot==='function');
25+
}
26+
27+
publicstaticforRoot(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-
typePlotlyName='Plotly'|'ViaCDN'|'ViaWindow'|undefined;
4+
typePlotlyName='PlotlyJS'|'ViaCDN'|'ViaWindow'|undefined;
55

66

77
@Injectable({
88
providedIn:'root'
99
})
1010
exportclassPlotlyService{
1111
protectedstaticinstances:Plotly.PlotlyHTMLElement[]=[];
12-
protectedstaticplotly?:any=undefined;
12+
publicstaticplotly?:any=undefined;
1313
protectedstaticmoduleName?:PlotlyName=undefined;
1414

1515
publicstaticsetModuleName(moduleName:PlotlyName):void{
@@ -25,6 +25,7 @@ export class PlotlyService {
2525
thrownewError('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)
[8]ページ先頭
©2009-2025 Movatter.jp