NOT TO BE MERGED: New model example

panel/config.py

@@ -659,6 +659,7 @@ class panel_extension(_pyviz_extension):
     _imports = {
         'ace': 'panel.models.ace',
         'codeeditor': 'panel.models.ace',
+        'chartjs': 'panel.models.chartjs',
         'deckgl': 'panel.models.deckgl',
         'echarts': 'panel.models.echarts',
         'filedropper': 'panel.models.file_dropper',

panel/models/__init__.py

@@ -5,6 +5,7 @@
 files.
 """
 from .browser import BrowserInfo  # noqa
+from .chartjs import ChartJS  # noqa
 from .datetime_picker import DatetimePicker  # noqa
 from .esm import AnyWidgetComponent, ReactComponent, ReactiveESM  # noqa
 from .feed import Feed  # noqa

panel/models/chartjs.py

@@ -0,0 +1,10 @@
+from bokeh.core.properties import Int, String
+
+from .layout import HTMLBox
+
+
+class ChartJS(HTMLBox):
+    """Custom ChartJS Model"""
+
+    object = String()
+    clicks = Int()

panel/models/chartjs.ts

@@ -0,0 +1,61 @@
+// See https://docs.bokeh.org/en/latest/docs/reference/models/layouts.html
+import { HTMLBox, HTMLBoxView } from "./layout"
+import {div} from "@bokehjs/core/dom"
+
+// See https://docs.bokeh.org/en/latest/docs/reference/core/properties.html
+import * as p from "@bokehjs/core/properties"
+
+// The view of the Bokeh extension/ HTML element
+// Here you can define how to render the model as well as react to model changes or View events.
+export class ChartJSView extends HTMLBoxView {
+    declare model: ChartJS
+    container: Element
+    objectElement: any // Element
+
+    override connect_signals(): void {
+        super.connect_signals()
+
+        this.on_change(this.model.properties.object, () => {
+            this.render();
+        })
+    }
+
+    override render(): void {
+        super.render()
+        this.container = div({style: {height: "100%", width: "100%"}})
+        this.container.innerHTML = `<button type="button">${this.model.object}</button>`
+        this.objectElement = this.container.firstElementChild
+        this.objectElement.addEventListener("click", () => {this.model.clicks+=1;}, false)
+        this.shadow_el.append(this.container)
+    }
+}
+
+export namespace ChartJS {
+    export type Attrs = p.AttrsOf<Props>
+    export type Props = HTMLBox.Props & {
+        object: p.Property<string>,
+        clicks: p.Property<number>,
+    }
+}
+
+export interface ChartJS extends ChartJS.Attrs { }
+
+// The Bokeh .ts model corresponding to the Bokeh .py model
+export class ChartJS extends HTMLBox {
+    declare properties: ChartJS.Props
+
+    constructor(attrs?: Partial<ChartJS.Attrs>) {
+        super(attrs)
+    }
+
+    static override __module__ = "panel.models.chartjs"
+
+    static {
+        this.prototype.default_view = ChartJSView;
+
+        this.define<ChartJS.Props>(({Int, String}) => ({
+            object: [String, "Click Me!"],
+            clicks: [Int, 0],
+        }))
+    }
+}

panel/models/index.ts

@@ -6,6 +6,7 @@ export {Button} from "./button"
 export {ButtonIcon} from "./button_icon"
 export {ClickableIcon} from "./icon"
 export {Card} from "./card"
+export {ChartJS} from "./chartjs"
 export {CheckboxButtonGroup} from "./checkbox_button_group"
 export {ChatAreaInput} from "./chatarea_input"
 export {Column} from "./column"

panel/pane/__init__.py

@@ -31,6 +31,7 @@
 """
 from .alert import Alert  # noqa
 from .base import Pane, PaneBase, panel  # noqa
+from .chartjs import ChartJS
 from .deckgl import DeckGL  # noqa
 from .echarts import ECharts  # noqa
 from .equation import LaTeX  # noqa
@@ -63,6 +64,7 @@
     "Alert",
     "Audio",
     "Bokeh",
+    "ChartJS",
     "DataFrame",
     "DeckGL",
     "ECharts",

panel/pane/chartjs.py

@@ -0,0 +1,38 @@
+from typing import (
+    TYPE_CHECKING, ClassVar, Mapping, Optional,
+)
+
+import param
+
+from ..models import ChartJS as _BkChartJS
+from ..util import lazy_load
+from .base import ModelPane
+
+if TYPE_CHECKING:
+    from bokeh.document import Document
+    from bokeh.model import Model
+    from pyviz_comms import Comm, JupyterComm
+
+
+class ChartJS(ModelPane):
+    # Set the Bokeh model to use
+    _widget_type = _BkChartJS
+
+    # Rename Panel Parameters -> Bokeh Model properties
+    # Parameters like title that does not exist on the Bokeh model should be renamed to None
+    _rename: ClassVar[Mapping[str, str | None]] = {}
+
+    # Parameters to be mapped to Bokeh model properties
+    object = param.String(default="Click Me!")
+    clicks = param.Integer(default=0)
+
+    def _get_model(
+        self, doc: Document, root: Optional[Model] = None,
+        parent: Optional[Model] = None, comm: Optional[Comm] = None
+    ) -> Model:
+        self._bokeh_model = lazy_load(
+            'panel.models.chartjs', 'ChartJS', isinstance(comm, JupyterComm), root
+        )
+        model = super()._get_model(doc, root, parent, comm)
+        self._register_events('chartjs_event', model=model, doc=doc, comm=comm)
+        return model

panel/tests/pane/test_chartjs.py

@@ -0,0 +1,14 @@
+import panel as pn
+
+
+def test_constructor():
+    pn.pane.ChartJS(object="Click Me Now!")
+
+def get_app():
+    chartjs = pn.pane.ChartJS(object="Click Me Now!", )
+    return pn.Column(
+        chartjs, pn.Param(chartjs, parameters=["object", "clicks"])
+    )
+
+if __name__.startswith("bokeh"):
+    get_app().servable()