1
1
# BokehJS Examples
2
2
3
- Examples of integrating bokehjs with other libraries or tooling (e.g. webpack).
3
+ ## Introduction
4
4
5
- Initially contains TypeScripts examples, with others to follow later .
5
+ Examples using BokehJS as a standalone library without Python .
6
6
7
- Cannot be built using a release NPM package of BokehJS and changes are required which will not be
8
- released until BokehJS 4.0. In the meantime simple examples work using a particular Bokeh branch
9
- which can be checked out and built in a temporary directory and the resultant NPM package copied
10
- across to the root directory of this repository as follows. Note you will need ` git ` and ` node `
11
- installed.
12
-
13
- ``` bash
14
- cd < directory of choice>
15
- git clone -b ianthomas23/13732_maybe_initialize --single-branch --depth 1 https://github.com/bokeh/bokeh.git
16
- cd bokeh/bokehjs
17
- node make build
18
- npm pack
19
- ```
20
-
21
- This will produce the file ` bokeh-bokehjs-3.8.0-dev.1.tgz ` which should be copied to the root
22
- directory of the bokehjs-examples repository.
7
+ Currently contains examples of integrating BokehJS with TypeScript frameworks and build tools,
8
+ other possibilities to follow later.
23
9
24
- ---
10
+ Here is an example of TypeScript code to produce a BokehJS plot:
25
11
26
12
``` ts
27
13
import * as Bokeh from " @bokeh/bokehjs" ;
@@ -46,4 +32,67 @@ function create_bokehjs_plot(): Bokeh.Plotting.Figure {
46
32
Bokeh .Plotting .show (create_bokehjs_plot (), " #target" );
47
33
```
48
34
35
+ and an image of the generated plot:
36
+
49
37
<img alt =" Example plot " src =" example.png " >
38
+
39
+ ## Contents
40
+
41
+ ### Examples
42
+
43
+ The examples are located in the top-level ` typescript ` directory. The following combinations of
44
+ frameworks and build tools are included:
45
+
46
+ Directory | Framework | Build tool
47
+ --- | --- | ---
48
+ angular_ng | [ Angular] ( https://angular.dev/ ) | [ ng] ( https://angular.dev/cli/build )
49
+ react_vite | [ React] ( https://react.dev/ ) | [ Vite] ( https://vite.dev/ )
50
+ vanilla_rspack | None | [ Rspack] ( https://rspack.dev/ )
51
+ vanilla_vite | None | [ Vite] ( https://vite.dev/ )
52
+ vanilla_webpack | None | [ Webpack] ( https://webpack.js.org/ )
53
+ vue_vite | [ Vue] ( https://vuejs.org/ ) | [ Vite] ( https://vite.dev/ )
54
+
55
+ Each directory contains a ` README.md ` that describes the steps to follow to create a simple BokehJS
56
+ example using that combination of framework and build tool. There is also a subdirectory called
57
+ ` created ` that contains the files generated by following the steps in the ` README.md ` .
58
+ The easiest way to try out an example is to clone this repository, ` cd ` to the appropriate ` created `
59
+ directory and build the example using ` npm ` commands from the ` package.json ` in the usual manner.
60
+
61
+ ### Recipes
62
+
63
+ Each example is created from a recipe located in the ` recipes ` directory. Each recipe is a
64
+ TypeScript class that can be used to generate both a human-readable ` README.md ` file and a ` bash `
65
+ script that can be used to automatically create the example. See ` recipes/README.md ` for more
66
+ information.
67
+
68
+ ### Testing
69
+
70
+ All recipes are automatically recreated and tested once a week and whenever a PR is submitted to
71
+ this repository. The code for this is contained in the ` ci ` directory. The ` bash ` scripts to create
72
+ examples are in the ` ci/typescript ` directory; these can be individually run to create and build a
73
+ single example. The ` ci/tests ` directory contains the [ Playwright] ( https://playwright.dev/ ) test
74
+ code and comparison images used in CI. For further details see the scripts in the ` ci ` directory
75
+ and the github action workflows in ` .github/workflows/test.yml ` .
76
+
77
+ ## Limitations
78
+
79
+ Currently these examples cannot be built using a release NPM package of BokehJS as changes are
80
+ required which will not be released until BokehJS 4.0.
81
+ In the meantime the examples work using an NPM package produced using a particular Bokeh branch
82
+ which can be checked out and built in a temporary directory and the resultant NPM package copied
83
+ across to the root directory of this repository as follows. Note you will need ` git ` and ` node `
84
+ installed.
85
+
86
+ ``` bash
87
+ cd < directory of choice>
88
+ git clone -b ianthomas23/13732_maybe_initialize --single-branch --depth 1 https://github.com/bokeh/bokeh.git
89
+ cd bokeh/bokehjs
90
+ node make build
91
+ npm pack
92
+ ```
93
+
94
+ This will produce the file ` bokeh-bokehjs-3.8.0-dev.1.tgz ` which should be copied to the root
95
+ directory of your ` bokehjs-examples ` repository.
96
+
97
+ When Bokeh and BokehJS 4.0 are released, these instructions and the code within this repository
98
+ will be updated to reflect the simpler installation process.
0 commit comments