├── LICENSE.txt ├── MANIFEST.in ├── PKG-INFO ├── README.MD ├── mydcc.egg-info ├── PKG-INFO ├── SOURCES.txt ├── dependency_links.txt └── top_level.txt ├── mydcc ├── __init__.py ├── bundle.js ├── metadata.json └── version.py ├── setup.cfg ├── setup.py └── src ├── components ├── Change_trace.react.js ├── Change_trace_mapbox.react.js ├── ExampleComponent.react.js ├── Listener.react.js ├── Listener_mapbox.react.js ├── Relayout.react.js └── __tests__ │ ├── .eslintrc │ └── ExampleComponent.test.js └── index.js /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 jimmybow 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /MANIFEST.in: -------------------------------------------------------------------------------- 1 | include mydcc/bundle.js 2 | include mydcc/bundle.js.map 3 | include mydcc/metadata.json 4 | include README.md 5 | include LICENSE.md 6 | -------------------------------------------------------------------------------- /PKG-INFO: -------------------------------------------------------------------------------- 1 | Metadata-Version: 1.1 2 | Name: mydcc 3 | Version: 0.1.22 4 | Summary: mydcc 5 | Home-page: https://github.com/jimmybow/mydcc 6 | Author: jimmybow 7 | Author-email: jimmybow@hotmail.com.tw 8 | License: MIT 9 | Description: UNKNOWN 10 | Platform: UNKNOWN 11 | Classifier: License :: OSI Approved :: MIT License 12 | Classifier: Programming Language :: Python 13 | Classifier: Programming Language :: Python :: 2.7 14 | Classifier: Programming Language :: Python :: 3.3 15 | Classifier: Programming Language :: Python :: 3.4 16 | Classifier: Programming Language :: Python :: 3.5 17 | Classifier: Programming Language :: Python :: 3.6 18 | -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | # Mydcc 2 | My Dash Core Components 3 | 4 | - [Installing](#installing-) 5 | - [Requirements](#requirements) 6 | - [Usage](#usage-) 7 | * [mydcc.Listener](#1-mydcclistener-) 8 | * [mydcc.Listener_mapbox](#2-mydcclistener_mapbox-) 9 | * [mydcc.Relayout](#3-mydccrelayout-) 10 | * [mydcc.Change_trace](#4-mydccchange_trace-) 11 | * [mydcc.Change_trace_mapbox](#5-mydccchange_trace_mapbox-) 12 | - [Learning more about dash ...](#dash) 13 | 14 | # Installing : 15 | ``` 16 | pip install mydcc 17 | ``` 18 | 19 | # Requirements： 20 | 21 | * **dash** -- The core dash backend 22 | * **dash-renderer** -- The dash front-end 23 | * **dash-html-components** -- HTML components 24 | * **dash-core-components** -- Supercharged components 25 | * **plotly** -- Plotly graphing library used in examples 26 | 27 | [↑](#mydcc) 28 | # Usage : 29 | ``` 30 | import dash 31 | import dash_core_components as dcc 32 | import dash_html_components as html 33 | from dash.dependencies import Input, Output, Event, State 34 | import mydcc 35 | 36 | app = dash.Dash() 37 | app.layout = html.Div(...) 38 | 39 | @app.callback(...) 40 | def myfun(...): 41 | ... 42 | return ... 43 | 44 | if __name__ == '__main__': 45 | app.run_server() 46 | ``` 47 | [↑](#mydcc) 48 | # 1. mydcc.Listener : 49 | Get mouse position of plotly graph 50 | 51 | Usage : 52 | ``` 53 | app.layout = html.Div([ 54 | mydcc.Listener( id = "uuu", aim = 'graph' ), 55 | dcc.Graph( id = 'graph', 56 | figure = { 'data': [ {'x': [1, 2, 3], 'y': [4, 1, 2]} ] } 57 | ), 58 | html.Div( id = 'text' ) 59 | ]) 60 | 61 | @app.callback( 62 | Output('text', 'children'), 63 | [Input('uuu', 'data')]) 64 | def myfun(ddd): 65 | if ddd is None : return('') 66 | return str(ddd['x']) + ' and ' + str(ddd['y']) 67 | ``` 68 | [↑](#mydcc) 69 | # 2. mydcc.Listener_mapbox : 70 | Get mouse position for plotly mapbox graph 71 | 72 | Usage : 73 | ``` 74 | app.layout = html.Div([ 75 | mydcc.Listener_mapbox( id = "uuu", aim = 'graph' ), 76 | dcc.Graph( id = 'ggg', figure = figgure_with_mapbox ), 77 | html.Div( id = 'text' ) 78 | ]) 79 | 80 | @app.callback( 81 | Output('text', 'children'), 82 | [Input('uuu', 'data')]) 83 | def myfun(ddd): 84 | if ddd is None : return('') 85 | return str(ddd['x']) + ' and ' + str(ddd['y']) 86 | ``` 87 | [↑](#mydcc) 88 | # 3. mydcc.Relayout : 89 | Relayout plotly graph 90 | 91 | Usage : 92 | ``` 93 | app.layout = html.Div([ 94 | mydcc.Relayout( id = "rrr", aim = 'graph' ), 95 | dcc.Graph( id = 'graph', 96 | figure = { 'data': [ {'x': [1, 2, 3], 'y': [4, 1, 2]} ] } 97 | ), 98 | dcc.Input(id = 'in', 99 | placeholder = 'Enter a title ...', 100 | type = 'text', 101 | value = '' 102 | ) 103 | ]) 104 | 105 | @app.callback( 106 | Output('rrr', 'layout'), 107 | [Input('in', 'value')]) 108 | def myfun(x): 109 | return {'title':x} 110 | ``` 111 | [↑](#mydcc) 112 | # 4. mydcc.Change_trace : 113 | Change plotly graph trace (only for graph with one trace ) 114 | 115 | Usage : 116 | ``` 117 | app.layout = html.Div([ 118 | dcc.Graph( 119 | id = 'graph', 120 | figure = { 121 | 'data': [ 122 | { 'x': [1, 2, 3], 'y': [4, 1, 2] }, 123 | ], 124 | 'layout': { 125 | 'title': 'Dash Data Visualization', 126 | 'xaxis': { 'range': [0,50] }, 127 | 'yaxis': { 'range': [0,50] } 128 | } 129 | } 130 | ), 131 | mydcc.Listener(id = "uuu", aim = 'graph'), 132 | mydcc.Change_trace(id = 'ii', aim = 'graph') 133 | ]) 134 | 135 | @app.callback( 136 | Output('ii', 'data'), 137 | [Input('uuu', 'data')]) 138 | def myfun(ddd): 139 | data = {'disable':'y'} 140 | if type(ddd['x']) != str and ddd['x'] < 30: 141 | data = dict(x = [ddd['x']], 142 | y = [ddd['y']], 143 | opacity = 1 144 | ) 145 | return data 146 | ``` 147 | [↑](#mydcc) 148 | # 5. mydcc.Change_trace_mapbox : 149 | Change plotly mapbox graph trace (only for graph with one trace ) 150 | 151 | Usage : 152 | ``` 153 | app.layout = html.Div([ 154 | dcc.Graph( id = 'graph', figure = figgure_with_mapbox ), 155 | mydcc.Listener_mapbox(id = "uuu", aim = 'graph'), 156 | mydcc.Change_trace_mapbox(id = 'ii', aim = 'graph') 157 | ]) 158 | 159 | @app.callback( 160 | Output('ii', 'data'), 161 | [Input('uuu', 'data')]) 162 | def myfun(ddd): 163 | data = {'lon':[1], 'lat':[1], 'type': 'scattermapbox'} 164 | if type(ddd['x']) != str : 165 | data = dict(lon = [ ddd['x'] ], 166 | lat = [ ddd['y'] ], 167 | type = 'scattermapbox', 168 | opacity = 1 169 | ) 170 | return data 171 | ``` 172 | [↑](#mydcc) 173 | ## Dash 174 | Go to this link to learn about [Dash](https://plot.ly/dash/). 175 | -------------------------------------------------------------------------------- /mydcc.egg-info/PKG-INFO: -------------------------------------------------------------------------------- 1 | Metadata-Version: 1.1 2 | Name: mydcc 3 | Version: 0.1.22 4 | Summary: mydcc 5 | Home-page: https://github.com/jimmybow/mydcc 6 | Author: jimmybow 7 | Author-email: jimmybow@hotmail.com.tw 8 | License: MIT 9 | Description: UNKNOWN 10 | Platform: UNKNOWN 11 | Classifier: License :: OSI Approved :: MIT License 12 | Classifier: Programming Language :: Python 13 | Classifier: Programming Language :: Python :: 2.7 14 | Classifier: Programming Language :: Python :: 3.3 15 | Classifier: Programming Language :: Python :: 3.4 16 | Classifier: Programming Language :: Python :: 3.5 17 | Classifier: Programming Language :: Python :: 3.6 18 | -------------------------------------------------------------------------------- /mydcc.egg-info/SOURCES.txt: -------------------------------------------------------------------------------- 1 | MANIFEST.in 2 | README.md 3 | setup.cfg 4 | setup.py 5 | mydcc/__init__.py 6 | mydcc/bundle.js 7 | mydcc/metadata.json 8 | mydcc/version.py 9 | mydcc.egg-info/PKG-INFO 10 | mydcc.egg-info/SOURCES.txt 11 | mydcc.egg-info/dependency_links.txt 12 | mydcc.egg-info/top_level.txt -------------------------------------------------------------------------------- /mydcc.egg-info/dependency_links.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /mydcc.egg-info/top_level.txt: -------------------------------------------------------------------------------- 1 | mydcc 2 | -------------------------------------------------------------------------------- /mydcc/__init__.py: -------------------------------------------------------------------------------- 1 | import os as _os 2 | import dash as _dash 3 | import sys as _sys 4 | from .version import __version__ 5 | 6 | _current_path = _os.path.dirname(_os.path.abspath(__file__)) 7 | 8 | _components = _dash.development.component_loader.load_components( 9 | _os.path.join(_current_path, 'metadata.json'), 10 | 'mydcc' 11 | ) 12 | 13 | _this_module = _sys.modules[__name__] 14 | 15 | 16 | _js_dist = [ 17 | { 18 | "relative_package_path": "bundle.js", 19 | "namespace": "mydcc" 20 | } 21 | ] 22 | 23 | _css_dist = [] 24 | 25 | 26 | for _component in _components: 27 | setattr(_this_module, _component.__name__, _component) 28 | setattr(_component, '_js_dist', _js_dist) 29 | setattr(_component, '_css_dist', _css_dist) 30 | -------------------------------------------------------------------------------- /mydcc/bundle.js: -------------------------------------------------------------------------------- 1 | this.mydcc=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Change_trace_mapbox=t.Change_trace=t.Relayout=t.Listener=t.Listener_mapbox=t.ExampleComponent=void 0;var o=n(5),u=r(o),a=n(7),i=r(a),l=n(6),f=r(l),s=n(8),c=r(s),p=n(3),d=r(p),y=n(4),b=r(y);t.ExampleComponent=u.default,t.Listener_mapbox=i.default,t.Listener=f.default,t.Relayout=c.default,t.Change_trace=d.default,t.Change_trace_mapbox=b.default},function(e,t,n){e.exports=n(11)()},function(e,t){!function(){e.exports=this.React}()},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n 15 | ); 16 | } 17 | } 18 | 19 | Change_trace.propTypes = { 20 | id : PropTypes.string.isRequired, 21 | aim : PropTypes.string.isRequired, 22 | data : PropTypes.object, 23 | style: PropTypes.object 24 | }; 25 | 26 | Change_trace.defaultProps = { 27 | data : {disable:'yes'} 28 | } -------------------------------------------------------------------------------- /src/components/Change_trace_mapbox.react.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export default class Change_trace_mapbox extends Component { 5 | render() { 6 | const {id, aim, data, style, setProps} = this.props; 7 | if (document.getElementById(aim) && data.disable == null) { 8 | var gd = document.getElementById(aim); 9 | Plotly.addTraces(gd, data); 10 | Plotly.deleteTraces(gd, 0); 11 | if (setProps) setProps( {data: {disable:'yes'} } ); 12 | } 13 | return ( 14 |
15 | ); 16 | } 17 | } 18 | 19 | Change_trace_mapbox.propTypes = { 20 | id : PropTypes.string.isRequired, 21 | aim : PropTypes.string.isRequired, 22 | data : PropTypes.object, 23 | style: PropTypes.object 24 | }; 25 | 26 | Change_trace_mapbox.defaultProps = { 27 | data : {disable:'yes'} 28 | } -------------------------------------------------------------------------------- /src/components/ExampleComponent.react.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | /** 5 | * ExampleComponent is an example component. 6 | * It takes a single property, `label`, and 7 | * displays it. 8 | */ 9 | export default class ExampleComponent extends Component { 10 | render() { 11 | const {label} = this.props; 12 | 13 | return ( 14 |
ExampleComponent: {label}
15 | ); 16 | } 17 | } 18 | 19 | ExampleComponent.propTypes = { 20 | /** 21 | * A label that will be printed when this component is rendered. 22 | */ 23 | label: PropTypes.string.isRequired 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/Listener.react.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | 5 | export default class Listener extends Component { 6 | render() { 7 | const {id, aim , style, data, setProps} = this.props; 8 | if (document.getElementById(aim) && data.x == '') { 9 | var gd = document.getElementById(aim); 10 | if (setProps) setProps( {data: {x : 'act', y : 'act' }} ); 11 | gd.addEventListener('mousemove', function(evt) { 12 | var xaxis = gd._fullLayout.xaxis; 13 | var yaxis = gd._fullLayout.yaxis; 14 | var l = gd._fullLayout.margin.l; 15 | var t = gd._fullLayout.margin.t; 16 | var offl = gd.offsetLeft; 17 | var offt = gd.offsetTop; 18 | var xInDataCoord = xaxis.p2c(evt.x - l - offl); 19 | var yInDataCoord = yaxis.p2c(evt.y - t - offt); 20 | if (setProps) setProps( {data: {x : xInDataCoord, 21 | y : yInDataCoord } } ); 22 | }); 23 | } 24 | 25 | return ( 26 |
27 | ); 28 | } 29 | } 30 | 31 | Listener.propTypes = { 32 | id : PropTypes.string.isRequired, 33 | aim : PropTypes.string.isRequired, 34 | style: PropTypes.object, 35 | data : PropTypes.object 36 | }; 37 | 38 | Listener.defaultProps = { 39 | data : {x : '', y : '' } 40 | } -------------------------------------------------------------------------------- /src/components/Listener_mapbox.react.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | 5 | export default class Listener_mapbox extends Component { 6 | render() { 7 | const {id, aim , style, data, setProps} = this.props; 8 | if (document.getElementById(aim) && data.x == '') { 9 | var gd = document.getElementById(aim); 10 | var xaxis = gd._fullLayout.mapbox._subplot.xaxis; 11 | var yaxis = gd._fullLayout.mapbox._subplot.yaxis; 12 | var l = gd._fullLayout.margin.l; 13 | var t = gd._fullLayout.margin.t; 14 | if (setProps) setProps( {data: {x : 'act', y : 'act' }} ); 15 | gd.addEventListener('mousemove', function(evt) { 16 | var xInDataCoord = xaxis.p2c(evt.x - l); 17 | var yInDataCoord = yaxis.p2c(evt.y - t); 18 | if (setProps) setProps( {data: {x : xInDataCoord, 19 | y : yInDataCoord } } ); 20 | }); 21 | } 22 | 23 | return ( 24 |
25 | ); 26 | } 27 | } 28 | 29 | Listener_mapbox.propTypes = { 30 | id : PropTypes.string.isRequired, 31 | aim : PropTypes.string.isRequired, 32 | style: PropTypes.object, 33 | data : PropTypes.object 34 | }; 35 | 36 | Listener_mapbox.defaultProps = { 37 | data : {x : '', y : '' } 38 | } -------------------------------------------------------------------------------- /src/components/Relayout.react.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | export default class Relayout extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.gd = 0 8 | this.if_update = 0 9 | } 10 | 11 | componentDidMount() { 12 | const {aim, layout, setProps} = this.props; 13 | this.gd = document.getElementById(aim) 14 | } 15 | 16 | componentWillReceiveProps(nextProps) { 17 | const {layout, setProps} = this.props 18 | if ( JSON.stringify(nextProps.layout) != JSON.stringify(layout) ){ 19 | this.if_update = 1 20 | } 21 | } 22 | 23 | render() { 24 | const {id, layout, style} = this.props; 25 | if ( this.if_update == 1 & this.gd != 0 ){ 26 | this.if_update = 0 27 | Plotly.relayout(this.gd , layout) 28 | } 29 | return ( 30 |
31 | ) 32 | } 33 | } 34 | 35 | Relayout.propTypes = { 36 | id : PropTypes.string.isRequired, 37 | aim : PropTypes.string.isRequired, 38 | layout : PropTypes.object, 39 | style: PropTypes.object 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/__tests__/.eslintrc: -------------------------------------------------------------------------------- 1 | --- 2 | extends: ../../../node_modules/dash-components-archetype/config/eslint/eslintrc-test.json 3 | 4 | globals: 5 | expect: false 6 | -------------------------------------------------------------------------------- /src/components/__tests__/ExampleComponent.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {shallow} from 'enzyme'; 3 | import ExampleComponent from '../ExampleComponent.react'; 4 | 5 | describe('ExampleComponent', () => { 6 | 7 | it('renders', () => { 8 | const component = shallow(); 9 | expect(component).to.be.ok; 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | import ExampleComponent from './components/ExampleComponent.react'; 3 | import Listener_mapbox from './components/Listener_mapbox.react'; 4 | import Listener from './components/Listener.react'; 5 | import Relayout from './components/Relayout.react'; 6 | import Change_trace from './components/Change_trace.react'; 7 | import Change_trace_mapbox from './components/Change_trace_mapbox.react'; 8 | 9 | export { 10 | ExampleComponent, 11 | Listener_mapbox, 12 | Listener, 13 | Relayout, 14 | Change_trace, 15 | Change_trace_mapbox 16 | }; 17 | --------------------------------------------------------------------------------