Plotly Da sh: отфильтровать DataTable на основе выбора графика - PullRequest
Новая
       12

Plotly Da sh: отфильтровать DataTable на основе выбора графика

1 голос
/ 07 мая 2020

У меня есть таблица данных Plotty, показывающая Pandas DataFrame. DataFrame имеет одну линейную диаграмму для каждого столбца во фрейме данных. На каждой линейной диаграмме есть одна линия для каждого идентификатора, представленного в данных. Я пытаюсь упростить сопоставление странно выглядящих графических данных с необработанными входными данными.

Я хочу иметь возможность щелкнуть точку данных (или еще лучше выбрать строку в ChartLegend), делая это приведет к тому, что DataTable будет фильтровать и отображать только строки, связанные с выбранным идентификатором.

Вот фрагмент кода, показывающий, как я создаю DataTable и диаграммы 

def Make_PlottyFigures(df, xcol_name, device_type_dict, device_names, columns_to_plot):
    figs = []
    for col_i in range(0, len(columns_to_plot)):            
        figs.append(go.Figure())

    #Go over each device, and add a trace for each column to the appropriate figure. We want each colun in its own figure 
    for device in device_names:
        if df[df['id'] == device].shape[0] > 0:
            axs_index = 0
            for col in columns_to_plot:
                figs[axs_index].add_trace(go.Scatter(x=df[xcol_name], y=df[df['id'] == device][col],
                        mode='lines+markers',
                        name=f"{device_type_dict[device]}-{device}"))
                axs_index += 1

    index = 0;
    for col in columns_to_plot:
        figs[index].update_layout(
        title=f"{col}",
        xaxis_title="",
        yaxis_title="",
        font=dict(
                family="Courier New, monospace",
                size=18,
                color="#7f7f7f"
            )
        )
        index += 1
    return figs


def DASH_dataTable_from_pd(id, df):
    return dash_table.DataTable(
        id=f'datatable-{id}',
        columns=[
            {"name": i, "id": i, "deletable": False, "selectable": False} for i in df.columns
        ],
        data=df.to_dict('records'),
        editable=False,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        row_selectable="multi",
        row_deletable=False,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 10,
    )

Я пробовал искать в Интернете для чего-то похожего, но ничего не нашел. https://dash.plotly.com/datatable/interactivity имеет пример «sorta», но в противоположном направлении (выбор в таблице выделяет эквивалентную запись данных диаграммы). https://dash-docs.herokuapp.com/interactive-graphing есть примеры того, как реагировать на события, которые меня интересуют, я просто застрял на том, как отфильтровать Таблицу от этих событий (также было бы неплохо сделать это выпускаемым)

Есть ли какие-нибудь сэмплы, которые я пропустил, или это совершенно очевидно, и я что-то упускаю

1 Ответ

1 голос
/ 16 мая 2020

Простой подход состоит в том, чтобы повторно установить свойство data таблицы, передавая только те строки, которые вы хотите отобразить. Вы можете прослушивать события отслеживания щелчков, определять отслеживание щелчков по индексу, customdata или любому другому свойству, которое имеет объект clickData .

Этот базовый пример c иллюстрирует идею: 

df = [...]

@app.callback(
    Output("my-table", "data"),
    [Input("my-plot", "clickData")]
)
def on_trace_click(click_data):
    """Listen to click events and update table, passing filtered rows"""
    p = trace_click['points'][0]

    # here, use 'customdata' property of clicked point, 
    # could also use 'curveNumber', 'pointIndex', etc.
    if 'customdata' in p:
        key = p['customdata']['my-key']

    df_f = get_corresponding_rows(df, key)

    return df_f.to_dict('records')

def get_corresponding_rows(df, my_key):
    """Filter df, return rows that match my_key"""
    return df[df['key-column'] == my_key]

Важно, чтобы идентификаторы ваших строк не менялись только из-за фильтрации. Таким образом, любой стиль, выбран, состояние и т.д. c. будет по-прежнему применяться правильно.

...