├── .gitignore
├── BokehPlot.vue
├── README.md
├── example
    ├── app.py
    ├── example.vue
    └── requirements.txt
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | selenium-debug.log
 6 | test/unit/coverage
 7 | test/e2e/reports
 8 | 
 9 | # Byte-compiled / optimized / DLL files
10 | __pycache__/
11 | *.py[cod]
12 | *$py.class
13 | 
14 | # C extensions
15 | *.so
16 | 
17 | # Distribution / packaging
18 | .Python
19 | env/
20 | build/
21 | develop-eggs/
22 | dist/
23 | downloads/
24 | eggs/
25 | .eggs/
26 | lib/
27 | lib64/
28 | parts/
29 | sdist/
30 | var/
31 | *.egg-info/
32 | .installed.cfg
33 | *.egg
34 | 
35 | # PyInstaller
36 | #  Usually these files are written by a python script from a template
37 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
38 | *.manifest
39 | *.spec
40 | 
41 | # Installer logs
42 | pip-log.txt
43 | pip-delete-this-directory.txt
44 | 
45 | # Unit test / coverage reports
46 | htmlcov/
47 | .tox/
48 | .coverage
49 | .coverage.*
50 | .cache
51 | nosetests.xml
52 | coverage.xml
53 | *,cover
54 | .hypothesis/
55 | 
56 | # Translations
57 | *.mo
58 | *.pot
59 | 
60 | # Django stuff:
61 | *.log
62 | local_settings.py
63 | 
64 | # Flask stuff:
65 | instance/
66 | .webassets-cache
67 | 
68 | # Scrapy stuff:
69 | .scrapy
70 | 
71 | # Sphinx documentation
72 | docs/_build/
73 | 
74 | # PyBuilder
75 | target/
76 | 
77 | # IPython Notebook
78 | .ipynb_checkpoints
79 | 
80 | # pyenv
81 | .python-version
82 | 
83 | # celery beat schedule file
84 | celerybeat-schedule
85 | 
86 | # dotenv
87 | .env
88 | 
89 | # virtualenv
90 | .venv/
91 | venv/
92 | ENV/
93 | 
94 | # Spyder project settings
95 | .spyderproject
96 | 
97 | # Rope project settings
98 | .ropeproject


--------------------------------------------------------------------------------
/BokehPlot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   {{{plot.div}}}
 3 |   <script>
 4 |     {{{plot.script}}}
 5 |   </script>
 6 | </template>
 7 | 
 8 | <script>
 9 | 
10 | export default {
11 |   props: {
12 |     plot: Object
13 |   },
14 |   ready () {
15 |     eval(this.plot.script)
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # This code is very old and the example is broken. I will keep the repository as it might still help someone..
 2 | 
 3 | ## Simple wrapper for embedding Bokehplot in a vue-component.
 4 | 
 5 | ### Installation
 6 | npm i vue-bokeh --save-dev
 7 | 
 8 | Include:
 9 | ```html
10 | <link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.2.min.css" rel="stylesheet" type="text/css">
11 | <script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.2.min.js"></script>
12 | ```
13 | 
14 | Might be easier to just copy the code from BokehPlot.vue.
15 | Its very small and then you will have one less dependency.
16 | 
17 | ### Usage
18 | 
19 | ```javascript
20 | <template>
21 |   <bokeh-plot :plot="plot"></bokeh-plot>
22 | </template>
23 | 
24 | <script>
25 | import { fetchPlot } from '../vuex/actions'
26 | import BokehPlot from 'vue-bokeh'
27 | 
28 | export default {
29 |   components: {
30 |     'bokeh-plot': BokehPlot
31 |   },
32 |   vuex: {
33 |     getters: {
34 |       plot: ({ plot }) => plot
35 |     },
36 |     actions: {
37 |       fetchPlot
38 |     }
39 |   },
40 |   ready () {
41 |     this.fetchPlot()
42 |   }
43 | }
44 | </script>
45 | 
46 | <style>
47 |   
48 | </style>
49 | ```
50 | 
51 | ```python
52 | from flask import Flask, jsonify
53 | from flask_cors import cross_origin
54 | from bokeh.plotting import figure
55 | from bokeh.embed import components
56 | 
57 | app = Flask(__name__)
58 | 
59 | 
60 | @app.route("/get-plot")
61 | @cross_origin()
62 | def get_plot():
63 | 
64 |     plot = figure(plot_height=250, responsive = True)
65 |     plot.circle([1, 2], [3, 4])
66 |     script, div = components(plot, wrap_script=False)
67 |     return jsonify({'div': div, 'script': script})
68 | 
69 | app.run(debug=True)
70 | ```
71 | 


--------------------------------------------------------------------------------
/example/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, jsonify
 2 | from flask_cors import cross_origin
 3 | from bokeh.plotting import figure
 4 | from bokeh.embed import components
 5 | 
 6 | app = Flask(__name__)
 7 | 
 8 | 
 9 | @app.route("/get-plot")
10 | @cross_origin()
11 | def get_plot():
12 | 
13 |     plot = figure(plot_height=250, responsive = True)
14 |     plot.circle([1, 2], [3, 4])
15 |     script, div = components(plot, wrap_script=False)
16 |     return jsonify({'div': div, 'script': script})
17 | 
18 | app.run(debug=True)
19 | 
20 | 
21 | 
22 | 
23 | 
24 | 


--------------------------------------------------------------------------------
/example/example.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <bokeh-plot :plot="plot"></bokeh-plot>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { fetchPlot } from '../vuex/actions'
 7 | import BokehPlot from 'vue-bokeh'
 8 | 
 9 | export default {
10 |   components: {
11 |     'bokeh-plot': BokehPlot
12 |   },
13 |   vuex: {
14 |     getters: {
15 |       plot: ({ plot }) => plot
16 |     },
17 |     actions: {
18 |       fetchPlot
19 |     }
20 |   },
21 |   ready () {
22 |     this.fetchPlot()
23 |   }
24 | }
25 | </script>
26 | 
27 | <style>
28 |   
29 | </style>
30 | 


--------------------------------------------------------------------------------
/example/requirements.txt:
--------------------------------------------------------------------------------
 1 | bokeh==0.12.2
 2 | click==6.6
 3 | Flask==0.11.1
 4 | Flask-Cors==3.0.2
 5 | itsdangerous==0.24
 6 | Jinja2==2.8
 7 | MarkupSafe==0.23
 8 | numpy==1.11.1
 9 | python-dateutil==2.5.3
10 | PyYAML==3.12
11 | requests==2.11.1
12 | six==1.10.0
13 | tornado==4.4.1
14 | Werkzeug==0.11.11
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bokeh",
 3 |   "version": "0.2.0",
 4 |   "description": "A wrapper around bokehjs embedded",
 5 |   "author": "Johan B",
 6 |   "main": "BokehPlot.vue",
 7 |   "keywords": [
 8 |     "vue",
 9 |     "bokeh",
10 |     "plot"
11 |   ],
12 |   "license": "MIT",
13 |   "bugs": {
14 |     "url": "https://github.com/hemma/vue-bokeh/issues"
15 |   },
16 |   "homepage": "https://github.com/hemma/vue-bokeh#readme",
17 |   "scripts": {},
18 |   "dependencies": {},
19 |   "devDependencies": {}
20 | }
21 | 


--------------------------------------------------------------------------------