This repository has been archived by the owner on Jun 3, 2024. It is now read-only.
dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension #706
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,12 @@ | ||
| import React, {Component, memo, Suspense} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import {asyncDecorator} from '@plotly/dash-component-plugins'; | ||
| import LazyLoader from '../utils/LazyLoader'; | ||
| import { | ||
| privatePropTypes, | ||
| privateDefaultProps, | ||
| } from '../fragments/Graph.privateprops'; | ||
|
|
||
| const EMPTY_EXTEND_DATA = []; | ||
|
|
||
|
|
@@ -76,11 +80,9 @@ class PlotlyGraph extends Component { | |
| render() { | ||
| return ( | ||
| <ControlledPlotlyGraph | ||
| {...this.props} | ||
| extendData={this.state.extendData} | ||
| clearExtendData={this.clearExtendData} | ||
| /> | ||
| ); | ||
| } | ||
|
|
@@ -90,24 +92,58 @@ const RealPlotlyGraph = asyncDecorator(PlotlyGraph, () => | |
| LazyLoader.plotly().then(LazyLoader.graph) | ||
| ); | ||
|
|
||
| const ControlledPlotlyGraph = memo(props => { | ||
| const {className, id} = props; | ||
|
|
||
| const extendedClassName = className | ||
| ? 'dash-graph ' + className | ||
| : 'dash-graph'; | ||
|
|
||
| return ( | ||
| <Suspense | ||
| fallback={ | ||
| <div | ||
| id={id} | ||
| key={id} | ||
| className={`${extendedClassName} dash-graph--pending`} | ||
| /> | ||
| } | ||
| > | ||
| <RealPlotlyGraph {...props} className={extendedClassName} /> | ||
| </Suspense> | ||
| ); | ||
| }); | ||
|
|
||
| ControlledPlotlyGraph.propTypes = PropTypes.any; | ||
|
There was a problem hiding this comment. @Marc-Andre-Rivet I'm seeing a funny warning message in debug mode: That I think is coming from here... Should this just be a copy of |
||
|
|
||
| PlotlyGraph.propTypes = { | ||
| ...privatePropTypes, | ||
|
|
||
| /** | ||
| * The ID of this component, used to identify dash components | ||
| * in callbacks. The ID needs to be unique across all of the | ||
| * components in an app. | ||
| */ | ||
| id: PropTypes.string, | ||
|
|
||
| /** | ||
| * If True, the Plotly.js plot will be fully responsive to window resize | ||
| * and parent element resize event. This is achieved by overriding | ||
| * `config.responsive` to True, `figure.layout.autosize` to True and unsetting | ||
| * `figure.layout.height` and `figure.layout.width`. | ||
| * If False, the Plotly.js plot not be responsive to window resize and | ||
| * parent element resize event. This is achieved by overriding `config.responsive` | ||
| * to False and `figure.layout.autosize` to False. | ||
| * If 'auto' (default), the Graph will determine if the Plotly.js plot can be made fully | ||
| * responsive (True) or not (False) based on the values in `config.responsive`, | ||
| * `figure.layout.autosize`, `figure.layout.height`, `figure.layout.width`. | ||
| * This is the legacy behavior of the Graph component. | ||
| * | ||
| * Needs to be combined with appropriate dimension / styling through the `style` prop | ||
| * to fully take effect. | ||
| */ | ||
| responsive: PropTypes.oneOf([true, false, 'auto']), | ||
|
There was a problem hiding this comment. Allow users to define the behavior they want for their graph, allowing them to override the normal behavior for their |
||
|
|
||
| /** | ||
| * Data from latest click event. Read-only. | ||
| */ | ||
|
|
@@ -479,6 +515,8 @@ PlotlyGraph.propTypes = { | |
| }; | ||
|
|
||
| PlotlyGraph.defaultProps = { | ||
| ...privateDefaultProps, | ||
|
|
||
| clickData: null, | ||
| clickAnnotationData: null, | ||
| hoverData: null, | ||
|
|
@@ -491,6 +529,7 @@ PlotlyGraph.defaultProps = { | |
| layout: {}, | ||
| frames: [], | ||
| }, | ||
| responsive: 'auto', | ||
| animate: false, | ||
| animation_options: { | ||
| frame: { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| export const privatePropTypes = { | ||
| _dashprivate_transformConfig: PropTypes.func, | ||
| _dashprivate_transformFigure: PropTypes.func, | ||
| }; | ||
|
|
||
| export const privateDefaultProps = { | ||
| _dashprivate_transformConfig: c => c, | ||
| _dashprivate_transformFigure: f => f, | ||
| }; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Plotly.js 1.51.3 with the promise fix 🎉