Структура HTML в Plotly dash

Question

Всем привет. Немного научившись выводить и обновлять график в Plotly, я решил немного приукрасить его, накинув таблицу стилей и js из шаблона HTML.. Однако столкнулся с проблемой представления структуры HTML в коде Plotly.

HTML структура :

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">CARD_ONE</h4>
                <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                <div class="heading-elements">
                    <ul class="list-inline mb-0">
                        <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="card-content collapse show">
                <div class="card-body chartjs">
                  !!! dash chart !!!  <canvas id="line-chart" height="500"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

Хоть и в HTML структура понятна, я не могу понять , как раскидать структуру в Plotly. Это единственное что получилось и отображает в коде :

def serve_layout():
    return html.Div(
        children=[
            html.H4(children='OWERVIEW'),
            html.Div(id='my-id', className='card', children='''ONE_CARD'''),
            html.Div(className='card-header'),
            html.H4(className="card-title", children='ONE_CARD??'),
            html.Div(className='heading-elements-toggle'),
            html.Div(className='heading-elements'),
            html.Div(className="list-inline mb-0"),
            dcc.Graph(id='example-graph', animate=True, responsive=True),
            dcc.Interval(
                id='interval-component',
                interval=3 * 1000,
                n_intervals=0,
            ),
        ],
    )

однако в коде выше это не соответствует структуре HTML.

Вопрос : как должен выглядеть код в Plotly, чтобы сгенерировался код по структуре HTML.??

Answer 1

Не знаю как оформить data-action, на счет него нужно разбираться.

Однако код ниже более менее воспроизводит то, что хотелось бы:

def serve_layout():
    return html.Div(className='row', children=[
        html.Div(className='col-12', children=[
            html.Div(className='card', children=[
                html.Div(className='card-header', children=[
                    html.Div(id='my-id', className='card', children='''ONE_CARD'''),
                    html.A(className='header-elements-toggle', children=html.I(className='la la-ellipsis-v font-medium-3'))
                    html.Div(className='heading-elements', children=[
                        html.Ul(className='list-inline mb-0', children=[
                            html.Li(html.A(html.I(className='ft-minus'))),
                            html.Li(html.A(html.I(className='ft-maximize'))),
                        ]),
                    ]),
                ]),
                html.Div(className='card-content collapse show', children=[
                    html.Div(className='card-body chartjs', children=[
                        dcc.Graph(id='example-graph', animate=True, responsive=True),
                        dcc.Interval(
                            id='interval-component',
                            interval=3 * 1000,
                            n_intervals=0,
                        ),
                    ]),
                ]),
            ]),
        ]),
    ]),

Но как то без data-action не то.

БЛОГ НА HUSL

Структура HTML в Plotly dash

Ответы (1 шт):