Как лучше всего добавить 2 Django участков рядом друг с другом? - PullRequest
Новая
       7

Как лучше всего добавить 2 Django участков рядом друг с другом?

0 голосов
/ 09 февраля 2020

Итак, я создаю свою первую Django панель инструментов для личных финансов. Я создал свой первый график, который показывает баланс, и я хотел бы добавить два поля для общих расходов и доходов, которые будут учитывать дату выбора.

Должен ли я сделать это новое приложение или добавить его в то же приложение и моя главная проблема в том, что я не совсем понимаю, как добавлять новые столбцы, потому что, когда я добавляю новые графики или контент, Django просто добавляет их под текущий график.

Я читал кое-что о вспомогательных участках но кажется сложным. Любой совет?

plotly.py 

app = DjangoDash('test', serve_locally=False, suppress_callback_exceptions=True)

app.layout = html.Div(
    children=[
        html.Div([
            dcc.DatePickerRange(
                id='date_selector',
                #month_format='MMM Do, YY',
                #min_date_allowed=datetime(2014, 1, 6),
                #max_date_allowed=datetime(2019, 12, 20),
                #initial_visible_month=datetime(2019, 12, 20),
                start_date=start_date,
                end_date=end_date
            )
        ], ),
        html.Div(
            children=[
                html.Div(
                    dcc.Graph(
                        id='testing123',
                        figure=go.Figure()
                    ),
                    style={'marginRight': 20, 'marginLeft': 20, 'marginTop': 20, 'marginBottom': 0}
                ),
                html.Div(
                    id='app_content'
                ),
            ],
            style={'display': 'inline-block', 'width': '100%'}
        )
    ]
)

@app.callback(
    Output('testing123', 'figure'),
    [Input('date_selector', 'start_date'),
     Input('date_selector', 'end_date')]
)
def update_testing123(start_date, end_date):
    start_date = datetime.strptime(start_date.split(' ')[0], '%Y-%m-%d').date()
    end_date = datetime.strptime(end_date.split(' ')[0], '%Y-%m-%d').date()

    data_sum_inc = globals()['data_sum_inc'].loc[start_date:end_date]
    data_sum_exp = globals()['data_sum_exp'].loc[start_date:end_date]
    data_balance = globals()['data_balance'].loc[start_date:end_date]

    income_graph = go.Scatter(
        x=data_sum_inc.index,
        y=data_sum_inc['income'],
        text=data_sum_inc.index,
        mode='lines',
        line={'color': 'rgba(52, 178, 51, 0.5)'},
        name='Income',
    )

    expense_graph = go.Scatter(
        x=data_sum_exp.index,
        y=data_sum_exp['expense'],
        text=data_sum_exp.index,
        mode='lines',
        line={'color': 'rgba(238, 21, 21, 0.5)'},
        name='Expense',
    )

    balance_graph = go.Scatter(
        x=data_balance.index,
        y=data_balance['balance'],
        text=data_balance.index,
        mode='lines',
        line={'color': 'rgba(73, 73, 73, 1)'},
        name='Balance',
    )

    data = [income_graph, expense_graph, balance_graph]

    layout = go.Layout(
        showlegend=True,
        paper_bgcolor='rgba(0,0,0,0)',
        plot_bgcolor='rgba(0,0,0,0)',
        dragmode='zoom',

        margin=dict(
            r=0,
            t=0,
            b=0,
            l=0
        ),

        legend=dict(
            x=0,
            y=1, bgcolor='rgba(255, 255, 255, 0)',
            font=dict(size=10)
        ),

        xaxis=dict(
            anchor="y",
            gridcolor='rgb(211, 214, 219)',
            zerolinecolor='rgb(211, 214, 219)',
            domain=[0, 1]
        ),
        yaxis=dict(
            anchor="x",
            domain=[0, 1],
            gridcolor='rgb(211, 214, 219)',
            zerolinecolor='rgb(211, 214, 219)',
            showgrid=False
        )
    )

    fig = go.Figure(data=data, layout=go.Layout(layout))

    return go.Figure(fig)

base. html

{% extends 'base/base.html' %}
{% load static %}
{% block content %}
{% load plotly_dash %}

<div class="{% plotly_class name='test' %} card" style="height: 100%; width: 70%">
    {% plotly_app name='test' ratio=0.5 %}
</div>

{% endblock %}

Моя текущая панель инструментов

...