From 9c324ba05339fbb1546a477e2a2d2ed194cdedd5 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@plot.ly>
Date: Mon, 29 Apr 2019 11:12:09 -0400
Subject: [PATCH] Add frames to Graph

---
 CHANGELOG.md                  |  4 ++++
 src/components/Graph.react.js | 27 +++++++++++++++------------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbbec4af4..61cffbd56 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Added
+
+- `figure` prop in `dcc.Graph` now accepts a `frames` key
+
 ### Removed
 
 - Removed unused `key` prop from `dcc.ConfirmDialog`
diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js
index 202ab8fde..f72c2e1d5 100644
--- a/src/components/Graph.react.js
+++ b/src/components/Graph.react.js
@@ -104,15 +104,18 @@ class PlotlyGraph extends Component {
         ) {
             return Plotly.animate(id, figure, animation_options);
         }
-        return Plotly.react(id, figure.data, clone(figure.layout), config).then(
-            () => {
-                if (!this._hasPlotted) {
-                    this.bindEvents();
-                    Plotly.Plots.resize(document.getElementById(id));
-                    this._hasPlotted = true;
-                }
+        return Plotly.react(id, {
+            data: figure.data,
+            layout: clone(figure.layout),
+            frames: figure.frames,
+            config: config,
+        }).then(() => {
+            if (!this._hasPlotted) {
+                this.bindEvents();
+                Plotly.Plots.resize(document.getElementById(id));
+                this._hasPlotted = true;
             }
-        );
+        });
     }
 
     extend(props) {
@@ -327,13 +330,13 @@ const graphPropTypes = {
     /**
      * Plotly `figure` object. See schema:
      * https://plot.ly/javascript/reference
-     * Only supports `data` array and `layout` object.
-     * `config` is set separately by the `config` property,
-     * and `frames` is not supported.
+     *
+     * `config` is set separately by the `config` property
      */
     figure: PropTypes.exact({
         data: PropTypes.arrayOf(PropTypes.object),
         layout: PropTypes.object,
+        frames: PropTypes.arrayOf(PropTypes.object),
     }),
 
     /**
@@ -628,7 +631,7 @@ const graphDefaultProps = {
     relayoutData: null,
     extendData: null,
     restyleData: null,
-    figure: {data: [], layout: {}},
+    figure: {data: [], layout: {}, frames: []},
     animate: false,
     animation_options: {
         frame: {