dcc.Graph: Improve responsiveness, expose resize status, allow wrapper extension

CHANGELOG.md

@@ -2,6 +2,13 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- [#706](https://github.com/plotly/dash-core-components/pull/706)
+  - Added new `responsive` property that overrides the underlying Plotly.js graph responsiveness from Dash-land
+  - Added responsiveness on graph parent element resize (previously only worked on window.resize)
+  - Added new `dash-graph-resizing` class to dcc.Graph, present while resizing is in progress
+
 ## [1.6.0] - 2019-11-27
 ### Updated
 - Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)

package.json

@@ -78,6 +78,7 @@
     "prettier": "^1.14.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-resize-detector": "^4.2.1",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "webpack": "^4.37.0",
@@ -91,4 +92,4 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   }
-}
+}

src/components/Graph.react.js

@@ -3,6 +3,10 @@ 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 = [];
 
@@ -101,13 +105,33 @@ class ControlledPlotlyGraph extends PureComponent {
 }
 
 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']),
+
     /**
      * Data from latest click event. Read-only.
      */
@@ -479,6 +503,8 @@ PlotlyGraph.propTypes = {
 };
 
 PlotlyGraph.defaultProps = {
+    ...privateDefaultProps,
+
     clickData: null,
     clickAnnotationData: null,
     hoverData: null,
@@ -491,6 +517,7 @@ PlotlyGraph.defaultProps = {
         layout: {},
         frames: [],
     },
+    responsive: 'auto',
     animate: false,
     animation_options: {
         frame: {

src/fragments/Graph.privateprops.js

@@ -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,
+};