Skip to content

add className prop, deprecate fit prop #35

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 2 commits into from
Jan 23, 2018
Merged

add className prop, deprecate fit prop #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bb85f42
fix for #30 and #22
nicolaskruchten Jan 23, 2018
4e1a640
document responsiveness
nicolaskruchten Jan 23, 2018
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
7 changes: 5 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,16 +191,19 @@ You can see an example of this method in action [here](https://codepen.io/rsreus
| `data` | `Array` | `[]` | list of trace objects |
| `layout` | `Object` | `undefined` | layout object |
| `config` | `Object` | `undefined` | config object |
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the containing `<div>` |
| `style` | `Object` | `{position: 'relative', display: 'inline-block'}` | used to style the `<div>` into which the plot is rendered |
| `className` | `string` | `undefined` | applied to the `<div>` into which the plot is rendered |
| `frames` | `Array` | `undefined` | list of frame objects |
| `useResizeHandler` | `Boolean` | `false` | When true, adds a call to `Plotly.Plot.resize()` as a `window.resize` event handler |
| `fit` | `Boolean` | `false` | When true, disregards `layout.width` and `layout.height` and fits to the parent div size, updating on `window.resize` |
| `revision` | `Number` | `undefined` | When provided, causes the plot to update *only* when the revision is incremented. |
| `debug` | `Boolean` | `false` | Assign the graph div to `window.gd` for debugging |
| `onInitialized` | `Function` | `undefined` | Callback executed after plot is initialized |
| `onPurge` | `Function` | `undefined` | Callback executed when component unmounts. Unmounting triggers a Plotly.purge event which strips the graphDiv of all plotly.js related information including data and layout. This hook gives application writers a chance to pull data and layout off the DOM. |
| `onUpdate` | `Function` | `undefined` | Callback executed when a plotly.js API method resolves |
| `onError` | `Function` | `undefined` | Callback executed when a plotly.js API method rejects |
| `fit` | `Boolean` | `false` | *deprecated* When true, will set `layout.height` and `layout.width` to the component's parent's size if they are unspecified, and will update them on `window.resize` |

To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use `style` or `className` to set the dimensions of the element (i.e. using `width: 100%; height: 100%` or some similar values) and set `useResizeHandler` to `true` while setting `layout.autosize` to `true` and leaving `layout.height` and `layout.width` undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/

### Event handler props

Expand Down
9 changes: 8 additions & 1 deletion src/factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,13 @@ export default function plotComponentFactory(Plotly) {
}

render() {
return <div style={this.props.style} ref={this.getRef} />;
return (
<div
style={this.props.style}
ref={this.getRef}
className={this.props.className}
/>
);
}
}

Expand All @@ -277,6 +283,7 @@ export default function plotComponentFactory(Plotly) {
onUpdate: PropTypes.func,
debug: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
useResizeHandler: PropTypes.bool,
};

Expand Down