Интеграция javascript триггеров html и css в Da sh, графически запущенный в Python - PullRequest
0 голосов
/ 30 апреля 2020

Я создал набор карт, которым я очень горжусь в Почтальоне, используя немного javascript и много html. Как я могу адаптировать или интегрировать его в мое приложение Da sh, разработанное в Python?

Вот код, который я сделал в инструменте визуализации Postman:

let template = `
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <style type="text/css">
        body { font-size: 12px; background: #eee; padding: 16px;}
        .card { border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,.15); -webkit-box-shadow: 0 4px 10px rgba(0,0,0,.15); -moz-box-shadow: 0 4px 10px rgba(0,0,0,.15);}
        .card-topper { border-top-right-radius: 8px; border-top-left-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase;}
        .card-topper.micro { background-color: #173F5F; color: #ffffff;}
        .card-topper.planning { background-color: #ED553B; color: #ffffff;}
        .card-topper.large { background-color: #ED553B; color: #ffffff;}
        .card-topper.brewpub { background-color: #20639B; color: #ffffff;}
        .card-topper.regional { background-color: #F6D55C;}
        .card-topper.contract { background-color: #3CAEA3; color: #ffffff;}
        .card-topper.proprietor { background-color: #ED553B; color: #ffffff;}
        .card-topper.bar { background-color: #ED553B; color: #ffffff;}
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col mb-4">
                <h1>Answers</h1>
            </div>
        </div>
        <div class="row">
            {{#each response}}
            <div class="col-sm-6 col-lg-4 col-xl-3 mb-5">
                <div class="card">
                    <div class="test card-topper card-img-top ">{{id}}</div>
                    <div class="card-body">
                        <h2>{{html_meta_title}}</h2>
                        <p>{{author}}<br>{{domain}}</p>
                        <p>{{clean_text}}</p>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
`;

pm.visualizer.set(template, {
    // Pass the response body parsed as JSON as `data`
    response: pm.response.json()['items']
});

Это др aws следующий набор карт:

![image|690x393, 75%](upload://qiRSGke33rB4DV0zRbo6j7zwfQw.png)

Мой Slack app.py пока очень просто:

from dash import Dash
from panels import cards

app = Dash(
    __name__,
    meta_tags=[
        {'charset': 'utf-8'},{'name': 'viewport', 'content': 'width=device-width, initial-scale=1, shrink-to-fit=no'}
    ]
)
server = app.server

def cards_monitoring():
    data_mm = utils.load_topics(entity, start_date) # same data as the one managed above
    return html.Div([
             # What do I need to do here to get the same cards as above ?
        ])
    ], className='bare_container twelve columns')

app.layout = html.Div(
    [
        # empty Div to trigger javascript file for graph resizing
        html.Div(id="output-clientside"),
        # Header
        header(),
        dcc.Tabs(
                id="tabs-example",
                         style={
                        'width': '70%',
                        'font-size': '120%',
                        'font_family': 'cursive',
                        'height':tab_height},
            children=[
                dcc.Tab(
                    label='Card Monitoring',
                    style={'padding': '0','line-height': tab_height},selected_style={'padding': '0','line-height': tab_height},
                    children=card_monitoring()
                ),
            colors={
            "border": "lightseagreen",
            "primary": "white",
            "background": "aliceblue"}
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=False)

Так что мне нужно сделать в cards_monitoring(), чтобы получить те же карты, что и выше? Могу ли я интегрировать код, как он есть с незначительными изменениями?

Я использовал Da sh .datatable, но это не очень приятно

...