Skip to content
This repository was archived by the owner on Jun 4, 2024. It is now read-only.

Commit 5b9934d

Browse files
chriddypchriddyp
committed
📝 examples
1 parent 8edbc0d commit 5b9934d

7 files changed

+525
-0
lines changed

‎assets/clientside.js

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
window.clientside = {
2+
3+
display: function (value) {
4+
return 'Client says "' + value + '"';
5+
},
6+
7+
updateFig: function(search, years, mode, rows) {
8+
var filtered_rows = R.filter(
9+
R.allPass([
10+
R.compose(
11+
R.contains(search),
12+
R.prop('country')
13+
),
14+
R.compose(
15+
R.flip(R.contains)(years),
16+
R.prop('year')
17+
),
18+
]), rows);
19+
20+
return {
21+
'data': [{
22+
'x': R.pluck('gdpPercap', filtered_rows),
23+
'y': R.pluck('lifeExp', filtered_rows),
24+
'text': R.map(
25+
R.join(' - '),
26+
R.zip(
27+
R.pluck('year', filtered_rows),
28+
R.pluck('country', filtered_rows)
29+
)
30+
),
31+
'type': 'scatter',
32+
'mode': mode,
33+
'marker': {
34+
'opacity': 0.7
35+
}
36+
}],
37+
'layout': {
38+
'hovermode': 'closest',
39+
'xaxis': {'type': 'log'}
40+
}
41+
}
42+
},
43+
44+
mean: function(...args) {
45+
console.warn('mean.args: ', args);
46+
const meanValues = R.mean(args);
47+
console.warn('meanValues: ', meanValues);
48+
return meanValues;
49+
},
50+
51+
tableColumns: function(
52+
addColumnNClicks, newColumnName, existingColumns
53+
) {
54+
if (addColumnNClicks === 0) {
55+
return [{'id': 'column-1', 'name': 'Column 1'}];
56+
}
57+
return R.concat(
58+
existingColumns,
59+
[{
60+
'name': newColumnName,
61+
'id': Math.random().toString(36).substring(7)
62+
}]
63+
);
64+
65+
},
66+
67+
tableData: function(columns, n_clicks, data) {
68+
if (n_clicks === 0 && columns.length === 1) {
69+
return initial_data;
70+
} else if (R.isNil(data)) {
71+
return [{'column-1': 9}];
72+
} else if (columns.length > R.values(data[0]).length) {
73+
return data.map(row => {
74+
const newCell = {};
75+
newCell[columns[columns.length - 1].id] = 9;
76+
return R.merge(row, newCell)
77+
});
78+
} else if(n_clicks > data.length) {
79+
const newRow = {};
80+
columns.forEach(col => newRow[col.id] = 9);
81+
return R.concat(
82+
data,
83+
[newRow]
84+
);
85+
}
86+
},
87+
88+
graphTable(data) {
89+
return {
90+
'data': [{
91+
'z': R.map(R.values, data),
92+
'type': 'heatmap'
93+
}]
94+
}
95+
},
96+
97+
animateFig: function(countries, year, rows) {
98+
var filtered_rows = R.filter(
99+
R.allPass([
100+
R.compose(
101+
R.flip(R.contains)(countries),
102+
R.prop('country')
103+
),
104+
R.propEq('year', year)
105+
]), rows);
106+
107+
return {
108+
'data': [{
109+
'x': R.pluck('gdpPercap', filtered_rows),
110+
'y': R.pluck('lifeExp', filtered_rows),
111+
'text': R.map(
112+
R.join(' - '),
113+
R.zip(
114+
R.pluck('year', filtered_rows),
115+
R.pluck('country', filtered_rows)
116+
)
117+
),
118+
'type': 'scatter',
119+
'mode': 'markers',
120+
'marker': {
121+
'opacity': 0.7,
122+
'size': 12
123+
}
124+
}],
125+
'layout': {
126+
'hovermode': 'closest',
127+
'xaxis': {
128+
'type': 'log',
129+
'range': [2, 5]
130+
},
131+
'yaxis': {
132+
'range': [15, 90]
133+
}
134+
}
135+
}
136+
},
137+
138+
139+
}

‎clientside_0_simple.py

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import dash
2+
print(dash.__version__)
3+
4+
from dash.dependencies import Input, Output, State, ClientFunction
5+
import dash_core_components as dcc
6+
import dash_html_components as html
7+
8+
9+
10+
app = dash.Dash(__name__)
11+
12+
app.layout = html.Div([
13+
dcc.Input(id='input', value='hello world'),
14+
html.Div(id='output-clientside'),
15+
html.Div(id='output-serverside')
16+
])
17+
18+
19+
@app.callback(
20+
Output('output-serverside', 'children'),
21+
[Input('input', 'value')])
22+
def update_output(value):
23+
return 'Server says "{}"'.format(value)
24+
25+
26+
app.callback(
27+
Output('output-clientside', 'children'),
28+
[Input('input', 'value')],
29+
client_function=ClientFunction(
30+
namespace='clientside',
31+
function_name='display'
32+
)
33+
)
34+
35+
if __name__ == '__main__':
36+
app.run_server(debug=True)

‎clientside_1_data_filtering.py

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import dash
2+
from dash.dependencies import Input, Output, State, ClientFunction
3+
import dash_core_components as dcc
4+
import dash_html_components as html
5+
6+
import pandas as pd
7+
8+
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
9+
10+
app = dash.Dash(
11+
__name__,
12+
external_scripts=['https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js']
13+
)
14+
app.css.config.serve_locally = True
15+
app.scripts.config.serve_locally = True
16+
17+
18+
19+
app.layout = html.Div([
20+
dcc.Store(
21+
id='df',
22+
data=df.to_dict('records')
23+
),
24+
25+
dcc.Input(
26+
id='country-search',
27+
value='Canada'
28+
),
29+
30+
dcc.Dropdown(
31+
id='year',
32+
options=[
33+
{'value': i, 'label': i}
34+
for i in df.year.unique()
35+
],
36+
multi=True,
37+
value=df.year.unique()
38+
),
39+
40+
dcc.RadioItems(
41+
id='mode',
42+
options=[
43+
{'label': 'Lines', 'value': 'lines'},
44+
{'label': 'Markers', 'value': 'markers'},
45+
],
46+
value='lines'
47+
),
48+
49+
dcc.Graph(id='my-fig'),
50+
51+
])
52+
53+
54+
app.callback(
55+
Output('my-fig', 'figure'),
56+
[Input('country-search', 'value'),
57+
Input('year', 'value'),
58+
Input('mode', 'value')],
59+
[State('df', 'data')],
60+
client_function=ClientFunction('clientside', 'updateFig'))
61+
62+
63+
if __name__ == '__main__':
64+
app.run_server(debug=True, dev_tools_hot_reload=False)

‎clientside_2_chaining_clientside_and_serverside.py

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import dash
2+
from dash.dependencies import Input, Output, State, ClientFunction
3+
import dash_core_components as dcc
4+
import dash_html_components as html
5+
6+
import pandas as pd
7+
8+
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
9+
10+
app = dash.Dash(
11+
__name__,
12+
external_scripts=['https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js']
13+
)
14+
app.css.config.serve_locally = True
15+
app.scripts.config.serve_locally = True
16+
17+
18+
19+
app.layout = html.Div([
20+
21+
html.Label('x'),
22+
dcc.Input(id='x', value=3),
23+
24+
html.Label('y'),
25+
dcc.Input(id='y', value=6),
26+
27+
# clientside
28+
html.Label('x + y (clientside)'),
29+
dcc.Input(id='x+y'),
30+
31+
# server-side
32+
html.Label('x+y / 2 (serverside - takes 5 seconds)'),
33+
dcc.Input(id='x+y / 2'),
34+
35+
# server-side
36+
html.Div([
37+
html.Label('Display x, y, x+y/2 (serverside) - takes 5 seconds'),
38+
html.Pre(id='display-all-of-the-values'),
39+
]),
40+
41+
# clientside
42+
html.Label('Mean(x, y, x+y, x+y/2) (clientside)'),
43+
html.Div(id='mean-of-all-values'),
44+
45+
46+
])
47+
48+
49+
50+
app.callback(
51+
Output('x+y', 'value'),
52+
[Input('x', 'value'),
53+
Input('y', 'value')],
54+
client_function=ClientFunction('R', 'add'))
55+
56+
57+
@app.callback(Output('x+y / 2', 'value'),
58+
[Input('x+y', 'value')])
59+
def divide_by_two(value):
60+
import time; time.sleep(4)
61+
return float(value) / 2.0
62+
63+
64+
@app.callback(Output('display-all-of-the-values', 'children'),
65+
[Input('x', 'value'),
66+
Input('y', 'value'),
67+
Input('x+y', 'value'),
68+
Input('x+y / 2', 'value')])
69+
def display_all(*args):
70+
import time; time.sleep(4)
71+
return '\n'.join([str(a) for a in args])
72+
73+
74+
app.callback(
75+
Output('mean-of-all-values', 'children'),
76+
[Input('x', 'value'), Input('y', 'value'),
77+
Input('x+y', 'value'), Input('x+y / 2', 'value')],
78+
client_function=ClientFunction('clientside', 'mean'))
79+
80+
81+
if __name__ == '__main__':
82+
app.run_server(debug=True, dev_tools_hot_reload=False)

‎clientside_3_table_manipulation.py

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import dash
2+
from dash.dependencies import Input, Output, State, ClientFunction
3+
import dash_core_components as dcc
4+
import dash_html_components as html
5+
import dash_table
6+
import json
7+
8+
import pandas as pd
9+
10+
app = dash.Dash(
11+
__name__,
12+
external_scripts=['https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js']
13+
)
14+
app.css.config.serve_locally = True
15+
app.scripts.config.serve_locally = True
16+
17+
18+
app.layout = html.Div([
19+
html.Label('New Column'),
20+
dcc.Input(id='new-column-name', placeholder='name'),
21+
html.Button('Add Column', id='add-column', n_clicks=0),
22+
html.Button('Add Row', id='add-row', n_clicks=1),
23+
dash_table.DataTable(
24+
id='table',
25+
editable=True,
26+
),
27+
28+
html.Div(html.B('Clientside')),
29+
dcc.Graph(id='graph'),
30+
31+
html.B('Server Side'),
32+
html.Pre(id='display')
33+
])
34+
35+
36+
app.callback(
37+
Output('table', 'columns'),
38+
[Input('add-column', 'n_clicks')],
39+
[State('new-column-name', 'value'),
40+
State('table', 'columns')],
41+
client_function=ClientFunction('clientside', 'tableColumns'))
42+
43+
44+
app.callback(
45+
Output('table', 'data'),
46+
[Input('table', 'columns'),
47+
Input('add-row', 'n_clicks')],
48+
[State('table', 'data')],
49+
client_function=ClientFunction('clientside', 'tableData'))
50+
51+
52+
app.callback(
53+
Output('graph', 'figure'),
54+
[Input('table', 'data')],
55+
client_function=ClientFunction('clientside', 'graphTable'))
56+
57+
58+
@app.callback(Output('display', 'children'),
59+
[Input('table', 'columns'),
60+
Input('table', 'data')])
61+
def display_data(columns, data):
62+
return html.Div([
63+
html.Div(html.B('Columns')),
64+
html.Pre(json.dumps(columns, indent=2)),
65+
html.Div(html.B('Data')),
66+
html.Pre(json.dumps(data, indent=2)),
67+
])
68+
69+
70+
if __name__ == '__main__':
71+
app.run_server(debug=True, dev_tools_hot_reload=False)

0 commit comments

Comments
 (0)