Skip to content

Template

ipyvizzustory.storylib.template

A module for storing the HTML templates.

ipyvizzustory.storylib.template.VIZZU_STORY: str = 'https://cdn.jsdelivr.net/npm/vizzu-story@0.7/dist/vizzu-story.min.js' module-attribute

A variable for storing the default url of the vizzu-story package.

ipyvizzustory.storylib.template.DISPLAY_INDENT: str = ' ' module-attribute

A variable for storing the default indent in the HTML template.

ipyvizzustory.storylib.template.DISPLAY_TEMPLATE: str = '\n<div>\n <vizzu-player id="{id}" {vizzu} {start_slide} controller></vizzu-player>\n <script type="module">\n import VizzuPlayer from "{vizzu_story}";\n\n class IpyvizzuStory {{\n static version = "{version}";\n static analytics = undefined;\n\n static changeAnalyticsTo(analytics) {{\n if (IpyvizzuStory.analytics !== analytics) {{\n console.log("ipyvizzu-story gather usage stats:", analytics);\n IpyvizzuStory.analytics = analytics;\n }}\n if (analytics) {{\n IpyvizzuStory._addHeadScript();\n }} else {{\n IpyvizzuStory._removeScript("ipyvizzu-story-analytics-head");\n }}\n }}\n\n static _addHeadScript() {{\n const scriptId = "ipyvizzu-story-analytics-head";\n if (!IpyvizzuStory._isScriptAppended(scriptId)) {{\n const script = document.createElement("script");\n script.defer = true;\n script.src = "https://plausible.io/js/script.local.js";\n script.dataset.domain = "usage.ipyvizzu-story.com";\n script.id = scriptId;\n document.getElementsByTagName("head")[0].appendChild(script);\n }}\n }}\n\n static _isScriptAppended(id) {{\n return document.querySelector(`script[id="${{id}}"]`) !== null;\n }}\n\n static _removeScript(id) {{\n const script = document.getElementById(id);\n if (script) script.remove();\n }}\n }}\n\n if (IpyvizzuStory.version !== window.IpyvizzuStory?.version) {{\n window.IpyvizzuStory = IpyvizzuStory;\n console.log(`ipyvizzu-story ${{IpyvizzuStory.version}}`);\n }}\n\n window.IpyvizzuStory?.changeAnalyticsTo({analytics});\n\n class Plugins {{\n static _resolveVizzuVersion(vp) {{\n const url = vp.vizzuUrl;\n const versionMatch = url.match(/vizzu@([^\\/]+)\\//);\n return versionMatch[1];\n }}\n\n static _resolveUrl(plugin, tag) {{\n if (!plugin.includes(\'/\')) {{\n const jsdelivr = "https://cdn.jsdelivr.net/npm/@vizzu";\n return `${{jsdelivr}}/${{plugin}}@${{tag}}/dist/mjs/index.min.js`;\n }}\n return plugin;\n }}\n\n static register(vp, chart, plugins) {{\n const tag = `vizzu-${{Plugins._resolveVizzuVersion(vp)}}`;\n const pluginsRegistered = [];\n for (const plugin of plugins) {{\n const pluginUrl = Plugins._resolveUrl(plugin.plugin, tag);\n const pluginRegistered = import(pluginUrl).then(pluginModule => {{\n const pluginInstance = new pluginModule[plugin.name](plugin.options);\n chart.feature(pluginInstance, true);\n }}).catch((error) => {{\n console.error(\'Error importing plugin:\', pluginUrl, error)\n }});\n pluginsRegistered.push(pluginRegistered);\n }}\n return Promise.all(pluginsRegistered);\n }}\n }}\n\n const vp = document.getElementById("{id}");\n vp.initializing.then(chart => {{\n const lib = vp.Vizzu;\n\n // story.set_size()\n {chart_size}\n\n // story.add_plugin()\n const plugins = [];\n {chart_plugins}\n Plugins.register(vp, chart, plugins).then(() => {{\n // story.set_feature()\n {chart_features}\n // story.add_event()\n {chart_events}\n\n const vizzuPlayerData = {vizzu_player_data};\n vp.slides = vizzuPlayerData;\n }});\n }});\n </script>\n</div>\n' module-attribute

A variable for storing the vizzu-story HTML template.