@uwdata/vgplot 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/vgplot",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "An API for interactive Mosaic-powered visualizations and dashboards.",
   "keywords": [
     "data",
@@ -25,15 +25,15 @@
   "scripts": {
     "prebuild": "rimraf dist && mkdir dist",
     "build": "node ../../esbuild.js vgplot",
-    "lint": "eslint src test --ext .js",
+    "lint": "eslint src test",
     "test": "mocha 'test/**/*-test.js'",
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@uwdata/mosaic-core": "^0.7.1",
-    "@uwdata/mosaic-inputs": "^0.7.1",
-    "@uwdata/mosaic-plot": "^0.7.1",
-    "@uwdata/mosaic-sql": "^0.7.0"
+    "@uwdata/mosaic-core": "^0.9.0",
+    "@uwdata/mosaic-inputs": "^0.9.0",
+    "@uwdata/mosaic-plot": "^0.9.0",
+    "@uwdata/mosaic-sql": "^0.9.0"
   },
-  "gitHead": "7e6f3ea9b3011ea2c9201c1aa16e8e5664621a4c"
+  "gitHead": "89bb9b0dfa747aed691eaeba35379525a6764c61"
 }

package/src/api.js

@@ -24,6 +24,7 @@ export {
   avg,
   count,
   corr,
+  covariance,
   covarPop,
   entropy,
   first,
@@ -100,7 +101,6 @@ export {
   grid,
   label,
   padding,
-  round,
   xScale,
   xDomain,
   xRange,
@@ -125,10 +125,12 @@ export {
   xLine,
   xLabel,
   xLabelAnchor,
+  xLabelArrow,
   xLabelOffset,
   xFontVariant,
   xAriaLabel,
   xAriaDescription,
+  xPercent,
   xReverse,
   xZero,
   xBase,
@@ -158,10 +160,12 @@ export {
   yLine,
   yLabel,
   yLabelAnchor,
+  yLabelArrow,
   yLabelOffset,
   yFontVariant,
   yAriaLabel,
   yAriaDescription,
+  yPercent,
   yReverse,
   yZero,
   yBase,
@@ -176,7 +180,6 @@ export {
   facetLabel,
   fxDomain,
   fxRange,
-  fxNice,
   fxInset,
   fxInsetLeft,
   fxInsetRight,
@@ -203,7 +206,6 @@ export {
   fxReverse,
   fyDomain,
   fyRange,
-  fyNice,
   fyInset,
   fyInsetTop,
   fyInsetBottom,
@@ -239,6 +241,7 @@ export {
   colorPivot,
   colorSymmetric,
   colorLabel,
+  colorPercent,
   colorReverse,
   colorZero,
   colorTickFormat,
@@ -251,17 +254,22 @@ export {
   opacityClamp,
   opacityNice,
   opacityLabel,
+  opacityPercent,
   opacityReverse,
   opacityZero,
   opacityTickFormat,
   opacityBase,
   opacityExponent,
   opacityConstant,
+  symbolScale,
+  symbolDomain,
+  symbolRange,
   rScale,
   rDomain,
   rRange,
   rClamp,
   rNice,
+  rPercent,
   rZero,
   rBase,
   rExponent,
@@ -271,6 +279,7 @@ export {
   lengthRange,
   lengthClamp,
   lengthNice,
+  lengthPercent,
   lengthZero,
   lengthBase,
   lengthExponent,
@@ -299,6 +308,7 @@ export {
   cell, cellX, cellY,
   rect, rectX, rectY,
   dot, dotX, dotY, circle, hexagon,
+  errorbarX, errorbarY,
   text, textX, textY,
   image,
   tickX, tickY,
@@ -322,11 +332,13 @@ export {
   intervalX,
   intervalY,
   intervalXY,
+  nearest,
   nearestX,
   nearestY,
   toggle,
   toggleX,
   toggleY,
+  toggleZ,
   toggleColor,
   pan,
   panX,

package/src/layout/concat.js

@@ -6,7 +6,7 @@ export function concat({ direction = 'vertical', wrap = false }, children) {
   div.style.justifyContent = 'flex-start';
   div.style.alignItems = 'flex-start';
   children.forEach(child => div.appendChild(child));
-  div.value = { element: div };
+  Object.assign(div, { value: { element: div } });
   return div;
 }
 

package/src/layout/space.js

@@ -2,9 +2,7 @@ export function space({ dim = 'width', size = 10 }) {
   const span = document.createElement('span');
   span.style.display = 'inline-block';
   span.style[dim] = Number.isNaN(+size) ? size : `${size}px`;
-  const obj = { element: span };
-  span.value = obj;
-  return span;
+  return Object.assign(span, { value: { element: span } });
 }
 
 export function vspace(size) {

package/src/plot/attributes.js

@@ -71,7 +71,6 @@ export const inset = attrf('inset');
 export const grid = attrf('grid');
 export const label = attrf('label');
 export const padding = attrf('padding');
-export const round = attrf('round');
 
 // x scale attributes
 export const xScale = attrf('xScale');
@@ -98,10 +97,12 @@ export const xGrid = attrf('xGrid');
 export const xLine = attrf('xLine');
 export const xLabel = attrf('xLabel');
 export const xLabelAnchor = attrf('xLabelAnchor');
+export const xLabelArrow = attrf('xLabelArrow');
 export const xLabelOffset = attrf('xLabelOffset');
 export const xFontVariant = attrf('xFontVariant');
 export const xAriaLabel = attrf('xAriaLabel');
 export const xAriaDescription = attrf('xAriaDescription');
+export const xPercent = attrf('xPercent');
 export const xReverse = attrf('xReverse');
 export const xZero = attrf('xZero');
 export const xBase = attrf('xBase');
@@ -133,10 +134,12 @@ export const yGrid = attrf('yGrid');
 export const yLine = attrf('yLine');
 export const yLabel = attrf('yLabel');
 export const yLabelAnchor = attrf('yLabelAnchor');
+export const yLabelArrow = attrf('yLabelArrow');
 export const yLabelOffset = attrf('yLabelOffset');
 export const yFontVariant = attrf('yFontVariant');
 export const yAriaLabel = attrf('yAriaLabel');
 export const yAriaDescription = attrf('yAriaDescription');
+export const yPercent = attrf('yPercent');
 export const yReverse = attrf('yReverse');
 export const yZero = attrf('yZero');
 export const yBase = attrf('yBase');
@@ -155,7 +158,6 @@ export const facetLabel = attrf('facetLabel');
 // fx scale attributes
 export const fxDomain = attrf('fxDomain');
 export const fxRange = attrf('fxRange');
-export const fxNice = attrf('fxNice');
 export const fxInset = attrf('fxInset');
 export const fxInsetLeft = attrf('fxInsetLeft');
 export const fxInsetRight = attrf('fxInsetRight');
@@ -184,7 +186,6 @@ export const fxReverse = attrf('fxReverse');
 // fy scale attributes
 export const fyDomain = attrf('fyDomain');
 export const fyRange = attrf('fyRange');
-export const fyNice = attrf('fyNice');
 export const fyInset = attrf('fyInset');
 export const fyInsetTop = attrf('fyInsetTop');
 export const fyInsetBottom = attrf('fyInsetBottom');
@@ -222,6 +223,7 @@ export const colorInterpolate = attrf('colorInterpolate');
 export const colorPivot = attrf('colorPivot');
 export const colorSymmetric = attrf('colorSymmetric');
 export const colorLabel = attrf('colorLabel');
+export const colorPercent = attrf('colorPercent');
 export const colorReverse = attrf('colorReverse');
 export const colorZero = attrf('colorZero');
 export const colorTickFormat = attrf('colorTickFormat');
@@ -236,6 +238,7 @@ export const opacityRange = attrf('opacityRange');
 export const opacityClamp = attrf('opacityClamp');
 export const opacityNice = attrf('opacityNice');
 export const opacityLabel = attrf('opacityLabel');
+export const opacityPercent = attrf('opacityPercent');
 export const opacityReverse = attrf('opacityReverse');
 export const opacityZero = attrf('opacityZero');
 export const opacityTickFormat = attrf('opacityTickFormat');
@@ -243,12 +246,18 @@ export const opacityBase = attrf('opacityBase');
 export const opacityExponent = attrf('opacityExponent');
 export const opacityConstant = attrf('opacityConstant');
 
+// symbol scale attributes
+export const symbolScale = attrf('symbolScale');
+export const symbolDomain = attrf('symbolDomain');
+export const symbolRange = attrf('symbolRange');
+
 // r scale attributes
 export const rScale = attrf('rScale');
 export const rDomain = attrf('rDomain');
 export const rRange = attrf('rRange');
 export const rClamp = attrf('rClamp');
 export const rNice = attrf('rNice');
+export const rPercent = attrf('rPercent');
 export const rZero = attrf('rZero');
 export const rBase = attrf('rBase');
 export const rExponent = attrf('rExponent');
@@ -260,6 +269,7 @@ export const lengthDomain = attrf('lengthDomain');
 export const lengthRange = attrf('lengthRange');
 export const lengthClamp = attrf('lengthClamp');
 export const lengthNice = attrf('lengthNice');
+export const lengthPercent = attrf('lengthPercent');
 export const lengthZero = attrf('lengthZero');
 export const lengthBase = attrf('lengthBase');
 export const lengthExponent = attrf('lengthExponent');

package/src/plot/interactors.js

@@ -30,16 +30,24 @@ export function toggleY(options) {
   return toggle({ ...options, channels: ['y'] });
 }
 
+export function toggleZ(options) {
+  return toggle({ ...options, channels: ['z'] });
+}
+
 export function toggleColor(options) {
   return toggle({ ...options, channels: ['color'] });
 }
 
+export function nearest({ as, ...rest }) {
+  return interactor(Nearest, { ...rest, selection: as, pointer: 'xy' });
+}
+
 export function nearestX({ as, ...rest }) {
-  return interactor(Nearest, { ...rest, selection: as, channel: 'x' });
+  return interactor(Nearest, { ...rest, selection: as, pointer: 'x' });
 }
 
 export function nearestY({ as, ...rest }) {
-  return interactor(Nearest, { ...rest, selection: as, channel: 'y' });
+  return interactor(Nearest, { ...rest, selection: as, pointer: 'y' });
 }
 
 export function intervalX({ as, ...rest }) {

package/src/plot/marks.js

@@ -5,12 +5,13 @@ import {
   Density1DMark,
   Density2DMark,
   DenseLineMark,
+  ErrorBarMark,
   GeoMark,
   HeatmapMark,
   HexbinMark,
   RasterMark,
   RasterTileMark,
-  RegressionMark
+  RegressionMark,
 } from '@uwdata/mosaic-plot';
 
 const decorators = new Set([
@@ -102,6 +103,9 @@ export const hexgrid = (...args) => mark('hexgrid', ...args);
 
 export const regressionY = (...args) => implicitType(RegressionMark, ...args);
 
+export const errorbarX = (...args) => explicitType(ErrorBarMark, 'ruleY', ...args);
+export const errorbarY = (...args) => implicitType(ErrorBarMark, 'ruleX', ...args);
+
 export const voronoi = (...args) => mark('voronoi', ...args);
 export const voronoiMesh = (...args) => mark('voronoiMesh', ...args);
 export const delaunayLink = (...args) => mark('delaunayLink', ...args);

package/src/plot/named-plots.js

@@ -19,6 +19,10 @@ export class NamedPlots extends Map {
     }
     return super.set(name, plot);
   }
+  clear() {
+    this.waiting?.clear();
+    return super.clear();
+  }
 }
 
 /**

package/src/plot/plot.js

@@ -5,5 +5,6 @@ export function plot(...directives) {
   const p = new Plot();
   directives.flat().forEach(dir => dir(p));
   connect(this, ...p.marks); // this -> optional API context
+  p.update(); // request update, needed if no marks are defined
   return p.element;
 }