[update] Dash/test

Author: philip-shen

Dash/test/requirement_dash2.txt

@@ -0,0 +1,37 @@
+Brotli==1.0.9
+click==8.1.3
+colorama==0.4.5
+contourpy==1.0.5
+cycler==0.11.0
+dash==2.6.2
+dash-bootstrap-components==1.2.1
+dash-core-components==2.0.0
+dash-datetimepicker==0.0.7
+dash-html-components==2.0.0
+dash-table==5.0.0
+Flask==2.2.2
+Flask-Compress==1.13
+Flask-SQLAlchemy==3.0.0
+fonttools==4.37.4
+greenlet==1.1.3
+importlib-metadata==5.0.0
+itsdangerous==2.1.2
+Jinja2==3.1.2
+kiwisolver==1.4.4
+MarkupSafe==2.1.1
+matplotlib==3.6.1
+numpy==1.23.3
+packaging==21.3
+pandas==1.5.0
+Pillow==9.2.0
+plotly==5.10.0
+pyparsing==3.0.9
+python-dateutil==2.8.2
+pytz==2022.4
+seaborn==0.12.0
+six==1.16.0
+SQLAlchemy==1.4.41
+tenacity==8.1.0
+tqdm==4.64.1
+Werkzeug==2.2.2
+zipp==3.9.0

Dash/test/test_dash_datetimepicker.py

@@ -0,0 +1,40 @@
+'''
+https://www.cnblogs.com/feffery/p/14687893.html
+'''
+import dash
+#import dash_html_components as html
+from dash import html
+from dash import dcc
+import dash_bootstrap_components as dbc
+import dash_datetimepicker
+from dash.dependencies import Input, Output, State
+import pandas as pd
+
+app = dash.Dash(__name__)
+
+app.layout = dbc.Container(
+    [
+        dash_datetimepicker.DashDatetimepicker(id="datetime-picker"),
+        html.H6(id='datetime-output', style={'margin-top': '20px'})
+    ],
+    style={
+        'margin-top': '100px',
+        'max-width': '600px'
+    }
+)
+
+
+@app.callback(
+    Output('datetime-output', 'children'),
+    [Input('datetime-picker', 'startDate'),
+     Input('datetime-picker', 'endDate')]
+)
+def datetime_range(startDate, endDate):
+    # 修正8小时时间差bug并格式化为字符串
+    startDate = (pd.to_datetime(startDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M')
+    endDate = (pd.to_datetime(endDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M')
+
+    return f'从 {startDate} 到 {endDate}'
+
+if __name__ == '__main__':
+    app.run_server(port=8000, debug=True)

Dash/test/test_dash_interval.py

@@ -0,0 +1,52 @@
+'''
+https://www.cnblogs.com/feffery/p/14687893.html
+'''
+import dash
+#import dash_html_components as html
+from dash import html
+from dash import dcc
+import dash_bootstrap_components as dbc
+
+from dash.dependencies import Input, Output, State
+
+import numpy as np
+
+app = dash.Dash(__name__)
+
+app.layout = dbc.Container(
+    [
+        html.P(
+            [
+                html.Strong('贵州茅台(600519)'),
+                '最新股价：',
+                html.Span('2108.94', id='latest-price')
+            ]
+        ),
+        dcc.Interval(id='demo-interval', interval=1000)
+    ],
+    style={
+        'margin-top': '100px'
+    }
+)
+
+
+@app.callback(
+    [Output('latest-price', 'children'),
+     Output('latest-price', 'style')],
+    Input('demo-interval', 'n_intervals'),
+    State('latest-price', 'children')
+)
+def fake_price_generator(n_intervals, latest_price):
+    fake_price = float(latest_price) + np.random.normal(0, 0.1)
+
+    if fake_price > float(latest_price):
+        return f'{fake_price:.2f}', {'color': 'red', 'background-color': 'rgba(195, 8, 26, 0.2)'}
+
+    elif fake_price < float(latest_price):
+        return f'{fake_price:.2f}', {'color': 'green', 'background-color': 'rgba(50, 115, 80, 0.2)'}
+
+    return f'{fake_price:.2f}', {'background-color': 'rgba(113, 120, 117, 0.2)'}
+
+
+if __name__ == '__main__':
+    app.run_server(port=8000, debug=True)

Dash/test/test_dash_table_01.py

@@ -0,0 +1,33 @@
+'''
+https://www.cnblogs.com/feffery/p/14616652.html
+'''
+import dash
+#import dash_html_components as html
+from dash import html
+import dash_bootstrap_components as dbc
+from dash import dash_table
+
+import seaborn as sns
+
+app = dash.Dash(__name__)
+
+# 载入演示数据集
+df = sns.load_dataset('iris')
+# 创建行下标列
+df.insert(loc=0, column='#', value=df.index)
+
+app.layout = html.Div(
+    dbc.Container(
+        dash_table.DataTable(
+            columns=[{'name': column, 'id': column} for column in df.columns],
+            data=df.to_dict('records'),
+            virtualization=True
+        ),
+        style={
+            'margin-top': '100px'
+        }
+    )
+)
+
+if __name__ == '__main__':
+    app.run_server(port=8000, debug=True)

Dash/test/test_dash_table_04.py

@@ -0,0 +1,62 @@
+'''
+https://www.cnblogs.com/feffery/p/14616652.html
+'''
+import dash
+#import dash_html_components as html
+from dash import html
+import dash_bootstrap_components as dbc
+from dash import dash_table
+
+import seaborn as sns
+
+app = dash.Dash(__name__)
+
+# 载入演示数据集
+df = sns.load_dataset('iris')
+# 创建行下标列
+df.insert(loc=0, column='#', value=df.index)
+
+app.layout = html.Div(
+    dbc.Container(
+        [
+            dash_table.DataTable(
+                columns=[{'name': column, 'id': column} for column in df.columns],
+                data=df.to_dict('records'),
+                virtualization=True,
+                style_as_list_view=False,#True
+                style_table={
+                    'height': '500px'
+                },
+                style_cell={
+                    'font-family': 'Times New Roman',
+                    'text-align': 'center'
+                },
+                style_header_conditional=[
+                    {
+                        'if': {
+                            # 选定列id为#的列
+                            'column_id': '#'
+                        },
+                        'font-weight': 'bold',
+                        'font-size': '24px'
+                    }
+                ],
+                style_data_conditional=[
+                    {
+                        'if': {
+                            # 选中行下标为奇数的行
+                            'row_index': 'odd'
+                        },
+                        'background-color': '#cfd8dc'
+                    }
+                ]
+            )
+        ],
+        style={
+            'margin-top': '100px'
+        }
+    )
+)
+
+if __name__ == '__main__':
+    app.run_server(port=8000, debug=True)