From ae42d78637f93496f234a06e959b19e63112d1ef Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Tue, 20 Dec 2022 16:51:27 +0100
Subject: [PATCH 1/9] Add Vizzu pane

---
 panel/_templates/autoload_panel_js.js |  34 +++++++-
 panel/_templates/js_resources.html    |   7 ++
 panel/config.py                       |   3 +-
 panel/io/resources.py                 |  16 +++-
 panel/models/index.ts                 |   1 +
 panel/models/vizzu.py                 |  43 ++++++++++
 panel/models/vizzu.ts                 |  72 ++++++++++++++++
 panel/pane/__init__.py                |   2 +
 panel/pane/vizzu.py                   | 119 ++++++++++++++++++++++++++
 9 files changed, 290 insertions(+), 7 deletions(-)
 create mode 100644 panel/models/vizzu.py
 create mode 100644 panel/models/vizzu.ts
 create mode 100644 panel/pane/vizzu.py

diff --git a/panel/_templates/autoload_panel_js.js b/panel/_templates/autoload_panel_js.js
index c539dda862..185b9e9bc7 100644
--- a/panel/_templates/autoload_panel_js.js
+++ b/panel/_templates/autoload_panel_js.js
@@ -11,6 +11,9 @@ calls it with the rendered model.
 :param js_modules: URLs of JS modules making up Bokeh library
 :type js_modules: list
 
+:param js_exports: URLs of JS modules to be exported
+:type js_exports: dict
+
 :param css_urls: CSS urls to inject
 :type css_urls: list
 
@@ -44,17 +47,18 @@ calls it with the rendered model.
     console.debug("Bokeh: all callbacks have finished");
   }
 
-  function load_libs(css_urls, js_urls, js_modules, callback) {
+  function load_libs(css_urls, js_urls, js_modules, js_exports, callback) {
     if (css_urls == null) css_urls = [];
     if (js_urls == null) js_urls = [];
     if (js_modules == null) js_modules = [];
+    if (js_exports == null) js_exports = {};
 
     root._bokeh_onload_callbacks.push(callback);
     if (root._bokeh_is_loading > 0) {
       console.debug("Bokeh: BokehJS is being loaded, scheduling callback at", now());
       return null;
     }
-    if (js_urls.length === 0 && js_modules.length === 0) {
+    if (js_urls.length === 0 && js_modules.length === 0 && Object.keys(js_exports).length === 0) {
       run_callbacks();
       return null;
     }
@@ -67,6 +71,7 @@ calls it with the rendered model.
         run_callbacks()
       }
     }
+    window._bokeh_on_load = on_load
 
     function on_error() {
       console.error("failed to load " + url);
@@ -97,7 +102,7 @@ calls it with the rendered model.
       {% endfor %}
       root._bokeh_is_loading = css_urls.length + {{ requirements|length }};
     } else {
-      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length;
+      root._bokeh_is_loading = css_urls.length + js_urls.length + js_modules.length + Object.keys(js_exports).length;
     }
     {%- for lib, urls in skip_imports.items() %}
     if (((window['{{ lib }}'] !== undefined) && (!(window['{{ lib }}'] instanceof HTMLElement))) || window.requirejs) {
@@ -140,6 +145,26 @@ calls it with the rendered model.
       console.debug("Bokeh: injecting script tag for BokehJS library: ", url);
       document.head.appendChild(element);
     }
+    for (const name in js_exports) {
+      var url = js_exports[name];
+      if (skip.indexOf(url) >= 0) {
+	if (!window.requirejs) {
+	  on_load();
+	}
+	continue;
+      }
+      var element = document.createElement('script');
+      element.onerror = on_error;
+      element.async = false;
+      element.type = "module";
+      console.debug("Bokeh: injecting script tag for BokehJS library: ", url);
+      element.textContent = `
+      import ${name} from "${url}"
+      window.${name} = ${name}
+      window._bokeh_on_load()
+      `
+      document.head.appendChild(element);
+    }
     if (!js_urls.length && !js_modules.length) {
       on_load()
     }
@@ -153,6 +178,7 @@ calls it with the rendered model.
 
   var js_urls = {{ bundle.js_urls|json }};
   var js_modules = {{ bundle.js_modules|json }};
+  var js_exports = {{ bundle.js_module_exports|json }};
   var css_urls = {{ bundle.css_urls|json }};
   var inline_js = [
     {%- for css in bundle.css_raw %}
@@ -190,7 +216,7 @@ calls it with the rendered model.
     console.debug("Bokeh: BokehJS loaded, going straight to plotting");
     run_inline_js();
   } else {
-    load_libs(css_urls, js_urls, js_modules, function() {
+    load_libs(css_urls, js_urls, js_modules, js_exports, function() {
       console.debug("Bokeh: BokehJS plotting callback run at", now());
       run_inline_js();
     });
diff --git a/panel/_templates/js_resources.html b/panel/_templates/js_resources.html
index 4a97772935..2a616d144f 100644
--- a/panel/_templates/js_resources.html
+++ b/panel/_templates/js_resources.html
@@ -23,6 +23,13 @@
 <script type="module" src="{{ file }}"></script>
 {% endfor %}
 
+{%- for name, file in js_module_exports.items() %}
+<script type="module">
+  import {{ name }} from "{{ file }}";
+  window.{{ name }} = {{ name }}
+</script>
+{%- endfor %}
+
 {%- for js in js_raw %}
 <script type="text/javascript">
   {{ js }}
diff --git a/panel/config.py b/panel/config.py
index cf70509b2b..135d8ec25a 100644
--- a/panel/config.py
+++ b/panel/config.py
@@ -557,7 +557,8 @@ class panel_extension(_pyviz_extension):
         'terminal': 'panel.models.terminal',
         'tabulator': 'panel.models.tabulator',
         'texteditor': 'panel.models.quill',
-        'jsoneditor': 'panel.models.jsoneditor'
+        'jsoneditor': 'panel.models.jsoneditor',
+        'vizzu': 'panel.models.vizzu'
     }
 
     # Check whether these are loaded before rendering (if any item
diff --git a/panel/io/resources.py b/panel/io/resources.py
index e3868431b4..21a5d0b9d0 100644
--- a/panel/io/resources.py
+++ b/panel/io/resources.py
@@ -26,6 +26,7 @@
     _use_mathjax, bundle_models, extension_dirs,
 )
 from bokeh.models import ImportedStyleSheet
+from bokeh.model import Model
 from bokeh.resources import Resources as BkResources
 from bokeh.settings import settings as _settings
 from jinja2.environment import Environment
@@ -360,7 +361,7 @@ def bundle_resources(roots, resources, notebook=False):
     return Bundle(
         js_files=js_files, js_raw=js_raw, css_files=css_files,
         css_raw=css_raw, hashes=hashes, notebook=notebook,
-        js_modules=resources.js_modules
+        js_modules=resources.js_modules, resources.js_module_exports
     )
 
 
@@ -506,6 +507,14 @@ def js_modules(self):
 
         return self.adjust_paths(modules)
 
+    @property
+    def js_module_exports(self):
+        modules = {}
+        for model in Model.model_class_reverse_map.values():
+            if hasattr(model, '__javascript_module_exports__'):
+                modules.update(dict(zip(model.__javascript_module_exports__, model.__javascript_module__)))
+        return modules
+
     @property
     def css_files(self):
         from ..config import config
@@ -526,7 +535,8 @@ def css_files(self):
     def render_js(self):
         return JS_RESOURCES.render(
             js_raw=self.js_raw, js_files=self.js_files,
-            js_modules=self.js_modules, hashes=self.hashes
+            js_modules=self.js_modules, hashes=self.hashes,
+            js_module_exports=self.js_module_exports
         )
 
 
@@ -534,6 +544,7 @@ class Bundle(BkBundle):
 
     def __init__(self, notebook=False, **kwargs):
         self.js_modules = kwargs.pop("js_modules", [])
+        self.js_module_exports = kwargs.pop("js_module_exports", exports)
         self.notebook = notebook
         super().__init__(**kwargs)
 
@@ -559,5 +570,6 @@ def _render_js(self):
             js_raw=self.js_raw,
             js_files=self.js_files,
             js_modules=self.js_modules,
+            js_module_exports=self.js_module_exports,
             hashes=self.hashes
         )
diff --git a/panel/models/index.ts b/panel/models/index.ts
index 1a22bb54e1..64690f7cbd 100644
--- a/panel/models/index.ts
+++ b/panel/models/index.ts
@@ -31,4 +31,5 @@ export {TrendIndicator} from "./trend"
 export {VegaPlot} from "./vega"
 export {Video} from "./video"
 export {VideoStream} from "./videostream"
+export {VizzuChart} from "./vizzu"
 export * from "./vtk"
diff --git a/panel/models/vizzu.py b/panel/models/vizzu.py
new file mode 100644
index 0000000000..d42dfb82f0
--- /dev/null
+++ b/panel/models/vizzu.py
@@ -0,0 +1,43 @@
+"""
+Defines custom VizzuChart bokeh model to render Vizzu charts.
+"""
+from bokeh.core.properties import (
+    Any, Dict, Instance, Int, List, String,
+)
+from bokeh.models import LayoutDOM
+from bokeh.models.sources import DataSource
+
+from ..config import config
+from ..io.resources import bundled_files
+from ..util import classproperty
+
+
+class VizzuChart(LayoutDOM):
+    """
+    A Bokeh model that wraps around an Vizzu chart and renders it
+    inside a Bokeh.
+    """
+
+    __javascript_module_exports__ = ['Vizzu']
+
+    __javascript_modules_raw__ = [
+        f"{config.npm_cdn}/vizzu@latest/dist/vizzu.min.js"
+    ]
+
+    @classproperty
+    def __javascript_modules__(cls):
+        return bundled_files(cls, 'javascript_modules')
+
+    config = Dict(String, Any)
+
+    columns = List(Dict(String, Any))
+
+    source = Instance(DataSource, help="""
+    Local data source to use when rendering glyphs on the plot.
+    """)
+
+    config = Dict(String, Any)
+
+    duration = Int(500)
+
+    style = Dict(String, Any)
diff --git a/panel/models/vizzu.ts b/panel/models/vizzu.ts
new file mode 100644
index 0000000000..1bb1c12630
--- /dev/null
+++ b/panel/models/vizzu.ts
@@ -0,0 +1,72 @@
+import * as p from "@bokehjs/core/properties"
+import {HTMLBox} from "@bokehjs/models/layouts/html_box"
+import {ColumnDataSource} from "@bokehjs/models/sources/column_data_source";
+
+import {PanelHTMLBoxView} from "./layout"
+
+export class VizzuChartView extends PanelHTMLBoxView {
+  model: VizzuChart
+  vizzu_view: any
+
+  connect_signals(): void {
+    super.connect_signals()
+    this.connect(this.model.properties.config.change, () => {
+      this.vizzu_view.animate({config: this.model.config}, this.model.duration+'ms')
+    })
+    this.connect(this.model.source.properties.data.change, () => {
+      console.log(this.data())
+      this.vizzu_view.animate({data: this.data()}, this.model.duration+'ms')
+    })
+  }
+
+  private data(): any {
+    const series = []
+    for (const column of this.model.columns)
+      series.push({...column, values: [...this.model.source.data[column.name]]})
+    return {series}
+  }
+
+  render(): void {
+    super.render()
+    this.vizzu_view = new (window as any).Vizzu(this.el, {
+      config: this.model.config,
+      data: this.data(),
+      style: this.model.style
+    })
+  }
+}
+
+export namespace VizzuChart {
+  export type Attrs = p.AttrsOf<Props>
+  export type Props = HTMLBox.Props & {
+    config: p.Property<any>
+    columns: p.Property<any>
+    source: p.Property<ColumnDataSource>
+    duration: p.Property<number>
+    style: p.Property<any>
+  }
+}
+
+export interface VizzuChart extends VizzuChart.Attrs {}
+
+export class VizzuChart extends HTMLBox {
+  properties: VizzuChart.Props
+
+  constructor(attrs?: Partial<VizzuChart.Attrs>) {
+    super(attrs)
+  }
+
+  static __module__ = "panel.models.vizzu"
+
+  static {
+    this.prototype.default_view = VizzuChartView
+
+    this.define<VizzuChart.Props>(({Any, Array, Number, Ref}) => ({
+      config:      [ Any,                     {} ],
+      columns:     [ Array(Any),              [] ],
+      source:      [ Ref(ColumnDataSource),      ],
+      duration:    [ Number,                 500 ],
+      style:       [ Any,                     {} ],
+    }))
+  }
+}
diff --git a/panel/pane/__init__.py b/panel/pane/__init__.py
index 0876f3f465..3e4fc20a3e 100644
--- a/panel/pane/__init__.py
+++ b/panel/pane/__init__.py
@@ -50,6 +50,7 @@
 from .plotly import Plotly  # noqa
 from .streamz import Streamz  # noqa
 from .vega import Vega  # noqa
+from .vizzu import Vizzu  # noqa
 from .vtk import VTK, VTKVolume  # noqa
 
 __all__ = (
@@ -84,6 +85,7 @@
     "SVG",
     "Vega",
     "Video",
+    "Vizzu",
     "VTK",
     "VTKVolume",
     "YT"
diff --git a/panel/pane/vizzu.py b/panel/pane/vizzu.py
new file mode 100644
index 0000000000..0864c3584b
--- /dev/null
+++ b/panel/pane/vizzu.py
@@ -0,0 +1,119 @@
+from __future__ import annotations
+
+import datetime as dt
+import sys
+
+from typing import (
+    TYPE_CHECKING, ClassVar, List, Optional,
+)
+
+import numpy as np
+import param
+
+from bokeh.models import ColumnDataSource
+from pyviz_comms import JupyterComm
+
+from ..reactive import SyncableData
+from ..util import lazy_load
+from .base import PaneBase
+
+if TYPE_CHECKING:
+    from bokeh.document import Document
+    from bokeh.model import Model
+    from pyviz_comms import Comm
+
+
+class Vizzu(PaneBase, SyncableData):
+    """
+    The `Vizzu` pane provides an interactive visualization component for
+    large, real-time datasets built on the Vizzu project.
+
+    Reference: https://panel.holoviz.org/reference/panes/Vizzu.html
+
+    :Example:
+
+    >>> Vizzu(df)
+    """
+
+    config = param.Dict(default={})
+
+    columns = param.List(default=[])
+
+    duration = param.Integer(default=500)
+
+    style = param.Dict()
+
+    _data_params: ClassVar[List[str]] = ['object']
+
+    _updates: ClassVar[bool] = True
+
+    @classmethod
+    def applies(cls, object):
+        if isinstance(object, dict) and all(isinstance(v, (list, np.ndarray)) for v in object.values()):
+            return 0 if object else None
+        elif 'pandas' in sys.modules:
+            import pandas as pd
+            if isinstance(object, pd.DataFrame):
+                return 0
+        return False
+
+    def _get_data(self):
+        if self.object is None:
+            return {}, {}
+        if isinstance(self.object, dict):
+            data = self.object
+        else:
+            data = {col: self.object[col].values for col in self.object.columns}
+        return data, {str(k): v for k, v in data.items()}
+
+    def _init_params(self):
+        props = super()._init_params()
+        props['duration'] = self.duration
+        props['source'] = ColumnDataSource(data=self._data)
+        props['columns'] = columns = self.columns
+        if columns:
+            return props
+        for col, array in self._data.items():
+            if not isinstance(array, np.ndarray):
+                array = np.asarray(array)
+            kind = array.dtype.kind
+            if kind == 'M':
+                columns.append({'name': col, 'type': 'datetime'})
+            elif kind in 'uif':
+                columns.append({'name': col, 'type': 'measure'})
+            elif kind in 'bsU':
+                columns.append({'name': col, 'type': 'dimension'})
+            else:
+                if len(array):
+                    value = array[0]
+                    print(value)
+                    if isinstance(value, dt.date):
+                        columns.append({'name': col, 'type': 'date'})
+                    elif isinstance(value, dt.datetime):
+                        columns.append({'name': col, 'type': 'datetime'})
+                    elif isinstance(value, str):
+                        columns.append({'name': col, 'type': 'measure'})
+                    elif isinstance(value, (float, np.float, int, np.int)):
+                        columns.append({'name': col, 'type': 'measure'})
+                    else:
+                        columns.append({'name': col, 'type': 'dimension'})
+                else:
+                    columns.append({'name': col, 'type': 'dimension'})
+        return props
+
+    def _get_model(
+        self, doc: Document, root: Optional[Model] = None,
+        parent: Optional[Model] = None, comm: Optional[Comm] = None
+    ) -> Model:
+        VizzuChart = lazy_load('panel.models.vizzu', 'VizzuChart', isinstance(comm, JupyterComm), root)
+        properties = self._process_param_change(self._init_params())
+        model = VizzuChart(**properties)
+        if root is None:
+            root = model
+        synced = list(set([p for p in self.param if (self.param[p].precedence or 0) > -1]) ^ (set(PaneBase.param) | set(SyncableData.param)))
+        self._link_props(model, synced, doc, root, comm)
+        self._models[root.ref['id']] = (model, parent)
+        return model
+
+    def _update(self, ref: str, model: Model) -> None:
+        pass

From 0a08bd77db9d362ff4bcf600b94cebbca820f859 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 21 Dec 2022 16:56:49 +0100
Subject: [PATCH 2/9] Improve animation API

---
 panel/models/vizzu.py |  2 ++
 panel/models/vizzu.ts |  2 ++
 panel/pane/vizzu.py   | 42 +++++++++++++++++++++++++++++++++++++-----
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/panel/models/vizzu.py b/panel/models/vizzu.py
index d42dfb82f0..ec5bd3cb2f 100644
--- a/panel/models/vizzu.py
+++ b/panel/models/vizzu.py
@@ -28,6 +28,8 @@ class VizzuChart(LayoutDOM):
     def __javascript_modules__(cls):
         return bundled_files(cls, 'javascript_modules')
 
+    animation = Dict(String, Any)
+
     config = Dict(String, Any)
 
     columns = List(Dict(String, Any))
diff --git a/panel/models/vizzu.ts b/panel/models/vizzu.ts
index 1bb1c12630..91a9deda26 100644
--- a/panel/models/vizzu.ts
+++ b/panel/models/vizzu.ts
@@ -39,6 +39,7 @@ export class VizzuChartView extends PanelHTMLBoxView {
 export namespace VizzuChart {
   export type Attrs = p.AttrsOf<Props>
   export type Props = HTMLBox.Props & {
+    animation: p.Property<any>
     config: p.Property<any>
     columns: p.Property<any>
     source: p.Property<ColumnDataSource>
@@ -62,6 +63,7 @@ export class VizzuChart extends HTMLBox {
     this.prototype.default_view = VizzuChartView
 
     this.define<VizzuChart.Props>(({Any, Array, Number, Ref}) => ({
+      animation:   [ Any,                     {} ],
       config:      [ Any,                     {} ],
       columns:     [ Array(Any),              [] ],
       source:      [ Ref(ColumnDataSource),      ],
diff --git a/panel/pane/vizzu.py b/panel/pane/vizzu.py
index 0864c3584b..55fa6b4f8b 100644
--- a/panel/pane/vizzu.py
+++ b/panel/pane/vizzu.py
@@ -4,7 +4,7 @@
 import sys
 
 from typing import (
-    TYPE_CHECKING, ClassVar, List, Optional,
+    TYPE_CHECKING, Any, ClassVar, Dict, List, Optional,
 )
 
 import numpy as np
@@ -35,13 +35,22 @@ class Vizzu(PaneBase, SyncableData):
     >>> Vizzu(df)
     """
 
-    config = param.Dict(default={})
+    animation = param.Dict(default={}, doc="""
+        Animation settings.""")
 
-    columns = param.List(default=[])
+    config = param.Dict(default={}, doc="""
+        """)
 
-    duration = param.Integer(default=500)
+    columns = param.List(default=[], doc="""
+        Optional column definitions. If not defined will be inferred
+        from the data.""")
 
-    style = param.Dict()
+    duration = param.Integer(default=500, doc="""
+        The config contains all of the parameters needed to render a
+        particular static chart or a state of an animated chart.""")
+
+    style = param.Dict(default={}, doc="""
+        Style configuration of the chart.""")
 
     _data_params: ClassVar[List[str]] = ['object']
 
@@ -57,6 +66,29 @@ def applies(cls, object):
                 return 0
         return False
 
+    def animate(
+        self, anim: Dict[str, Any], options: int | Dict[str, Any] | None = None
+    ) -> None:
+        """
+        Updates the chart with a new configuration.
+        """
+        if not any(key in anim for key in ('config', 'data', 'style')):
+            anim = {'config': anim}
+        updates = {}
+        for p, value in anim.items():
+            if p not in self.param:
+                raise ValueError(
+                    f'Could not update {p!r}. You must pass either a dictionary '
+                    'containing config, data and/or style values OR a single '
+                    'config dictionary. '
+                )
+            updates[p] = dict(getattr(self, p), value)
+        if isinstance(options, int):
+            self.duration = options
+        elif isinstance(options, dict):
+            self.animation = options
+        self.param.update(updates)
+
     def _get_data(self):
         if self.object is None:
             return {}, {}

From a697c0b47fd1ed835fc30fb879735767187c122e Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Thu, 23 Feb 2023 11:25:25 +0100
Subject: [PATCH 3/9] Update to shadow_dom

---
 panel/models/vizzu.ts | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/panel/models/vizzu.ts b/panel/models/vizzu.ts
index 91a9deda26..374d263b78 100644
--- a/panel/models/vizzu.ts
+++ b/panel/models/vizzu.ts
@@ -1,22 +1,34 @@
+import {div} from "@bokehjs/core/dom"
 import * as p from "@bokehjs/core/properties"
-import {HTMLBox} from "@bokehjs/models/layouts/html_box"
 import {ColumnDataSource} from "@bokehjs/models/sources/column_data_source";
 
-import {PanelHTMLBoxView} from "./layout"
+import {HTMLBox, HTMLBoxView} from "./layout"
 
-export class VizzuChartView extends PanelHTMLBoxView {
+export class VizzuChartView extends HTMLBoxView {
+  container: HTMLDivElement
+  timeout: number
   model: VizzuChart
   vizzu_view: any
+  last_updated: number
 
   connect_signals(): void {
+    if (this.timeout)
+      clearTimeout(this.timeout)
     super.connect_signals()
     this.connect(this.model.properties.config.change, () => {
       this.vizzu_view.animate({config: this.model.config}, this.model.duration+'ms')
     })
-    this.connect(this.model.source.properties.data.change, () => {
-      console.log(this.data())
-      this.vizzu_view.animate({data: this.data()}, this.model.duration+'ms')
-    })
+    const update = () => {
+      const now = Date.now()
+      const diff = now-this.last_updated
+      if (diff < this.model.duration)
+	setTimeout(update, diff)
+      else {
+	this.vizzu_view.animate({data: this.data()}, this.model.duration+'ms')
+	this.last_updated = now
+      }
+    }
+    this.connect(this.model.source.properties.data.change, update)
   }
 
   private data(): any {
@@ -28,7 +40,9 @@ export class VizzuChartView extends PanelHTMLBoxView {
 
   render(): void {
     super.render()
-    this.vizzu_view = new (window as any).Vizzu(this.el, {
+    this.container = div({style: "display: contents;"})
+    this.shadow_el.append(this.container)
+    this.vizzu_view = new (window as any).Vizzu(this.container, {
       config: this.model.config,
       data: this.data(),
       style: this.model.style

From 25988a6bad622a300a15c1acd7d8377e27e455c8 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Fri, 3 Mar 2023 13:20:33 +0100
Subject: [PATCH 4/9] Update Vizzu implementation

---
 panel/io/resources.py |   4 +-
 panel/models/vizzu.py |  18 ++++--
 panel/models/vizzu.ts |  77 ++++++++++++++++++----
 panel/pane/vizzu.py   | 144 ++++++++++++++++++++++++++++--------------
 4 files changed, 173 insertions(+), 70 deletions(-)

diff --git a/panel/io/resources.py b/panel/io/resources.py
index 21a5d0b9d0..2517b029e9 100644
--- a/panel/io/resources.py
+++ b/panel/io/resources.py
@@ -25,8 +25,8 @@
     CSS_RESOURCES as BkCSS_RESOURCES, Bundle as BkBundle, _bundle_extensions,
     _use_mathjax, bundle_models, extension_dirs,
 )
-from bokeh.models import ImportedStyleSheet
 from bokeh.model import Model
+from bokeh.models import ImportedStyleSheet
 from bokeh.resources import Resources as BkResources
 from bokeh.settings import settings as _settings
 from jinja2.environment import Environment
@@ -544,7 +544,7 @@ class Bundle(BkBundle):
 
     def __init__(self, notebook=False, **kwargs):
         self.js_modules = kwargs.pop("js_modules", [])
-        self.js_module_exports = kwargs.pop("js_module_exports", exports)
+        self.js_module_exports = kwargs.pop("js_module_exports", {})
         self.notebook = notebook
         super().__init__(**kwargs)
 
diff --git a/panel/models/vizzu.py b/panel/models/vizzu.py
index ec5bd3cb2f..bae8244bf3 100644
--- a/panel/models/vizzu.py
+++ b/panel/models/vizzu.py
@@ -4,12 +4,20 @@
 from bokeh.core.properties import (
     Any, Dict, Instance, Int, List, String,
 )
+from bokeh.events import ModelEvent
 from bokeh.models import LayoutDOM
 from bokeh.models.sources import DataSource
 
 from ..config import config
-from ..io.resources import bundled_files
-from ..util import classproperty
+
+
+class VizzuEvent(ModelEvent):
+
+    event_name = 'vizzu_event'
+
+    def __init__(self, model, data=None):
+        self.data = data
+        super().__init__(model=model)
 
 
 class VizzuChart(LayoutDOM):
@@ -20,14 +28,10 @@ class VizzuChart(LayoutDOM):
 
     __javascript_module_exports__ = ['Vizzu']
 
-    __javascript_modules_raw__ = [
+    __javascript_modules__ = [
         f"{config.npm_cdn}/vizzu@latest/dist/vizzu.min.js"
     ]
 
-    @classproperty
-    def __javascript_modules__(cls):
-        return bundled_files(cls, 'javascript_modules')
-
     animation = Dict(String, Any)
 
     config = Dict(String, Any)
diff --git a/panel/models/vizzu.ts b/panel/models/vizzu.ts
index 374d263b78..bcb5edab53 100644
--- a/panel/models/vizzu.ts
+++ b/panel/models/vizzu.ts
@@ -1,52 +1,105 @@
 import {div} from "@bokehjs/core/dom"
 import * as p from "@bokehjs/core/properties"
+import {isArray} from "@bokehjs/core/util/types"
 import {ColumnDataSource} from "@bokehjs/models/sources/column_data_source";
+import {ModelEvent} from "@bokehjs/core/bokeh_events"
+import {Attrs} from "@bokehjs/core/types"
 
 import {HTMLBox, HTMLBoxView} from "./layout"
 
+export class VizzuEvent extends ModelEvent {
+  event_name: string = "vizzu_event"
+  publish: boolean = true
+
+  constructor(readonly data: any) {
+    super()
+  }
+
+  protected get event_values(): Attrs {
+    return {model: this.origin, data: this.data}
+  }
+}
+
+const VECTORIZED_PROPERTIES = ['x', 'y', 'color', 'label', 'lightness', 'size', 'splittedBy', 'dividedBy']
+
 export class VizzuChartView extends HTMLBoxView {
   container: HTMLDivElement
   timeout: number
   model: VizzuChart
   vizzu_view: any
   last_updated: number
+  update: any = {}
 
   connect_signals(): void {
     if (this.timeout)
       clearTimeout(this.timeout)
     super.connect_signals()
-    this.connect(this.model.properties.config.change, () => {
-      this.vizzu_view.animate({config: this.model.config}, this.model.duration+'ms')
-    })
     const update = () => {
       const now = Date.now()
       const diff = now-this.last_updated
-      if (diff < this.model.duration)
+      if (!this.valid_config) {
+	return
+      } else if (diff < this.model.duration)
 	setTimeout(update, diff)
       else {
-	this.vizzu_view.animate({data: this.data()}, this.model.duration+'ms')
+	const update = {config: this.model.config, data: this.data(), style: this.model.style}
+	this.vizzu_view.animate(update, this.model.duration+'ms')
 	this.last_updated = now
       }
     }
+    this.connect(this.model.properties.config.change, update)
     this.connect(this.model.source.properties.data.change, update)
+    this.connect(this.model.source.streaming, update)
+    this.connect(this.model.source.patching, update)
+    this.connect(this.model.properties.style.change, update)
+  }
+
+  get valid_config(): boolean {
+    const columns = this.model.source.columns()
+    if ('channels' in this.model.config) {
+      for (const col of Object.values(this.model.config.channels)) {
+	if (isArray(col)) {
+	  for (const c of col) {
+	    if (col != null && !columns.includes(c as string))
+	      return false
+	  }
+	} else if (col != null && !columns.includes(col as string))
+	  return false
+      }
+    } else {
+      for (const prop of VECTORIZED_PROPERTIES) {
+	if (prop in this.model.config && !columns.includes(this.model.config[prop]))
+	  return false
+      }
+    }
+    return true
   }
 
   private data(): any {
     const series = []
-    for (const column of this.model.columns)
-      series.push({...column, values: [...this.model.source.data[column.name]]})
+    for (const column of this.model.columns) {
+      let array = [...this.model.source.get_array(column.name)]
+      if (column.type === 'datetime' || column.type == 'date')
+	column.type = 'measure'
+      if (column.type === 'dimension')
+	array = array.map(String)
+      series.push({...column, values: array})
+    }
     return {series}
   }
 
   render(): void {
     super.render()
-    this.container = div({style: "display: contents;"})
+    this.container = div({'style': 'display: contents;'})
     this.shadow_el.append(this.container)
-    this.vizzu_view = new (window as any).Vizzu(this.container, {
-      config: this.model.config,
-      data: this.data(),
-      style: this.model.style
+    this.vizzu_view = new (window as any).Vizzu(this.container)
+    this.vizzu_view.initializing.then((chart: any) => {
+      chart.on('click', (event: any) => {
+	this.model.trigger_event(new VizzuEvent(event.data))
+      })
     })
+    this.vizzu_view.animate({data: this.data()})
+    this.vizzu_view.animate({config: this.model.config, style: this.model.style})
   }
 }
 
diff --git a/panel/pane/vizzu.py b/panel/pane/vizzu.py
index 55fa6b4f8b..cb1f28e026 100644
--- a/panel/pane/vizzu.py
+++ b/panel/pane/vizzu.py
@@ -4,18 +4,19 @@
 import sys
 
 from typing import (
-    TYPE_CHECKING, Any, ClassVar, Dict, List, Optional,
+    TYPE_CHECKING, Any, Callable, ClassVar, Dict, List, Optional,
 )
 
 import numpy as np
+import pandas as pd
 import param
 
 from bokeh.models import ColumnDataSource
 from pyviz_comms import JupyterComm
 
 from ..reactive import SyncableData
-from ..util import lazy_load
-from .base import PaneBase
+from ..util import isdatetime, lazy_load
+from .base import ModelPane
 
 if TYPE_CHECKING:
     from bokeh.document import Document
@@ -23,7 +24,7 @@
     from pyviz_comms import Comm
 
 
-class Vizzu(PaneBase, SyncableData):
+class Vizzu(ModelPane, SyncableData):
     """
     The `Vizzu` pane provides an interactive visualization component for
     large, real-time datasets built on the Vizzu project.
@@ -36,12 +37,17 @@ class Vizzu(PaneBase, SyncableData):
     """
 
     animation = param.Dict(default={}, doc="""
-        Animation settings.""")
+        Animation settings (see https://lib.vizzuhq.com/latest/reference/modules/vizzu.Anim.html).""")
 
     config = param.Dict(default={}, doc="""
-        """)
+        The config contains all of the parameters needed to render a
+        particular static chart or a state of an animated chart
+        (see https://lib.vizzuhq.com/latest/reference/interfaces/vizzu.Config.Chart.html).""")
+
+    click = param.Parameter(doc="""
+        Data associated with the latest click event.""")
 
-    columns = param.List(default=[], doc="""
+    column_types = param.Dict(default={}, doc="""
         Optional column definitions. If not defined will be inferred
         from the data.""")
 
@@ -54,8 +60,18 @@ class Vizzu(PaneBase, SyncableData):
 
     _data_params: ClassVar[List[str]] = ['object']
 
+    _rename: ClassVar[Dict[str, str | None]] = {
+        'click': None, 'column_types': None, 'object': None
+    }
+
+    _rerender_params: ClassVar[List[str]] = []
+
     _updates: ClassVar[bool] = True
 
+    def __init__(self, object=None, **params):
+        super().__init__(object, **params)
+        self._event_handlers = []
+
     @classmethod
     def applies(cls, object):
         if isinstance(object, dict) and all(isinstance(v, (list, np.ndarray)) for v in object.values()):
@@ -66,29 +82,6 @@ def applies(cls, object):
                 return 0
         return False
 
-    def animate(
-        self, anim: Dict[str, Any], options: int | Dict[str, Any] | None = None
-    ) -> None:
-        """
-        Updates the chart with a new configuration.
-        """
-        if not any(key in anim for key in ('config', 'data', 'style')):
-            anim = {'config': anim}
-        updates = {}
-        for p, value in anim.items():
-            if p not in self.param:
-                raise ValueError(
-                    f'Could not update {p!r}. You must pass either a dictionary '
-                    'containing config, data and/or style values OR a single '
-                    'config dictionary. '
-                )
-            updates[p] = dict(getattr(self, p), value)
-        if isinstance(options, int):
-            self.duration = options
-        elif isinstance(options, dict):
-            self.animation = options
-        self.param.update(updates)
-
     def _get_data(self):
         if self.object is None:
             return {}, {}
@@ -98,14 +91,12 @@ def _get_data(self):
             data = {col: self.object[col].values for col in self.object.columns}
         return data, {str(k): v for k, v in data.items()}
 
-    def _init_params(self):
-        props = super()._init_params()
-        props['duration'] = self.duration
-        props['source'] = ColumnDataSource(data=self._data)
-        props['columns'] = columns = self.columns
-        if columns:
-            return props
+    def _get_columns(self):
+        columns = []
         for col, array in self._data.items():
+            if col in self.column_types:
+                columns.append({'name': col, 'type': self.column_types[col]})
+                continue
             if not isinstance(array, np.ndarray):
                 array = np.asarray(array)
             kind = array.dtype.kind
@@ -118,34 +109,89 @@ def _init_params(self):
             else:
                 if len(array):
                     value = array[0]
-                    print(value)
                     if isinstance(value, dt.date):
-                        columns.append({'name': col, 'type': 'date'})
-                    elif isinstance(value, dt.datetime):
+                        columns.append({'name': col, 'type': 'datetime'})
+                    elif isdatetime(value) or isinstance(value, pd.Period):
                         columns.append({'name': col, 'type': 'datetime'})
                     elif isinstance(value, str):
-                        columns.append({'name': col, 'type': 'measure'})
+                        columns.append({'name': col, 'type': 'dimension'})
                     elif isinstance(value, (float, np.float, int, np.int)):
                         columns.append({'name': col, 'type': 'measure'})
                     else:
                         columns.append({'name': col, 'type': 'dimension'})
                 else:
                     columns.append({'name': col, 'type': 'dimension'})
+        return columns
+
+    def _get_properties(self, doc, source=None):
+        props = super()._get_properties(doc)
+        props['duration'] = self.duration
+        if source is None:
+            props['source'] = ColumnDataSource(data=self._data)
+        else:
+            source.data = self._data
+            props['source'] = source
         return props
 
+    def _process_param_change(self, params):
+        if 'object' in params:
+            self._processed, self._data = self._get_data()
+        if 'object' in params or 'column_types' in params:
+            params['columns'] = self._get_columns()
+        return super()._process_param_change(params)
+
     def _get_model(
         self, doc: Document, root: Optional[Model] = None,
         parent: Optional[Model] = None, comm: Optional[Comm] = None
     ) -> Model:
-        VizzuChart = lazy_load('panel.models.vizzu', 'VizzuChart', isinstance(comm, JupyterComm), root)
-        properties = self._process_param_change(self._init_params())
-        model = VizzuChart(**properties)
-        if root is None:
-            root = model
-        synced = list(set([p for p in self.param if (self.param[p].precedence or 0) > -1]) ^ (set(PaneBase.param) | set(SyncableData.param)))
-        self._link_props(model, synced, doc, root, comm)
-        self._models[root.ref['id']] = (model, parent)
+        self._bokeh_model = lazy_load(
+            'panel.models.vizzu', 'VizzuChart', isinstance(comm, JupyterComm), root
+        )
+        model = super()._get_model(doc, root, parent, comm)
+        self._register_events('vizzu_event', model=model, doc=doc, comm=comm)
         return model
 
+    def _process_event(self, event):
+        self.click = event.data
+        for handler in self._event_handlers:
+            handler(event.data)
+
     def _update(self, ref: str, model: Model) -> None:
         pass
+
+    def animate(
+        self, anim: Dict[str, Any], options: int | Dict[str, Any] | None = None
+    ) -> None:
+        """
+        Updates the chart with a new configuration.
+        """
+        if not any(key in anim for key in ('config', 'data', 'style')):
+            anim = {'config': anim}
+        updates = {}
+        for p, value in anim.items():
+            if p not in self.param:
+                raise ValueError(
+                    f'Could not update {p!r}. You must pass either a dictionary '
+                    'containing config, data and/or style values OR a single '
+                    'config dictionary. '
+                )
+            updates[p] = dict(getattr(self, p), **value)
+        if isinstance(options, int):
+            self.duration = options
+        elif isinstance(options, dict):
+            self.animation = options
+        self.param.update(updates)
+
+    # Public API
+
+    def on_click(self, callback: Callable[[Dict], None]):
+        """
+        Register a callback to be executed when any element in the
+        chart is clicked on.
+
+        Arguments
+        ---------
+        callback: (callable)
+            The callback to run on click events.
+        """
+        self._event_handlers.append(callback)

From 6f6d33e8b644a6569590d4cb342d36bb822c954b Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 22 Mar 2023 15:36:56 +0100
Subject: [PATCH 5/9] Various Vizzu update enhancements

---
 panel/io/resources.py |  8 ++--
 panel/models/vizzu.py |  2 +-
 panel/models/vizzu.ts | 89 ++++++++++++++++++++++++++++++++-----------
 panel/pane/vizzu.py   |  7 ++--
 4 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/panel/io/resources.py b/panel/io/resources.py
index 2517b029e9..da91acaa46 100644
--- a/panel/io/resources.py
+++ b/panel/io/resources.py
@@ -357,11 +357,11 @@ def bundle_resources(roots, resources, notebook=False):
         js_raw.append(ext)
 
     hashes = js_resources.hashes if js_resources else {}
-
     return Bundle(
-        js_files=js_files, js_raw=js_raw, css_files=css_files,
-        css_raw=css_raw, hashes=hashes, notebook=notebook,
-        js_modules=resources.js_modules, resources.js_module_exports
+        css_files=css_files, css_raw=css_raw, hashes=hashes,
+        js_files=js_files, js_raw=js_raw
+        js_module_exports=resources.js_module_exports,
+        js_modules=resources.js_modules, notebook=notebook,
     )
 
 
diff --git a/panel/models/vizzu.py b/panel/models/vizzu.py
index bae8244bf3..d3503295d4 100644
--- a/panel/models/vizzu.py
+++ b/panel/models/vizzu.py
@@ -29,7 +29,7 @@ class VizzuChart(LayoutDOM):
     __javascript_module_exports__ = ['Vizzu']
 
     __javascript_modules__ = [
-        f"{config.npm_cdn}/vizzu@latest/dist/vizzu.min.js"
+        f"{config.npm_cdn}/vizzu@0.7.1/dist/vizzu.min.js"
     ]
 
     animation = Dict(String, Any)
diff --git a/panel/models/vizzu.ts b/panel/models/vizzu.ts
index bcb5edab53..a6be783996 100644
--- a/panel/models/vizzu.ts
+++ b/panel/models/vizzu.ts
@@ -1,12 +1,15 @@
 import {div} from "@bokehjs/core/dom"
 import * as p from "@bokehjs/core/properties"
-import {isArray} from "@bokehjs/core/util/types"
+import {isArray, isObject} from "@bokehjs/core/util/types"
 import {ColumnDataSource} from "@bokehjs/models/sources/column_data_source";
 import {ModelEvent} from "@bokehjs/core/bokeh_events"
 import {Attrs} from "@bokehjs/core/types"
 
+import {debounce} from  "debounce"
+
 import {HTMLBox, HTMLBoxView} from "./layout"
 
+
 export class VizzuEvent extends ModelEvent {
   event_name: string = "vizzu_event"
   publish: boolean = true
@@ -24,34 +27,52 @@ const VECTORIZED_PROPERTIES = ['x', 'y', 'color', 'label', 'lightness', 'size',
 
 export class VizzuChartView extends HTMLBoxView {
   container: HTMLDivElement
-  timeout: number
   model: VizzuChart
+  update: string[] = []
   vizzu_view: any
-  last_updated: number
-  update: any = {}
+  _animating: boolean = false
 
   connect_signals(): void {
-    if (this.timeout)
-      clearTimeout(this.timeout)
     super.connect_signals()
-    const update = () => {
-      const now = Date.now()
-      const diff = now-this.last_updated
+    const update = debounce(() => {
       if (!this.valid_config) {
+	console.warn('Vizzu config not valid given current data.')
+	return
+      } else if (!this.update.length || this._animating)
 	return
-      } else if (diff < this.model.duration)
-	setTimeout(update, diff)
       else {
-	const update = {config: this.model.config, data: this.data(), style: this.model.style}
-	this.vizzu_view.animate(update, this.model.duration+'ms')
-	this.last_updated = now
+	let change = {}
+	for (const prop of this.update) {
+	  if (prop === 'config')
+	    change = {...change, config: this.config()}
+	  else if (prop === 'data')
+	    change = {...change, data: this.data()}
+	  else
+	    change = {...change, style: this.model.style}
+	}
+	if (this.update.includes('data') && this.update.length === 1) {
+	  this.render()
+	  return
+	}
+	this._animating = true
+	this.vizzu_view.animate(change, this.model.duration+'ms').then(() => {
+	  this._animating = false
+	  if (this.update.length)
+	    update()
+	})
+	this.update = []
       }
+    }, 20)
+    const update_prop = (prop: string) => {
+      if (!this.update.includes(prop))
+	this.update.push(prop)
+      update()
     }
-    this.connect(this.model.properties.config.change, update)
-    this.connect(this.model.source.properties.data.change, update)
-    this.connect(this.model.source.streaming, update)
-    this.connect(this.model.source.patching, update)
-    this.connect(this.model.properties.style.change, update)
+    this.connect(this.model.properties.config.change, () => update_prop('config'))
+    this.connect(this.model.source.properties.data.change, () => update_prop('data'))
+    this.connect(this.model.source.streaming, () => update_prop('data'))
+    this.connect(this.model.source.patching, () => update_prop('data'))
+    this.connect(this.model.properties.style.change, () => update_prop('style'))
   }
 
   get valid_config(): boolean {
@@ -63,6 +84,13 @@ export class VizzuChartView extends HTMLBoxView {
 	    if (col != null && !columns.includes(c as string))
 	      return false
 	  }
+	} else if (isObject(col)) {
+	  for (const prop of Object.keys(col)) {
+	    for (const c of ((col as any)[prop] as string[])) {
+	      if (col != null && !columns.includes(c as string))
+		return false
+	    }
+	  }
 	} else if (col != null && !columns.includes(col as string))
 	  return false
       }
@@ -75,6 +103,15 @@ export class VizzuChartView extends HTMLBoxView {
     return true
   }
 
+  private config(): any {
+    let config = {...this.model.config}
+    if ('channels' in config)
+      config['channels'] = {...config.channels}
+    if (config.preset != undefined)
+      config = (window as any).Vizzu.presets[config.preset](config)
+    return config
+  }
+
   private data(): any {
     const series = []
     for (const column of this.model.columns) {
@@ -92,14 +129,22 @@ export class VizzuChartView extends HTMLBoxView {
     super.render()
     this.container = div({'style': 'display: contents;'})
     this.shadow_el.append(this.container)
-    this.vizzu_view = new (window as any).Vizzu(this.container)
+    const state = {config: this.config(), data: this.data(), style: this.model.style}
+    this.vizzu_view = new (window as any).Vizzu(this.container, state)
+    this._animating = true
     this.vizzu_view.initializing.then((chart: any) => {
       chart.on('click', (event: any) => {
 	this.model.trigger_event(new VizzuEvent(event.data))
       })
+      this._animating = false
     })
-    this.vizzu_view.animate({data: this.data()})
-    this.vizzu_view.animate({config: this.model.config, style: this.model.style})
+  }
+  
+  override remove(): void {
+    if (this.vizzu_view) {
+      this.vizzu_view.detach()
+    }
+    super.remove()
   }
 }
 
diff --git a/panel/pane/vizzu.py b/panel/pane/vizzu.py
index cb1f28e026..2120f8cf82 100644
--- a/panel/pane/vizzu.py
+++ b/panel/pane/vizzu.py
@@ -86,10 +86,11 @@ def _get_data(self):
         if self.object is None:
             return {}, {}
         if isinstance(self.object, dict):
-            data = self.object
+            cols = data = dict(self.object)
         else:
-            data = {col: self.object[col].values for col in self.object.columns}
-        return data, {str(k): v for k, v in data.items()}
+            data = self.object
+            cols = ColumnDataSource.from_df(self.object)
+        return data, {str(k): v for k, v in cols.items()}
 
     def _get_columns(self):
         columns = []

From f62571e0875c92fddbc12b794ee6c36102f10990 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 22 Mar 2023 16:06:30 +0100
Subject: [PATCH 6/9] Add Vizzu pane reference page

---
 examples/reference/panes/Vizzu.ipynb | 200 +++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)
 create mode 100644 examples/reference/panes/Vizzu.ipynb

diff --git a/examples/reference/panes/Vizzu.ipynb b/examples/reference/panes/Vizzu.ipynb
new file mode 100644
index 0000000000..0d0101e741
--- /dev/null
+++ b/examples/reference/panes/Vizzu.ipynb
@@ -0,0 +1,200 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "import pandas as pd\n",
+    "import panel as pn\n",
+    "\n",
+    "pn.extension('vizzu')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The ``Vizzu`` pane renders [Vizzu](https://lib.vizzuhq.com/) charts inside Panel. Note that to use the ``Vizzu`` pane in the notebook the Panel extension has to be loaded with 'vizzu' as an argument to ensure that vizzu.js is initialized. \n",
+    "\n",
+    "#### Parameters:\n",
+    "\n",
+    "For layout and styling related parameters see the [customization user guide](../../user_guide/Customization.ipynb).\n",
+    "\n",
+    "* **``object``** (dict | pd.DataFrame): The data expressed as a Python dictionary of arrays or DataFrame.\n",
+    "* **``animation``** (dict): Animation settings (see https://lib.vizzuhq.com/latest/reference/modules/vizzu.Anim.html).\n",
+    "* **``config``** (dict): The config contains all of the parameters needed to render a particular static chart or a state of an animated chart (see https://lib.vizzuhq.com/latest/reference/interfaces/vizzu.Config.Chart.html).\n",
+    "* **``columns``** (list): Optional column definitions. If not defined will be inferred from the data.\n",
+    "\n",
+    "Methods:\n",
+    "\n",
+    "* **`animate`**: Accepts a dictionary of new 'data', 'config' and 'style' values which is used to update the chart.\n",
+    "* **`stream`**: Streams new data to the plot.\n",
+    "* **`patch`**: Patches one or more rows in the data.\n",
+    "___"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `Vizzu` renders a dataset (defined either as a dictionary of columns or a DataFrame) given a `config` defining how to plot the data:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "tags": []
+   },
+   "outputs": [],
+   "source": [
+    "data = {\n",
+    "    'Name': ['Alice', 'Bob', 'Ted', 'Patrick', 'Jason', 'Teresa', 'John'],\n",
+    "    'Weight': 50+np.random.randint(0, 10, 7)*10\n",
+    "}\n",
+    "\n",
+    "vizzu = pn.pane.Vizzu(\n",
+    "    data, config={'geometry': 'rectangle', 'x': 'Name', 'y': 'Weight', 'title': 'Weight by person'},\n",
+    "    duration=400, height=400, sizing_mode='stretch_width'\n",
+    ")\n",
+    "\n",
+    "vizzu"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "One of the major selling points behind Vizzu is the dynamic animations when either the data or the `config` is updated, e.g. if we change the 'geometry' we can see the animation smoothly transition between the two states."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "vizzu.animate({'geometry': 'circle'})"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Note that the Vizzu pane will keep track of any changes you make as part of the `.animate()` call ensuring that the plot can be re-created easily:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print(vizzu.config)\n",
+    "\n",
+    "vizzu"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Column Types\n",
+    "\n",
+    "`Vizzu` supports two column types:\n",
+    "\n",
+    "- `'dimension'`: Usually used for non-numeric data and/or the independent dimension of a chart (e.g. the x-axis)\n",
+    "- `'measure'`: Numeric values usually used for dependent variables of a chart (e.g. the y-axis values)\n",
+    "\n",
+    "The `Vizzu` pane automatically infers the types based on the dtypes of the data but in certain cases it may be necessary to exlicitly override the type of a column using `column_types` parameter. One common example is when plotting integers on the x-axis, which would ordinarily be treated as a 'measure' but should be treated as the independent dimension in the case of a line or bar chart.\n",
+    "\n",
+    "The example below demonstrates this case, here we want to treat the 'index' as an independent variable and override the default inferred type with `column_types={'index': 'dimension'}`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "df = pd.DataFrame(np.random.randn(50), columns=list('Y')).cumsum()\n",
+    "\n",
+    "pn.pane.Vizzu(\n",
+    "    df, column_types={'index': 'dimension'}, config={'x': 'index', 'y': 'Y', 'geometry': 'line'},\n",
+    "    height=300, sizing_mode='stretch_width'\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Presets\n",
+    "\n",
+    "Vizzu provides a variety of [preset chart types](https://lib.vizzuhq.com/latest/examples/presets/). In `ipyvizzu` these are expressed by calling [helper methods](https://ipyvizzu.vizzuhq.com/latest/tutorial/chart_presets/) on the `Config` object. The `Vizzu` pane instead allows you to provide `'preset'` as a key of the `config`. In the example below we dynamically create a `config` that switches the `preset` based on a `RadioButtonGroup`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "windturbines = pd.read_parquet('https://datasets.holoviz.org/windturbines/v1/windturbines.parq')\n",
+    "\n",
+    "agg = windturbines.groupby(['p_year', 't_manu'])[['p_cap']].sum().sort_index(level=0).reset_index()\n",
+    "\n",
+    "chart_type = pn.widgets.RadioButtonGroup(options={'Stream': 'stream', 'Bar': 'stackedColumn'}, align='center')\n",
+    "\n",
+    "preset_chart = pn.pane.Vizzu(\n",
+    "    agg,\n",
+    "    config=pn.bind(lambda preset: {'preset': preset, 'x': 'p_year', 'y': 'p_cap', 'stackedBy': 't_manu'}, chart_type),\n",
+    "    column_types={'p_year': 'dimension'},\n",
+    "    height=500,\n",
+    "    sizing_mode='stretch_width',\n",
+    "    style={\n",
+    "        'plot': {\n",
+    "            \"xAxis\": {\n",
+    "                \"label\": {\n",
+    "                    \"angle\": \"-45deg\"\n",
+    "                }\n",
+    "            }\n",
+    "        }\n",
+    "    }\n",
+    ")\n",
+    "\n",
+    "\n",
+    "pn.Column(chart_type, preset_chart).embed()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Controls\n",
+    "\n",
+    "The `Vizzu` pane exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Row(vizzu.controls(jslink=True), vizzu)"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python",
+   "pygments_lexer": "ipython3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

From ed6d2c0558fdb53306d4c1eae582499f43d52dc0 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 22 Mar 2023 16:15:59 +0100
Subject: [PATCH 7/9] Fix resources

---
 panel/io/resources.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/panel/io/resources.py b/panel/io/resources.py
index da91acaa46..bee00ab9bb 100644
--- a/panel/io/resources.py
+++ b/panel/io/resources.py
@@ -359,7 +359,7 @@ def bundle_resources(roots, resources, notebook=False):
     hashes = js_resources.hashes if js_resources else {}
     return Bundle(
         css_files=css_files, css_raw=css_raw, hashes=hashes,
-        js_files=js_files, js_raw=js_raw
+        js_files=js_files, js_raw=js_raw,
         js_module_exports=resources.js_module_exports,
         js_modules=resources.js_modules, notebook=notebook,
     )
@@ -490,7 +490,7 @@ def js_modules(self):
 
         if config.design:
             design_name = config.design.__name__.lower()
-            for resource in config.design._resources.get('js_modules').values():
+            for resource in config.design._resources.get('js_modules', {}).values():
                 if not isurl(resource):
                     resource = f'{CDN_DIST}bundled/{design_name}/{resource}'
                 if resource not in modules:
@@ -512,7 +512,7 @@ def js_module_exports(self):
         modules = {}
         for model in Model.model_class_reverse_map.values():
             if hasattr(model, '__javascript_module_exports__'):
-                modules.update(dict(zip(model.__javascript_module_exports__, model.__javascript_module__)))
+                modules.update(dict(zip(model.__javascript_module_exports__, model.__javascript_modules__)))
         return modules
 
     @property

From 953c6892a80c138981fd941ab5442644af8e948f Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Wed, 22 Mar 2023 15:16:44 +0000
Subject: [PATCH 8/9] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 panel/models/vizzu.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/models/vizzu.ts b/panel/models/vizzu.ts
index a6be783996..3f52f121d0 100644
--- a/panel/models/vizzu.ts
+++ b/panel/models/vizzu.ts
@@ -139,7 +139,7 @@ export class VizzuChartView extends HTMLBoxView {
       this._animating = false
     })
   }
-  
+
   override remove(): void {
     if (this.vizzu_view) {
       this.vizzu_view.detach()

From d94861151df23f4d18d5a0189d083c1493432c0d Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 22 Mar 2023 18:26:44 +0100
Subject: [PATCH 9/9] Switch to csv

---
 examples/reference/panes/Vizzu.ipynb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/reference/panes/Vizzu.ipynb b/examples/reference/panes/Vizzu.ipynb
index 0d0101e741..3e9d90e4c7 100644
--- a/examples/reference/panes/Vizzu.ipynb
+++ b/examples/reference/panes/Vizzu.ipynb
@@ -143,7 +143,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "windturbines = pd.read_parquet('https://datasets.holoviz.org/windturbines/v1/windturbines.parq')\n",
+    "windturbines = pd.read_csv('https://datasets.holoviz.org/windturbines/v1/windturbines.csv')\n",
     "\n",
     "agg = windturbines.groupby(['p_year', 't_manu'])[['p_cap']].sum().sort_index(level=0).reset_index()\n",
     "\n",