You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
#### Create beautiful, analytic applications in Julia
9
9
10
-
As of [v1.15.0](https://github.com/plotly/dash/releases/tag/v1.15.0) of Dash, Julia components can be generated in tandem with Python and R components. Interested in getting involved with the project? Sponsorship is a great way to accelerate the progress of open source projects like this one; please feel free to [reach out to us](https://plotly.com/consulting-and-oem/)!
10
+
Built on top of Plotly.js, React and HTTP.jl, [Dash](https://plotly.com/dash/) ties modern UI elements like dropdowns, sliders, and graphs directly to your analytical Julia code.
11
11
12
12
Just getting started? Check out the [Dash for Julia User Guide](https://dash.plotly.com/julia)! If you can't find documentation there, then check out the unofficial [contributed examples](https://github.com/plotly/Dash.jl/issues/50) or check out source code from [demo applications](https://dash.gallery) in Python and then reference the Julia syntax style.
13
13
14
-
#### Create beautiful, analytic applications in Julia
14
+
##Project Status
15
15
16
-
Built on top of Plotly.js, React and HTTP.jl, [Dash](https://plotly.com/dash/) ties modern UI elements like dropdowns, sliders, and graphs directly to your analytical Julia code.
16
+
Julia components can be generated in tandem with Python and R components. Interested in getting involved with the project? Sponsorship is a great way to accelerate the progress of open source projects like this one; please feel free to [reach out to us](https://plotly.com/consulting-and-oem/)!
17
17
18
18
## Installation
19
19
20
-
Please ensure that you are using a version of Julia >= 1.2.
(x = [1, 2, 3], y = [4, 1, 2], type ="bar", name ="SF"),
48
+
(x = [1, 2, 3], y = [2, 4, 5], type ="bar", name ="Montréal"),
49
+
],
50
+
layout = (title ="Dash Data Visualization",)
51
+
))
52
+
end
60
53
61
-
* The `DashApp` struct represents a dashboard application.
62
-
* To make `DashApp` struct use `dash(layout_maker::Function, name::String; external_stylesheets::Vector{String} = Vector{String}(), url_base_pathname="/", assets_folder::String = "assets")` where `layout_maker` is a function with signature ()::Component
63
-
* Unlike the Python version where each Dash component is represented as a separate class, all components in Dash.jl are represented by struct `Component`.
64
-
* You can create `Component` specific for concrete Dash component by the set of functions in the form ``lowercase(<component package>)_lowercase(<component name>)``. For example, in Python html `<div>` element is represented as `HTML.Div` in Dash.jl it is created using function `html_div`
65
-
* The list of all supported components is available in docstring for Dash.jl module.
66
-
* All functions for a component creation have the signature `(;kwargs...)::Component`. List of key arguments specific for the concrete component is available in the docstring for each function.
67
-
* Functions for creation components which have `children` property have two additional methods ``(children::Any; kwargs...)::Component`` and ``(children_maker::Function; kwargs..)::Component``. `children` must by string or number or single component or collection of components.
68
-
*``make_handler(app::Dash; debug::Bool = false)`` makes a handler function for using in HTTP package.
54
+
run_server(app)
55
+
```
69
56
70
-
__Once you have run the code to create the Dashboard, go to `http://127.0.0.1:8080` in your browser to view the Dashboard!__
57
+
__then go to `http://127.0.0.1:8050` in your browser to view the Dash app!__
dcc_input(id = "my-id", value="initial value", type = "text"),
82
-
html_div(id = "my-div")
83
-
end
66
+
app.layout =html_div() do
67
+
dcc_input(id ="my-id", value="initial value", type ="text"),
68
+
html_div(id ="my-div")
69
+
end
84
70
85
-
julia> callback!(app, Output("my-div", "children"), Input("my-id", "value")) do input_value
71
+
callback!(app, Output("my-div", "children"), Input("my-id", "value")) do input_value
86
72
"You've entered $(input_value)"
87
73
end
88
74
89
-
julia> run_server(app, "0.0.0.0", 8080)
75
+
run_server(app)
90
76
```
91
77
92
-
* You can make your dashboard interactive by register callbacks for changes in frontend with function ``callback!(func::Function, app::Dash, output, input, state)``
93
-
*Inputs and outputs (and states, see below) of callback can be `Input`, `Output`, `State` objects or vectors of this objects
94
-
* Callback function must have the signature(inputs..., states...), and provide a return value comparable (in terms of number of elements) to the outputs being updated.
78
+
* You can make your Dash app interactive by registering callbacks with the `callback!` function.
79
+
*Outputs and inputs (and states, see below) of callback can be `Output`, `Input`, `State` objects or splats / vectors of this objects.
80
+
* Callback functions must have the signature``(inputs..., states...)``, and provide a return value with the same number elements as the number of `Output`s to update.
"You've entered $(input_value) in input with type $(state_value)",
111
-
"You've entered $(input_value)"
95
+
callback!(app,
96
+
Output("my-div","children"),
97
+
Output("my-div2","children"),
98
+
Input("my-id", "value"),
99
+
State("my-id", "type")) do input_value, state_value
100
+
return ("You've entered $(input_value) in input with type $(state_value)",
101
+
"You've entered $(input_value)")
112
102
end
113
-
julia> run_server(app, "0.0.0.0", 8080)
103
+
104
+
run_server(app)
114
105
```
115
106
116
107
## Comparison with original Python syntax
117
108
118
-
### component naming:
109
+
### Component naming
110
+
111
+
* Python:
112
+
113
+
```python
114
+
import dash
115
+
116
+
dash.html.Div
117
+
dash.dcc.Graph
118
+
dash.dash_table.DataTable
119
+
```
120
+
121
+
* Dash.jl:
122
+
123
+
```julia
124
+
using Dash
125
+
126
+
html_div
127
+
dcc_graph
128
+
dash_datatable
129
+
```
130
+
131
+
### Component creation
132
+
133
+
Just as in Python, functions for declaring components have keyword arguments, which are the same as in Python. ``html_div(id = "my-id", children = "Simple text")``.
119
134
120
-
`html.Div` => `html_div`, `dcc.Graph` => `dcc_graph` and etc
135
+
For components which declare `children`, two additional signatures are available:
121
136
122
-
### component creation:
137
+
*``(children; kwargs..)`` and
138
+
*``(children_maker::Function; kwargs...)``
123
139
124
-
Just as in Python, functions for declaring components have keyword arguments, which are the same as in Python. ``html_div(id="my-id", children="Simple text")``.
125
-
For components which declare `children`, two additional signatures are available. ``(children; kwargs..)`` and ``(children_maker::Function; kwargs...)`` so one can write ``html_div("Simple text", id="my-id")`` for simple elements, or choose an abbreviated syntax with `do` syntax for complex elements:
140
+
So one can write ``html_div("Simple text", id = "my-id")`` for simple elements, or choose an abbreviated syntax with `do` syntax for complex elements:
State("state-2", "value")]) do n_clicks, state1, state2
176
-
.....
187
+
callback!(app,
188
+
Output("output", "children"),
189
+
Input("submit-button", "n_clicks")],
190
+
State("state-1", "value"),
191
+
State("state-2", "value")) do n_clicks, state1, state2
192
+
# logic
177
193
end
178
194
```
179
195
180
-
Be careful - in Dash.jl states come first in an arguments list.
196
+
### JSON
197
+
198
+
Dash apps transfer data between the browser (aka the frontend) and the Julia process running the app (aka the backend) in JSON.
199
+
Dash.jl uses [JSON3.jl](https://github.com/quinnj/JSON3.jl) for JSON serialization/deserialization.
181
200
182
-
### JSON:
201
+
Note that JSON3.jl converts
183
202
184
-
I use JSON3.jl for JSON serialization/deserialization.
185
-
Note when declaring elements with a single properly that `layout = (title = "Test graph")` is not interpreted as a `NamedTuple` by Julia - you'll need to add a comma when declaring the layout, e.g. `layout = (title = "Test graph",)`
0 commit comments