Merge pull request #219 from plotly/remove-graph-id

Set Graph id to be optional

Author: valentijnnieman

CHANGELOG.md

@@ -5,9 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [0.28.2] - 2018-09-07
 ### Changed
 - The `Interval` component's `max_interval` prop can now be used to stop/restart the interval. Fixes [#266](https://github.com/plotly/dash-core-components/issues/266)
+- The `Graph` component's `id` is now not required to be set. 
 ### Fixed
 - Fixed bug where Graph would resize randomly when rerendered, for example in a dcc.Tabs component.
-- 
 
 ## [0.28.2] - 2018-09-06
 ### Fixed

dash_core_components/Graph.py

@@ -8,7 +8,9 @@ class Graph(Component):
 
 
 Keyword arguments:
-- id (string; required)
+- id (string; optional): 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.
 - clickData (dict; optional): Data from latest click event
 - hoverData (dict; optional): Data from latest hover event
 - clear_on_unhover (boolean; optional): If True, `clear_on_unhover` will clear the `hoverData` property
@@ -84,7 +86,7 @@ class Graph(Component):
 
 Available events: 'click', 'hover', 'selected', 'relayout', 'unhover'"""
     @_explicitize_args
-    def __init__(self, id=Component.REQUIRED, clickData=Component.UNDEFINED, hoverData=Component.UNDEFINED, clear_on_unhover=Component.UNDEFINED, selectedData=Component.UNDEFINED, relayoutData=Component.UNDEFINED, figure=Component.UNDEFINED, style=Component.UNDEFINED, className=Component.UNDEFINED, animate=Component.UNDEFINED, animation_options=Component.UNDEFINED, config=Component.UNDEFINED, **kwargs):
+    def __init__(self, id=Component.UNDEFINED, clickData=Component.UNDEFINED, hoverData=Component.UNDEFINED, clear_on_unhover=Component.UNDEFINED, selectedData=Component.UNDEFINED, relayoutData=Component.UNDEFINED, figure=Component.UNDEFINED, style=Component.UNDEFINED, className=Component.UNDEFINED, animate=Component.UNDEFINED, animation_options=Component.UNDEFINED, config=Component.UNDEFINED, **kwargs):
         self._prop_names = ['id', 'clickData', 'hoverData', 'clear_on_unhover', 'selectedData', 'relayoutData', 'figure', 'style', 'className', 'animate', 'animation_options', 'config']
         self._type = 'Graph'
         self._namespace = 'dash_core_components'
@@ -98,7 +100,7 @@ def __init__(self, id=Component.REQUIRED, clickData=Component.UNDEFINED, hoverDa
         _locals.update(kwargs)  # For wildcard attrs
         args = {k: _locals[k] for k in _explicit_args if k != 'children'}
 
-        for k in ['id']:
+        for k in []:
             if k not in args:
                 raise TypeError(
                     'Required argument `' + k + '` was not specified.')

dash_core_components/bundle.js

@@ -1147,8 +1147,12 @@
         "type": {
           "name": "string"
         },
-        "required": true,
-        "description": ""
+        "required": false,
+        "description": "The ID of this component, used to identify dash components\nin callbacks. The ID needs to be unique across all of the\ncomponents in an app.",
+        "defaultValue": {
+          "value": "'graph-' + Math.random().toString(36).substring(2,7)",
+          "computed": false
+        }
       },
       "clickData": {
         "type": {

dash_core_components/metadata.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.28.2",
+  "version": "0.28.3",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

dash_core_components/package.json

@@ -193,7 +193,12 @@ export default class PlotlyGraph extends Component {
 }
 
 PlotlyGraph.propTypes = {
-    id: PropTypes.string.isRequired,
+    /**
+     * 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,
     /**
      * Data from latest click event
      */
@@ -453,6 +458,9 @@ PlotlyGraph.propTypes = {
 }
 
 PlotlyGraph.defaultProps = {
+    /* eslint-disable no-magic-numbers */
+    id: 'graph-' + Math.random().toString(36).substring(2,7),
+    /* eslint-enable no-magic-numbers */
     clickData: null,
     hoverData: null,
     selectedData: null,

src/components/Graph.react.js

@@ -854,6 +854,44 @@ def update_graph(n_clicks):
         time.sleep(2)
         self.snapshot('candlestick - 2 click')
 
+    def test_graphs_with_different_figures(self):
+        app = dash.Dash(__name__)
+        app.layout = html.Div([
+            dcc.Graph(
+                id='example-graph',
+                figure={
+                    'data': [
+                        {'x': [1, 2, 3], 'y': [4, 1, 2],
+                            'type': 'bar', 'name': 'SF'},
+                        {'x': [1, 2, 3], 'y': [2, 4, 5],
+                         'type': 'bar', 'name': u'Montréal'},
+                    ],
+                    'layout': {
+                        'title': 'Dash Data Visualization'
+                    }
+                }
+            ),
+            dcc.Graph(
+                id='example-graph-2',
+                figure={
+                    'data': [
+                        {'x': [20, 24, 33], 'y': [5, 2, 3],
+                            'type': 'bar', 'name': 'SF'},
+                        {'x': [11, 22, 33], 'y': [22, 44, 55],
+                         'type': 'bar', 'name': u'Montréal'},
+                    ],
+                    'layout': {
+                        'title': 'Dash Data Visualization'
+                    }
+                }
+            ),
+
+        ])
+
+        self.startServer(app=app)
+
+        self.snapshot('2 graphs with different figures')
+
     def test_datepickerrange_updatemodes(self):
         app = dash.Dash(__name__)