bokeh_ext_ts_or_es.py

from bokeh.core.properties import String, Instance
from bokeh.models import LayoutDOM, Slider

CODE ="""
import {div, empty} from "core/dom"
import * as p from "core/properties"
import {LayoutDOM, LayoutDOMView} from "models/layouts/layout_dom"

export class CustomView extends LayoutDOMView {

  initialize(options) {
    super.initialize(options)

    this.render()

    // Set Backbone listener so that when the Bokeh slider has a change
    // event, we can process the new data
    this.connect(this.model.slider.change, () => this.render())
  }

  render() {
    // Backbone Views create <div> elements by default, accessible as @el.
    // Many Bokeh views ignore this default <div>, and instead do things
    // like draw to the HTML canvas. In this case though, we change the
    // contents of the <div>, based on the current slider value.
    empty(this.el)
    this.el.appendChild(div({
      style: {
        color: '#686d8e',
        'background-color': '#2a3153',
      },
    }, `${this.model.text}: ${this.model.slider.value}`))
  }
}

export class Custom extends LayoutDOM {

  // If there is an associated view, this is boilerplate.
  default_view = CustomView

  // The ``type`` class attribute should generally match exactly the name
  // of the corresponding Python class.
  type = "Custom"
}

// The @define block adds corresponding "properties" to the JS model. These
// should basically line up 1-1 with the Python model class. Most property
// types have counterparts, e.g. bokeh.core.properties.String will be
// p.String in the JS implementation. Where the JS type system is not yet
// as rich, you can use p.Any as a "wildcard" property type.
Custom.define({
  text:   [ p.String ],
  slider: [ p.Any    ],
})
"""

from bokeh.util.compiler import TypeScript

class Custom(LayoutDOM):

    __implementation__ = TypeScript(CODE)

    text = String(default="Custom text")

    slider = Instance(Slider)

from bokeh.io import show, output_file

from bokeh.layouts import column
from bokeh.models import Slider

slider = Slider(start=0, end=10, step=0.1, value=0, title="value")

custom = Custom(text="Special Slider Display", slider=slider)

layout = column(slider, custom)

output_file("bokeh_ext_ts_or_es.html")
show(layout)