Skip to content

Improving PlotlyViaWindowModule docs #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 14, 2019
+31 −2
Merged

Improving PlotlyViaWindowModule docs #40

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d7e90f
trying to improve PlotlyViaWindowModule docs
andrefarzat Feb 3, 2019
abe9ce9
json -> javascript
andrefarzat Feb 3, 2019
019ba67
adding ... to docs
andrefarzat Feb 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 31 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -83,6 +83,8 @@ For a full description of Plotly chart types and attributes see the following re
* [Plotly JavaScript API documentation](https://plot.ly/javascript/)
* [Full plotly.js attribute listing](https://plot.ly/javascript/reference/)

The `plotly.js` is bundled within the angular code. To avoid this, please read [how to customize the plotlyjs bundle](#customizing-the-plotlyjs-bundle) below.

## API Reference

### Basic Props
@@ -172,7 +174,33 @@ export class AppModule { }

### Plotly Via Window Module

If you want to use a [different precompiled bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles) or if you wish to [assemble you own customized bundle](https://github.com/plotly/plotly.js#modules), you can use `PlotlyViaWindowModule` to force the use of `window.Plotly` object. You can add the script via tag `<script>` direct on your code, or add it as a [global script on angular.json](https://github.com/angular/angular-cli/wiki/stories-global-scripts#global-scripts).
`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 beingb 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:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: beingb


```javascript
// angular.json
{
...
"projects": {
"project-name": { // This is your project's name
...
"architect": {
"build": {
...
"options": {
"scripts": [
"node_modules/plotly.js/dist/plotly.min.js" // add this
]
}
}
}
...
}
}
}
```

This will include `plotly.js` into the `vendor.js` file generated by angular CLI build process, and `plotly.js` library will be loaded before angular and your project's code. The `window.Plotly` will be available. Thus, you must use `PlotlyViaWindowModule` module to force `angular-plotly.js` to use `window.Plotly` object:


```typescript
import { NgModule } from '@angular/core';
@@ -187,6 +215,7 @@ import { PlotlyViaWindowModule } from 'angular-plotly.js';
export class AppModule { }
```

If you want to use a [different precompiled bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles) or if you wish to [assemble you own customized bundle](https://github.com/plotly/plotly.js#modules), you can use `PlotlyViaWindowModule` to force the use of `window.Plotly` object as shown above.

## Development

@@ -210,4 +239,4 @@ $ npm run test

## License

&copy; 2018 Plotly, Inc. MIT License.
&copy; 2019 Plotly, Inc. MIT License.