Merge pull request #405 from plotly/animations

frames support + slider styling controls

Author: VeraZab

dev/App.js

@@ -29,6 +29,7 @@ class App extends Component {
         },
       ],
       layout: {},
+      frames: [],
     };
   }
 
@@ -39,10 +40,13 @@ class App extends Component {
           data={this.state.data}
           layout={this.state.layout}
           config={config}
+          frames={this.state.frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout) => this.setState({data, layout})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/custom/src/App.js

@@ -26,6 +26,7 @@ class App extends Component {
     this.state = {
       data: [],
       layout: {},
+      frames: [],
       currentMockIndex: -1,
       mocks: [],
     };
@@ -52,6 +53,7 @@ class App extends Component {
           currentMockIndex: mockIndex,
           data: figure.data,
           layout: figure.layout,
+          frames: figure.frames,
         });
       });
   }
@@ -63,10 +65,13 @@ class App extends Component {
           data={this.state.data}
           layout={this.state.layout}
           config={config}
+          frames={this.state.frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout) => this.setState({data, layout})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/demo/src/App.js

@@ -29,14 +29,22 @@ class App extends Component {
   }
 
   render() {
-    const {actions, dataSources, dataSourceOptions, data, layout} = this.props;
+    const {
+      actions,
+      dataSources,
+      dataSourceOptions,
+      data,
+      layout,
+      frames,
+    } = this.props;
 
     return (
       <div className="app">
         <PlotlyEditor
           data={data}
           layout={layout}
           config={config}
+          frames={frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
@@ -56,13 +64,15 @@ App.propTypes = {
   dataSources: PropTypes.object,
   data: PropTypes.array,
   layout: PropTypes.object,
+  frames: PropTypes.array,
 };
 
 const mapStateToProps = state => ({
   dataSourceOptions: state.dataSourceOptions,
   dataSources: state.dataSources,
   data: state.data,
   layout: state.layout,
+  frames: state.frames,
 });
 
 const mapDispatchToProps = dispatch => ({

examples/redux/src/App.js

@@ -14,9 +14,9 @@ export function dataSourceOptionsUpdate(payload) {
   };
 }
 
-export function editorUpdate(data, layout) {
+export function editorUpdate(data, layout, frames) {
   return {
     type: ACTIONS.EDITOR_UPDATE,
-    payload: {data, layout},
+    payload: {data, layout, frames},
   };
 }

examples/redux/src/actions.js

@@ -5,6 +5,7 @@ const initialState = {
   dataSourceOptions: [],
   data: [],
   layout: {},
+  frames: [],
 };
 
 export default (state = initialState, action) => {
@@ -18,6 +19,7 @@ export default (state = initialState, action) => {
         ...state,
         data: action.payload.data,
         layout: action.payload.layout,
+        frames: action.payload.frames,
       };
     default:
       return state;

examples/redux/src/reducer.js

@@ -19,7 +19,7 @@ const config = {editable: true};
 class App extends Component {
   constructor() {
     super();
-    this.state = {data: [], layout: {}};
+    this.state = {data: [], layout: {}, frames: []};
   }
 
   render() {
@@ -29,10 +29,13 @@ class App extends Component {
           data={this.state.data}
           layout={this.state.layout}
           config={config}
+          frames={this.state.frames}
           dataSources={dataSources}
           dataSourceOptions={dataSourceOptions}
           plotly={plotly}
-          onUpdate={(data, layout) => this.setState({data, layout})}
+          onUpdate={(data, layout, frames) =>
+            this.setState({data, layout, frames})
+          }
           useResizeHandler
           debug
           advancedTraceTypeSelector

examples/simple/src/App.js

@@ -9,9 +9,11 @@ import {
   StyleLegendPanel,
   StyleNotesPanel,
   StyleShapesPanel,
+  StyleSlidersPanel,
   StyleImagesPanel,
   StyleTracesPanel,
   StyleColorbarsPanel,
+  StyleUpdateMenusPanel,
 } from './default_panels';
 
 const DefaultEditor = ({localize: _}) => (
@@ -26,6 +28,8 @@ const DefaultEditor = ({localize: _}) => (
       <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
       <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
       <StyleImagesPanel group={_('Style')} name={_('Images')} />
+      <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
+      <StyleUpdateMenusPanel group={_('Style')} name={_('Update Menus')} />
     </PanelMenuWrapper>
   </Fragment>
 );