Adding support to templates

projects/plotly/src/lib/plotly.component.spec.ts

@@ -216,4 +216,30 @@ describe('PlotlyComponent', () => {
 
         expect(PlotlyJS.Plots.resize).not.toHaveBeenCalled();
     });
+
+    it('should load a theme', async () => {
+        spyOn(component, 'loadTheme').and.callThrough();
+        spyOn(component.themeLoader, 'load').and.callThrough();
+
+        component.theme = 'plotly_dark';
+
+        component.ngOnInit();
+        await fixture.whenStable();
+
+        expect(component.loadTheme).toHaveBeenCalled();
+        expect(component.themeLoader.load).toHaveBeenCalledOnceWith('plotly_dark');
+    });
+
+    it('should load NOT a theme', async () => {
+        spyOn(component, 'loadTheme').and.callThrough();
+        spyOn(component.themeLoader, 'load').and.callThrough();
+
+        component.theme = 'none';
+
+        component.ngOnInit();
+        await fixture.whenStable();
+
+        expect(component.loadTheme).not.toHaveBeenCalled();
+        expect(component.themeLoader.load).not.toHaveBeenCalledOnceWith('plotly_dark');
+    });
 });

projects/plotly/src/lib/plotly.component.ts

@@ -20,6 +20,7 @@ import {
 } from '@angular/core';
 
 import { PlotlyService } from './plotly.service';
+import { PlotlyThemeLoaderService, PlotlyTheme } from './plotly.theme-loader.service';
 import { Plotly } from './plotly.interface';
 
 // @dynamic
@@ -45,6 +46,7 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     @Input() config?: Partial<Plotly.Config>;
     @Input() frames?: Partial<Plotly.Config>[];
     @Input() style?: { [key: string]: string };
+    @Input() theme: PlotlyTheme = "none";
 
     @Input() divId?: string;
     @Input() revision = 0;
@@ -115,6 +117,7 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
 
     constructor(
         public plotly: PlotlyService,
+        public themeLoader: PlotlyThemeLoaderService,
         public iterableDiffers: IterableDiffers,
         public keyValueDiffers: KeyValueDiffers,
     ) { }
@@ -130,6 +133,8 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
                 + 'Please check https://github.com/plotly/angular-plotly.js#FAQ';
             console.error(msg);
         }
+
+        if (this.theme != 'none') this.loadTheme();
     }
 
     ngOnDestroy(): void {
@@ -291,4 +296,13 @@ export class PlotlyComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
         const obj = Object.assign({}, item, { uid: '' });
         return JSON.stringify(obj);
     }
+
+    loadTheme() {
+        if (this.layout !== undefined) {
+            const msg = 'You fulfill both `theme` and `layout` properties. This will overwrite the `layout` data with the `theme` data.';
+            console.warn(msg);
+        }
+
+        this.themeLoader.load(this.theme).then(theme => this.layout = theme);
+    }
 }

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

@@ -84,25 +84,25 @@ export class PlotlyService {
         await this.waitFor(() => this._getPlotly() !== 'waiting');
 
         if (frames) {
-            const obj = {data, layout, config, frames};
+            const obj = { data, layout, config, frames };
             return this._getPlotly().newPlot(div, obj).then(() => PlotlyService.insert(div as any)) as Promise<any>;
         }
 
         return this._getPlotly().newPlot(div, data, layout, config).then(() => PlotlyService.insert(div as any)) as Promise<any>;
     }
 
-    public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any>  {
+    public plot(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any> {
         if (frames) {
-            const obj = {data, layout, config, frames};
+            const obj = { data, layout, config, frames };
             return this._getPlotly().newPlot(div, obj) as Promise<any>;
         }
 
         return this._getPlotly().newPlot(div, data, layout, config) as Promise<any>;
     }
 
-    public update(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any>  {
+    public update(div: Plotly.PlotlyHTMLElement, data: Plotly.Data[], layout?: Partial<Plotly.Layout>, config?: Partial<Plotly.Config>, frames?: Partial<Plotly.Config>[]): Promise<any> {
         if (frames) {
-            const obj = {data, layout, config, frames};
+            const obj = { data, layout, config, frames };
             return this._getPlotly().react(div, obj) as Promise<any>;
         }
 

projects/plotly/src/lib/plotly.theme-loader.service.spec.ts

@@ -0,0 +1,61 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { PlotlyThemeLoaderService } from './plotly.theme-loader.service';
+
+
+describe('PlotlyThemeLoaderService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [PlotlyThemeLoaderService]
+        });
+    });
+
+    it("should load the ggplot2 theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('ggplot2');
+        expect(json.geo.lakecolor).toBe("white");
+    }));
+
+    it("should load the gridon theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('gridon');
+        expect(json.xaxis.title.standoff).toBe(15);
+    }));
+
+    it("should load the plotly_dark theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('plotly_dark');
+        expect(json.mapbox.style).toBe("dark");
+    }));
+
+    it("should load the plotly_white theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('plotly_white');
+        expect(json.mapbox.style).toBe("light");
+    }));
+
+    it("should load the plotly theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('plotly');
+        expect(json.mapbox.style).toBe("light");
+    }));
+
+    it("should load the presentation theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('presentation');
+        expect(json.xaxis.title.standoff).toBe(15);
+    }));
+
+    it("should load the seaborn theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('seaborn');
+        expect(json.colorway[2]).toBe('rgb(85,168,104)');
+    }));
+
+    it("should load the simple_white theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('simple_white');
+        expect(json.colorway[1]).toBe("#FF7F0E");
+    }));
+
+    it("should load the xgridoff theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('xgridoff');
+        expect(json.xaxis.title.standoff).toBe(15);
+    }));
+
+    it("should load the ygridoff theme", inject([PlotlyThemeLoaderService], async (service: PlotlyThemeLoaderService) => {
+        var json: any = await service.load('ygridoff');
+        expect(json.yaxis.showgrid).toBe(false);
+    }));
+});

projects/plotly/src/lib/plotly.theme-loader.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+export type PlotlyTheme = 'ggplot2' | 'seaborn' | 'simple_white' | 'plotly' | 'plotly_white' | 'plotly_dark' | 'presentation' | 'xgridoff' | 'ygridoff' | 'gridon' | 'none';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PlotlyThemeLoaderService {
+
+    public get isLoading() { return this._isLoading; }
+    private _isLoading: boolean = false;
+
+    public load(themeName: PlotlyTheme): Promise<any> {
+        this._isLoading = true;
+        return new Promise(resolve => {
+            import(`./themes/${themeName}.json`).then(data => {
+                resolve(data);
+                this._isLoading = false;
+            });
+        });
+    }
+}

projects/plotly/src/lib/themes/ggplot2.json

@@ -0,0 +1 @@
+{"autotypenumbers":"strict","colorway":["#F8766D","#A3A500","#00BF7D","#00B0F6","#E76BF3"],"font":{"color":"rgb(51,51,51)"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"rgb(237,237,237)","polar":{"bgcolor":"rgb(237,237,237)","angularaxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside"},"radialaxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside"}},"ternary":{"bgcolor":"rgb(237,237,237)","aaxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside"},"baxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside"},"caxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside"}},"coloraxis":{"colorbar":{"outlinewidth":0,"tickcolor":"rgb(237,237,237)","ticklen":6,"ticks":"inside"}},"colorscale":{"sequential":[[0,"rgb(20,44,66)"],[1,"rgb(90,179,244)"]],"sequentialminus":[[0,"rgb(20,44,66)"],[1,"rgb(90,179,244)"]]},"xaxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside","title":{"standoff":15},"zerolinecolor":"white","automargin":true},"yaxis":{"gridcolor":"white","linecolor":"white","showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside","title":{"standoff":15},"zerolinecolor":"white","automargin":true},"scene":{"xaxis":{"backgroundcolor":"rgb(237,237,237)","gridcolor":"white","linecolor":"white","showbackground":true,"showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"rgb(237,237,237)","gridcolor":"white","linecolor":"white","showbackground":true,"showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"rgb(237,237,237)","gridcolor":"white","linecolor":"white","showbackground":true,"showgrid":true,"tickcolor":"rgb(51,51,51)","ticks":"outside","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"fillcolor":"black","line":{"width":0},"opacity":0.3},"annotationdefaults":{"arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"rgb(237,237,237)","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"}}

projects/plotly/src/lib/themes/gridon.json

@@ -0,0 +1 @@
+{"xaxis":{"showgrid":true,"title":{"standoff":15}},"yaxis":{"showgrid":true,"title":{"standoff":15}}}

projects/plotly/src/lib/themes/plotly.json

@@ -0,0 +1 @@
+{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1,"#f0f921"]],"sequentialminus":[[0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}

projects/plotly/src/lib/themes/plotly_dark.json

@@ -0,0 +1 @@
+{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#f2f5fa"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"rgb(17,17,17)","plot_bgcolor":"rgb(17,17,17)","polar":{"bgcolor":"rgb(17,17,17)","angularaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"radialaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"ternary":{"bgcolor":"rgb(17,17,17)","aaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"baxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"caxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1,"#f0f921"]],"sequentialminus":[[0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"yaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"zaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2}},"shapedefaults":{"line":{"color":"#f2f5fa"}},"annotationdefaults":{"arrowcolor":"#f2f5fa","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"rgb(17,17,17)","landcolor":"rgb(17,17,17)","subunitcolor":"#506784","showland":true,"showlakes":true,"lakecolor":"rgb(17,17,17)"},"title":{"x":0.05},"updatemenudefaults":{"bgcolor":"#506784","borderwidth":0},"sliderdefaults":{"bgcolor":"#C8D4E3","borderwidth":1,"bordercolor":"rgb(17,17,17)","tickwidth":0},"mapbox":{"style":"dark"}}

projects/plotly/src/lib/themes/plotly_white.json

@@ -0,0 +1 @@
+{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"white","polar":{"bgcolor":"white","angularaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""},"radialaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""}},"ternary":{"bgcolor":"white","aaxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"baxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"caxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1,"#f0f921"]],"sequentialminus":[[0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"yaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"zaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"white","subunitcolor":"#C8D4E3","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}

projects/plotly/src/lib/themes/presentation.json

@@ -0,0 +1 @@
+{"xaxis":{"title":{"standoff":15}},"yaxis":{"title":{"standoff":15}},"font":{"size":18}}