Skip to content

Commit bad2ee8

Browse files
xianhuxianhu
committed
update dash
1 parent 3a61899 commit bad2ee8

9 files changed

Lines changed: 471 additions & 306 deletions

File tree

Dash/config.py renamed to Dash/__init__.py

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11
# _*_ coding: utf-8 _*_
22

33
"""
4-
配置文件
5-
"""
6-
7-
import pandas as pd
8-
9-
# 有用的数据
10-
df = pd.read_csv("Dash/data.csv")
11-
markdown_text = """
12-
### Dash and Markdown
13-
14-
Dash apps can be written in Markdown.
15-
Dash uses the [CommonMark](http://commonmark.org/)
16-
specification of Markdown.
17-
Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
18-
if this is your first introduction to Markdown!
4+
一些配置说明
195
"""
206

217
# https://getbootstrap.com/docs/4.0/utilities
@@ -33,7 +19,7 @@
3319
Color:
3420
Text: text-primary, text-light, text-dark, text-white, text-muted
3521
Backgroud: bg-primary, bg-light, bg-dark, bg-white, bg-gradient-primary, bg-gradient-light, bg-gradient-dark
36-
22+
3723
Display:
3824
d-[sm/md/lg/xl]-[none/inline/inline-block/block/table/table-cell/table-row/flex/inline-flex]
3925
d-print-[none/inline/inline-block/block/table/table-cell/table-row/flex/inline-flex]
@@ -46,10 +32,10 @@
4632
Align self: align-self-[start/end/center/baseline/stretch]
4733
Align content: align-content-[start/end/center/around/stretch]
4834
Wrap: flex-wrap, flex-nowrap, flex-wrap-reverse
49-
35+
5036
Float:
5137
float-left, float-right, float-none, float-sm-left, float-sm-right, float-sm-none
52-
38+
5339
Position:
5440
position-static, position-relative, position-absolute, position-fixed, position-sticky
5541
@@ -70,7 +56,7 @@
7056
Vertical alignment:
7157
align-baseline, align-top, align-middle, align-bottom
7258
align-text-top, align-text-bottom
73-
59+
7460
Visibility:
7561
visible, invisible
7662
"""

‎Dash/app.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# _*_ coding: utf-8 _*_
2+
3+
"""
4+
app主文件
5+
"""
6+
7+
import dash
8+
import dash_bootstrap_components as dbc
9+
10+
# 创建应用
11+
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
12+
app.__setattr__("title", "Dash Demo")
13+
14+
server = app.server
15+
app.scripts.config.serve_locally = True
16+
app.config.suppress_callback_exceptions = True

‎Dash/apps/__init__.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# _*_ coding: utf-8 _*_
2+
3+
"""
4+
不同页面的app布局
5+
"""

‎Dash/apps/app1.py‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# _*_ coding: utf-8 _*_
2+
3+
"""
4+
app1实例
5+
"""
6+
7+
import pandas as pd
8+
import dash_core_components as dcc
9+
import dash_html_components as html
10+
import dash_bootstrap_components as dbc
11+
from dash.dependencies import Output, Input
12+
from Dash.app import app
13+
14+
# 全局变量
15+
df = pd.read_csv("apps/data.csv")
16+
17+
# 构造components
18+
tab1_content = dbc.Card(children=dbc.CardBody([
19+
dbc.CardText("This is tab 1!"),
20+
dbc.Button("Click here", color="success"),
21+
]))
22+
23+
tab2_content = dbc.Card(children=dbc.CardBody([
24+
dbc.CardText("This is tab 2!"),
25+
dbc.Button("Don't click here", color="danger"),
26+
]))
27+
28+
29+
def generate_table(dataframe, max_rows=10, size="md"):
30+
"""
31+
创建表
32+
"""
33+
# Headers
34+
headers = [html.Th(col, className="text-center") if index != 1 else html.Th(col) for index, col in enumerate(dataframe.columns[:10])]
35+
36+
# Rows
37+
rows = []
38+
for i in range(max_rows):
39+
td_list = []
40+
for index, col in enumerate(dataframe.columns[:10]):
41+
if index == 1:
42+
td_list.append(html.Td(dcc.Link(dataframe.iloc[i][col], href=dataframe.iloc[i][col])))
43+
else:
44+
td_list.append(html.Td(dataframe.iloc[i][col], className="text-center"))
45+
rows.append(html.Tr(td_list))
46+
return dbc.Table([html.Thead(html.Tr(headers)), html.Tbody(rows)], striped=True, bordered=True, hover=True, size=size)
47+
48+
49+
# 创建layout
50+
layout = dbc.Container(children=[
51+
# Tab实例 ========================================================================================
52+
html.Div(children=dbc.Tabs([
53+
dbc.Tab(tab1_content, label="Tab 1"),
54+
dbc.Tab(tab2_content, label="Tab 2"),
55+
]), className="mt-2"),
56+
57+
html.Div(children=[dbc.Tabs([
58+
dbc.Tab(label="Tab 1", tab_id="tab-1"),
59+
dbc.Tab(label="Tab 2", tab_id="tab-2"),
60+
], id="tabs", active_tab="tab-1"),
61+
html.Div(id="content"),
62+
], className="mt-2"),
63+
64+
# DIV布局 ========================================================================================
65+
dbc.Row(children=dbc.Col(html.Div("单独的DIV", className="border border-primary bg-light rounded p-2 mt-2"))),
66+
dbc.Row(children=[
67+
dbc.Col(html.Div("One of three columns", className="bg-secondary p-2 mr-2 rounded")),
68+
dbc.Col(html.Div("One of three columns", className="bg-secondary p-2 rounded-top")),
69+
dbc.Col(html.Div("One of three columns", className="bg-secondary p-2 ml-2 rounded-bottom")),
70+
], no_gutters=True, className="mt-2"),
71+
dbc.Row(children=[
72+
dbc.Col(html.Div("One of 4 columns", className="bg-info p-2 mr-2"), width=3),
73+
dbc.Col(html.Div("Two of 4 columns", className="bg-info p-2")),
74+
dbc.Col(html.Div("One of 4 columns", className="bg-info p-2 ml-2"), width=3),
75+
], no_gutters=True, className="mt-2"),
76+
dbc.Row(children=dbc.Col(html.Div("A single, half-width column, width=6", className="bg-secondary p-2"), width=6), className="mt-2"),
77+
dbc.Row(children=dbc.Col(html.Div("An automatically sized column", className="bg-secondary p-2"), width="auto"), className="mt-2"),
78+
79+
# 卡片类 ========================================================================================
80+
html.Div(children=dbc.Row(children=[
81+
dbc.Col(children=dbc.Card([
82+
dbc.CardHeader("Header"),
83+
dbc.CardBody([
84+
dbc.CardTitle("This card has a title"),
85+
dbc.CardText("And some text"),
86+
]),
87+
])),
88+
dbc.Col(children=dbc.Card([
89+
dbc.CardBody([
90+
dbc.CardTitle("This card has a title"),
91+
dbc.CardText("and some text, but no header"),
92+
]),
93+
], outline=True, color="primary")),
94+
dbc.Col(children=dbc.Card([
95+
dbc.CardBody([
96+
dbc.CardTitle("This card has a title"),
97+
dbc.CardText("and some text, and a footer!"),
98+
]),
99+
dbc.CardFooter("Footer"),
100+
], outline=True, color="danger")),
101+
dbc.Col(children=dbc.Card([
102+
dbc.CardBody([
103+
dbc.CardTitle("Card title"),
104+
dbc.CardSubtitle("Card subtitle")
105+
]),
106+
dbc.CardImg(src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"),
107+
dbc.CardBody([
108+
dbc.CardText(
109+
"Some quick example text to build on the "
110+
"card title and make up the bulk of the "
111+
"card's content."
112+
),
113+
dbc.CardLink("A link", href="#"),
114+
dbc.CardLink("Another link", href="#"),
115+
]),
116+
])),
117+
]), className="mt-2"),
118+
119+
# 画图类 ========================================================================================
120+
dcc.Graph(id="example-graph", figure={
121+
"data": [
122+
{"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "SF"},
123+
{"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar", "name": u"Montréal"},
124+
],
125+
"layout": {
126+
"title": "Dash Data Visualization"
127+
}
128+
}, className="mt-2"),
129+
130+
# 表格Table ========================================================================================
131+
html.Div(children=generate_table(df, size="sm"), className="mt-2"),
132+
html.Div(children=generate_table(df, size="md"), className="mt-2"),
133+
])
134+
135+
136+
# 创建回调函数：回调函数中不能出现全局变量
137+
@app.callback(Output("content", "children"), [
138+
Input("tabs", "active_tab")
139+
])
140+
def switch_tab(at):
141+
if at == "tab-1":
142+
return tab1_content
143+
elif at == "tab-2":
144+
return tab2_content
145+
return html.P("This shouldn't ever be displayed...")

0 commit comments

Comments
 (0)