diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..dcd4462 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,17 @@ +# Changelog + +## [1.8.0] - 2020-02-28 +### Changed +- Downgraded to angular 8.0 (See https://github.com/plotly/angular-plotly.js/issues/101) + +## [1.7.0] - 2020-02-27 +### Added +- Adding `treemapclick` and `sunburstclick` events (See https://github.com/plotly/angular-plotly.js/issues/105) + +## [1.6.1] - 2020-02-25 +### Changed +- Adding `@angular/core^9.0.0` as a peer dependency + +## [1.6.0] - 2020-02-22 +### Changed +- Upgraded to angular 9.0 (See https://github.com/plotly/angular-plotly.js/issues/101) \ No newline at end of file diff --git a/README.md b/README.md index e606fa1..356e0be 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ --- -Supports Angular 8.x and up. If you want to use with Angular 7.x, [please read the FAQ](https://github.com/plotly/angular-plotly.js/blob/master/FAQ.md#how-to-support-angular-7x-). +Supports Angular 8.x. To use with angular 9.x, please check the [`angular-plotly.js@2.x`](https://github.com/plotly/angular-plotly.js). version. If you want to use with Angular 7.x, [please read the FAQ](https://github.com/plotly/angular-plotly.js/blob/master/FAQ.md#how-to-support-angular-7x-). ## Content @@ -123,14 +123,14 @@ The `plotly.js` is bundled within the angular code. To avoid this, please read [ @Component({ selector: 'plotly-example', template: ` - `, }) export class PlotlyExampleComponent { public graph = { data: [{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' }], - layout: {autosize: true, title: 'A Fancy Plot'}, + layout: {autosize: true, title: 'A Fancy Plot'}, }; } ``` @@ -169,11 +169,13 @@ Event handlers for specific [`plotly.js` events](https://plot.ly/javascript/plot | `(transitionInterrupted)` | `Function` | `plotly_transitioninterrupted` | | `(unhover)` | `Function` | `plotly_unhover` | | `(relayouting)` | `Function` | `plotly_relayouting` | +| `(treemapclick)` | `Function` | `plotly_treemapclick` | +| `(sunburstclick)` | `Function` | `plotly_sunburstclick` | ## Customizing the `plotly.js` bundle -By default, this library bundles `plotly.js` from the peer dependency together within the output. This results on huge outputs, for `plotly.js` itself is ~3MB when bundled. It also makes the build (with `ng serve --prod`) really slow, for it minifies everything together. +By default, this library bundles `plotly.js` from the peer dependency together within the output. This results on huge outputs, for `plotly.js` itself is ~3MB when bundled. It also makes the build (with `ng serve --prod`) really slow, for it minifies everything together. If you wish to optimize loading `plotly.js` in a different way, please check both [`PlotlyViaCDNModule`](#plotly-via-cdn-module) and [`PlotlyViaWindowModule`](#plotly-via-window-module) modules below. @@ -195,7 +197,7 @@ PlotlyViaCDNModule.plotlyBundle = 'basic'; // optional: can be null (for full) o @NgModule({ imports: [ CommonModule, - PlotlyViaCDNModule, + PlotlyViaCDNModule, ], ... }) @@ -204,7 +206,7 @@ export class AppModule { } ### Plotly Via Window Module -`plotly.js` can be added as a [global script on angular.json](https://github.com/angular/angular-cli/wiki/stories-global-scripts#global-scripts) to avoid it being bundled into the final project's code. To make this happen, you must first add `plotly.js` path into `angular.json` file as shown below: +`plotly.js` can be added as a [global script on angular.json](https://github.com/angular/angular-cli/wiki/stories-global-scripts#global-scripts) to avoid it being bundled into the final project's code. To make this happen, you must first add `plotly.js` path into `angular.json` file as shown below: ```javascript // angular.json diff --git a/package-lock.json b/package-lock.json index 6dd8593..993154b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "angular-plotly.js", - "version": "1.5.0", + "version": "1.8.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 42d01d9..f982706 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-plotly.js", - "version": "1.5.0", + "version": "1.8.0", "license": "MIT", "main": "index.ts", "scripts": { diff --git a/src/app/plotly-via-cdn/plotly-via-cdn.module.ts b/src/app/plotly-via-cdn/plotly-via-cdn.module.ts index 09f85df..5f10a00 100644 --- a/src/app/plotly-via-cdn/plotly-via-cdn.module.ts +++ b/src/app/plotly-via-cdn/plotly-via-cdn.module.ts @@ -42,7 +42,7 @@ export class PlotlyViaCDNModule { PlotlyViaCDNModule._plotlyBundle = bundle; } - static loadViaCDN() { + static loadViaCDN(): void { PlotlyService.setPlotly('waiting'); const init = () => { diff --git a/src/app/shared/plot/plot.component.ts b/src/app/shared/plot/plot.component.ts index d684246..1b09b62 100644 --- a/src/app/shared/plot/plot.component.ts +++ b/src/app/shared/plot/plot.component.ts @@ -86,11 +86,14 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck { @Output() transitionInterrupted = new EventEmitter(); @Output() unhover = new EventEmitter(); @Output() relayouting = new EventEmitter(); + @Output() treemapclick = new EventEmitter(); + @Output() sunburstclick = new EventEmitter(); public eventNames = ['afterExport', 'afterPlot', 'animated', 'animatingFrame', 'animationInterrupted', 'autoSize', 'beforeExport', 'buttonClicked', 'clickAnnotation', 'deselect', 'doubleClick', 'framework', 'hover', 'legendClick', 'legendDoubleClick', 'relayout', 'restyle', 'redraw', 'selected', 'selecting', 'sliderChange', - 'sliderEnd', 'sliderStart', 'transitioning', 'transitionInterrupted', 'unhover', 'relayouting']; + 'sliderEnd', 'sliderStart', 'transitioning', 'transitionInterrupted', 'unhover', 'relayouting', 'treemapclick', + 'sunburstclick']; constructor( public plotly: PlotlyService, diff --git a/src/app/shared/plotly.service.spec.ts b/src/app/shared/plotly.service.spec.ts index 9536678..b4d0779 100644 --- a/src/app/shared/plotly.service.spec.ts +++ b/src/app/shared/plotly.service.spec.ts @@ -36,6 +36,16 @@ describe('PlotlyService', () => { expect(service.getPlotly()).toBe(PlotlyJS); })); + it('should set the module name', () => { + expect((PlotlyService as any)._moduleName).toBeUndefined(); + PlotlyService.setModuleName('ViaCDN'); + expect((PlotlyService as any)._moduleName).toBe('ViaCDN'); + PlotlyService.setModuleName('ViaCDN'); + + // cleaning up + (PlotlyService as any)._moduleName = undefined; + }); + it('should call plotly.newPlot method', inject([PlotlyService], async (service: PlotlyService) => { return new Promise(async (resolve) => { const plotly = service.getPlotly();