Skip to content

Instantly share code, notes, and snippets.

@bsdis
Created April 1, 2020 06:21
Show Gist options
  • Save bsdis/415a77d017c32d2678cefd9a0a23fb22 to your computer and use it in GitHub Desktop.
Save bsdis/415a77d017c32d2678cefd9a0a23fb22 to your computer and use it in GitHub Desktop.
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import * as Bokeh from "@bokeh/bokehjs";
function App() {
Bokeh.embed.embed_item(
JSON.parse(
'{"target_id": "myplot", "root_id": "1001", "doc": {"roots": {"references": [{"attributes": {}, "id": "1010", "type": "LinearScale"}, {"attributes": {}, "id": "1042", "type": "BasicTickFormatter"}, {"attributes": {}, "id": "1004", "type": "DataRange1d"}, {"attributes": {"below": [{"id": "1012"}], "center": [{"id": "1015"}, {"id": "1019"}, {"id": "1044"}], "left": [{"id": "1016"}], "renderers": [{"id": "1036"}], "title": {"id": "1002"}, "toolbar": {"id": "1026"}, "x_range": {"id": "1004"}, "x_scale": {"id": "1008"}, "y_range": {"id": "1006"}, "y_scale": {"id": "1010"}}, "id": "1001", "subtype": "Figure", "type": "Plot"}, {"attributes": {}, "id": "1013", "type": "BasicTicker"}, {"attributes": {}, "id": "1025", "type": "HelpTool"}, {"attributes": {"axis": {"id": "1016"}, "dimension": 1, "ticker": null}, "id": "1019", "type": "Grid"}, {"attributes": {}, "id": "1008", "type": "LinearScale"}, {"attributes": {"bottom_units": "screen", "fill_alpha": 0.5, "fill_color": "lightgrey", "left_units": "screen", "level": "overlay", "line_alpha": 1.0, "line_color": "black", "line_dash": [4, 4], "line_width": 2, "render_mode": "css", "right_units": "screen", "top_units": "screen"}, "id": "1043", "type": "BoxAnnotation"}, {"attributes": {"active_drag": "auto", "active_inspect": "auto", "active_multi": null, "active_scroll": "auto", "active_tap": "auto", "tools": [{"id": "1020"}, {"id": "1021"}, {"id": "1022"}, {"id": "1023"}, {"id": "1024"}, {"id": "1025"}]}, "id": "1026", "type": "Toolbar"}, {"attributes": {}, "id": "1052", "type": "UnionRenderers"}, {"attributes": {"data": {"x": [1, 2, 3, 4, 5], "y": [6, 7, 2, 4, 5]}, "selected": {"id": "1053"}, "selection_policy": {"id": "1052"}}, "id": "1033", "type": "ColumnDataSource"}, {"attributes": {}, "id": "1053", "type": "Selection"}, {"attributes": {}, "id": "1006", "type": "DataRange1d"}, {"attributes": {}, "id": "1017", "type": "BasicTicker"}, {"attributes": {"axis_label": "y", "formatter": {"id": "1042"}, "ticker": {"id": "1017"}}, "id": "1016", "type": "LinearAxis"}, {"attributes": {"source": {"id": "1033"}}, "id": "1037", "type": "CDSView"}, {"attributes": {}, "id": "1020", "type": "PanTool"}, {"attributes": {"text": "simple line example"}, "id": "1002", "type": "Title"}, {"attributes": {"data_source": {"id": "1033"}, "glyph": {"id": "1034"}, "hover_glyph": null, "muted_glyph": null, "nonselection_glyph": {"id": "1035"}, "selection_glyph": null, "view": {"id": "1037"}}, "id": "1036", "type": "GlyphRenderer"}, {"attributes": {}, "id": "1021", "type": "WheelZoomTool"}, {"attributes": {"items": [{"id": "1045"}]}, "id": "1044", "type": "Legend"}, {"attributes": {"line_alpha": 0.1, "line_color": "#1f77b4", "line_width": 2, "x": {"field": "x"}, "y": {"field": "y"}}, "id": "1035", "type": "Line"}, {"attributes": {"axis_label": "x", "formatter": {"id": "1040"}, "ticker": {"id": "1013"}}, "id": "1012", "type": "LinearAxis"}, {"attributes": {"overlay": {"id": "1043"}}, "id": "1022", "type": "BoxZoomTool"}, {"attributes": {"line_color": "#1f77b4", "line_width": 2, "x": {"field": "x"}, "y": {"field": "y"}}, "id": "1034", "type": "Line"}, {"attributes": {"label": {"value": "Temp."}, "renderers": [{"id": "1036"}]}, "id": "1045", "type": "LegendItem"}, {"attributes": {}, "id": "1023", "type": "SaveTool"}, {"attributes": {}, "id": "1040", "type": "BasicTickFormatter"}, {"attributes": {"axis": {"id": "1012"}, "ticker": null}, "id": "1015", "type": "Grid"}, {"attributes": {}, "id": "1024", "type": "ResetTool"}], "root_ids": ["1001"]}, "title": "", "version": "2.0.0"}}'
),
"testPlot"
);
return (
<div className="App">
<header className="App-header"></header>
<div id="testPlot" className="bk-root"></div>
</div>
);
}
export default App;
{
"name": "bokehbug",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "~3.7.2",
"@bokeh/bokehjs": "~2.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment