f72bdcbc-2c35-4e08-a51a-be6fc8a54474

pending completion

Build # f72bdcbc-2c35-4e08-a51a-be6fc8a54474

Build Type

push

circleci

Committed by

andrefarzat

Commit Message

Feature: #243 - multple CDN support for PlotlyViaCDNModule, including custom CDN.

Run Details

63 of 85 branches covered (74.12%)

Branch coverage included in aggregate %.

13 of 13 new or added lines in 1 file covered. (100.0%)

200 of 247 relevant lines covered (80.97%)

14.77 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

33.33

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PlotlyService } from './plotly.service';
import { PlotlySharedModule } from './plotly-shared.module';


export type PlotlyBundleName = 'basic' | 'cartesian' | 'geo' | 'gl3d' | 'gl2d' | 'mapbox' | 'finance';
export type PlotlyCDNProvider = 'plotly' | 'cloudflare' | 'custom';

@NgModule({
    declarations: [],
    imports: [CommonModule, PlotlySharedModule],
    providers: [PlotlyService],
    exports: [PlotlySharedModule],
})
export class PlotlyViaCDNModule {
    private static plotlyBundle?: PlotlyBundleName = undefined;
    private static plotlyVersion = 'latest';
    public static plotlyBundleNames: PlotlyBundleName[] = ['basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox', 'finance'];

    constructor(public plotlyService: PlotlyService) {
        PlotlyService.setModuleName('ViaCDN');
    }

    public static setPlotlyVersion(version: string, cdnProvider: PlotlyCDNProvider = 'plotly', cdnURL: string = ''): void {
        const isOk = version === 'latest' || /^(strict-)?\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) or strict version number (i.e.: strict-1.4.3)`);
        }

        PlotlyViaCDNModule.loadViaCDN(cdnProvider, cdnURL);
        PlotlyViaCDNModule.plotlyVersion = version;
    }

    public static setPlotlyBundle(bundle: PlotlyBundleName): void {
        const isOk = bundle === null || PlotlyViaCDNModule.plotlyBundleNames.indexOf(bundle) >= 0;
        if (!isOk) {
            const names = PlotlyViaCDNModule.plotlyBundleNames.map(n => `"${n}"`).join(', ');
            throw new Error(`Invalid plotly bundle. Please set to null for full or ${names} for a partial bundle.`);
        }

        PlotlyViaCDNModule.plotlyBundle = bundle;
    }

    public static loadViaCDN(cdnProvider: PlotlyCDNProvider = 'plotly', cdnURL: string = ''): void {
        PlotlyService.setPlotly('waiting');

        const init = () => {
            let src: string = '';
            switch (cdnProvider) {
                case 'cloudflare':
                    if (PlotlyViaCDNModule.plotlyVersion == 'latest') {
                        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.`);
                    }
                    src = PlotlyViaCDNModule.plotlyBundle == null
                        ? `https://cdnjs.cloudflare.com/ajax/libs/plotly.js/${PlotlyViaCDNModule.plotlyVersion}/plotly.min.js`
                        : `https://cdnjs.cloudflare.com/ajax/libs/plotly.js/${PlotlyViaCDNModule.plotlyVersion}/plotly-${PlotlyViaCDNModule.plotlyBundle}.min.js`;
                    break;
                case 'custom':
                    if(!(!!cdnURL && typeof cdnURL === 'string')) {
                        throw new Error(`Invalid or missing CDN URL. Please provide a CDN URL in case of custom provider. Alternatively, you can choose from 'plotly' or 'cloudflare'.`);
                    }
                    src = cdnURL;
                    break;
                default:
                    src = PlotlyViaCDNModule.plotlyBundle == null
                        ? `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule.plotlyVersion}.min.js`
                        : `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule.plotlyBundle}-${PlotlyViaCDNModule.plotlyVersion}.min.js`;
                    break;
            }

            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();
        };

        setTimeout(init);
    }
}

1	import { NgModule } from '@angular/core';
2	import { CommonModule } from '@angular/common';
3
4	import { PlotlyService } from './plotly.service';
5	import { PlotlySharedModule } from './plotly-shared.module';
6
7
8	export type PlotlyBundleName = 'basic' \| 'cartesian' \| 'geo' \| 'gl3d' \| 'gl2d' \| 'mapbox' \| 'finance';
9	export type PlotlyCDNProvider = 'plotly' \| 'cloudflare' \| 'custom';
10
11	@NgModule({
12	declarations: [],
13	imports: [CommonModule, PlotlySharedModule],
14	providers: [PlotlyService],
15	exports: [PlotlySharedModule],
16	})
17	export class PlotlyViaCDNModule {	1✔
18	private static plotlyBundle?: PlotlyBundleName = undefined;	1✔
19	private static plotlyVersion = 'latest';	1✔
20	public static plotlyBundleNames: PlotlyBundleName[] = ['basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox', 'finance'];	1✔
21
22	constructor(public plotlyService: PlotlyService) {	1✔
23	PlotlyService.setModuleName('ViaCDN');	1✔
24	}
25
26	public static setPlotlyVersion(version: string, cdnProvider: PlotlyCDNProvider = 'plotly', cdnURL: string = ''): void {	14✔
27	const isOk = version === 'latest' \|\| /^(strict-)?\d\.\d{1,2}\.\d{1,2}$/.test(version);	7✔
28	if (!isOk) {	7✔
29	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)`);	5✔
30	}
31
32	PlotlyViaCDNModule.loadViaCDN(cdnProvider, cdnURL);	2✔
33	PlotlyViaCDNModule.plotlyVersion = version;	2✔
34	}
35
36	public static setPlotlyBundle(bundle: PlotlyBundleName): void {
37	const isOk = bundle === null \|\| PlotlyViaCDNModule.plotlyBundleNames.indexOf(bundle) >= 0;	9✔
38	if (!isOk) {	9✔
39	const names = PlotlyViaCDNModule.plotlyBundleNames.map(n => `"${n}"`).join(', ');	7✔
40	throw new Error(`Invalid plotly bundle. Please set to null for full or ${names} for a partial bundle.`);	1✔
41	}
42
43	PlotlyViaCDNModule.plotlyBundle = bundle;	8✔
44	}
45
46	public static loadViaCDN(cdnProvider: PlotlyCDNProvider = 'plotly', cdnURL: string = ''): void {	×
47	PlotlyService.setPlotly('waiting');	×
48
49	const init = () => {	×
50	let src: string = '';	×
51	switch (cdnProvider) {	×
52	case 'cloudflare':
53	if (PlotlyViaCDNModule.plotlyVersion == 'latest') {	×
54	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.`);	×
55	}
56	src = PlotlyViaCDNModule.plotlyBundle == null	×
57	? `https://cdnjs.cloudflare.com/ajax/libs/plotly.js/${PlotlyViaCDNModule.plotlyVersion}/plotly.min.js`
58	: `https://cdnjs.cloudflare.com/ajax/libs/plotly.js/${PlotlyViaCDNModule.plotlyVersion}/plotly-${PlotlyViaCDNModule.plotlyBundle}.min.js`;
59	break;	×
60	case 'custom':
61	if(!(!!cdnURL && typeof cdnURL === 'string')) {	×
62	throw new Error(`Invalid or missing CDN URL. Please provide a CDN URL in case of custom provider. Alternatively, you can choose from 'plotly' or 'cloudflare'.`);	×
63	}
64	src = cdnURL;	×
65	break;	×
66	default:
67	src = PlotlyViaCDNModule.plotlyBundle == null	×
68	? `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule.plotlyVersion}.min.js`
69	: `https://cdn.plot.ly/plotly-${PlotlyViaCDNModule.plotlyBundle}-${PlotlyViaCDNModule.plotlyVersion}.min.js`;
70	break;	×
71	}
72
73	const script: HTMLScriptElement = document.createElement('script');	×
74	script.type = 'text/javascript';	×
75	script.src = src;	×
76	script.onerror = () => console.error(`Error loading plotly.js library from ${src}`);	×
77
78	const head: HTMLHeadElement = document.getElementsByTagName('head')[0];	×
79	head.appendChild(script);	×
80
81	let counter = 200; // equivalent of 10 seconds...	×
82
83	const fn = () => {	×
84	const plotly = (window as any).Plotly;	×
85	if (plotly) {	×
86	PlotlyService.setPlotly(plotly);	×
87	} else if (counter > 0) {	×
88	counter --;	×
89	setTimeout(fn, 50);	×
90	} else {
91	throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);	×
92	}
93	};
94
95	fn();	×
96	};
97
98	setTimeout(init);	×
99	}
100	}

plotly / angular-plotly.js / f72bdcbc-2c35-4e08-a51a-be6fc8a54474

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous