Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f7dde83

Browse files
andrefarzatandrefarzat
committed
Changing the demo schema
1 parent 2e793f5 commit f7dde83

File tree

8 files changed

+69
-32
lines changed

8 files changed

+69
-32
lines changed

‎src/app/demo/demo.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<h5>Angular Plotly</h5>
77

88
<ul class="vertical menu">
9-
<li><a [routerLink]="['/home']">Line and Scatter Plot</a></li>
9+
<li><a [routerLink]="['/home']">Home</a></li>
1010
<li><a [routerLink]="['/box-plots']">Box Plots</a></li>
11+
<li><a [routerLink]="['/linear-charts']">Linear Plots</a></li>
1112
</ul>
1213
</div>
1314
</div>

‎src/app/demo/demo.module.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,23 @@ import { HomeComponent } from './home/home.component';
66
import { DemoComponent } from './demo.component';
77

88
import { PlotlyModule } from '../plotly/plotly.module';
9-
import { BoxPlotComponent } from './box-plot/box-plot.component';
9+
10+
// Examples
11+
import { BoxPlotComponent } from './examples/box-plot.component';
12+
import { LineChartsComponent } from './examples/line-charts.component';
1013

1114

1215
const demoRoutes: Routes = [
13-
{ path: 'home', component: HomeComponent, data: {title: 'Linear and Scatter Plot'} },
14-
{ path: 'box-plots', component: BoxPlotComponent, data: {title: 'Box Plotly'} },
16+
{ path: 'home', component: HomeComponent, data: { title: 'Home' } },
17+
{ path: 'box-plots', component: BoxPlotComponent, data: { title: 'Box Plotly' } },
18+
{ path: 'linear-charts', component: LineChartsComponent, data: { title: 'Line Charts' } },
19+
1520
{ path: '', redirectTo: '/home', pathMatch: 'full' },
1621
];
1722

1823
@NgModule({
1924
imports: [CommonModule, PlotlyModule, RouterModule.forRoot(demoRoutes, { enableTracing: true })],
20-
declarations: [HomeComponent, DemoComponent, BoxPlotComponent],
25+
declarations: [HomeComponent, DemoComponent, BoxPlotComponent, LineChartsComponent],
2126
exports: [DemoComponent],
2227
})
2328
export class DemoModule { }

‎src/app/demo/box-plot/box-plot.component.ts renamed to ‎src/app/demo/examples/box-plot.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
selector: 'plotly-box-plot',
5-
template: `<plotly-plot [data]="data" [layout]="layout" [revision]="0"></plotly-plot>`,
4+
selector: 'plotly-box-plot',
5+
template: `<plotly-plot [data]="data" [layout]="layout" [revision]="0"></plotly-plot>`,
66
})
77
export class BoxPlotComponent implements OnInit {
88

‎src/app/demo/examples/line-charts.component.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import * as Plotly from 'plotly.js';
3+
4+
@Component({
5+
selector: 'plotly-line-charts',
6+
template: '<plotly-plot [data]="data" [layout]="layout" [revision]="0" [useResizeHandler]="true"></plotly-plot>',
7+
})
8+
export class LineChartsComponent implements OnInit {
9+
10+
public data: Plotly.Data[] = [
11+
{ x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', name: 'Scatter' },
12+
{ x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines', name: 'Lines' },
13+
{ x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', name: 'Scatter + Lines' },
14+
];
15+
16+
public layout: Partial<Plotly.Layout> = {
17+
title: 'Adding Names to Line and Scatter Plot',
18+
};
19+
20+
21+
constructor() { }
22+
23+
ngOnInit() {
24+
}
25+
26+
}

‎src/app/demo/home/home.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1>Examples for angular-plotly.js</h1>

‎src/app/demo/home/home.component.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { Component, OnInit } from '@angular/core';
2-
import * as Plotly from 'plotly.js';
32

43
@Component({
54
selector: 'plotly-demo-home',
6-
template: `<plotly-plot [data]="data" [layout]="layout"></plotly-plot>`,
5+
templateUrl: './home.component.html',
76
})
87
export class HomeComponent {
98

10-
public data: Plotly.Data[] = [
11-
{ x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers', type: 'scatter' },
12-
{ x: [2, 3, 4, 5], y: [16, 5, 11, 9], mode: 'lines', type: 'scatter' },
13-
{ x: [1, 2, 3, 4], y: [12, 9, 15, 12], mode: 'lines+markers', type: 'scatter' },
9+
public items = [
10+
{name: 'name', url: 'aqui'},
1411
];
1512

1613
}

‎src/app/plotly/plot/plot.component.spec.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,16 @@ describe('PlotComponent', () => {
1313

1414
beforeEach(async(() => {
1515
const pSpy = jasmine.createSpyObj('PlotlyService', ['newPlot', 'plot']);
16-
const wSpy = jasmine.createSpyObj('Window', ['addEventListener', 'removeEventListener']);
16+
windowSpy = jasmine.createSpyObj('Window', ['addEventListener', 'removeEventListener']);
1717

1818
TestBed.configureTestingModule({
1919
declarations: [PlotComponent],
2020
providers: [
2121
{ provide: PlotlyService, useValue: pSpy },
22-
{ provide: Window, useValue: wSpy },
2322
],
2423
}).compileComponents();
2524

2625
plotlySpy = TestBed.get(PlotlyService);
27-
windowSpy = TestBed.get(Window);
2826
}));
2927

3028
beforeEach(() => {
@@ -91,23 +89,27 @@ describe('PlotComponent', () => {
9189
expect(component.plotEl.nativeElement.className).toBe('some-class');
9290
});
9391

94-
it('should add the gd property to window when passing true to debug', () => {
95-
spyOn(component, 'redraw').and.callFake(() => {
96-
(windowSpy as any).gd = component.debug ? {} : undefined;
97-
});
92+
it('should add the gd property to window when passing true to debug', (done) => {
93+
spyOn(component, 'getWindow').and.callFake(() => windowSpy);
94+
spyOn(component, 'redraw').and.callThrough();
9895

99-
expect((windowSpy as any).gd).toBeUndefined();
96+
expect(component.getWindow().gd).toBeUndefined();
10097
component.plotlyInstance = document.createElement('div') as any;
10198
component.debug = true;
102-
component.ngOnChanges({'debug': new SimpleChange(false, component.debug, false)});
10399
fixture.detectChanges();
100+
component.ngOnChanges({'debug': new SimpleChange(false, component.debug, false)});
104101

105-
expect((windowSpy as any).gd).toBeDefined();
106102
expect(component.redraw).toHaveBeenCalled();
103+
setTimeout(() => {
104+
expect(component.getWindow().gd).not.toBeUndefined();
105+
done();
106+
}, 13);
107107
});
108108

109109
it('should add handler into window.resize when useResizeHandler=true', () => {
110-
expect(windowSpy.addEventListener).not.toHaveBeenCalled();
110+
spyOn(component, 'getWindow').and.callFake(() => windowSpy);
111+
112+
expect(component.getWindow().addEventListener).not.toHaveBeenCalled();
111113
expect(component.resizeHandler).toBeUndefined();
112114

113115
component.useResizeHandler = true;

‎src/app/plotly/plot/plot.component.ts

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import { NgClass } from '@angular/common';
1818
// @dynamic
1919
@Component({
2020
selector: 'plotly-plot',
21-
template: `<div #plot [attr.id]="divId" [className]="className" [ngStyle]="style"></div>`,
22-
providers: [PlotlyService, { provide: Window, useFactory: () => window }],
21+
template: `<div class="js-plotly-plot"><div #plot [attr.id]="divId" [className]="className" [ngStyle]="style"></div></div>`,
22+
providers: [PlotlyService],
2323
})
2424
export class PlotComponent implements OnInit, OnChanges, OnDestroy {
2525

@@ -44,13 +44,14 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy {
4444
public plotlyInstance: Plotly.PlotlyHTMLElement;
4545
public resizeHandler?: (instance: Plotly.PlotlyHTMLElement) => void;
4646

47-
constructor(public plotly: PlotlyService, public window: Window) { }
47+
constructor(public plotly: PlotlyService) { }
4848

4949
ngOnInit() {
5050
this.plotly.newPlot(this.plotEl.nativeElement, this.data, this.layout, this.config).then(plotlyInstance => {
5151
this.plotlyInstance = plotlyInstance;
52-
(this.window as any).gd = this.debug ? plotlyInstance : undefined;
52+
this.getWindow().gd = this.debug ? plotlyInstance : undefined;
5353

54+
this.updateWindowResizeHandler();
5455
const figure = this.createFigure();
5556
this.initialized.emit(figure);
5657
}, err => {
@@ -61,7 +62,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy {
6162

6263
ngOnDestroy() {
6364
if (typeof this.resizeHandler === 'function') {
64-
this.window.removeEventListener('resize', this.resizeHandler as any);
65+
this.getWindow().removeEventListener('resize', this.resizeHandler as any);
6566
this.resizeHandler = undefined;
6667
}
6768

@@ -114,22 +115,26 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy {
114115

115116
this.plotly.plot(this.plotlyInstance, this.data, this.layout, this.config).then(plotlyInstance => {
116117
this.update.emit(this.createFigure());
117-
(this.window as any).gd = this.debug ? plotlyInstance : undefined;
118+
this.getWindow().gd = this.debug ? plotlyInstance : undefined;
118119
});
119120
}
120121

121122
updateWindowResizeHandler() {
122123
if (this.useResizeHandler) {
123124
if (!this.resizeHandler) {
124125
this.resizeHandler = () => this.plotly.resize(this.plotlyInstance);
125-
this.window.addEventListener('resize', this.resizeHandler as any);
126+
this.getWindow().addEventListener('resize', this.resizeHandler as any);
126127
}
127128
} else {
128129
if (typeof this.resizeHandler === 'function') {
129-
this.window.removeEventListener('resize', this.resizeHandler as any);
130+
this.getWindow().removeEventListener('resize', this.resizeHandler as any);
130131
this.resizeHandler = undefined;
131132
}
132133
}
133134
}
134135

136+
getWindow(): any {
137+
return window;
138+
}
139+
135140
}

0 commit comments

Comments
 (0)