${valueToHtml(title)}

`; } if (image) { content += `

`; } const keys = Object.keys(rest); if (keys.length > 0) { content += ''; for (const key of keys) { let val = rest[key]; // ignore undefined properties if (val === undefined) { continue; } if (isObject(val)) { val = stringify(val, maxDepth); } content += ``; } content += `

${valueToHtml(key)}:

${valueToHtml(val)}

`; } return content || '{}'; // show empty object if there are no properties } return valueToHtml(value); } function replacer(maxDepth) { const stack = []; return function (key, value) { if (typeof value !== 'object' || value === null) { return value; } const pos = stack.indexOf(this) + 1; stack.length = pos; if (stack.length > maxDepth) { return '[Object]'; } if (stack.indexOf(value) >= 0) { return '[Circular]'; } stack.push(value); return value; }; } /** * Stringify any JS object to valid JSON */ function stringify(obj, maxDepth) { return JSON.stringify(obj, replacer(maxDepth)); } // generated with build-style.sh var defaultStyle = `#vg-tooltip-element { visibility: hidden; padding: 8px; position: fixed; z-index: 1000; font-family: sans-serif; font-size: 11px; border-radius: 3px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* The default theme is the light theme. */ background-color: rgba(255, 255, 255, 0.95); border: 1px solid #d9d9d9; color: black; } #vg-tooltip-element.visible { visibility: visible; } #vg-tooltip-element h2 { margin-top: 0; margin-bottom: 10px; font-size: 13px; } #vg-tooltip-element table { border-spacing: 0; } #vg-tooltip-element table tr { border: none; } #vg-tooltip-element table tr td { overflow: hidden; text-overflow: ellipsis; padding-top: 2px; padding-bottom: 2px; } #vg-tooltip-element table tr td.key { color: #808080; max-width: 150px; text-align: right; padding-right: 4px; } #vg-tooltip-element table tr td.value { display: block; max-width: 300px; max-height: 7em; text-align: left; } #vg-tooltip-element.dark-theme { background-color: rgba(32, 32, 32, 0.9); border: 1px solid #f5f5f5; color: white; } #vg-tooltip-element.dark-theme td.key { color: #bfbfbf; } `; const EL_ID = 'vg-tooltip-element'; const DEFAULT_OPTIONS = { /** * X offset. */ offsetX: 10, /** * Y offset. */ offsetY: 10, /** * ID of the tooltip element. */ id: EL_ID, /** * ID of the tooltip CSS style. */ styleId: 'vega-tooltip-style', /** * The name of the theme. You can use the CSS class called [THEME]-theme to style the tooltips. * * There are two predefined themes: "light" (default) and "dark". */ theme: 'light', /** * Do not use the default styles provided by Vega Tooltip. If you enable this option, you need to use your own styles. It is not necessary to disable the default style when using a custom theme. */ disableDefaultStyle: false, /** * HTML sanitizer function that removes dangerous HTML to prevent XSS. * * This should be a function from string to string. You may replace it with a formatter such as a markdown formatter. */ sanitize: escapeHTML, /** * The maximum recursion depth when printing objects in the tooltip. */ maxDepth: 2, /** * A function to customize the rendered HTML of the tooltip. * @param value A value string, or object of value strings keyed by field * @param sanitize The `sanitize` function from `options.sanitize` * @returns {string} The returned string will become the `innerHTML` of the tooltip element */ formatTooltip: formatValue }; /** * Escape special HTML characters. * * @param value A value to convert to string and HTML-escape. */ function escapeHTML(value) { return String(value).replace(/&/g, '&').replace(/ window.innerWidth) { x = +event.clientX - offsetX - tooltipBox.width; } let y = event.clientY + offsetY; if (y + tooltipBox.height > window.innerHeight) { y = +event.clientY - offsetY - tooltipBox.height; } return { x, y }; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** * The tooltip handler class. */ class Handler { /** * The handler function. We bind this to this function in the constructor. */ /** * Complete tooltip options. */ /** * The tooltip html element. */ /** * Create the tooltip handler and initialize the element and style. * * @param options Tooltip Options */ constructor(options) { this.options = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options); const elementId = this.options.id; this.el = null; // bind this to call this.call = this.tooltipHandler.bind(this); // prepend a default stylesheet for tooltips to the head if (!this.options.disableDefaultStyle && !document.getElementById(this.options.styleId)) { const style = document.createElement('style'); style.setAttribute('id', this.options.styleId); style.innerHTML = createDefaultStyle(elementId); const head = document.head; if (head.childNodes.length > 0) { head.insertBefore(style, head.childNodes[0]); } else { head.appendChild(style); } } } /** * The tooltip handler function. */ tooltipHandler(handler, event, item, value) { // console.log(handler, event, item, value); // append a div element that we use as a tooltip unless it already exists this.el = document.getElementById(this.options.id); if (!this.el) { this.el = document.createElement('div'); this.el.setAttribute('id', this.options.id); this.el.classList.add('vg-tooltip'); const tooltipContainer = document.fullscreenElement ?? document.body; tooltipContainer.appendChild(this.el); } // hide tooltip for null, undefined, or empty string values if (value == null || value === '') { this.el.classList.remove('visible', `${this.options.theme}-theme`); return; } // set the tooltip content this.el.innerHTML = this.options.formatTooltip(value, this.options.sanitize, this.options.maxDepth); // make the tooltip visible this.el.classList.add('visible', `${this.options.theme}-theme`); const { x, y } = calculatePosition(event, this.el.getBoundingClientRect(), this.options.offsetX, this.options.offsetY); this.el.style.top = `${y}px`; this.el.style.left = `${x}px`; } } /** * Open editor url in a new window, and pass a message. */ function post (window, url, data) { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const editor = window.open(url); const wait = 10_000; const step = 250; const { origin } = new URL(url); // eslint-disable-next-line no-bitwise let count = ~~(wait / step); function listen(evt) { if (evt.source === editor) { count = 0; window.removeEventListener('message', listen, false); } } window.addEventListener('message', listen, false); // send message // periodically resend until ack received or timeout function send() { if (count <= 0) { return; } editor.postMessage(data, origin); setTimeout(send, step); count -= 1; } setTimeout(send, step); } // generated with build-style.sh var embedStyle = `.vega-embed { position: relative; display: inline-block; box-sizing: border-box; } .vega-embed.has-actions { padding-right: 38px; } .vega-embed details:not([open]) > :not(summary) { display: none !important; } .vega-embed summary { list-style: none; position: absolute; top: 0; right: 0; padding: 6px; z-index: 1000; background: white; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); color: #1b1e23; border: 1px solid #aaa; border-radius: 999px; opacity: 0.2; transition: opacity 0.4s ease-in; cursor: pointer; line-height: 0px; } .vega-embed summary::-webkit-details-marker { display: none; } .vega-embed summary:active { box-shadow: #aaa 0px 0px 0px 1px inset; } .vega-embed summary svg { width: 14px; height: 14px; } .vega-embed details[open] summary { opacity: 0.7; } .vega-embed:hover summary, .vega-embed:focus-within summary { opacity: 1 !important; transition: opacity 0.2s ease; } .vega-embed .vega-actions { position: absolute; z-index: 1001; top: 35px; right: -9px; display: flex; flex-direction: column; padding-bottom: 8px; padding-top: 8px; border-radius: 4px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); border: 1px solid #d9d9d9; background: white; animation-duration: 0.15s; animation-name: scale-in; animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5); text-align: left; } .vega-embed .vega-actions a { padding: 8px 16px; font-family: sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap; color: #434a56; text-decoration: none; } .vega-embed .vega-actions a:hover, .vega-embed .vega-actions a:focus { background-color: #f7f7f9; color: black; } .vega-embed .vega-actions::before, .vega-embed .vega-actions::after { content: ""; display: inline-block; position: absolute; } .vega-embed .vega-actions::before { left: auto; right: 14px; top: -16px; border: 8px solid rgba(0, 0, 0, 0); border-bottom-color: #d9d9d9; } .vega-embed .vega-actions::after { left: auto; right: 15px; top: -14px; border: 7px solid rgba(0, 0, 0, 0); border-bottom-color: #fff; } .vega-embed .chart-wrapper.fit-x { width: 100%; } .vega-embed .chart-wrapper.fit-y { height: 100%; } .vega-embed-wrapper { max-width: 100%; overflow: auto; padding-right: 14px; } @keyframes scale-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } `; function isURL(s) { return s.startsWith('http://') || s.startsWith('https://') || s.startsWith('//'); } function mergeDeep(dest, ...src) { for (const s of src) { deepMerge_(dest, s); } return dest; } function deepMerge_(dest, src) { for (const property of Object.keys(src)) { vegaImport.writeConfig(dest, property, src[property], true); } } var name = "vega-embed"; var version$1 = "6.23.0"; var description = "Publish Vega visualizations as embedded web components."; var keywords = ["vega", "data", "visualization", "component", "embed"]; var repository = { type: "git", url: "http://github.com/vega/vega-embed.git" }; var author = { name: "UW Interactive Data Lab", url: "http://idl.cs.washington.edu" }; var contributors = [{ name: "Dominik Moritz", url: "https://www.domoritz.de" }]; var bugs = { url: "https://github.com/vega/vega-embed/issues" }; var homepage = "https://github.com/vega/vega-embed#readme"; var license = "BSD-3-Clause"; var main = "build/vega-embed.js"; var module = "build/vega-embed.module.js"; var unpkg = "build/vega-embed.min.js"; var jsdelivr = "build/vega-embed.min.js"; var types = "build/vega-embed.module.d.ts"; var files = ["src", "build", "patches"]; var devDependencies = { "@babel/core": "^7.22.9", "@babel/plugin-proposal-async-generator-functions": "^7.20.7", "@babel/plugin-proposal-json-strings": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-optional-catch-binding": "^7.18.6", "@babel/plugin-transform-runtime": "^7.22.9", "@babel/preset-env": "^7.22.9", "@babel/preset-typescript": "^7.22.5", "@release-it/conventional-changelog": "^7.0.0", "@rollup/plugin-commonjs": "25.0.4", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.1.0", "@rollup/plugin-terser": "^0.4.3", "@types/semver": "^7.5.0", "@typescript-eslint/eslint-plugin": "^6.2.0", "@typescript-eslint/parser": "^6.2.0", "browser-sync": "^2.29.3", concurrently: "^8.2.0", "del-cli": "^5.0.0", eslint: "^8.46.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-jest": "^27.2.3", "eslint-plugin-prettier": "^5.0.0", jest: "^29.6.2", "jest-canvas-mock": "^2.5.2", "jest-environment-jsdom": "^29.6.2", "patch-package": "^8.0.0", "postinstall-postinstall": "^2.1.0", prettier: "^3.0.0", "release-it": "^16.1.3", rollup: "3.29.1", "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-ts": "^3.2.0", sass: "^1.64.1", typescript: "^5.1.6", vega: "^5.22.1", "vega-lite": "^5.2.0" }; var peerDependencies = { vega: "^5.21.0", "vega-lite": "*" }; var dependencies = { "fast-json-patch": "^3.1.1", "json-stringify-pretty-compact": "^3.0.0", semver: "^7.5.4", tslib: "^2.6.1", "vega-interpreter": "^1.0.5", "vega-schema-url-parser": "^2.2.0", "vega-themes": "^2.14.0", "vega-tooltip": "^0.33.0" }; var bundledDependencies = ["yallist"]; var scripts = { prebuild: "yarn clean && yarn build:style", build: "rollup -c", "build:style": "./build-style.sh", clean: "del-cli build src/style.ts", prepublishOnly: "yarn clean && yarn build", preversion: "yarn lint && yarn test", serve: "browser-sync start --directory -s -f build *.html", start: "yarn build && concurrently --kill-others -n Server,Rollup 'yarn serve' 'rollup -c -w'", pretest: "yarn build:style", test: "jest", "test:inspect": "node --inspect-brk ./node_modules/.bin/jest --runInBand", prettierbase: "prettier '*.{css,scss,html}'", format: "eslint . --fix && yarn prettierbase --write", lint: "eslint . && yarn prettierbase --check", release: "release-it" }; var pkg = { name: name, version: version$1, description: description, keywords: keywords, repository: repository, author: author, contributors: contributors, bugs: bugs, homepage: homepage, license: license, main: main, module: module, unpkg: unpkg, jsdelivr: jsdelivr, types: types, files: files, devDependencies: devDependencies, peerDependencies: peerDependencies, dependencies: dependencies, bundledDependencies: bundledDependencies, scripts: scripts }; const version = pkg.version; const vega = vegaImport__namespace; let vegaLite = vegaLiteImport__namespace; // For backwards compatibility with Vega-Lite before v4. const w = typeof window !== 'undefined' ? window : undefined; if (vegaLite === undefined && w?.vl?.compile) { vegaLite = w.vl; } const DEFAULT_ACTIONS = { export: { svg: true, png: true }, source: true, compiled: true, editor: true }; const I18N = { CLICK_TO_VIEW_ACTIONS: 'Click to view actions', COMPILED_ACTION: 'View Compiled Vega', EDITOR_ACTION: 'Open in Vega Editor', PNG_ACTION: 'Save as PNG', SOURCE_ACTION: 'View Source', SVG_ACTION: 'Save as SVG' }; const NAMES = { vega: 'Vega', 'vega-lite': 'Vega-Lite' }; const VERSION = { vega: vega.version, 'vega-lite': vegaLite ? vegaLite.version : 'not available' }; const PREPROCESSOR = { vega: vgSpec => vgSpec, 'vega-lite': (vlSpec, config) => vegaLite.compile(vlSpec, { config: config }).spec }; const SVG_CIRCLES = ` `; const CHART_WRAPPER_CLASS = 'chart-wrapper'; function isTooltipHandler(h) { return typeof h === 'function'; } function viewSource(source, sourceHeader, sourceFooter, mode) { const header = `${sourceHeader}

`;
      const footer = `

${sourceFooter}`; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const win = window.open(''); win.document.write(header + source + footer); win.document.title = `${NAMES[mode]} JSON Source`; } /** * Try to guess the type of spec. * * @param spec Vega or Vega-Lite spec. */ function guessMode(spec, providedMode) { // Decide mode if (spec.$schema) { const parsed = e(spec.$schema); if (providedMode && providedMode !== parsed.library) { console.warn(`The given visualization spec is written in ${NAMES[parsed.library]}, but mode argument sets ${NAMES[providedMode] ?? providedMode}.`); } const mode = parsed.library; if (!satisfies$1(VERSION[mode], `^${parsed.version.slice(1)}`)) { console.warn(`The input spec uses ${NAMES[mode]} ${parsed.version}, but the current version of ${NAMES[mode]} is v${VERSION[mode]}.`); } return mode; } // try to guess from the provided spec if ('mark' in spec || 'encoding' in spec || 'layer' in spec || 'hconcat' in spec || 'vconcat' in spec || 'facet' in spec || 'repeat' in spec) { return 'vega-lite'; } if ('marks' in spec || 'signals' in spec || 'scales' in spec || 'axes' in spec) { return 'vega'; } return providedMode ?? 'vega'; } function isLoader(o) { return !!(o && 'load' in o); } function createLoader(opts) { return isLoader(opts) ? opts : vega.loader(opts); } function embedOptionsFromUsermeta(parsedSpec) { const opts = parsedSpec.usermeta?.embedOptions ?? {}; if (vegaImport.isString(opts.defaultStyle)) { // we don't allow styles set via usermeta since it would allow injection of logic (we set the style via innerHTML) opts.defaultStyle = false; } return opts; } /** * Embed a Vega visualization component in a web page. This function returns a promise. * * @param el DOM element in which to place component (DOM node or CSS selector). * @param spec String : A URL string from which to load the Vega specification. * Object : The Vega/Vega-Lite specification as a parsed JSON object. * @param opts A JavaScript object containing options for embedding. */ async function embed(el, spec, opts = {}) { let parsedSpec; let loader; if (vegaImport.isString(spec)) { loader = createLoader(opts.loader); parsedSpec = JSON.parse(await loader.load(spec)); } else { parsedSpec = spec; } const loadedEmbedOptions = embedOptionsFromUsermeta(parsedSpec); const usermetaLoader = loadedEmbedOptions.loader; // either create the loader for the first time or create a new loader if the spec has new loader options if (!loader || usermetaLoader) { loader = createLoader(opts.loader ?? usermetaLoader); } const usermetaOpts = await loadOpts(loadedEmbedOptions, loader); const parsedOpts = await loadOpts(opts, loader); const mergedOpts = { ...mergeDeep(parsedOpts, usermetaOpts), config: vegaImport.mergeConfig(parsedOpts.config ?? {}, usermetaOpts.config ?? {}) }; return await _embed(el, parsedSpec, mergedOpts, loader); } async function loadOpts(opt, loader) { const config = vegaImport.isString(opt.config) ? JSON.parse(await loader.load(opt.config)) : opt.config ?? {}; const patch = vegaImport.isString(opt.patch) ? JSON.parse(await loader.load(opt.patch)) : opt.patch; return { ...opt, ...(patch ? { patch } : {}), ...(config ? { config } : {}) }; } function getRoot(el) { const possibleRoot = el.getRootNode ? el.getRootNode() : document; return possibleRoot instanceof ShadowRoot ? { root: possibleRoot, rootContainer: possibleRoot } : { root: document, rootContainer: document.head ?? document.body }; } async function _embed(el, spec, opts = {}, loader) { const config = opts.theme ? vegaImport.mergeConfig(themes[opts.theme], opts.config ?? {}) : opts.config; const actions = vegaImport.isBoolean(opts.actions) ? opts.actions : mergeDeep({}, DEFAULT_ACTIONS, opts.actions ?? {}); const i18n = { ...I18N, ...opts.i18n }; const renderer = opts.renderer ?? 'canvas'; const logLevel = opts.logLevel ?? vega.Warn; const downloadFileName = opts.downloadFileName ?? 'visualization'; const element = typeof el === 'string' ? document.querySelector(el) : el; if (!element) { throw new Error(`${el} does not exist`); } if (opts.defaultStyle !== false) { const ID = 'vega-embed-style'; const { root, rootContainer } = getRoot(element); if (!root.getElementById(ID)) { const style = document.createElement('style'); style.id = ID; style.innerHTML = opts.defaultStyle === undefined || opts.defaultStyle === true ? (embedStyle ).toString() : opts.defaultStyle; rootContainer.appendChild(style); } } const mode = guessMode(spec, opts.mode); let vgSpec = PREPROCESSOR[mode](spec, config); if (mode === 'vega-lite') { if (vgSpec.$schema) { const parsed = e(vgSpec.$schema); if (!satisfies$1(VERSION.vega, `^${parsed.version.slice(1)}`)) { console.warn(`The compiled spec uses Vega ${parsed.version}, but current version is v${VERSION.vega}.`); } } } element.classList.add('vega-embed'); if (actions) { element.classList.add('has-actions'); } element.innerHTML = ''; // clear container let container = element; if (actions) { const chartWrapper = document.createElement('div'); chartWrapper.classList.add(CHART_WRAPPER_CLASS); element.appendChild(chartWrapper); container = chartWrapper; } const patch = opts.patch; if (patch) { vgSpec = patch instanceof Function ? patch(vgSpec) : applyPatch(vgSpec, patch, true, false).newDocument; } // Set locale. Note that this is a global setting. if (opts.formatLocale) { vega.formatLocale(opts.formatLocale); } if (opts.timeFormatLocale) { vega.timeFormatLocale(opts.timeFormatLocale); } // Set custom expression functions if (opts.expressionFunctions) { for (const name in opts.expressionFunctions) { const expressionFunction = opts.expressionFunctions[name]; if ('fn' in expressionFunction) { vega.expressionFunction(name, expressionFunction.fn, expressionFunction['visitor']); } else if (expressionFunction instanceof Function) { vega.expressionFunction(name, expressionFunction); } } } const { ast } = opts; // Do not apply the config to Vega when we have already applied it to Vega-Lite. // This call may throw an Error if parsing fails. const runtime = vega.parse(vgSpec, mode === 'vega-lite' ? {} : config, { ast }); const view = new (opts.viewClass || vega.View)(runtime, { loader, logLevel, renderer, ...(ast ? { expr: vega.expressionInterpreter ?? opts.expr ?? expression } : {}) }); view.addSignalListener('autosize', (_, autosize) => { const { type } = autosize; if (type == 'fit-x') { container.classList.add('fit-x'); container.classList.remove('fit-y'); } else if (type == 'fit-y') { container.classList.remove('fit-x'); container.classList.add('fit-y'); } else if (type == 'fit') { container.classList.add('fit-x', 'fit-y'); } else { container.classList.remove('fit-x', 'fit-y'); } }); if (opts.tooltip !== false) { const handler = isTooltipHandler(opts.tooltip) ? opts.tooltip : // user provided boolean true or tooltip options new Handler(opts.tooltip === true ? {} : opts.tooltip).call; view.tooltip(handler); } let { hover } = opts; if (hover === undefined) { hover = mode === 'vega'; } if (hover) { const { hoverSet, updateSet } = typeof hover === 'boolean' ? {} : hover; view.hover(hoverSet, updateSet); } if (opts) { if (opts.width != null) { view.width(opts.width); } if (opts.height != null) { view.height(opts.height); } if (opts.padding != null) { view.padding(opts.padding); } } await view.initialize(container, opts.bind).runAsync(); let documentClickHandler; if (actions !== false) { let wrapper = element; if (opts.defaultStyle !== false || opts.forceActionsMenu) { const details = document.createElement('details'); details.title = i18n.CLICK_TO_VIEW_ACTIONS; element.append(details); wrapper = details; const summary = document.createElement('summary'); summary.innerHTML = SVG_CIRCLES; details.append(summary); documentClickHandler = ev => { if (!details.contains(ev.target)) { details.removeAttribute('open'); } }; document.addEventListener('click', documentClickHandler); } const ctrl = document.createElement('div'); wrapper.append(ctrl); ctrl.classList.add('vega-actions'); // add 'Export' action if (actions === true || actions.export !== false) { for (const ext of ['svg', 'png']) { if (actions === true || actions.export === true || actions.export[ext]) { const i18nExportAction = i18n[`${ext.toUpperCase()}_ACTION`]; const exportLink = document.createElement('a'); const scaleFactor = vegaImport.isObject(opts.scaleFactor) ? opts.scaleFactor[ext] : opts.scaleFactor; exportLink.text = i18nExportAction; exportLink.href = '#'; exportLink.target = '_blank'; exportLink.download = `${downloadFileName}.${ext}`; // add link on mousedown so that it's correct when the click happens exportLink.addEventListener('mousedown', async function (e) { e.preventDefault(); const url = await view.toImageURL(ext, scaleFactor); this.href = url; }); ctrl.append(exportLink); } } } // add 'View Source' action if (actions === true || actions.source !== false) { const viewSourceLink = document.createElement('a'); viewSourceLink.text = i18n.SOURCE_ACTION; viewSourceLink.href = '#'; viewSourceLink.addEventListener('click', function (e) { viewSource(stringify$1(spec), opts.sourceHeader ?? '', opts.sourceFooter ?? '', mode); e.preventDefault(); }); ctrl.append(viewSourceLink); } // add 'View Compiled' action if (mode === 'vega-lite' && (actions === true || actions.compiled !== false)) { const compileLink = document.createElement('a'); compileLink.text = i18n.COMPILED_ACTION; compileLink.href = '#'; compileLink.addEventListener('click', function (e) { viewSource(stringify$1(vgSpec), opts.sourceHeader ?? '', opts.sourceFooter ?? '', 'vega'); e.preventDefault(); }); ctrl.append(compileLink); } // add 'Open in Vega Editor' action if (actions === true || actions.editor !== false) { const editorUrl = opts.editorUrl ?? 'https://vega.github.io/editor/'; const editorLink = document.createElement('a'); editorLink.text = i18n.EDITOR_ACTION; editorLink.href = '#'; editorLink.addEventListener('click', function (e) { post(window, editorUrl, { config: config, mode, renderer, spec: stringify$1(spec) }); e.preventDefault(); }); ctrl.append(editorLink); } } function finalize() { if (documentClickHandler) { document.removeEventListener('click', documentClickHandler); } view.finalize(); } return { view, spec, vgSpec, finalize, embedOptions: opts }; } /** * Create a promise to an HTML Div element with an embedded Vega-Lite or Vega visualization. * The element has a value property with the view. By default all actions except for the editor action are disabled. * * The main use case is in [Observable](https://observablehq.com/). */ async function container (spec, opt = {}) { const wrapper = document.createElement('div'); wrapper.classList.add('vega-embed-wrapper'); const div = document.createElement('div'); wrapper.appendChild(div); const actions = opt.actions === true || opt.actions === false ? opt.actions : { export: true, source: false, compiled: true, editor: true, ...(opt.actions ?? {}) }; const result = await embed(div, spec, { actions, ...(opt ?? {}) }); wrapper.value = result.view; return wrapper; } /** * Returns true if the object is an HTML element. */ function isElement(obj) { return obj instanceof HTMLElement; } const wrapper = (...args) => { if (args.length > 1 && (vegaImport.isString(args[0]) && !isURL(args[0]) || isElement(args[0]) || args.length === 3)) { return embed(args[0], args[1], args[2]); } return container(args[0], args[1]); }; wrapper.vegaLite = vegaLite; wrapper.vl = vegaLite; // backwards compatibility wrapper.container = container; wrapper.embed = embed; wrapper.vega = vega; wrapper.default = embed; wrapper.version = version; return wrapper; })); //# sourceMappingURL=vega-embed.js.map