Merge pull request #3 from fin-py/driller

wip dash

requirements.txt

@@ -1,6 +1,6 @@
 jupyter-book
 nest_asyncio
-pandas
+pandas==1.4.2
 plotly
 pybotters
 matplotlib

source/code/dash_figure.py

@@ -0,0 +1,58 @@
+import dash
+from dash import dcc, html
+import plotly.express as px
+
+fig = px.line(x=[1, 2, 3], y=[3, 5, 2], width=400, height=400)
+text = """
+#### この部分はMarkdown記法で記述しています
+
+- リスト1
+- リスト2
+
+---
+
+```
+app = dash.Dash(__name__)
+app.layout = html.Div(
+    [
+        html.Div(
+            [html.H1("見出し1")],
+            id="inner1",
+        ),
+        html.Div(
+            [
+                dcc.Markdown(text, style={"display": "inline-block"}),
+                dcc.Graph(figure=fig, style={"display": "inline-block"}),
+            ],
+            id="inner2",
+        ),
+    ],
+    id="outer",
+)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)
+```
+
+"""
+
+app = dash.Dash(__name__)
+app.layout = html.Div(
+    [
+        html.Div(
+            [html.H1("Markdownとグラフ")],
+            id="inner1",
+        ),
+        html.Div(
+            [
+                dcc.Markdown(text, style={"display": "inline-block"}),
+                dcc.Graph(figure=fig, style={"display": "inline-block"}),
+            ],
+            id="inner2",
+        ),
+    ],
+    id="outer",
+)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

source/code/dash_layout.py

@@ -0,0 +1,27 @@
+import dash
+from dash import html
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        html.Div(
+            [html.H1("見出し1")],
+            id="inner1",
+        ),
+        html.Div(
+            [
+                html.H2("見出し2", style={"display": "inline-block"}),
+                html.Img(
+                    src="https://www.asakura.co.jp/user_data/product_image/12258/1.jpg",
+                    style={"display": "inline-block"},
+                ),
+            ],
+            id="inner2",
+        ),
+    ],
+    id="outer",
+)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

source/code/dash_liveupdate.py

@@ -0,0 +1,52 @@
+import dash
+import pandas as pd
+import plotly.graph_objs as go
+from dash import dcc, html
+from dash.dependencies import Input, Output
+
+data = pd.read_pickle("../../data/btcusd_2020-07-08.pickle")
+data_iter = iter(data.groupby("timestamp"))
+
+app = dash.Dash(__name__)
+app.layout = html.Div(
+    html.Div(
+        [
+            html.H4("BTCUSD"),
+            html.Div(id="live-update-text"),
+            dcc.Graph(id="live-graph", animate=True),
+            dcc.Interval(id="interval-component", interval=1000, n_intervals=0),
+        ]
+    )
+)
+
+
+@app.callback(
+    Output("live-update-text", "children"),
+    Output("live-graph", "figure"),
+    Input("interval-component", "n_intervals"),
+)
+def update_graph_scatter(n):
+    t, df = next(data_iter)
+    timestamp = [html.P(f"timestamp: {t}")]
+
+    groupby_side = df.groupby("side")
+    bid = groupby_side.get_group("bid")
+    ask = groupby_side.get_group("ask")
+    fig = go.Figure()
+    fig.add_trace(
+        go.Bar(x=bid.loc[:, "size"], y=bid.loc[:, "price"], orientation="h", name="bid")
+    )
+    fig.add_trace(
+        go.Bar(x=ask.loc[:, "size"], y=ask.loc[:, "price"], orientation="h", name="ask")
+    )
+    fig.update_layout(
+        width=600,
+        height=800,
+        xaxis={"range": [0, df.loc[:, "size"].max()]},
+        yaxis={"range": [df.loc[:, "price"].min(), df.loc[:, "price"].max()]},
+    )
+    return timestamp, fig
+
+
+if __name__ == "__main__":
+    app.run_server()

source/dash.md

@@ -1,3 +1,34 @@
 # Dash
 
-時間が足りない感じなので、次回に回したほうがよさそう？
+DashではHTMLのタグをPythonのオブジェクトとして構成できます
+## レイアウト
+
+```{literalinclude} ./code/dash_layout.py
+:language: python
+:caption: dash_layout.py
+```
+
+`dash_layout.py` を実行すると、 {numref}`dash_layout` のように描画されます
+
+```{figure} ./resources/dash_layout.png
+:name: dash_layout
+
+Dashのレイアウト
+```
+
+## Markdown・グラフ
+
+HTMLタグのほか、Markdown記法で書かれたテキストや、Plotlyで記述したグラフをレイアウトできます
+
+```{literalinclude} ./code/dash_figure.py
+:language: python
+:caption: dash_figure.py
+```
+
+`dash_figure.py` を実行すると、 {numref}`md_figure` のように描画されます
+
+```{figure} ./resources/md_figure.png
+:name: md_figure
+
+Markdownとグラフ
+```

source/live_update.md

@@ -1,3 +1,14 @@
 # リアルタイムデータの可視化
 
-時間が足りない感じなので、次回に回したほうがよさそう？
+```{literalinclude} ./code/dash_liveupdate.py
+:language: python
+:caption: dash_liveupdate.py
+```
+
+`dash_liveupdate.py` を実行すると、 {numref}`orderbook` のようにリアルタイムに描画されます
+
+```{figure} ./resources/orderbook.gif
+:name: orderbook
+
+リアルタイムの板情報
+```