vega-view - npm Package Compare versions

Comparing version 5.5.0 to 5.6.0

build/vega-view.js

@@ -11,3 +11,4 @@ (function (global, factory) {
     if (el) {
-      el.setAttribute('role', 'figure');
+      el.setAttribute('role', 'graphics-document');
+      el.setAttribute('aria-roleDescription', 'visualization');
       ariaLabel(el, view.description());
@@ -416,6 +417,5 @@ }
 
-  var BindClass = 'vega-bind',
-      NameClass = 'vega-bind-name',
-      RadioClass = 'vega-bind-radio',
-      OptionClass = 'vega-option-';
+  const BindClass = 'vega-bind',
+        NameClass = 'vega-bind-name',
+        RadioClass = 'vega-bind-radio';
 
@@ -438,4 +438,4 @@ /**
 
-    var param = binding.param,
-        bind = binding.state;
+    const param = binding.param;
+    let bind = binding.state;
 
@@ -447,3 +447,3 @@ if (!bind) {
         set: null,
-        update: function(value) {
+        update: value => {
           if (value !== view.signal(param.signal)) {
@@ -465,3 +465,3 @@ view.runAsync(null, function() {
     if (!bind.active) {
-      view.on(view._signals[param.signal], null, function() {
+      view.on(view._signals[param.signal], null, () => {
         bind.source
@@ -481,5 +481,9 @@ ? (bind.source = false)
   function generate(bind, el, param, value) {
-    var div = element('div', {'class': BindClass});
+    const div = element('div', {'class': BindClass});
 
-    div.appendChild(element('span',
+    const wrapper = param.input === 'radio'
+      ? div
+      : div.appendChild(element('label'));
+
+    wrapper.appendChild(element('span',
       {'class': NameClass},
@@ -491,3 +495,3 @@ (param.name || param.signal)
 
-    var input = form;
+    let input = form;
     switch (param.input) {
@@ -500,3 +504,3 @@ case 'checkbox': input = checkbox; break;
 
-    input(bind, div, param, value);
+    input(bind, wrapper, param, value);
   }
@@ -509,5 +513,5 @@
   function form(bind, el, param, value) {
-    var node = element('input');
+    const node = element('input');
 
-    for (var key in param) {
+    for (const key in param) {
       if (key !== 'signal' && key !== 'element') {
@@ -521,9 +525,6 @@ node.setAttribute(key === 'input' ? 'type' : key, param[key]);
     el.appendChild(node);
+    node.addEventListener('input', () => bind.update(node.value));
 
-    node.addEventListener('input', function() {
-      bind.update(node.value);
-    });
-
     bind.elements = [node];
-    bind.set = function(value) { node.value = value; };
+    bind.set = value => node.value = value;
   }
@@ -535,14 +536,11 @@
   function checkbox(bind, el, param, value) {
-    var attr = {type: 'checkbox', name: param.signal};
+    const attr = {type: 'checkbox', name: param.signal};
     if (value) attr.checked = true;
-    var node = element('input', attr);
+    const node = element('input', attr);
 
     el.appendChild(node);
+    node.addEventListener('change', () => bind.update(node.checked));
 
-    node.addEventListener('change', function() {
-      bind.update(node.checked);
-    });
-
     bind.elements = [node];
-    bind.set = function(value) { node.checked = !!value || null; };
+    bind.set = value => node.checked = !!value || null;
   }
@@ -554,9 +552,9 @@
   function select(bind, el, param, value) {
-    var node = element('select', {name: param.signal}),
-        label = param.labels || [];
+    const node = element('select', {name: param.signal}),
+          labels = param.labels || [];
 
-    param.options.forEach(function(option, i) {
-      var attr = {value: option};
+    param.options.forEach((option, i) => {
+      const attr = {value: option};
       if (valuesEqual(option, value)) attr.selected = true;
-      node.appendChild(element('option', attr, (label[i] || option)+''));
+      node.appendChild(element('option', attr, (labels[i] || option)+''));
     });
@@ -566,3 +564,3 @@
 
-    node.addEventListener('change', function() {
+    node.addEventListener('change', () => {
       bind.update(param.options[node.selectedIndex]);
@@ -572,4 +570,4 @@ });
     bind.elements = [node];
-    bind.set = function(value) {
-      for (var i=0, n=param.options.length; i<n; ++i) {
+    bind.set = value => {
+      for (let i = 0, n = param.options.length; i < n; ++i) {
         if (valuesEqual(param.options[i], value)) {
@@ -586,12 +584,9 @@ node.selectedIndex = i; return;
   function radio(bind, el, param, value) {
-    var group = element('span', {'class': RadioClass}),
-        label = param.labels || [];
+    const group = element('span', {'class': RadioClass}),
+          labels = param.labels || [];
 
     el.appendChild(group);
 
-    bind.elements = param.options.map(function(option, i) {
-      var id = OptionClass + param.signal + '-' + option;
-
-      var attr = {
-        id:    id,
+    bind.elements = param.options.map((option, i) => {
+      const attr = {
         type:  'radio',
@@ -603,19 +598,16 @@ name:  param.signal,
 
-      var input = element('input', attr);
+      const input = element('input', attr);
+      input.addEventListener('change', () => bind.update(option));
 
-      input.addEventListener('change', function() {
-        bind.update(option);
-      });
+      const label = element('label', {}, (labels[i] || option)+'');
+      label.prepend(input);
+      group.appendChild(label);
 
-      group.appendChild(input);
-      group.appendChild(element('label', {'for': id}, (label[i] || option)+''));
-
       return input;
     });
 
-    bind.set = function(value) {
-      var nodes = bind.elements,
-          i = 0,
-          n = nodes.length;
-      for (; i<n; ++i) {
+    bind.set = value => {
+      const nodes = bind.elements,
+            n = nodes.length;
+      for (let i = 0; i < n; ++i) {
         if (valuesEqual(nodes[i].value, value)) nodes[i].checked = true;
@@ -632,7 +624,7 @@ }
 
-    var max = param.max != null ? param.max : Math.max(100, +value) || 100,
-        min = param.min || Math.min(0, max, +value) || 0,
-        step = param.step || d3Array.tickStep(min, max, 100);
+    const max = param.max != null ? param.max : Math.max(100, +value) || 100,
+          min = param.min || Math.min(0, max, +value) || 0,
+          step = param.step || d3Array.tickStep(min, max, 100);
 
-    var node = element('input', {
+    const node = element('input', {
       type:  'range',
@@ -646,11 +638,11 @@ name:  param.signal,
 
-    var label = element('label', {}, +value);
+    const span = element('span', {}, +value);
 
     el.appendChild(node);
-    el.appendChild(label);
+    el.appendChild(span);
 
-    function update() {
-      label.textContent = node.value;
+    const update = () => {
+      span.textContent = node.value;
       bind.update(+node.value);
-    }
+    };
 
@@ -662,5 +654,5 @@ // subscribe to both input and change
     bind.elements = [node];
-    bind.set = function(value) {
+    bind.set = value => {
       node.value = value;
-      label.textContent = value;
+      span.textContent = value;
     };
@@ -732,3 +724,3 @@ }
       elBind = elBind ? (view._elBind = lookup(view, elBind))
-        : el.appendChild(element('div', {'class': 'vega-bindings'}));
+        : el.appendChild(element('form', {'class': 'vega-bindings'}));
 
@@ -735,0 +727,0 @@ view._bind.forEach(function(_) {

build/vega-view.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vega-util"),require("vega-dataflow"),require("vega-scenegraph"),require("d3-array"),require("vega-functions"),require("vega-runtime"),require("d3-timer")):"function"==typeof define&&define.amd?define(["exports","vega-util","vega-dataflow","vega-scenegraph","d3-array","vega-functions","vega-runtime","d3-timer"],t):t((e=e||self).vega={},e.vega,e.vega,e.vega,e.d3,e.vega,e.vega,e.d3)}(this,(function(e,t,n,i,r,a,s,o){"use strict";function u(e,t){e&&(null==t?e.removeAttribute("aria-label"):e.setAttribute("aria-label",t))}function l(e){var n=e._signals.cursor;n||(e._signals.cursor=n=e.add({user:"default",item:null})),e.on(e.events("view","mousemove"),n,(function(e,i){var r=n.value,a=r?t.isString(r)?r:r.user:"default",s=i.item&&i.item.cursor||null;return r&&a===r.user&&s==r.item?r:{user:a,item:s}})),e.add(null,(function(e){var n=e.cursor,i=this.value;return t.isString(n)||(i=n.item,n=n.user),function(e){"undefined"!=typeof document&&document.body&&(document.body.style.cursor=e)}(n&&"default"!==n?n:i||n),i}),{cursor:n})}function c(e,n){var i=e._runtime.data;return t.hasOwnProperty(i,n)||t.error("Unrecognized data set: "+n),i[n]}function d(e,i){n.isChangeSet(i)||t.error("Second argument to changes must be a changeset.");var r=c(this,e);return r.modified=!0,this.pulse(r.input,i)}function h(e){var t=e.padding();return Math.max(0,e._viewWidth+t.left+t.right)}function f(e){var t=e.padding();return Math.max(0,e._viewHeight+t.top+t.bottom)}function g(e){var t=e.padding(),n=e._origin;return[t.left+n[0],t.top+n[1]]}function v(e,n,r){var a,s,o,u=e._renderer,l=u&&u.canvas();return l&&(o=g(e),s=n.changedTouches?n.changedTouches[0]:n,(a=i.point(s,l))[0]-=o[0],a[1]-=o[1]),n.dataflow=e,n.item=r,n.vega=function(e,n,i){var r=n?"group"===n.mark.marktype?n:n.mark.group:null;function a(e){var t,i=r;if(e)for(t=n;t;t=t.mark.group)if(t.mark.name===e){i=t;break}return i&&i.mark&&i.mark.interactive?i:{}}function s(e){if(!e)return i;t.isString(e)&&(e=a(e));for(var n=i.slice();e;)n[0]-=e.x||0,n[1]-=e.y||0,e=e.mark&&e.mark.group;return n}return{view:t.constant(e),item:t.constant(n||{}),group:a,xy:s,x:function(e){return s(e)[0]},y:function(e){return s(e)[1]}}}(e,r,a),n}const p={trap:!1};function _(e,n,i){const r=e._eventConfig&&e._eventConfig[n];return!(!1===r||t.isObject(r)&&!r[i])||(e.warn(`Blocked ${n} ${i} event listener.`),!1)}function m(e){return e.item}function w(e){return e.item.mark.source}function y(e){return function(t,n){return n.vega.view().changeset().encode(n.item,e)}}function b(e,t,n){var i=document.createElement(e);for(var r in t)i.setAttribute(r,t[r]);return null!=n&&(i.textContent=n),i}function z(e,n,i){if(n){var r=i.param,a=i.state;return a||(a=i.state={elements:null,active:!1,set:null,update:function(t){t!==e.signal(r.signal)&&e.runAsync(null,(function(){a.source=!0,e.signal(r.signal,t)}))}},r.debounce&&(a.update=t.debounce(r.debounce,a.update))),function(e,t,n,i){var r=b("div",{class:"vega-bind"});r.appendChild(b("span",{class:"vega-bind-name"},n.name||n.signal)),t.appendChild(r);var a=k;switch(n.input){case"checkbox":a=L;break;case"select":a=C;break;case"radio":a=x;break;case"range":a=S}a(e,r,n,i)}(a,n,r,e.signal(r.signal)),a.active||(e.on(e._signals[r.signal],null,(function(){a.source?a.source=!1:a.set(e.signal(r.signal))})),a.active=!0),a}}function k(e,t,n,i){var r=b("input");for(var a in n)"signal"!==a&&"element"!==a&&r.setAttribute("input"===a?"type":a,n[a]);r.setAttribute("name",n.signal),r.value=i,t.appendChild(r),r.addEventListener("input",(function(){e.update(r.value)})),e.elements=[r],e.set=function(e){r.value=e}}function L(e,t,n,i){var r={type:"checkbox",name:n.signal};i&&(r.checked=!0);var a=b("input",r);t.appendChild(a),a.addEventListener("change",(function(){e.update(a.checked)})),e.elements=[a],e.set=function(e){a.checked=!!e||null}}function C(e,t,n,i){var r=b("select",{name:n.signal}),a=n.labels||[];n.options.forEach((function(e,t){var n={value:e};A(e,i)&&(n.selected=!0),r.appendChild(b("option",n,(a[t]||e)+""))})),t.appendChild(r),r.addEventListener("change",(function(){e.update(n.options[r.selectedIndex])})),e.elements=[r],e.set=function(e){for(var t=0,i=n.options.length;t<i;++t)if(A(n.options[t],e))return void(r.selectedIndex=t)}}function x(e,t,n,i){var r=b("span",{class:"vega-bind-radio"}),a=n.labels||[];t.appendChild(r),e.elements=n.options.map((function(t,s){var o="vega-option-"+n.signal+"-"+t,u={id:o,type:"radio",name:n.signal,value:t};A(t,i)&&(u.checked=!0);var l=b("input",u);return l.addEventListener("change",(function(){e.update(t)})),r.appendChild(l),r.appendChild(b("label",{for:o},(a[s]||t)+"")),l})),e.set=function(t){for(var n=e.elements,i=0,r=n.length;i<r;++i)A(n[i].value,t)&&(n[i].checked=!0)}}function S(e,t,n,i){i=void 0!==i?i:(+n.max+ +n.min)/2;var a=null!=n.max?n.max:Math.max(100,+i)||100,s=n.min||Math.min(0,a,+i)||0,o=n.step||r.tickStep(s,a,100),u=b("input",{type:"range",name:n.signal,min:s,max:a,step:o});u.value=i;var l=b("label",{},+i);function c(){l.textContent=u.value,e.update(+u.value)}t.appendChild(u),t.appendChild(l),u.addEventListener("input",c),u.addEventListener("change",c),e.elements=[u],e.set=function(e){u.value=e,l.textContent=e}}function A(e,t){return e===t||e+""==t+""}function E(e,t,n,i,r,a){return(t=t||new i(e.loader())).initialize(n,h(e),f(e),g(e),r,a).background(e.background())}function D(e,t){return t?function(){try{t.apply(this,arguments)}catch(t){e.error(t)}}:null}function R(e,t){if("string"==typeof t){if("undefined"==typeof document)return e.error("DOM document instance not found."),null;if(!(t=document.querySelector(t)))return e.error("Signal bind element not found: "+t),null}if(t)try{t.innerHTML=""}catch(n){t=null,e.error(n)}return t}const T=e=>+e||0;function O(e){return t.isObject(e)?{top:T(e.top),bottom:T(e.bottom),left:T(e.left),right:T(e.right)}:(e=>({top:e,bottom:e,left:e,right:e}))(T(e))}async function j(e,n,r,a){const s=i.renderModule(n),o=s&&s.headless;return o||t.error("Unrecognized renderer type: "+n),await e.runAsync(),E(e,null,null,o,r,a).renderAsync(e._scenegraph.root)}var H={skip:!0};function U(e,t){var n=e.autosize(),i=e.padding();return t-(n&&"padding"===n.contains?i.left+i.right:0)}function M(e,t){var n=e.autosize(),i=e.padding();return t-(n&&"padding"===n.contains?i.top+i.bottom:0)}function q(e,n){return n.modified&&t.isArray(n.input.value)&&e.indexOf("_:vega:_")}function W(e,t){return!("parent"===e||t instanceof n.transforms.proxy)}function V(e,n,i,r){var a=e.element();a&&a.setAttribute("title",function(e){return null==e?"":t.isArray(e)?B(e):t.isObject(e)&&!t.isDate(e)?(n=e,Object.keys(n).map((function(e){var i=n[e];return e+": "+(t.isArray(i)?B(i):G(i))})).join("\n")):e+"";var n}(r))}function B(e){return"["+e.map(G).join(", ")+"]"}function G(e){return t.isArray(e)?"[…]":t.isObject(e)&&!t.isDate(e)?"{…}":e}function P(e,r){r=r||{},n.Dataflow.call(this),r.loader&&this.loader(r.loader),r.logger&&this.logger(r.logger),null!=r.logLevel&&this.logLevel(r.logLevel),this._el=null,this._elBind=null,this._renderType=r.renderer||i.RenderType.Canvas,this._scenegraph=new i.Scenegraph;var o=this._scenegraph.root;this._renderer=null,this._tooltip=r.tooltip||V,this._redraw=!0,this._handler=(new i.CanvasHandler).scene(o),this._preventDefault=!1,this._timers=[],this._eventListeners=[],this._resizeListeners=[],this._eventConfig=function(e){const n=t.extend({defaults:{}},e),i=(e,n)=>{n.forEach(n=>{t.isArray(e[n])&&(e[n]=t.toSet(e[n]))})};return i(n.defaults,["prevent","allow"]),i(n,["view","window","selector"]),n}(e.eventConfig);var u=function(e,t,i){var r=i||a.functionContext;return s.parse(t,s.context(e,n.transforms,r))}(this,e,r.functions);this._runtime=u,this._signals=u.signals,this._bind=(e.bindings||[]).map((function(e){return{state:null,param:t.extend({},e)}})),u.root&&u.root.set(o),o.source=u.data.root.input,this.pulse(u.data.root.input,this.changeset().insert(o.items)),this._width=this.width(),this._height=this.height(),this._viewWidth=U(this,this._width),this._viewHeight=M(this,this._height),this._origin=[0,0],this._resize=0,this._autosize=1,function(e){var t=e._signals,n=t.width,i=t.height,r=t.padding;function a(){e._autosize=e._resize=1}e._resizeWidth=e.add(null,(function(t){e._width=t.size,e._viewWidth=U(e,t.size),a()}),{size:n}),e._resizeHeight=e.add(null,(function(t){e._height=t.size,e._viewHeight=M(e,t.size),a()}),{size:i});var s=e.add(null,a,{pad:r});e._resizeWidth.rank=n.rank+1,e._resizeHeight.rank=i.rank+1,s.rank=r.rank+1}(this),function(e){e.add(null,t=>(e._background=t.bg,e._resize=1,t.bg),{bg:e._signals.background})}(this),l(this),this.description(e.description),r.hover&&this.hover(),r.container&&this.initialize(r.container,r.bind)}var I=t.inherits(P,n.Dataflow);function $(e,n){return t.hasOwnProperty(e._signals,n)?e._signals[n]:t.error("Unrecognized signal name: "+t.stringValue(n))}function N(e,t){var n=(e._targets||[]).filter((function(e){var n=e._update;return n&&n.handler===t}));return n.length?n[0]:null}function F(e,t,n,i){var r=N(n,i);return r||((r=D(this,(function(){i(t,n.value)}))).handler=i,e.on(n,null,r)),e}function J(e,t,n){var i=N(t,n);return i&&t._targets.remove(i),e}I.evaluate=async function(e,t,i){if(await n.Dataflow.prototype.evaluate.call(this,e,t),this._redraw||this._resize)try{this._renderer&&(this._resize&&(this._resize=0,a=g(r=this),s=h(r),o=f(r),r._renderer.background(r.background()),r._renderer.resize(s,o,a),r._handler.origin(a),r._resizeListeners.forEach((function(e){try{e(s,o)}catch(e){r.error(e)}}))),await this._renderer.renderAsync(this._scenegraph.root)),this._redraw=!1}catch(e){this.error(e)}var r,a,s,o;return i&&n.asyncCallback(this,i),this},I.dirty=function(e){this._redraw=!0,this._renderer&&this._renderer.dirty(e)},I.description=function(e){if(arguments.length){const t=null!=e?e+"":null;return t!==this._desc&&u(this._el,this._desc=t),this}return this._desc},I.container=function(){return this._el},I.scenegraph=function(){return this._scenegraph},I.origin=function(){return this._origin.slice()},I.signal=function(e,t,n){var i=$(this,e);return 1===arguments.length?i.value:this.update(i,t,n)},I.width=function(e){return arguments.length?this.signal("width",e):this.signal("width")},I.height=function(e){return arguments.length?this.signal("height",e):this.signal("height")},I.padding=function(e){return arguments.length?this.signal("padding",O(e)):O(this.signal("padding"))},I.autosize=function(e){return arguments.length?this.signal("autosize",e):this.signal("autosize")},I.background=function(e){return arguments.length?this.signal("background",e):this.signal("background")},I.renderer=function(e){return arguments.length?(i.renderModule(e)||t.error("Unrecognized renderer type: "+e),e!==this._renderType&&(this._renderType=e,this._resetRenderer()),this):this._renderType},I.tooltip=function(e){return arguments.length?(e!==this._tooltip&&(this._tooltip=e,this._resetRenderer()),this):this._tooltip},I.loader=function(e){return arguments.length?(e!==this._loader&&(n.Dataflow.prototype.loader.call(this,e),this._resetRenderer()),this):this._loader},I.resize=function(){return this._autosize=1,this.touch($(this,"autosize"))},I._resetRenderer=function(){this._renderer&&(this._renderer=null,this.initialize(this._el,this._elBind))},I._resizeView=function(e,t,n,i,r,a){this.runAfter((function(s){var o=0;s._autosize=0,s.width()!==n&&(o=1,s.signal("width",n,H),s._resizeWidth.skip(!0)),s.height()!==i&&(o=1,s.signal("height",i,H),s._resizeHeight.skip(!0)),s._viewWidth!==e&&(s._resize=1,s._viewWidth=e),s._viewHeight!==t&&(s._resize=1,s._viewHeight=t),s._origin[0]===r[0]&&s._origin[1]===r[1]||(s._resize=1,s._origin=r),o&&s.run("enter"),a&&s.runAfter(e=>e.resize())}),!1,1)},I.addEventListener=function(e,t,n){var i=t;return n&&!1===n.trap||((i=D(this,t)).raw=t),this._handler.on(e,i),this},I.removeEventListener=function(e,t){for(var n,i,r=this._handler.handlers(e),a=r.length;--a>=0;)if(i=r[a].type,n=r[a].handler,e===i&&(t===n||t===n.raw)){this._handler.off(i,n);break}return this},I.addResizeListener=function(e){var t=this._resizeListeners;return t.indexOf(e)<0&&t.push(e),this},I.removeResizeListener=function(e){var t=this._resizeListeners,n=t.indexOf(e);return n>=0&&t.splice(n,1),this},I.addSignalListener=function(e,t){return F(this,e,$(this,e),t)},I.removeSignalListener=function(e,t){return J(this,$(this,e),t)},I.addDataListener=function(e,t){return F(this,e,c(this,e).values,t)},I.removeDataListener=function(e,t){return J(this,c(this,e).values,t)},I.preventDefault=function(e){return arguments.length?(this._preventDefault=e,this):this._preventDefault},I.timer=function(e,t){this._timers.push(o.interval((function(t){e({timestamp:Date.now(),elapsed:t})}),t))},I.events=function(e,t,i){var r,a=this,s=new n.EventStream(i),o=function(n,i){a.runAsync(null,()=>{"view"===e&&function(e,t){var n=e._eventConfig.defaults,i=n.prevent,r=n.allow;return!1!==i&&!0!==r&&(!0===i||!1===r||(i?i[t]:r?!r[t]:e.preventDefault()))}(a,t)&&n.preventDefault(),s.receive(v(a,n,i))})};if("timer"===e)_(a,"timer",t)&&a.timer(o,t);else if("view"===e)_(a,"view",t)&&a.addEventListener(t,o,p);else if("window"===e?_(a,"window",t)&&"undefined"!=typeof window&&(r=[window]):"undefined"!=typeof document&&_(a,"selector",t)&&(r=document.querySelectorAll(e)),r){for(var u=0,l=r.length;u<l;++u)r[u].addEventListener(t,o);a._eventListeners.push({type:t,sources:r,handler:o})}else a.warn("Can not resolve event source: "+e);return s},I.finalize=function(){var e,t,n,i=this._tooltip,r=this._timers,a=this._eventListeners;for(e=r.length;--e>=0;)r[e].stop();for(e=a.length;--e>=0;)for(t=(n=a[e]).sources.length;--t>=0;)n.sources[t].removeEventListener(n.type,n.handler);return i&&i.call(this,this._handler,null,null,null),this},I.hover=function(e,t){return t=[t||"update",(e=[e||"hover"])[0]],this.on(this.events("view","mouseover",m),w,y(e)),this.on(this.events("view","mouseout",m),w,y(t)),this},I.data=function(e,i){return arguments.length<2?c(this,e).values.value:d.call(this,e,n.changeset().remove(t.truthy).insert(i))},I.change=d,I.insert=function(e,t){return d.call(this,e,n.changeset().insert(t))},I.remove=function(e,t){return d.call(this,e,n.changeset().remove(t))},I.scale=function(e){var n=this._runtime.scales;return t.hasOwnProperty(n,e)||t.error("Unrecognized scale or projection: "+e),n[e].value},I.initialize=function(e,t){const n=this,r=n._renderType,a=n._eventConfig.bind,s=i.renderModule(r);e=n._el=e?R(n,e):null,function(e){const t=e.container();t&&(t.setAttribute("role","figure"),u(t,e.description()))}(n),s||n.error("Unrecognized renderer type: "+r);const o=s.handler||i.CanvasHandler,l=e?s.renderer:s.headless;return n._renderer=l?E(n,n._renderer,e,l):null,n._handler=function(e,t,n,i){var r=new i(e.loader(),D(e,e.tooltip())).scene(e.scenegraph().root).initialize(n,g(e),e);return t&&t.handlers().forEach((function(e){r.on(e.type,e.handler)})),r}(n,n._handler,e,o),n._redraw=!0,e&&"none"!==a&&(t=t?n._elBind=R(n,t):e.appendChild(b("div",{class:"vega-bindings"})),n._bind.forEach((function(e){e.param.element&&"container"!==a&&(e.element=R(n,e.param.element))})),n._bind.forEach((function(e){z(n,e.element||t,e)}))),n},I.toImageURL=async function(e,n){e!==i.RenderType.Canvas&&e!==i.RenderType.SVG&&e!==i.RenderType.PNG&&t.error("Unrecognized image type: "+e);const r=await j(this,e,n);return e===i.RenderType.SVG?function(e,t){var n=new Blob([e],{type:t});return window.URL.createObjectURL(n)}(r.svg(),"image/svg+xml"):r.canvas().toDataURL("image/png")},I.toCanvas=async function(e,t){return(await j(this,i.RenderType.Canvas,e,t)).canvas()},I.toSVG=async function(e){return(await j(this,i.RenderType.SVG,e)).svg()},I.getState=function(e){return this._runtime.getState(e||{data:q,signals:W,recurse:!0})},I.setState=function(e){return this.runAsync(null,t=>{t._trigger=!1,t._runtime.setState(e)},e=>{e._trigger=!0}),this},e.View=P,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vega-util"),require("vega-dataflow"),require("vega-scenegraph"),require("d3-array"),require("vega-functions"),require("vega-runtime"),require("d3-timer")):"function"==typeof define&&define.amd?define(["exports","vega-util","vega-dataflow","vega-scenegraph","d3-array","vega-functions","vega-runtime","d3-timer"],t):t((e=e||self).vega={},e.vega,e.vega,e.vega,e.d3,e.vega,e.vega,e.d3)}(this,(function(e,t,n,i,r,s,a,o){"use strict";function u(e,t){e&&(null==t?e.removeAttribute("aria-label"):e.setAttribute("aria-label",t))}function l(e){var n=e._signals.cursor;n||(e._signals.cursor=n=e.add({user:"default",item:null})),e.on(e.events("view","mousemove"),n,(function(e,i){var r=n.value,s=r?t.isString(r)?r:r.user:"default",a=i.item&&i.item.cursor||null;return r&&s===r.user&&a==r.item?r:{user:s,item:a}})),e.add(null,(function(e){var n=e.cursor,i=this.value;return t.isString(n)||(i=n.item,n=n.user),function(e){"undefined"!=typeof document&&document.body&&(document.body.style.cursor=e)}(n&&"default"!==n?n:i||n),i}),{cursor:n})}function c(e,n){var i=e._runtime.data;return t.hasOwnProperty(i,n)||t.error("Unrecognized data set: "+n),i[n]}function d(e,i){n.isChangeSet(i)||t.error("Second argument to changes must be a changeset.");var r=c(this,e);return r.modified=!0,this.pulse(r.input,i)}function h(e){var t=e.padding();return Math.max(0,e._viewWidth+t.left+t.right)}function g(e){var t=e.padding();return Math.max(0,e._viewHeight+t.top+t.bottom)}function f(e){var t=e.padding(),n=e._origin;return[t.left+n[0],t.top+n[1]]}function p(e,n,r){var s,a,o,u=e._renderer,l=u&&u.canvas();return l&&(o=f(e),a=n.changedTouches?n.changedTouches[0]:n,(s=i.point(a,l))[0]-=o[0],s[1]-=o[1]),n.dataflow=e,n.item=r,n.vega=function(e,n,i){var r=n?"group"===n.mark.marktype?n:n.mark.group:null;function s(e){var t,i=r;if(e)for(t=n;t;t=t.mark.group)if(t.mark.name===e){i=t;break}return i&&i.mark&&i.mark.interactive?i:{}}function a(e){if(!e)return i;t.isString(e)&&(e=s(e));for(var n=i.slice();e;)n[0]-=e.x||0,n[1]-=e.y||0,e=e.mark&&e.mark.group;return n}return{view:t.constant(e),item:t.constant(n||{}),group:s,xy:a,x:function(e){return a(e)[0]},y:function(e){return a(e)[1]}}}(e,r,s),n}const v={trap:!1};function _(e,n,i){const r=e._eventConfig&&e._eventConfig[n];return!(!1===r||t.isObject(r)&&!r[i])||(e.warn(`Blocked ${n} ${i} event listener.`),!1)}function m(e){return e.item}function w(e){return e.item.mark.source}function y(e){return function(t,n){return n.vega.view().changeset().encode(n.item,e)}}function b(e,t,n){var i=document.createElement(e);for(var r in t)i.setAttribute(r,t[r]);return null!=n&&(i.textContent=n),i}function z(e,n,i){if(!n)return;const r=i.param;let s=i.state;return s||(s=i.state={elements:null,active:!1,set:null,update:t=>{t!==e.signal(r.signal)&&e.runAsync(null,(function(){s.source=!0,e.signal(r.signal,t)}))}},r.debounce&&(s.update=t.debounce(r.debounce,s.update))),function(e,t,n,i){const r=b("div",{class:"vega-bind"}),s="radio"===n.input?r:r.appendChild(b("label"));s.appendChild(b("span",{class:"vega-bind-name"},n.name||n.signal)),t.appendChild(r);let a=k;switch(n.input){case"checkbox":a=L;break;case"select":a=C;break;case"radio":a=x;break;case"range":a=A}a(e,s,n,i)}(s,n,r,e.signal(r.signal)),s.active||(e.on(e._signals[r.signal],null,()=>{s.source?s.source=!1:s.set(e.signal(r.signal))}),s.active=!0),s}function k(e,t,n,i){const r=b("input");for(const e in n)"signal"!==e&&"element"!==e&&r.setAttribute("input"===e?"type":e,n[e]);r.setAttribute("name",n.signal),r.value=i,t.appendChild(r),r.addEventListener("input",()=>e.update(r.value)),e.elements=[r],e.set=e=>r.value=e}function L(e,t,n,i){const r={type:"checkbox",name:n.signal};i&&(r.checked=!0);const s=b("input",r);t.appendChild(s),s.addEventListener("change",()=>e.update(s.checked)),e.elements=[s],e.set=e=>s.checked=!!e||null}function C(e,t,n,i){const r=b("select",{name:n.signal}),s=n.labels||[];n.options.forEach((e,t)=>{const n={value:e};S(e,i)&&(n.selected=!0),r.appendChild(b("option",n,(s[t]||e)+""))}),t.appendChild(r),r.addEventListener("change",()=>{e.update(n.options[r.selectedIndex])}),e.elements=[r],e.set=e=>{for(let t=0,i=n.options.length;t<i;++t)if(S(n.options[t],e))return void(r.selectedIndex=t)}}function x(e,t,n,i){const r=b("span",{class:"vega-bind-radio"}),s=n.labels||[];t.appendChild(r),e.elements=n.options.map((t,a)=>{const o={type:"radio",name:n.signal,value:t};S(t,i)&&(o.checked=!0);const u=b("input",o);u.addEventListener("change",()=>e.update(t));const l=b("label",{},(s[a]||t)+"");return l.prepend(u),r.appendChild(l),u}),e.set=t=>{const n=e.elements,i=n.length;for(let e=0;e<i;++e)S(n[e].value,t)&&(n[e].checked=!0)}}function A(e,t,n,i){i=void 0!==i?i:(+n.max+ +n.min)/2;const s=null!=n.max?n.max:Math.max(100,+i)||100,a=n.min||Math.min(0,s,+i)||0,o=n.step||r.tickStep(a,s,100),u=b("input",{type:"range",name:n.signal,min:a,max:s,step:o});u.value=i;const l=b("span",{},+i);t.appendChild(u),t.appendChild(l);const c=()=>{l.textContent=u.value,e.update(+u.value)};u.addEventListener("input",c),u.addEventListener("change",c),e.elements=[u],e.set=e=>{u.value=e,l.textContent=e}}function S(e,t){return e===t||e+""==t+""}function E(e,t,n,i,r,s){return(t=t||new i(e.loader())).initialize(n,h(e),g(e),f(e),r,s).background(e.background())}function D(e,t){return t?function(){try{t.apply(this,arguments)}catch(t){e.error(t)}}:null}function R(e,t){if("string"==typeof t){if("undefined"==typeof document)return e.error("DOM document instance not found."),null;if(!(t=document.querySelector(t)))return e.error("Signal bind element not found: "+t),null}if(t)try{t.innerHTML=""}catch(n){t=null,e.error(n)}return t}const T=e=>+e||0;function O(e){return t.isObject(e)?{top:T(e.top),bottom:T(e.bottom),left:T(e.left),right:T(e.right)}:(e=>({top:e,bottom:e,left:e,right:e}))(T(e))}async function j(e,n,r,s){const a=i.renderModule(n),o=a&&a.headless;return o||t.error("Unrecognized renderer type: "+n),await e.runAsync(),E(e,null,null,o,r,s).renderAsync(e._scenegraph.root)}var H={skip:!0};function U(e,t){var n=e.autosize(),i=e.padding();return t-(n&&"padding"===n.contains?i.left+i.right:0)}function M(e,t){var n=e.autosize(),i=e.padding();return t-(n&&"padding"===n.contains?i.top+i.bottom:0)}function q(e,n){return n.modified&&t.isArray(n.input.value)&&e.indexOf("_:vega:_")}function W(e,t){return!("parent"===e||t instanceof n.transforms.proxy)}function V(e,n,i,r){var s=e.element();s&&s.setAttribute("title",function(e){return null==e?"":t.isArray(e)?B(e):t.isObject(e)&&!t.isDate(e)?(n=e,Object.keys(n).map((function(e){var i=n[e];return e+": "+(t.isArray(i)?B(i):G(i))})).join("\n")):e+"";var n}(r))}function B(e){return"["+e.map(G).join(", ")+"]"}function G(e){return t.isArray(e)?"[…]":t.isObject(e)&&!t.isDate(e)?"{…}":e}function P(e,r){r=r||{},n.Dataflow.call(this),r.loader&&this.loader(r.loader),r.logger&&this.logger(r.logger),null!=r.logLevel&&this.logLevel(r.logLevel),this._el=null,this._elBind=null,this._renderType=r.renderer||i.RenderType.Canvas,this._scenegraph=new i.Scenegraph;var o=this._scenegraph.root;this._renderer=null,this._tooltip=r.tooltip||V,this._redraw=!0,this._handler=(new i.CanvasHandler).scene(o),this._preventDefault=!1,this._timers=[],this._eventListeners=[],this._resizeListeners=[],this._eventConfig=function(e){const n=t.extend({defaults:{}},e),i=(e,n)=>{n.forEach(n=>{t.isArray(e[n])&&(e[n]=t.toSet(e[n]))})};return i(n.defaults,["prevent","allow"]),i(n,["view","window","selector"]),n}(e.eventConfig);var u=function(e,t,i){var r=i||s.functionContext;return a.parse(t,a.context(e,n.transforms,r))}(this,e,r.functions);this._runtime=u,this._signals=u.signals,this._bind=(e.bindings||[]).map((function(e){return{state:null,param:t.extend({},e)}})),u.root&&u.root.set(o),o.source=u.data.root.input,this.pulse(u.data.root.input,this.changeset().insert(o.items)),this._width=this.width(),this._height=this.height(),this._viewWidth=U(this,this._width),this._viewHeight=M(this,this._height),this._origin=[0,0],this._resize=0,this._autosize=1,function(e){var t=e._signals,n=t.width,i=t.height,r=t.padding;function s(){e._autosize=e._resize=1}e._resizeWidth=e.add(null,(function(t){e._width=t.size,e._viewWidth=U(e,t.size),s()}),{size:n}),e._resizeHeight=e.add(null,(function(t){e._height=t.size,e._viewHeight=M(e,t.size),s()}),{size:i});var a=e.add(null,s,{pad:r});e._resizeWidth.rank=n.rank+1,e._resizeHeight.rank=i.rank+1,a.rank=r.rank+1}(this),function(e){e.add(null,t=>(e._background=t.bg,e._resize=1,t.bg),{bg:e._signals.background})}(this),l(this),this.description(e.description),r.hover&&this.hover(),r.container&&this.initialize(r.container,r.bind)}var I=t.inherits(P,n.Dataflow);function $(e,n){return t.hasOwnProperty(e._signals,n)?e._signals[n]:t.error("Unrecognized signal name: "+t.stringValue(n))}function N(e,t){var n=(e._targets||[]).filter((function(e){var n=e._update;return n&&n.handler===t}));return n.length?n[0]:null}function F(e,t,n,i){var r=N(n,i);return r||((r=D(this,(function(){i(t,n.value)}))).handler=i,e.on(n,null,r)),e}function J(e,t,n){var i=N(t,n);return i&&t._targets.remove(i),e}I.evaluate=async function(e,t,i){if(await n.Dataflow.prototype.evaluate.call(this,e,t),this._redraw||this._resize)try{this._renderer&&(this._resize&&(this._resize=0,s=f(r=this),a=h(r),o=g(r),r._renderer.background(r.background()),r._renderer.resize(a,o,s),r._handler.origin(s),r._resizeListeners.forEach((function(e){try{e(a,o)}catch(e){r.error(e)}}))),await this._renderer.renderAsync(this._scenegraph.root)),this._redraw=!1}catch(e){this.error(e)}var r,s,a,o;return i&&n.asyncCallback(this,i),this},I.dirty=function(e){this._redraw=!0,this._renderer&&this._renderer.dirty(e)},I.description=function(e){if(arguments.length){const t=null!=e?e+"":null;return t!==this._desc&&u(this._el,this._desc=t),this}return this._desc},I.container=function(){return this._el},I.scenegraph=function(){return this._scenegraph},I.origin=function(){return this._origin.slice()},I.signal=function(e,t,n){var i=$(this,e);return 1===arguments.length?i.value:this.update(i,t,n)},I.width=function(e){return arguments.length?this.signal("width",e):this.signal("width")},I.height=function(e){return arguments.length?this.signal("height",e):this.signal("height")},I.padding=function(e){return arguments.length?this.signal("padding",O(e)):O(this.signal("padding"))},I.autosize=function(e){return arguments.length?this.signal("autosize",e):this.signal("autosize")},I.background=function(e){return arguments.length?this.signal("background",e):this.signal("background")},I.renderer=function(e){return arguments.length?(i.renderModule(e)||t.error("Unrecognized renderer type: "+e),e!==this._renderType&&(this._renderType=e,this._resetRenderer()),this):this._renderType},I.tooltip=function(e){return arguments.length?(e!==this._tooltip&&(this._tooltip=e,this._resetRenderer()),this):this._tooltip},I.loader=function(e){return arguments.length?(e!==this._loader&&(n.Dataflow.prototype.loader.call(this,e),this._resetRenderer()),this):this._loader},I.resize=function(){return this._autosize=1,this.touch($(this,"autosize"))},I._resetRenderer=function(){this._renderer&&(this._renderer=null,this.initialize(this._el,this._elBind))},I._resizeView=function(e,t,n,i,r,s){this.runAfter((function(a){var o=0;a._autosize=0,a.width()!==n&&(o=1,a.signal("width",n,H),a._resizeWidth.skip(!0)),a.height()!==i&&(o=1,a.signal("height",i,H),a._resizeHeight.skip(!0)),a._viewWidth!==e&&(a._resize=1,a._viewWidth=e),a._viewHeight!==t&&(a._resize=1,a._viewHeight=t),a._origin[0]===r[0]&&a._origin[1]===r[1]||(a._resize=1,a._origin=r),o&&a.run("enter"),s&&a.runAfter(e=>e.resize())}),!1,1)},I.addEventListener=function(e,t,n){var i=t;return n&&!1===n.trap||((i=D(this,t)).raw=t),this._handler.on(e,i),this},I.removeEventListener=function(e,t){for(var n,i,r=this._handler.handlers(e),s=r.length;--s>=0;)if(i=r[s].type,n=r[s].handler,e===i&&(t===n||t===n.raw)){this._handler.off(i,n);break}return this},I.addResizeListener=function(e){var t=this._resizeListeners;return t.indexOf(e)<0&&t.push(e),this},I.removeResizeListener=function(e){var t=this._resizeListeners,n=t.indexOf(e);return n>=0&&t.splice(n,1),this},I.addSignalListener=function(e,t){return F(this,e,$(this,e),t)},I.removeSignalListener=function(e,t){return J(this,$(this,e),t)},I.addDataListener=function(e,t){return F(this,e,c(this,e).values,t)},I.removeDataListener=function(e,t){return J(this,c(this,e).values,t)},I.preventDefault=function(e){return arguments.length?(this._preventDefault=e,this):this._preventDefault},I.timer=function(e,t){this._timers.push(o.interval((function(t){e({timestamp:Date.now(),elapsed:t})}),t))},I.events=function(e,t,i){var r,s=this,a=new n.EventStream(i),o=function(n,i){s.runAsync(null,()=>{"view"===e&&function(e,t){var n=e._eventConfig.defaults,i=n.prevent,r=n.allow;return!1!==i&&!0!==r&&(!0===i||!1===r||(i?i[t]:r?!r[t]:e.preventDefault()))}(s,t)&&n.preventDefault(),a.receive(p(s,n,i))})};if("timer"===e)_(s,"timer",t)&&s.timer(o,t);else if("view"===e)_(s,"view",t)&&s.addEventListener(t,o,v);else if("window"===e?_(s,"window",t)&&"undefined"!=typeof window&&(r=[window]):"undefined"!=typeof document&&_(s,"selector",t)&&(r=document.querySelectorAll(e)),r){for(var u=0,l=r.length;u<l;++u)r[u].addEventListener(t,o);s._eventListeners.push({type:t,sources:r,handler:o})}else s.warn("Can not resolve event source: "+e);return a},I.finalize=function(){var e,t,n,i=this._tooltip,r=this._timers,s=this._eventListeners;for(e=r.length;--e>=0;)r[e].stop();for(e=s.length;--e>=0;)for(t=(n=s[e]).sources.length;--t>=0;)n.sources[t].removeEventListener(n.type,n.handler);return i&&i.call(this,this._handler,null,null,null),this},I.hover=function(e,t){return t=[t||"update",(e=[e||"hover"])[0]],this.on(this.events("view","mouseover",m),w,y(e)),this.on(this.events("view","mouseout",m),w,y(t)),this},I.data=function(e,i){return arguments.length<2?c(this,e).values.value:d.call(this,e,n.changeset().remove(t.truthy).insert(i))},I.change=d,I.insert=function(e,t){return d.call(this,e,n.changeset().insert(t))},I.remove=function(e,t){return d.call(this,e,n.changeset().remove(t))},I.scale=function(e){var n=this._runtime.scales;return t.hasOwnProperty(n,e)||t.error("Unrecognized scale or projection: "+e),n[e].value},I.initialize=function(e,t){const n=this,r=n._renderType,s=n._eventConfig.bind,a=i.renderModule(r);e=n._el=e?R(n,e):null,function(e){const t=e.container();t&&(t.setAttribute("role","graphics-document"),t.setAttribute("aria-roleDescription","visualization"),u(t,e.description()))}(n),a||n.error("Unrecognized renderer type: "+r);const o=a.handler||i.CanvasHandler,l=e?a.renderer:a.headless;return n._renderer=l?E(n,n._renderer,e,l):null,n._handler=function(e,t,n,i){var r=new i(e.loader(),D(e,e.tooltip())).scene(e.scenegraph().root).initialize(n,f(e),e);return t&&t.handlers().forEach((function(e){r.on(e.type,e.handler)})),r}(n,n._handler,e,o),n._redraw=!0,e&&"none"!==s&&(t=t?n._elBind=R(n,t):e.appendChild(b("form",{class:"vega-bindings"})),n._bind.forEach((function(e){e.param.element&&"container"!==s&&(e.element=R(n,e.param.element))})),n._bind.forEach((function(e){z(n,e.element||t,e)}))),n},I.toImageURL=async function(e,n){e!==i.RenderType.Canvas&&e!==i.RenderType.SVG&&e!==i.RenderType.PNG&&t.error("Unrecognized image type: "+e);const r=await j(this,e,n);return e===i.RenderType.SVG?function(e,t){var n=new Blob([e],{type:t});return window.URL.createObjectURL(n)}(r.svg(),"image/svg+xml"):r.canvas().toDataURL("image/png")},I.toCanvas=async function(e,t){return(await j(this,i.RenderType.Canvas,e,t)).canvas()},I.toSVG=async function(e){return(await j(this,i.RenderType.SVG,e)).svg()},I.getState=function(e){return this._runtime.getState(e||{data:q,signals:W,recurse:!0})},I.setState=function(e){return this.runAsync(null,t=>{t._trigger=!1,t._runtime.setState(e)},e=>{e._trigger=!0}),this},e.View=P,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "vega-view",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "View component and transforms for Vega visualizations.",
@@ -21,3 +21,3 @@ "keywords": [
     "pretest": "yarn prebuild && yarn rollup",
-    "test": "tape 'test/**/*-test.js' && eslint index.js src",
+    "test": "tape 'test/**/*-test.js'",
     "prepublishOnly": "yarn test && yarn build",
@@ -29,9 +29,9 @@ "postpublish": "git push && git push --tags"
     "d3-timer": "^1.0.10",
-    "vega-dataflow": "^5.5.0",
-    "vega-functions": "^5.5.1",
-    "vega-runtime": "^5.0.2",
-    "vega-scenegraph": "^4.6.0",
-    "vega-util": "^1.13.1"
+    "vega-dataflow": "^5.5.1",
+    "vega-functions": "^5.6.0",
+    "vega-runtime": "^5.0.3",
+    "vega-scenegraph": "^4.7.0",
+    "vega-util": "^1.13.2"
   },
-  "gitHead": "2bee653f2a56c2c0d4393d69d172b9ccdb0fe2f9"
+  "gitHead": "35e31c5c6b54db9dc3a577b5adad8d15ec274d32"
 }

src/aria.js

@@ -5,3 +5,4 @@ // initialize aria role and label attributes
   if (el) {
-    el.setAttribute('role', 'figure');
+    el.setAttribute('role', 'graphics-document');
+    el.setAttribute('aria-roleDescription', 'visualization');
     ariaLabel(el, view.description());
@@ -16,2 +17,2 @@ }
     : el.setAttribute('aria-label', desc);
-}
+}

src/bind.js

@@ -5,6 +5,5 @@ import element from './element';
 
-var BindClass = 'vega-bind',
-    NameClass = 'vega-bind-name',
-    RadioClass = 'vega-bind-radio',
-    OptionClass = 'vega-option-';
+const BindClass = 'vega-bind',
+      NameClass = 'vega-bind-name',
+      RadioClass = 'vega-bind-radio';
 
@@ -27,4 +26,4 @@ /**
 
-  var param = binding.param,
-      bind = binding.state;
+  const param = binding.param;
+  let bind = binding.state;
 
@@ -36,3 +35,3 @@ if (!bind) {
       set: null,
-      update: function(value) {
+      update: value => {
         if (value !== view.signal(param.signal)) {
@@ -54,3 +53,3 @@ view.runAsync(null, function() {
   if (!bind.active) {
-    view.on(view._signals[param.signal], null, function() {
+    view.on(view._signals[param.signal], null, () => {
       bind.source
@@ -70,5 +69,9 @@ ? (bind.source = false)
 function generate(bind, el, param, value) {
-  var div = element('div', {'class': BindClass});
+  const div = element('div', {'class': BindClass});
 
-  div.appendChild(element('span',
+  const wrapper = param.input === 'radio'
+    ? div
+    : div.appendChild(element('label'));
+
+  wrapper.appendChild(element('span',
     {'class': NameClass},
@@ -80,3 +83,3 @@ (param.name || param.signal)
 
-  var input = form;
+  let input = form;
   switch (param.input) {
@@ -89,3 +92,3 @@ case 'checkbox': input = checkbox; break;
 
-  input(bind, div, param, value);
+  input(bind, wrapper, param, value);
 }
@@ -98,5 +101,5 @@
 function form(bind, el, param, value) {
-  var node = element('input');
+  const node = element('input');
 
-  for (var key in param) {
+  for (const key in param) {
     if (key !== 'signal' && key !== 'element') {
@@ -110,9 +113,6 @@ node.setAttribute(key === 'input' ? 'type' : key, param[key]);
   el.appendChild(node);
+  node.addEventListener('input', () => bind.update(node.value));
 
-  node.addEventListener('input', function() {
-    bind.update(node.value);
-  });
-
   bind.elements = [node];
-  bind.set = function(value) { node.value = value; };
+  bind.set = value => node.value = value;
 }
@@ -124,14 +124,11 @@
 function checkbox(bind, el, param, value) {
-  var attr = {type: 'checkbox', name: param.signal};
+  const attr = {type: 'checkbox', name: param.signal};
   if (value) attr.checked = true;
-  var node = element('input', attr);
+  const node = element('input', attr);
 
   el.appendChild(node);
+  node.addEventListener('change', () => bind.update(node.checked));
 
-  node.addEventListener('change', function() {
-    bind.update(node.checked);
-  });
-
   bind.elements = [node];
-  bind.set = function(value) { node.checked = !!value || null; }
+  bind.set = value => node.checked = !!value || null;
 }
@@ -143,9 +140,9 @@
 function select(bind, el, param, value) {
-  var node = element('select', {name: param.signal}),
-      label = param.labels || [];
+  const node = element('select', {name: param.signal}),
+        labels = param.labels || [];
 
-  param.options.forEach(function(option, i) {
-    var attr = {value: option};
+  param.options.forEach((option, i) => {
+    const attr = {value: option};
     if (valuesEqual(option, value)) attr.selected = true;
-    node.appendChild(element('option', attr, (label[i] || option)+''));
+    node.appendChild(element('option', attr, (labels[i] || option)+''));
   });
@@ -155,3 +152,3 @@
 
-  node.addEventListener('change', function() {
+  node.addEventListener('change', () => {
     bind.update(param.options[node.selectedIndex]);
@@ -161,4 +158,4 @@ });
   bind.elements = [node];
-  bind.set = function(value) {
-    for (var i=0, n=param.options.length; i<n; ++i) {
+  bind.set = value => {
+    for (let i = 0, n = param.options.length; i < n; ++i) {
       if (valuesEqual(param.options[i], value)) {
@@ -175,12 +172,9 @@ node.selectedIndex = i; return;
 function radio(bind, el, param, value) {
-  var group = element('span', {'class': RadioClass}),
-      label = param.labels || [];
+  const group = element('span', {'class': RadioClass}),
+        labels = param.labels || [];
 
   el.appendChild(group);
 
-  bind.elements = param.options.map(function(option, i) {
-    var id = OptionClass + param.signal + '-' + option;
-
-    var attr = {
-      id:    id,
+  bind.elements = param.options.map((option, i) => {
+    const attr = {
       type:  'radio',
@@ -192,19 +186,16 @@ name:  param.signal,
 
-    var input = element('input', attr);
+    const input = element('input', attr);
+    input.addEventListener('change', () => bind.update(option));
 
-    input.addEventListener('change', function() {
-      bind.update(option);
-    });
+    const label = element('label', {}, (labels[i] || option)+'');
+    label.prepend(input);
+    group.appendChild(label);
 
-    group.appendChild(input);
-    group.appendChild(element('label', {'for': id}, (label[i] || option)+''));
-
     return input;
   });
 
-  bind.set = function(value) {
-    var nodes = bind.elements,
-        i = 0,
-        n = nodes.length;
-    for (; i<n; ++i) {
+  bind.set = value => {
+    const nodes = bind.elements,
+          n = nodes.length;
+    for (let i = 0; i < n; ++i) {
       if (valuesEqual(nodes[i].value, value)) nodes[i].checked = true;
@@ -221,7 +212,7 @@ }
 
-  var max = param.max != null ? param.max : Math.max(100, +value) || 100,
-      min = param.min || Math.min(0, max, +value) || 0,
-      step = param.step || tickStep(min, max, 100);
+  const max = param.max != null ? param.max : Math.max(100, +value) || 100,
+        min = param.min || Math.min(0, max, +value) || 0,
+        step = param.step || tickStep(min, max, 100);
 
-  var node = element('input', {
+  const node = element('input', {
     type:  'range',
@@ -235,11 +226,11 @@ name:  param.signal,
 
-  var label = element('label', {}, +value);
+  const span = element('span', {}, +value);
 
   el.appendChild(node);
-  el.appendChild(label);
+  el.appendChild(span);
 
-  function update() {
-    label.textContent = node.value;
+  const update = () => {
+    span.textContent = node.value;
     bind.update(+node.value);
-  }
+  };
 
@@ -251,5 +242,5 @@ // subscribe to both input and change
   bind.elements = [node];
-  bind.set = function(value) {
+  bind.set = value => {
     node.value = value;
-    label.textContent = value;
+    span.textContent = value;
   };
@@ -256,0 +247,0 @@ }

src/initialize-renderer.js

@@ -1,2 +0,2 @@
-import {width, height, offset} from './render-size';
+import {height, offset, width} from './render-size';
 
@@ -3,0 +3,0 @@ export default function(view, r, el, constructor, scaleFactor, opt) {

src/initialize.js

@@ -34,3 +34,3 @@ import {initializeAria} from './aria';
     elBind = elBind ? (view._elBind = lookup(view, elBind))
-      : el.appendChild(element('div', {'class': 'vega-bindings'}));
+      : el.appendChild(element('form', {'class': 'vega-bindings'}));
 
@@ -37,0 +37,0 @@ view._bind.forEach(function(_) {

src/runtime.js

 import {transforms} from 'vega-dataflow';
 import {functionContext} from 'vega-functions';
-import {parse, context} from 'vega-runtime';
+import {context, parse} from 'vega-runtime';
 
@@ -5,0 +5,0 @@ export default function(view, spec, functions) {

src/View.js

 import {ariaLabel} from './aria';
 import background from './background';
 import cursor from './cursor';
-import {data, dataref, change, insert, remove} from './data';
-import {initializeEventConfig, events} from './events';
+import {change, data, dataref, insert, remove} from './data';
+import {events, initializeEventConfig} from './events';
 import hover from './hover';
@@ -16,3 +16,3 @@ import finalize from './finalize';
 import {scale} from './scale';
-import {resizeView, initializeResize, viewWidth, viewHeight} from './size';
+import {initializeResize, resizeView, viewHeight, viewWidth} from './size';
 import {getState, setState} from './state';
@@ -23,7 +23,7 @@ import timer from './timer';
 
-import {asyncCallback, Dataflow} from 'vega-dataflow';
-import {error, extend, inherits, hasOwnProperty, stringValue} from 'vega-util';
+import {Dataflow, asyncCallback} from 'vega-dataflow';
+import {error, extend, hasOwnProperty, inherits, stringValue} from 'vega-util';
 import {
-  CanvasHandler, Scenegraph,
-  renderModule, RenderType
+  CanvasHandler, RenderType,
+  Scenegraph, renderModule
 } from 'vega-scenegraph';
@@ -30,0 +30,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

98363

decreased by-0.02%

Lines of code

2359

decreased by-0.38%

Dependency changes

• Updatedvega-dataflow@^5.5.1

• Updatedvega-functions@^5.6.0

• Updatedvega-runtime@^5.0.3

• Updatedvega-scenegraph@^4.7.0

• Updatedvega-util@^1.13.2