利用dash+falsk实现报告展示平台

dash

Dash 是一个用于构建交互式 Web 应用程序的 Python 框架，它是基于 Flask、React 和 Plotly 技术栈构建的。Dash 允许用户使用 Python 构建数据可视化应用程序，而无需具备前端开发的专业知识。

简单易用：Dash 提供了简单的 Python API，使得构建交互式 Web 应用程序变得非常简单。

组件化：Dash 应用程序是由一系列称为组件的可重用部件组成的，这些组件可以包括图表、表格、下拉菜单等。

交互式：Dash 应用程序可以与用户的交互进行响应，例如根据用户输入更新图表或数据。

灵活性：Dash 允许用户自定义应用程序的外观和行为，从而满足不同项目的需求。

可扩展性：Dash 可以与 Plotly 等其他 Python 数据可视化工具无缝集成，以创建丰富的交互式图表和可视化效果。

一个简单的示例：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),
    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

复杂一点的报告展示平台

from flask import Flask, send_from_directory, request
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash import dash_table
from dash.dependencies import Input, Output, State
import os
from db import DbClient
from util import *

# Initialize Flask app
server = Flask(__name__)

# Initialize Dash app
app = dash.Dash(__name__, server=server, url_base_pathname='/cov/')

def get_versions_from_database():
    """
    query versions
    """
    mydb = DbClient()
    version_datas = mydb.get_branch_lists()
    versions = [{'label': str(ver[0]), 'value': str(ver[0])} for ver in version_datas]
    return versions

def generate_coverage_report_for_version(version):
    """
    Generate coverage report for a specific version
    """
    current_directory = os.path.dirname(os.path.abspath(__file__))
    dir = os.path.join(current_directory, 'covdata', version)
    async_gen_report(dir, version)

# Define layout of the Dash app
app.layout = html.Div([
    html.H1('Coverage Report'),
    dcc.Tabs(id='tabs', value='tab-1', children=[
        dcc.Tab(label='Coverage Display', value='tab-1', children=[
            dcc.Dropdown(
                id='branch-dropdown',
                options=get_versions_from_database(),
                # value=get_versions_from_database()[0]['value'] if get_versions_from_database() else None
            ),
            html.Iframe(id='coverage-iframe', width='100%', height='1000'),
        ]),
        dcc.Tab(label='Generate Coverage', value='tab-2', children=[
            html.Div([
                html.H3('Select Version to Generate Coverage:'),
                dash_table.DataTable(
                    id='generate-table',
                    columns=[
                        {'name': 'Version', 'id': 'value'},
                        {'name': 'Click to Generate Coverage', 'id': 'button'}
                    ],
                    data=get_versions_from_database(),
                    page_size=20
                ),
            ]),
            html.Div(id='generate-message')
        ]),
    ]),
])

# Define callback to populate dropdown with database versions
@app.callback(
    Output('branch-dropdown', 'options'),
    [Input('tabs', 'value')]
)
def update_branch_dropdown(tab):
    """
    Define callback to populate dropdown with database versions
    """
    if tab == 'tab-1':
        return get_versions_from_database()
    return []

#Define callback to generate coverage report for selected version
@app.callback(
    Output('generate-message', 'children'),
    [Input('generate-table', 'active_cell')]
)
def generate_coverage_report(selected_cell):
    """
    Define callback to generate coverage report for selected version
    """
    if selected_cell:
        selected_row = selected_cell['row']
        selected_version = get_versions_from_database()[selected_row]['value']
        generate_coverage_report_for_version(selected_version)
        return "{} 版本报告生成中，请稍等".format(selected_version)
    return None

@server.route('/coverage-report/<version>/')
def serve_coverage_report(version):
    """
    Serve static files for coverage reports
    """
    return send_from_directory(os.path.join('covdata', version, 'code_coverage'), 'index.html')

@server.route('/coverage-report/<version>/<path:path>')
def serve_static(version, path):
    """
    Serve static files for coverage reports
    """
    return send_from_directory(os.path.join('covdata', version, 'code_coverage'), path)

@server.route('/story-coverage-report/<version>/')
def serve_story_coverage_report(version):
    """
    Serve static files for coverage reports
    """
    return send_from_directory(os.path.join('covdata', version, 'result'), 'index.html')

@server.route('/story-coverage-report/<version>/<path:path>')
def serve_story_static(version, path):
    """
    Serve static files for coverage reports
    """
    return send_from_directory(os.path.join('covdata', version, 'result'), path)

# Define callback to update iframe URL based on selected version
@app.callback(
    Output('coverage-iframe', 'src'),
    [Input('branch-dropdown', 'value')]
)
def update_coverage_report(selected_version):
    """
    Define callback to update iframe URL based on selected version
    """
    return '/coverage-report/{}/'.format(selected_version)

# Run the Flask server
if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8102)