Фильтрация данных с использованием Bokeh Dropdown Widget / CustomJS - PullRequest
Новая
       35

Фильтрация данных с использованием Bokeh Dropdown Widget / CustomJS

0 голосов
/ 20 октября 2019

Мне нужно создать отдельную панель управления html, поэтому я пытаюсь выяснить, как добавить обратный вызов в виджет выпадающего меню bokeh с помощью CustomJS. Проблема в том, что даже после просмотра других постов по вариациям на эту тему я все еще не могу понять. Любая помощь будет оценена! В конечном счете, я бы использовал раскрывающийся список для фильтрации столбчатой ​​диаграммы с накоплением, но я хотел бы попытаться выяснить это самостоятельно после того, как возиться с фильтрацией данных сначала.

Я обратился к Фильтрацияфрейм данных с использованием Bokeh / Widget / Callback , Несоответствие фильтрации данных Bokeh и Фильтрация фрейма данных с использованием Bokeh / Widget / Callback и Обновление обратного вызова CustomJS Python bokeh виджет DataTable . Кроме того, я просматривал документы на https://docs.bokeh.org/en/1.3.4/docs/user_guide/interaction/callbacks.html#userguide-interaction-jscallbacks,

import pandas as pd
from bokeh.models.widgets import Dropdown
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS
from bokeh.io import show, output_file, output_notebook, reset_output


raw_data = {'ORG': ['APPLE', 'ORANGE', 'MELON'],
            'APPROVED': [5, 10, 15],
            'CREATED': [1, 3, 5],
            'INPROCESS': [4,2,16]}

df = pd.DataFrame(raw_data)

# create list of orgs to use later
org_l = list(df['ORG'].unique())

# create CDS for source
src = ColumnDataSource(df)

# create cols
table_columns = [TableColumn(field = Ci, title = Ci) for Ci in df.columns] 


# create filtered table
filtered_df = df.loc[df['ORG']=='f']

# create CDS for filtered source
new_src = ColumnDataSource(filtered_df)

# create dropdown
dropdown = Dropdown(label="Dropdown button", button_type="warning", menu = org_l)

callback_code = """"
                var data = src.data;
                var new_data = new_src.data;
                var f = cb_obj.value;
                var list = org_l;
                if var i = org_list[i] {
                new_src.data = src.data
                }

              """

callback=CustomJS(args=dict(dropdown = dropdown,source=src),
             code=callback_code)

# create table
member_table = DataTable(source = new_src, columns = table_columns)

dropdown.js_on_change('value', callback)

show(widgetbox(dropdown, member_table))

'' ''

Ответы [ 2 ]

1 голос
/ 27 октября 2019

Хорошо, с большим количеством проб и ошибок и с указателями от bigreddot, я получил следующее для работы. 

import pandas as pd
from bokeh.models.widgets import Select
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS
from bokeh.io import show, output_file, output_notebook, reset_output
from bokeh.layouts import row, column, layout


raw_data = {'ORG': ['APPLE', 'ORANGE', 'MELON'],
        'APPROVED': [5, 10, 15],
        'CREATED': [1, 3, 5],
        'INPROCESS': [4,2,16]}

df = pd.DataFrame(raw_data)

# create CDS for source
src1 = ColumnDataSource(df)

# create cols
table_columns1 = [TableColumn(field = Ci, title = Ci) for Ci in df.columns]

# original data table
data_table1 = DataTable(source=src1, 
                   columns=table_columns, width=400, height=280)

# create empty dataframe to hold variables based on selected ORG value
df2 = pd.DataFrame({'status':['APPROVED', 'CREATED', 'INPROCESS'],
               'count':[float('nan'), float('nan'), float('nan')]})

# create CDS for empty dataframe
src2 = ColumnDataSource(df2)

# create cols
table_columns2 = [TableColumn(field = Ci, title = Ci) for Ci in    df2.columns] 

callback = CustomJS(args=dict(src1=src1, src2=src2), code='''
var count = ['APPROVED', 'CREATED', 'INPROCESS'];
if (cb_obj.value != 'Please choose...') {
    var org = src1.data['ORG'];
    var ind = org.indexOf(cb_obj.value);
    for (var i = 0; i < count.length; i++) {
        src2.data['count'][i] = src1.data[count[i]][ind];
    }
}
else {
    for (var i = 0; i < status.length; i++) {
        src2.data['status'][i] = undefined;
    }

}
src2.change.emit();
''')

options = ['Please choose...'] + list(src1.data['ORG'])
select = Select(title='Test', value=options[0], options=options)
select.js_on_change('value', callback2)

show(column(select, data_table2))
1 голос
/ 20 октября 2019

Единственный объект Bokeh, доступный как именованные переменные в коде JS, это те, которые вы явно включили в диктовку args. Это цель диктата args, чтобы автоматически сделать JavaScript-аналоги объектов Python Bokeh легкодоступными. Браузеры ничего не знают о Python или переменных Python в вашем скрипте. Вы ссылаетесь на src, new_src в своем коде JS, но не указали ни одного из них в диктовке args. Кроме того, простое значение Python org_l должно быть включено буквально в текст кода JS с форматированием текстовой строки, например, с помощью оператора %.

У вас также есть синтаксическая ошибка в коде JS,о котором сообщается в консоли JS браузера (с которой вам следует ознакомиться, так как это лучший инструмент для устранения этих проблем). Это недействительный код JS: 

if var i = org_list[i] {
    new_src.data = src.data
}
...