Anaconda Enterprise: Documentation

# extensions_putting_together_ts.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 BokehJS 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() {
        // BokehjS Views create <div> elements by default, accessible as
        // ``this.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: {
            'padding': '2px',
            'color': '#b88d8e',
            'background-color': '#2a3153',
          },
        }, `${this.model.text}: ${this.model.slider.value}`))
      }
    }

    export class Custom extends LayoutDOM {

      // If there is an associated view, this is typically 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 normally 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. Any time the JS type system is not
    // yet as complete, 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

    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)

    show(layout)