diff --git a/CHANGELOG.md b/CHANGELOG.md index 75c64ea26..5ddd95b27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,28 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [0.9.0] - 2017-07-28 +### Added +- A `config` property of the `Graph` component that exposes the [plotly.js config properties](https://plot.ly/javascript/configuration-options/). Here's an example that hides 2 buttons and makes the elements in the graph "editable": +``` +import dash +import dash_core_components as dcc +import dash_html_components as html + +app = dash.Dash() + +app.layout = html.Div([ + dcc.Graph( + id='my-graph', + figure={'data': [{'x': [1, 2, 3]}]}, + config={'editable': True, 'modeBarButtonsToRemove': ['pan2d', 'lasso2d']} + ) +]) + +if __name__ == '__main__': + app.run_server(debug=True) +``` + ## [0.8.0] - 2017-07-27 ### Added - A new `Textarea` component for displaying the simple Textarea HTML element. The content of the `Textarea` is controlled through the `value` property: diff --git a/dash_core_components/metadata.json b/dash_core_components/metadata.json index c1a89a321..c35d23e26 100644 --- a/dash_core_components/metadata.json +++ b/dash_core_components/metadata.json @@ -385,6 +385,212 @@ "computed": false } }, + "config": { + "type": { + "name": "shape", + "value": { + "staticPlot": { + "name": "bool", + "description": "no interactivity, for export or image generation", + "required": false + }, + "editable": { + "name": "bool", + "description": "we can edit titles, move annotations, etc - sets all pieces of `edits`\nunless a separate `edits` config item overrides individual parts", + "required": false + }, + "edits": { + "name": "shape", + "value": { + "annotationPosition": { + "name": "bool", + "description": "annotationPosition: the main anchor of the annotation, which is the\ntext (if no arrow) or the arrow (which drags the whole thing leaving\nthe arrow length & direction unchanged)", + "required": false + }, + "annotationTail": { + "name": "bool", + "description": "just for annotations with arrows, change the length and direction of the arrow", + "required": false + }, + "annotationText": { + "name": "bool", + "required": false + }, + "axisTitleText": { + "name": "bool", + "required": false + }, + "colorbarPosition": { + "name": "bool", + "required": false + }, + "colorbarTitleText": { + "name": "bool", + "required": false + }, + "legendPosition": { + "name": "bool", + "required": false + }, + "legendText": { + "name": "bool", + "description": "edit the trace name fields from the legend", + "required": false + }, + "shapePosition": { + "name": "bool", + "required": false + }, + "titleText": { + "name": "bool", + "description": "the global `layout.title`", + "required": false + } + }, + "description": "a set of editable properties", + "required": false + }, + "autosizable": { + "name": "bool", + "description": "DO autosize once regardless of layout.autosize\n(use default width or height values otherwise)", + "required": false + }, + "queueLength": { + "name": "number", + "description": "set the length of the undo/redo queue", + "required": false + }, + "fillFrame": { + "name": "bool", + "description": "if we DO autosize, do we fill the container or the screen?", + "required": false + }, + "frameMargins": { + "name": "number", + "description": "if we DO autosize, set the frame margins in percents of plot size", + "required": false + }, + "scrollZoom": { + "name": "bool", + "description": "mousewheel or two-finger scroll zooms the plot", + "required": false + }, + "doubleClick": { + "name": "enum", + "value": [ + { + "value": "false", + "computed": false + }, + { + "value": "'reset'", + "computed": false + }, + { + "value": "'autosize'", + "computed": false + }, + { + "value": "'reset+autosize'", + "computed": false + } + ], + "description": "double click interaction (false, 'reset', 'autosize' or 'reset+autosize')", + "required": false + }, + "showTips": { + "name": "bool", + "description": "new users see some hints about interactivity", + "required": false + }, + "showAxisDragHandles": { + "name": "bool", + "description": "enable axis pan/zoom drag handles", + "required": false + }, + "showAxisRangeEntryBoxes": { + "name": "bool", + "description": "enable direct range entry at the pan/zoom drag points\n(drag handles must be enabled above)", + "required": false + }, + "showLink": { + "name": "bool", + "description": "link to open this plot in plotly", + "required": false + }, + "sendData": { + "name": "bool", + "description": "if we show a link, does it contain data or just link to a plotly file?", + "required": false + }, + "linkText": { + "name": "string", + "description": "text appearing in the sendData link", + "required": false + }, + "displayModeBar": { + "name": "enum", + "value": [ + { + "value": "true", + "computed": false + }, + { + "value": "false", + "computed": false + }, + { + "value": "'hover'", + "computed": false + } + ], + "description": "display the mode bar (true, false, or 'hover')", + "required": false + }, + "modeBarButtonsToRemove": { + "name": "array", + "description": "remove mode bar button by name.\nAll modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js\nCommon names include:\n - sendDataToCloud\n- (2D): zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d\n- (Cartesian): hoverClosestCartesian, hoverCompareCartesian\n- (3D): zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d\n- (Geo): zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo\n- hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews", + "required": false + }, + "modeBarButtonsToAdd": { + "name": "array", + "description": "add mode bar button using config objects", + "required": false + }, + "modeBarButtons": { + "name": "any", + "description": "fully custom mode bar buttons as nested array,\nwhere the outer arrays represents button groups, and\nthe inner arrays have buttons config objects or names of default buttons", + "required": false + }, + "displaylogo": { + "name": "bool", + "description": "add the plotly logo on the end of the mode bar", + "required": false + }, + "plotGlPixelRatio": { + "name": "number", + "description": "increase the pixel ratio for Gl plot images", + "required": false + }, + "topojsonURL": { + "name": "string", + "description": "URL to topojson files used in geo charts", + "required": false + }, + "mapboxAccessToken": { + "name": "any", + "description": "Mapbox access token (required to plot mapbox trace types)\nIf using an Mapbox Atlas server, set this option to '',\nso that plotly.js won't attempt to authenticate to the public Mapbox server.", + "required": false + } + } + }, + "required": false, + "description": "Plotly.js config options.\nSee https://plot.ly/javascript/configuration-options/\nfor more info.", + "defaultValue": { + "value": "{\n staticPlot: false,\n editable: false,\n edits: {\n annotationPosition: false,\n annotationTail: false,\n annotationText: false,\n axisTitleText: false,\n colorbarPosition: false,\n colorbarTitleText: false,\n legendPosition: false,\n legendText: false,\n shapePosition: false,\n titleText: false\n },\n autosizable: false,\n queueLength: 0,\n fillFrame: false,\n frameMargins: 0,\n scrollZoom: false,\n doubleClick: 'reset+autosize',\n showTips: true,\n showAxisDragHandles: true,\n showAxisRangeEntryBoxes: true,\n showLink: false,\n sendData: true,\n linkText: 'Edit chart',\n showSources: false,\n displayModeBar: 'hover',\n modeBarButtonsToRemove: [],\n modeBarButtonsToAdd: [],\n modeBarButtons: false,\n displaylogo: true,\n plotGlPixelRatio: 2,\n topojsonURL: 'https://cdn.plot.ly/',\n mapboxAccessToken: null\n}", + "computed": false + } + }, "dashEvents": { "type": { "name": "enum", diff --git a/dash_core_components/version.py b/dash_core_components/version.py index 32a90a3b9..e4e49b3bb 100644 --- a/dash_core_components/version.py +++ b/dash_core_components/version.py @@ -1 +1 @@ -__version__ = '0.8.0' +__version__ = '0.9.0' diff --git a/package.json b/package.json index 943ffd69b..70dcc6adc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dash-core-components", - "version": "0.8.0", + "version": "0.9.0", "description": "Core component suite for Dash", "repository": { "type": "git", diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js index 130c0f8d8..7564a8343 100644 --- a/src/components/Graph.react.js +++ b/src/components/Graph.react.js @@ -64,13 +64,13 @@ export default class PlotlyGraph extends Component { } plot(props) { - const {id, figure, animate, animation_options} = props; + const {id, figure, animate, animation_options, config} = props; const {hasPlotted} = this.state; const gd = document.getElementById(id); if (animate && hasPlotted && figure.data.length === gd.data.length) { return Plotly.animate(id, figure, animation_options); } else { - return Plotly.newPlot(id, figure).then(() => { + return Plotly.newPlot(id, figure.data, figure.layout, config).then(() => { this.bindEvents(props); this.setState({hasPlotted: true}); }); @@ -245,6 +245,184 @@ PlotlyGraph.propTypes = { */ animation_options: PropTypes.object, + /** + * Plotly.js config options. + * See https://plot.ly/javascript/configuration-options/ + * for more info. + */ + config: PropTypes.shape({ + /** + * no interactivity, for export or image generation + */ + staticPlot: PropTypes.bool, + + /** + * we can edit titles, move annotations, etc - sets all pieces of `edits` + * unless a separate `edits` config item overrides individual parts + */ + editable: PropTypes.bool, + + /** + * a set of editable properties + */ + edits: PropTypes.shape({ + /** + * annotationPosition: the main anchor of the annotation, which is the + * text (if no arrow) or the arrow (which drags the whole thing leaving + * the arrow length & direction unchanged) + */ + annotationPosition: PropTypes.bool, + + /** + * just for annotations with arrows, change the length and direction of the arrow + */ + annotationTail: PropTypes.bool, + + annotationText: PropTypes.bool, + + axisTitleText: PropTypes.bool, + + colorbarPosition: PropTypes.bool, + + colorbarTitleText: PropTypes.bool, + + legendPosition: PropTypes.bool, + + /** + * edit the trace name fields from the legend + */ + legendText: PropTypes.bool, + + shapePosition: PropTypes.bool, + + /** + * the global `layout.title` + */ + titleText: PropTypes.bool + }), + + /** + * DO autosize once regardless of layout.autosize + * (use default width or height values otherwise) + */ + autosizable: PropTypes.bool, + + /** + * set the length of the undo/redo queue + */ + queueLength: PropTypes.number, + + /** + * if we DO autosize, do we fill the container or the screen? + */ + fillFrame: PropTypes.bool, + + /** + * if we DO autosize, set the frame margins in percents of plot size + */ + frameMargins: PropTypes.number, + + /** + * mousewheel or two-finger scroll zooms the plot + */ + scrollZoom: PropTypes.bool, + + /** + * double click interaction (false, 'reset', 'autosize' or 'reset+autosize') + */ + doubleClick: PropTypes.oneOf([ + false, + 'reset', + 'autosize', + 'reset+autosize' + ]), + + /** + * new users see some hints about interactivity + */ + showTips: PropTypes.bool, + + /** + * enable axis pan/zoom drag handles + */ + showAxisDragHandles: PropTypes.bool, + + /** + * enable direct range entry at the pan/zoom drag points + * (drag handles must be enabled above) + */ + showAxisRangeEntryBoxes: PropTypes.bool, + + /** + * link to open this plot in plotly + */ + showLink: PropTypes.bool, + + /** + * if we show a link, does it contain data or just link to a plotly file? + */ + sendData: PropTypes.bool, + + /** + * text appearing in the sendData link + */ + linkText: PropTypes.string, + + /** + * display the mode bar (true, false, or 'hover') + */ + displayModeBar: PropTypes.oneOf([ + true, false, 'hover' + ]), + + /** + * remove mode bar button by name. + * All modebar button names at https://github.com/plotly/plotly.js/blob/master/src/components/modebar/buttons.js + * Common names include: + * - sendDataToCloud + * - (2D): zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d + * - (Cartesian): hoverClosestCartesian, hoverCompareCartesian + * - (3D): zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d + * - (Geo): zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo + * - hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews + */ + modeBarButtonsToRemove: PropTypes.array, + + /** + * add mode bar button using config objects + */ + modeBarButtonsToAdd: PropTypes.array, + + /** + * fully custom mode bar buttons as nested array, + * where the outer arrays represents button groups, and + * the inner arrays have buttons config objects or names of default buttons + */ + modeBarButtons: PropTypes.any, + + /** + * add the plotly logo on the end of the mode bar + */ + displaylogo: PropTypes.bool, + + /** + * increase the pixel ratio for Gl plot images + */ + plotGlPixelRatio: PropTypes.number, + + /** + * URL to topojson files used in geo charts + */ + topojsonURL: PropTypes.string, + + /** + * Mapbox access token (required to plot mapbox trace types) + * If using an Mapbox Atlas server, set this option to '', + * so that plotly.js won't attempt to authenticate to the public Mapbox server. + */ + mapboxAccessToken: PropTypes.any + }), + /** * */ @@ -283,5 +461,42 @@ PlotlyGraph.defaultProps = { ease: 'cubic-in-out' } }, - clear_on_unhover: false + clear_on_unhover: false, + config: { + staticPlot: false, + editable: false, + edits: { + annotationPosition: false, + annotationTail: false, + annotationText: false, + axisTitleText: false, + colorbarPosition: false, + colorbarTitleText: false, + legendPosition: false, + legendText: false, + shapePosition: false, + titleText: false + }, + autosizable: false, + queueLength: 0, + fillFrame: false, + frameMargins: 0, + scrollZoom: false, + doubleClick: 'reset+autosize', + showTips: true, + showAxisDragHandles: true, + showAxisRangeEntryBoxes: true, + showLink: false, + sendData: true, + linkText: 'Edit chart', + showSources: false, + displayModeBar: 'hover', + modeBarButtonsToRemove: [], + modeBarButtonsToAdd: [], + modeBarButtons: false, + displaylogo: true, + plotGlPixelRatio: 2, + topojsonURL: 'https://cdn.plot.ly/', + mapboxAccessToken: null + } };