Merge pull request #1 from plotly/master

merge upstream

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.22.1] - 2018-04-09
+### Fixed
+- Various bugs with the `ohlc` and `candlestick` chart type in the `dcc.Graph`
+component were fixed. See https://github.com/plotly/dash-core-components/pull/184.
+
 ## [0.22.0] - 2018-04-03
 ### Added
 - Previously, if a user named their app file `dash.py`, an unhelpful error

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.22.0'
+__version__ = '0.22.1'

package.json

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

src/components/Graph.react.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {contains, filter, has, isNil, type} from 'ramda';
+import {contains, intersection, filter, has, isNil, type, pluck} from 'ramda';
 /* global Plotly:true */
 
 const filterEventData = (gd, eventData, event) => {
@@ -73,16 +73,31 @@ export default class PlotlyGraph extends Component {
  plot(props) {
  const {id, figure, animate, animation_options, config} = props;
  const gd = document.getElementById(id);
+
  if (animate && this._hasPlotted && figure.data.length === gd.data.length) {
  return Plotly.animate(id, figure, animation_options);
  } else {
- return Plotly.react(id, figure.data, figure.layout, config).then(() => {
- if (!this._hasPlotted) {
- this.bindEvents();
- Plotly.Plots.resize(document.getElementById(id));
- this._hasPlotted = true;
+
+ let PlotMethod;
+ if (intersection(
+ pluck('type', figure.data),
+ ['candlestick', 'ohlc']).length
+ ) {
+ PlotMethod = Plotly.newPlot;
+ } else {
+ PlotMethod = Plotly.react;
+ }
+
+ return PlotMethod(id, figure.data, figure.layout, config).then(
+ () => {
+ if (!this._hasPlotted) {
+ this.bindEvents();
+ Plotly.Plots.resize(document.getElementById(id));
+ this._hasPlotted = true;
+ }
  }
- });
+ );
+
  }
  }
 

test/test_integration.py

@@ -460,3 +460,39 @@ def update_pathname(n_clicks, current_pathname):
  self.wait_for_text_to_equal('#test-search', '?queryA=valueA')
  self.wait_for_text_to_equal('#test-hash', '')
  self.snapshot('link -- /test/pathname/a?queryA=valueA')
+
+
+ def test_candlestick(self):
+ app = dash.Dash(__name__)
+ app.layout = html.Div([
+ html.Button(
+ id='button',
+ children='Update Candlestick',
+ n_clicks=0
+ ),
+ dcc.Graph(id='graph')
+ ])
+
+ @app.callback(Output('graph', 'figure'), [Input('button', 'n_clicks')])
+ def update_graph(n_clicks):
+ return {
+ 'data': [{
+ 'open': [1] * 5,
+ 'high': [3] * 5,
+ 'low': [0] * 5,
+ 'close': [2] * 5,
+ 'x': [n_clicks] * 5,
+ 'type': 'candlestick'
+ }]
+ }
+ self.startServer(app=app)
+
+ button = self.wait_for_element_by_css_selector('#button')
+ self.snapshot('candlestick - initial')
+ button.click()
+ time.sleep(2)
+ self.snapshot('candlestick - 1 click')
+
+ button.click()
+ time.sleep(2)
+ self.snapshot('candlestick - 2 click')