{"_id":"@eidetiq/vega-embed","_rev":"1-1c56a813af4ac6ff8984a6e9f48b48fd","name":"@eidetiq/vega-embed","dist-tags":{"latest":"6.0.0"},"versions":{"6.0.0":{"name":"@eidetiq/vega-embed","version":"6.0.0","description":"Publish Vega visualizations as embedded web components.","keywords":["vega","data","visualization","component","embed"],"repository":{"type":"git","url":"http://github.com/p7k/vega-embed.git"},"author":{"name":"UW Interactive Data Lab","url":"http://idl.cs.washington.edu"},"contributors":[{"name":"Dominik Moritz","url":"https://www.domoritz.de"}],"license":"BSD-3-Clause","main":"build/vega-embed.js","module":"build/src/embed.js","unpkg":"build/vega-embed.min.js","jsdelivr":"build/vega-embed.min.js","types":"build/src/embed.d.ts","devDependencies":{"@types/jest":"^24.0.18","@types/json-stable-stringify":"^1.0.32","@types/semver":"^6.0.2","browser-sync":"^2.26.7","concurrently":"^5.0.0","jest":"^24.9.0","jest-canvas-mock":"^2.1.1","node-sass":"^4.12.0","rollup":"^1.23.1","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-json":"^4.0.0","rollup-plugin-node-resolve":"^5.2.0","terser":"^4.3.8","ts-jest":"^24.1.0","typescript":"~3.6.3","vega":"~5.7.1","vega-lite":"^4.0.0-beta.9","vega-lite-dev-config":"^0.3.0"},"peerDependencies":{"vega":"^5.7.1","vega-lite":"*"},"dependencies":{"fast-json-patch":"^3.0.0-1","json-stringify-pretty-compact":"^2.0.0","semver":"^6.3.0","vega-schema-url-parser":"^1.1.0","vega-themes":"^2.5.0","vega-tooltip":"^0.19.1"},"scripts":{"tsc:src":"tsc -p tsconfig.src.json","prebuild":"yarn build:style && yarn tsc:src","build":"rollup -c","build:style":"./build-style.sh","clean":"rm -rf build && rm -f src/style.ts && mkdir build","postbuild":"terser build/vega-embed.js -cm > build/vega-embed.min.js","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,Typescript,Rollup 'yarn serve' 'yarn tsc:src -w' 'rollup -c -w'","pretest":"yarn build:style","test":"jest","test:inspect":"node --inspect-brk ./node_modules/.bin/jest --runInBand","prepare":"beemo create-config","prettierbase":"beemo prettier '*.{css,html}'","eslintbase":"beemo eslint '{src,test}/**/*.ts'","format":"yarn eslintbase --fix && yarn prettierbase --write","lint":"yarn eslintbase && yarn prettierbase --check"},"beemo":{"module":"vega-lite-dev-config","drivers":["prettier","eslint"],"prettier":{"ignore":["src/style.ts","README.md"]}},"jest":{"testURL":"http://localhost/","setupFiles":["jest-canvas-mock"],"transform":{"^.+\\.tsx?$":"ts-jest"},"testRegex":"(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$","moduleFileExtensions":["ts","tsx","js","jsx","json","node"],"testPathIgnorePatterns":["node_modules","/build","src"]},"licenseText":"Copyright (c) 2015, University of Washington Interactive Data Lab\nAll rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are met:\n\n1. Redistributions of source code must retain the above copyright notice, this\n list of conditions and the following disclaimer.\n\n2. Redistributions in binary form must reproduce the above copyright notice,\n this list of conditions and the following disclaimer in the documentation\n and/or other materials provided with the distribution.\n\n3. Neither the name of the copyright holder nor the names of its contributors\n may be used to endorse or promote products derived from this software\n without specific prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \"AS IS\"\nAND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE\nIMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\nDISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE\nFOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL\nDAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR\nSERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER\nCAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,\nOR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n","_id":"@eidetiq/vega-embed@6.0.0","dist":{"shasum":"d3dacc7ca910dc2ce31824a47d6f95f5e207aaf7","integrity":"sha512-ub10ijXys5g0YG6rjRQsGwB4wViSjpc76x5+WuL78h/RtyxYGoGjYRgJD2+9uO9XwbquHNlAi2V7kYi/3tvEEg==","tarball":"https://registry.npmjs.org/@eidetiq/vega-embed/-/vega-embed-6.0.0.tgz","fileCount":42,"unpackedSize":563094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds4AWCRA9TVsSAnZWagAAezUP/RbJ53GO9o4WlX84W4AX\nhatjR3e8ilfOt/RF8wqKnWjLsXpMYUEc5dtbadmHDXOqnmC8CrIAsYTGmohr\nFckfgBITrUyQbmlp7JHt8qzAtbY/qlSt7hwtlQSA9TLuL0xZi2VV4U5hLh83\n8sbBgS0X91JXNhDQVBf73GywgUwxAVq3gH8MVJEqRIS6yOZAWP2+tZkaqBKz\nWDlO3LWmIIf0+ya2Akp9gVA8Ee9CjhSGNUzlso7Db64mNBl2VoPUMduy+9QK\nD2Ar7lWJSb9wzKKHMda0B6Y8BnRAbRlvX+XyQLT+9mn3W2pN70wuiX7pG9CY\n/RVv24xuH5XLdfbFjtXlsYioO8F0j//tuxGKDmZah+IqXz1dymQxMrQIZ841\nN20DMrswYkfH+lVfvPEqU6Aw1VALS0BxWQxy61tm73TNgJX2PH8Ph9zPXTfN\nwebsfiEDWB0tJxYbZs1ym0dj3J8PovzydPB1jX2+s7o4HwVV5F9iuyKvml5k\n5zHFErrV2q0Efb/BNtnghfgYqh7EeNaGdNVSV+nHP8F9U1aKjMFh442e1F69\nPka3R/0EN8IidgmOclDqzfbpqPh8/JA3PqaJ2eiorUEL4GIGmGzchYR7oZn7\nItoPbusvIKySOHVocROKZ3B6heTbQj5BE5w4Y1Jzvubtrk4Gr4Y+bpla68xc\nfNgG\r\n=hdG9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5A3DNYXS6yMjS0LFPUKyydFs/+x7+ReOP9OjROTS44AiBXOJ4gN4Zg/kkUiLhLXuvNlQeCH2yYO5iw22FP4WZjsg=="}]},"maintainers":[{"name":"p7k","email":"pavel.katsev@gmail.com"}],"_npmUser":{"name":"p7k","email":"pavel.katsev@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vega-embed_6.0.0_1572044821843_0.40111603399051554"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-25T23:07:01.608Z","6.0.0":"2019-10-25T23:07:02.021Z","modified":"2022-04-05T06:58:50.103Z"},"maintainers":[{"name":"p7k","email":"pavel.katsev@gmail.com"}],"description":"Publish Vega visualizations as embedded web components.","keywords":["vega","data","visualization","component","embed"],"repository":{"type":"git","url":"http://github.com/p7k/vega-embed.git"},"contributors":[{"name":"Dominik Moritz","url":"https://www.domoritz.de"}],"author":{"name":"UW Interactive Data Lab","url":"http://idl.cs.washington.edu"},"license":"BSD-3-Clause","readme":"# Vega-Embed\n\n[![npm version](https://img.shields.io/npm/v/vega-embed.svg)](https://www.npmjs.com/package/vega-embed)\n[![](https://data.jsdelivr.com/v1/package/npm/vega-embed/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vega-embed)\n[![Build Status](https://travis-ci.org/vega/vega-embed.svg?branch=master)](https://travis-ci.org/vega/vega-embed)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=rounded)](https://github.com/prettier/prettier)\n\n[Vega-Embed](http://github.com/vega/vega-embed) makes it easy to embed interactive [Vega](https://vega.github.io/vega) and [Vega-Lite](https://vega.github.io/vega-lite) views into web pages. With Vega Embed, you can:\n\n- Load Vega/Vega-Lite specs from source text, parsed JSON, or URLs.\n- Patch Vega specs (even ones generated from Vega-Lite) to add additional functionality; for example, see [Rotating Earth](https://observablehq.com/@domoritz/rotating-earth).\n- Add action links such as \"View Source\" and \"Open in Vega Editor\".\n- Includes [Vega Tooltip](https://github.com/vega/vega-tooltip).\n- Includes [Vega Themes](https://github.com/vega/vega-themes). **Experimental: themes are not stable yet**\n\n**Vega-Lite works well with [Observable](https://beta.observablehq.com/). Learn how to use it in [our example notebook](https://beta.observablehq.com/@domoritz/hello-vega-embed).**\n\n\n\n## Basic Example\n\nYou can import Vega-Embed from a local copy or (as shown below) [from jsDelivr](https://www.jsdelivr.com/package/npm/vega-embed). Please replace `[VERSION]` with the correct [Vega](https://www.jsdelivr.com/package/npm/vega), [Vega-Lite](https://www.jsdelivr.com/package/npm/vega-lite), and [Vega-Embed](https://www.jsdelivr.com/package/npm/vega-embed) versions. We recommend that you specify the major versions (`vega@5`, `vega-lite@3`, `vega-embed@4`).\n\n```html\n\n\n\n \n \n \n \n \n\n\n\n
\n\n\n\n\n```\n\nLook at an example online at [Vega-Embed Block](https://bl.ocks.org/domoritz/455e1c7872c4b38a58b90df0c3d7b1b9).\n\n## Use Vega-Embed in Observable\n\nYou can require embed with `embed = require('vega-embed@4')` and then embed a chart with `viewof view = embed(...)`. Check the [our example notebook](https://beta.observablehq.com/@domoritz/hello-vega-embed) for more details.\n\n## API Reference\n\nWhen using a `script` tag, the default export of Vega-Embed is a wrapper function that automatically chooses between [`embed`](#embed) and [`container`](#container) based on the provided arguments. Vega-Embed provides this convenience for imports in interactive environments like [Observable](https://www.observablehq.com/). When using the Vega-Embed npm package, the default export is the [`embed`](#embed) function.\n\n#\nembed(el, spec[, opt])\n[<>](https://github.com/vega/vega-embed/blob/master/src/embed.ts \"Source\")\n\nReturns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves to the instantiated [Vega `View` instance](https://github.com/vega/vega-view#vega-view) and a copy of the parsed JSON Vega spec. The `embed` function accepts the following arguments:\n\n| Property| Type | Description |\n| :------ | :--------- | :------------- |\n| `el` | String | A DOM element or CSS selector indicating the element on the page in which to add the embedded view. |\n| `spec` | String / Object | _String_ : A URL string from which to load the Vega specification. This URL will be subject to standard browser security restrictions. Typically this URL will point to a file on the same host and port number as the web page itself.
_Object_ : The Vega/Vega-Lite specification as a parsed JSON object. |\n| `opt` | Object | _(Optional)_ A JavaScript object containing options for embedding. |\n\n_Note: Internet Explorer does not support [the ES6 Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) feature. To make it work correctly, please follow [the instructions on the Vega website](https://vega.github.io/vega/usage/#ie)._\n\n#\ncontainer(spec[, opt])\n[<>](https://github.com/vega/vega-embed/blob/master/src/container.ts \"Source\")\n\nReturns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)* that resolves to an HTML element with the [Vega `View` instance](https://github.com/vega/vega-view#vega-view) as the `value` property. The function is designed to work with [Observable](https://observablehq.com/). The `container` function accepts the following arguments:\n\n| Property| Type | Description |\n| :------ | :--------- | :------------- |\n| `spec` | String / Object | _String_ : A URL string from which to load the Vega specification. This URL will be subject to standard browser security restrictions. Typically this URL will point to a file on the same host and port number as the web page itself.
_Object_ : The Vega/Vega-Lite specification as a parsed JSON object. |\n| `opt` | Object | _(Optional)_ A JavaScript object containing options for embedding. |\n\n### Options\n\nYou can configure Vega Embed with an options object. You can pass options as an argument to the [embed function](#api-reference) or as `usermeta.embedOptions` as part of the Vega or Vega-Lite specification.\n\n```js\nvar opt = {\n mode: ...,\n\n theme: ...,\n defaultStyle: ...,\n\n // view config options\n renderer: ...,\n loader: ...,\n logLevel: ...,\n\n tooltip: ...,\n\n patch: ...,\n\n width: ...,\n height: ...,\n padding: ...,\n\n actions: {\n export: ...,\n source: ...,\n compiled: ...,\n editor: ...\n },\n\n scaleFactor: ...,\n\n config: ...,\n\n editorUrl: ...,\n\n sourceHeader: ...,\n sourceFooter: ...,\n\n hover: {\n hoverSet: ...,\n updateSet: ...,\n },\n\n downloadFileName: ...,\n\n i18n: {\n COMPILED_ACTION: ...,\n EDITOR_ACTION: ...,\n PNG_ACTION: ...,\n SOURCE_ACTION: ...,\n SVG_ACTION: ...\n }\n}\n```\n\n| Property | Type | Description |\n| :------- | :--------------- | :------------- |\n| `mode` | String | If specified, tells Vega-Embed to parse the spec as `vega` or `vega-lite`. Vega-Embed will parse the [`$schema` url](https://github.com/vega/schema) if the mode is not specified. Vega-Embed will default to `vega` if neither `mode`, nor `$schema` are specified. |\n| `theme` | String | If specified, tells Vega-Embed use the theme from [Vega Themes](https://github.com/vega/vega-themes). **Experimental: we may update themes with minor version updates of Vega-Embed.** |\n| `defaultStyle` | Boolean or String | If set to `true` (default), the embed actions are shown in a menu. Set to `false` to use simple links. Provide a string to set the style sheet. |\n| `renderer` | String | The renderer to use for the view. One of `\"canvas\"` (default) or `\"svg\"`. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_renderer) for details. |\n| `logLevel` | Level | Sets the current log level. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_logLevel) for details. |\n| `tooltip` | Handler or Boolean or Object | Provide a [tooltip handler](https://vega.github.io/vega/docs/api/view/#view_tooltip), customize the default [Vega Tooltip](https://github.com/vega/vega-tooltip) handler, or disable the default handler. |\n| `loader` | Loader / Object | _Loader_ : Sets a custom Vega loader. _Object_ : Vega loader options for a loader that will be created.
See [Vega docs](https://vega.github.io/vega/docs/api/view/#view) for details. |\n| `patch` | Function / Object[] / String | A function to modify the Vega specification before it is parsed. Alternatively, a [JSON-Patch RFC6902](https://tools.ietf.org/html/rfc6902) to modify the Vega specification. If you use Vega-Lite, the compiled Vega will be patched. Alternatively to the function or the object, a URL string from which to load the patch can be provided. This URL will be subject to standard browser security restrictions. Typically this URL will point to a file on the same host and port number as the web page itself. |\n| `width` | Number | Sets the view width in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_width) for details. Note that Vega-Lite overrides this option. |\n| `height` | Number | Sets the view height in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_height) for details. Note that Vega-Lite overrides this option. |\n| `padding` | Object | Sets the view padding in pixels. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_padding) for details. |\n| `actions` | Boolean / Object | Determines if action links (\"Export as PNG/SVG\", \"View Source\", \"View Vega\" (only for Vega-Lite), \"Open in Vega Editor\") are included with the embedded view. If the value is `true`, all action links will be shown and none if the value is `false`. This property can take a key-value mapping object that maps keys (`export`, `source`, `compiled`, `editor`) to boolean values for determining if each action link should be shown. By default, `export`, `source`, and `editor` are true and `compiled` is false. These defaults can be overridden: for example, if `actions` is `{export: false, source: true}`, the embedded visualization will have two links – \"View Source\" and \"Open in Vega Editor\". The `export` property can take a key-value mapping object that maps keys (svg, png) to boolean values for determining if each export action link should be shown. By default, `svg` and `png` are true. |\n| `scaleFactor` | Number | The number by which to multiply the width and height (default `1`) of an exported PNG or SVG image. |\n| `config` | String / Object | _String_ : A URL string from which to load a [Vega](https://vega.github.io/vega/docs/config/)/[Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) or [Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) configuration file. This URL will be subject to standard browser security restrictions. Typically this URL will point to a file on the same host and port number as the web page itself.
_Object_ : A Vega/Vega-Lite configuration as a parsed JSON object to override the default configuration options. |\n| `editorUrl` | String | The URL at which to open embedded Vega specs in a Vega editor. Defaults to `\"http://vega.github.io/editor/\"`. Internally, Vega-Embed uses [HTML5 postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to pass the specification information to the editor. |\n| `sourceHeader` | String | HTML to inject into the `head` tag of the page generated by the \"View Source\" and \"View Vega\" action link. For example, this can be used to add code for [syntax highlighting](https://highlightjs.org/). |\n| `sourceFooter` | String | HTML to inject into the end of the page generated by the \"View Source\" and \"View Vega\" action link. The text will be added immediately before the closing `body` tag. |\n| `hover` | Boolean or Object | Enable [hover event processing](https://vega.github.io/vega/docs/api/view/#view_hover). Hover event processing is enabled on Vega by default.
_Boolean_: Enables/disables hover event processing.
_Object_: Optional keys (`hoverSet`, `updateSet`) to specify which named encoding sets to invoke upon mouseover and mouseout. |\n| `i18n` | Object | This property maps keys (`COMPILED_ACTION`, `EDITOR_ACTION`, `PNG_ACTION`, `SOURCE_ACTION`, `SVG_ACTION`) to string values for the action's text. By default, the text is in English. |\n| `downloadFileName` | String | Sets the file name (default: `visualization`) for charts downloaded using the `png` or `svg` action. |\n\n## Common questions\n\n### How do I send cookies when loading data?\n\nBy default, the Vega loader does not send the credentials of the current page with requests. You can override this behavior by passing `{loader: { http: { credentials: 'same-origin' }}}` as the embed option.\n\n## Build Process\n\nTo build `vega-embed.js` and view the test examples, you must have [yarn](https://yarnpkg.com/en/) installed.\n\n1. Run `yarn` in the Vega-Embed folder to install dependencies.\n2. Run `yarn build`. This will create `vega-embed.js` and the minified `vega-embed.min.js`.\n3. Run a local webserver with `yarn start` then point your web browser at the test page (e.g., `http://localhost:8000/test-vg.html`(Vega) or `http://localhost:8000/test-vl.html`(Vega-Lite)).\n\n## Release Process\n\nTo release a new version, make sure that everything works. Then run `yarn version` and bump the version number. Lastly, push to GitHub (with the release tag). [Travis](https://travis-ci.org/vega/vega-embed/builds) will build a bundle and make the [npm release](https://www.npmjs.com/package/vega-embed) automatically.\n","readmeFilename":"README.md"}