цвет текста в редактируемой таблице данных Bokeh, если значение изменилось - PullRequest
Новая
       13

цвет текста в редактируемой таблице данных Bokeh, если значение изменилось

0 голосов
/ 05 мая 2020

Я использую Bokeh DataTable для представления редактируемой таблицы и sh для раскрашивания текста в ячейке, если значение было изменено пользователем. Я пытался использовать HTMLTemplateFormatter, но не знаю, что делать. Если пользователь изменил значение строки # 2, я sh текст будет окрашен следующим образом: enter image description here пример на основе Как раскрасить строки и / или ячейки в таблице данных Bokeh? : 

from bokeh.plotting import curdoc
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter

orig_data = dict(
    cola=[1, 2, 3, 4, 5, 6],
)
data = orig_data
source = ColumnDataSource(data)
template = """
            <div style="color: <%= 
                    (function colorfromint(){
                        if(orig_data.cola != data.cola){return('red')} // I don't know what to write here
                        }()) %>;"> 
                <%= value %>
                </font>
            </div>
            """
formatter = HTMLTemplateFormatter(template=template)
columns = [TableColumn(field="cola", title="CL1", formatter=formatter, width=100)]
data_table = DataTable(source=source,
                       columns=columns,
                       editable=True,
                       width=100)
curdoc().add_root(data_table)

Могу ли я сравнивать разные таблицы с помощью блока HTMLTemplateFormatter? если нет, из документации HTMLTemplateFormatter Bokeh : «Форматировщик имеет доступ к другим элементам в строке через объект dataContext, переданный форматированному» Итак, одно из решений, которое я могу придумать, - это объединение таблиц и сравнение с объектом dataContext, представляющим только выбранные мной столбцы. Но я не уверен, как это сделать, и мне кажется, что это "грязный" обходной путь

Я хорошо знаком с python, но я новичок в боке.

Есть хороший и простой способ сделать это? возможно другие методы кроме HTMLTemplateFormatter?

1 Ответ

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

Поскольку по умолчанию средства форматирования Bokeh работают с целыми столбцами, вам придется создать собственное средство форматирования.

Пример ниже работает даже без сервера Bokeh, поэтому он использует show. Но вы можете заменить его на curdoc().add_root - он должен работать точно так же. 

from bokeh.core.property.container import List
from bokeh.core.property.primitive import Int
from bokeh.io import show
from bokeh.models import ColumnDataSource, CustomJS, StringFormatter
from bokeh.models.widgets import DataTable, TableColumn

data = dict(cola=[1, 2, 3, 4, 5, 6],
            colb=[1, 2, 3, 4, 5, 6])
orig_ds = ColumnDataSource(data)
ds = ColumnDataSource(copy.deepcopy(data))

class RowIndexFormatter(StringFormatter):
    rows = List(Int, default=[])

    # language=TypeScript
    __implementation__ = """\
import {StringFormatter} from "models/widgets/tables/cell_formatters"
import * as p from "core/properties"
import {div} from "core/dom"


export namespace RowIndexFormatter {
  export type Attrs = p.AttrsOf<Props>

  export type Props = StringFormatter.Props & {
    rows: p.Property<number[]>
  }
}

export interface RowIndexFormatter extends RowIndexFormatter.Attrs {}

export class RowIndexFormatter extends StringFormatter {
  properties: RowIndexFormatter.Props

  constructor(attrs?: Partial<RowIndexFormatter.Attrs>) {
    super(attrs)
  }

  static init_RowIndexFormatter(): void {
    this.define<RowIndexFormatter.Props>({
      rows: [ p.Array, [] ]
    })
  }

  doFormat(row: any, _cell: any, value: any, _columnDef: any, _dataContext: any): string {
    // Mostly copied from `StringFormatter`, except for taking `rows` into account.
    const {font_style, text_align, text_color} = this

    const text = div({}, value == null ? "" : `${value}`)
    switch (font_style) {
      case "bold":
        text.style.fontWeight = "bold"
        break
      case "italic":
        text.style.fontStyle = "italic"
        break
    }

    if (text_align != null)
      text.style.textAlign = text_align
    if (text_color != null && this.rows.includes(row))
      text.style.color = text_color

    return text.outerHTML
  }
}
    """

columns = [TableColumn(field="cola", title="CL1", formatter=RowIndexFormatter(text_color='red')),
           TableColumn(field="colb", title="CL2", formatter=RowIndexFormatter(text_color='blue'))]
table = DataTable(source=ds, columns=columns, editable=True)
cb = CustomJS(args=dict(orig_ds=orig_ds, table=table),
              code="""\
                  const columns = new Map(table.columns.map(c => [c.field, c]));
                  for (const c of cb_obj.columns()) {
                      const orig_col = orig_ds.data[c];
                      const formatter = columns.get(c).formatter;
                      formatter.rows = [];
                      cb_obj.data[c].forEach((val, idx) => {
                          if (val != orig_col[idx]) {
                              formatter.rows.push(idx);
                          }
                      });
                  }
                  table.change.emit();
              """)
ds.js_on_change('data', cb)
ds.js_on_change('patching', cb)

show(table)
...