@uwdata/vgplot 0.4.0 → 0.6.0

package/src/index.js

@@ -1,316 +1,27 @@
 export {
   Coordinator,
   MosaicClient,
-  Param,
-  Selection,
-  coordinator,
-  restConnector, socketConnector, wasmConnector
+  restConnector,
+  socketConnector,
+  wasmConnector
 } from '@uwdata/mosaic-core';
 
-export {
-  menu,
-  search,
-  slider,
-  table
-} from '@uwdata/mosaic-inputs';
-
-export {
-  Query, agg, sql, column, literal,
-  cast, castDouble, castInteger,
-  argmax, argmin, arrayAgg, avg, count, corr, covarPop, entropy,
-  kurtosis, mad, max, median, min, mode, last, product, quantile,
-  skewness, stddev, stddevPop, stringAgg, sum, variance, varPop,
-  row_number, rank, dense_rank, percent_rank, cume_dist,
-  ntile, lag, lead, first_value, last_value, nth_value,
-  dateDay, dateMonth, dateMonthDay,
-  and, or, not, eq, neq, gt, gte, lt, lte,
-  isBetween, isNotBetween,
-  isDistinct, isNotDistinct,
-  isNull, isNotNull,
-  loadCSV, loadJSON, loadObjects, loadParquet
-} from '@uwdata/mosaic-sql';
-
-export {
-  bin
-} from './transforms/index.js';
-
-export {
-  name,
-  attribute,
-  attributes,
-  margins,
-  xyDomain,
-  style,
-  width,
-  height,
-  margin,
-  marginLeft,
-  marginRight,
-  marginTop,
-  marginBottom,
-  align,
-  aspectRatio,
-  axis,
-  inset,
-  grid,
-  label,
-  padding,
-  round,
-  xScale,
-  xDomain,
-  xRange,
-  xNice,
-  xInset,
-  xInsetLeft,
-  xInsetRight,
-  xClamp,
-  xRound,
-  xAlign,
-  xPadding,
-  xPaddingInner,
-  xPaddingOuter,
-  xAxis,
-  xTicks,
-  xTickSize,
-  xTickSpacing,
-  xTickPadding,
-  xTickFormat,
-  xTickRotate,
-  xGrid,
-  xLine,
-  xLabel,
-  xLabelAnchor,
-  xLabelOffset,
-  xFontVariant,
-  xAriaLabel,
-  xAriaDescription,
-  xReverse,
-  xZero,
-  yScale,
-  yDomain,
-  yRange,
-  yNice,
-  yInset,
-  yInsetTop,
-  yInsetBottom,
-  yClamp,
-  yRound,
-  yAlign,
-  yPadding,
-  yPaddingInner,
-  yPaddingOuter,
-  yAxis,
-  yTicks,
-  yTickSize,
-  yTickSpacing,
-  yTickPadding,
-  yTickFormat,
-  yTickRotate,
-  yGrid,
-  yLine,
-  yLabel,
-  yLabelAnchor,
-  yLabelOffset,
-  yFontVariant,
-  yAriaLabel,
-  yAriaDescription,
-  yReverse,
-  yZero,
-  facetMargin,
-  facetMarginTop,
-  facetMarginBottom,
-  facetMarginLeft,
-  facetMarginRight,
-  facetGrid,
-  facetLabel,
-  fxDomain,
-  fxRange,
-  fxNice,
-  fxInset,
-  fxInsetLeft,
-  fxInsetRight,
-  fxRound,
-  fxAlign,
-  fxPadding,
-  fxPaddingInner,
-  fxPaddingOuter,
-  fxAxis,
-  fxTicks,
-  fxTickSize,
-  fxTickSpacing,
-  fxTickPadding,
-  fxTickFormat,
-  fxTickRotate,
-  fxGrid,
-  fxLine,
-  fxLabel,
-  fxLabelAnchor,
-  fxLabelOffset,
-  fxFontVariant,
-  fxAriaLabel,
-  fxAriaDescription,
-  fxReverse,
-  fyDomain,
-  fyRange,
-  fyNice,
-  fyInset,
-  fyInsetTop,
-  fyInsetBottom,
-  fyRound,
-  fyAlign,
-  fyPadding,
-  fyPaddingInner,
-  fyPaddingOuter,
-  fyAxis,
-  fyTicks,
-  fyTickSize,
-  fyTickSpacing,
-  fyTickPadding,
-  fyTickFormat,
-  fyTickRotate,
-  fyGrid,
-  fyLine,
-  fyLabel,
-  fyLabelAnchor,
-  fyLabelOffset,
-  fyFontVariant,
-  fyAriaLabel,
-  fyAriaDescription,
-  fyReverse,
-  colorScale,
-  colorDomain,
-  colorRange,
-  colorClamp,
-  colorNice,
-  colorScheme,
-  colorInterpolate,
-  colorPivot,
-  colorSymmetric,
-  colorLabel,
-  colorReverse,
-  colorZero,
-  colorTickFormat,
-  opacityScale,
-  opacityDomain,
-  opacityRange,
-  opacityClamp,
-  opacityNice,
-  opacityLabel,
-  opacityReverse,
-  opacityZero,
-  opacityTickFormat,
-  rScale,
-  rDomain,
-  rRange,
-  rClamp,
-  rNice,
-  rZero,
-  lengthScale,
-  lengthDomain,
-  lengthRange,
-  lengthClamp,
-  lengthNice,
-  lengthZero,
-  projectionType,
-  projectionParallels,
-  projectionPrecision,
-  projectionRotate,
-  projectionDomain,
-  projectionInset,
-  projectionInsetLeft,
-  projectionInsetRight,
-  projectionInsetTop,
-  projectionInsetBottom,
-  projectionClip,
-} from './directives/attributes.js';
-
-export {
-  from
-} from './directives/data.js';
-
-export {
-  area, areaX, areaY,
-  line, lineX, lineY,
-  barX, barY,
-  cell, cellX, cellY,
-  rect, rectX, rectY,
-  dot, dotX, dotY, circle, hexagon,
-  text, textX, textY,
-  image,
-  tickX, tickY,
-  ruleX, ruleY,
-  density, densityX, densityY, denseLine,
-  raster, rasterTile,
-  contour,
-  hexbin, hexgrid,
-  regressionY,
-  vector, vectorX, vectorY, spike,
-  voronoi, voronoiMesh, delaunayLink, delaunayMesh, hull,
-  arrow, link,
-  frame,
-  axisX, axisY, axisFx, axisFy,
-  gridX, gridY, gridFx, gridFy,
-  geo, sphere, graticule
-} from './directives/marks.js';
-
-export {
-  highlight,
-  intervalX,
-  intervalY,
-  intervalXY,
-  nearestX,
-  nearestY,
-  toggle,
-  toggleX,
-  toggleY,
-  toggleColor,
-  pan,
-  panX,
-  panY,
-  panZoom,
-  panZoomX,
-  panZoomY
-} from './directives/interactors.js';
-
-export {
-  colorLegend,
-  opacityLegend,
-  symbolLegend
-} from './directives/legends.js';
+export * from './api.js';
 
 export {
   namedPlots,
-  plot,
-  reset
-} from './directives/plot.js';
-
-export {
-  hconcat,
-  vconcat
-} from './layout/concat.js';
-
-export {
-  hspace,
-  vspace
-} from './layout/space.js';
-
-export {
-  Fixed
-} from './symbols.js';
+  requestNamedPlot
+} from './plot/named-plots.js';
 
 export {
-  parseSpec,
-  ParseContext
-} from './spec/parse-spec.js';
+  connect
+} from './connect.js';
 
 export {
-  specToModule
-} from './spec/to-module.js';
+  createAPIContext
+} from './context.js';
 
-export {
-  Plot
-} from './plot.js';
-
-export {
-  Mark
-} from './marks/Mark.js';
+export * as attributeDirectives from './plot/attributes.js';
+export * as markDirectives from './plot/marks.js';
+export * as interactorDirectives from './plot/interactors.js';
+export * as legendDirectives from './plot/legends.js';

package/src/inputs.js

@@ -0,0 +1,24 @@
+import { Menu, Search, Slider, Table } from '@uwdata/mosaic-inputs';
+import { connect } from './connect.js';
+
+function input(ctx, InputClass, options) {
+  const input = new InputClass(options);
+  connect(ctx, input); // ctx <- optional API context
+  return input.element;
+}
+
+export function menu(options) {
+  return input(this, Menu, options);
+}
+
+export function search(options) {
+  return input(this, Search, options);
+}
+
+export function slider(options) {
+  return input(this, Slider, options);
+}
+
+export function table(options) {
+  return input(this, Table, options);
+}

package/src/{directives → plot}/attributes.js

@@ -1,8 +1,8 @@
 import { isParam } from '@uwdata/mosaic-core';
-import { namedPlots } from './plot.js';
+import { setNamedPlot } from './named-plots.js';
 
 export function name(name) {
-  return plot => namedPlots.set(name, plot);
+  return plot => setNamedPlot(this, name, plot);
 }
 
 function setAttribute(plot, name, value) {
@@ -19,11 +19,11 @@ function setAttribute(plot, name, value) {
   }
 }
 
-export function attribute(name, value) {
+function attribute(name, value) {
   return plot => { setAttribute(plot, name, value); };
 }
 
-export function attributes(values) {
+function attributes(values) {
   return plot => {
     for (const [name, value] of Object.entries(values)) {
       setAttribute(plot, name, value)
@@ -41,6 +41,15 @@ export function margins(object) {
   return attributes(attr);
 }
 
+export function margin(value) {
+  return attributes({
+    marginTop: value,
+    marginBottom: value,
+    marginLeft: value,
+    marginRight: value
+  });
+}
+
 export function xyDomain(value) {
   return attributes({ xDomain: value, yDomain: value });
 }
@@ -51,7 +60,6 @@ const attrf = name => value => attribute(name, value);
 export const style = attrf('style');
 export const width = attrf('width');
 export const height = attrf('height');
-export const margin = attrf('margin');
 export const marginLeft = attrf('marginLeft');
 export const marginRight = attrf('marginRight');
 export const marginTop = attrf('marginTop');
@@ -96,6 +104,9 @@ export const xAriaLabel = attrf('xAriaLabel');
 export const xAriaDescription = attrf('xAriaDescription');
 export const xReverse = attrf('xReverse');
 export const xZero = attrf('xZero');
+export const xBase = attrf('xBase');
+export const xExponent = attrf('xExponent');
+export const xConstant = attrf('xConstant');
 
 // y scale attributes
 export const yScale = attrf('yScale');
@@ -128,6 +139,9 @@ export const yAriaLabel = attrf('yAriaLabel');
 export const yAriaDescription = attrf('yAriaDescription');
 export const yReverse = attrf('yReverse');
 export const yZero = attrf('yZero');
+export const yBase = attrf('yBase');
+export const yExponent = attrf('yExponent');
+export const yConstant = attrf('yConstant');
 
 // facet attributes
 export const facetMargin = attrf('facetMargin');
@@ -201,6 +215,7 @@ export const colorScale = attrf('colorScale');
 export const colorDomain = attrf('colorDomain');
 export const colorRange = attrf('colorRange');
 export const colorClamp = attrf('colorClamp');
+export const colorN = attrf('colorN');
 export const colorNice = attrf('colorNice');
 export const colorScheme = attrf('colorScheme');
 export const colorInterpolate = attrf('colorInterpolate');
@@ -210,6 +225,9 @@ export const colorLabel = attrf('colorLabel');
 export const colorReverse = attrf('colorReverse');
 export const colorZero = attrf('colorZero');
 export const colorTickFormat = attrf('colorTickFormat');
+export const colorBase = attrf('colorBase');
+export const colorExponent = attrf('colorExponent');
+export const colorConstant = attrf('colorConstant');
 
 // opacity scale attributes
 export const opacityScale = attrf('opacityScale');
@@ -221,6 +239,9 @@ export const opacityLabel = attrf('opacityLabel');
 export const opacityReverse = attrf('opacityReverse');
 export const opacityZero = attrf('opacityZero');
 export const opacityTickFormat = attrf('opacityTickFormat');
+export const opacityBase = attrf('opacityBase');
+export const opacityExponent = attrf('opacityExponent');
+export const opacityConstant = attrf('opacityConstant');
 
 // r scale attributes
 export const rScale = attrf('rScale');
@@ -229,6 +250,9 @@ export const rRange = attrf('rRange');
 export const rClamp = attrf('rClamp');
 export const rNice = attrf('rNice');
 export const rZero = attrf('rZero');
+export const rBase = attrf('rBase');
+export const rExponent = attrf('rExponent');
+export const rConstant = attrf('rConstant');
 
 // length scale attributes
 export const lengthScale = attrf('lengthScale');
@@ -237,6 +261,9 @@ export const lengthRange = attrf('lengthRange');
 export const lengthClamp = attrf('lengthClamp');
 export const lengthNice = attrf('lengthNice');
 export const lengthZero = attrf('lengthZero');
+export const lengthBase = attrf('lengthBase');
+export const lengthExponent = attrf('lengthExponent');
+export const lengthConstant = attrf('lengthConstant');
 
 // projection attributes
 export const projectionType = attrf('projectionType');

package/src/{directives → plot}/interactors.js

@@ -1,9 +1,11 @@
-import { Highlight } from '../interactors/Highlight.js';
-import { Toggle } from '../interactors/Toggle.js';
-import { Interval1D } from '../interactors/Interval1D.js';
-import { Interval2D } from '../interactors/Interval2D.js';
-import { PanZoom } from '../interactors/PanZoom.js';
-import { Nearest } from '../interactors/Nearest.js';
+import {
+  Highlight,
+  Toggle,
+  Interval1D,
+  Interval2D,
+  PanZoom,
+  Nearest
+} from '@uwdata/mosaic-plot';
 
 function interactor(InteractorClass, options) {
   return plot => {

package/src/{directives → plot}/legends.js

@@ -1,5 +1,5 @@
-import { Legend } from '../legend.js';
-import { namedPlots } from './plot.js';
+import { Legend } from '@uwdata/mosaic-plot';
+import { requestNamedPlot } from './named-plots.js';
 
 function legend(channel, options = {}) {
   if (options.for) {
@@ -8,7 +8,7 @@ function legend(channel, options = {}) {
     const type = typeof maybePlot;
     const add = plot => plot.addLegend(legend, false);
     if (type === 'string') {
-      namedPlots.request(maybePlot, add);
+      requestNamedPlot(this, maybePlot, add);
     } else if (maybePlot.value) {
       add(maybePlot.value);
     }
@@ -18,6 +18,14 @@ function legend(channel, options = {}) {
   }
 }
 
-export const colorLegend = options => legend('color', options);
-export const opacityLegend = options => legend('opacity', options);
-export const symbolLegend = options => legend('symbol', options);
+export function colorLegend(options) {
+  return legend.call(this, 'color', options);
+}
+
+export function opacityLegend(options) {
+  return legend.call(this, 'opacity', options);
+}
+
+export function symbolLegend(options) {
+  return legend.call(this, 'symbol', options);
+}

package/src/{directives → plot}/marks.js

@@ -1,13 +1,17 @@
-import { Mark } from '../marks/Mark.js';
-import { ConnectedMark } from '../marks/ConnectedMark.js';
-import { Density1DMark } from '../marks/Density1DMark.js';
-import { Density2DMark } from '../marks/Density2DMark.js';
-import { DenseLineMark } from '../marks/DenseLineMark.js';
-import { ContourMark } from '../marks/ContourMark.js';
-import { HexbinMark } from '../marks/HexbinMark.js';
-import { RasterMark } from '../marks/RasterMark.js';
-import { RasterTileMark } from '../marks/RasterTileMark.js';
-import { RegressionMark } from '../marks/RegressionMark.js';
+import {
+  Mark,
+  ConnectedMark,
+  ContourMark,
+  Density1DMark,
+  Density2DMark,
+  DenseLineMark,
+  GeoMark,
+  HeatmapMark,
+  HexbinMark,
+  RasterMark,
+  RasterTileMark,
+  RegressionMark
+} from '@uwdata/mosaic-plot';
 
 const decorators = new Set([
   'frame',
@@ -17,8 +21,8 @@ const decorators = new Set([
   'graticule', 'sphere'
 ]);
 
-function mark(type, data, channels) {
-  if (arguments.length === 2) {
+function mark(type, data, channels = {}) {
+  if (arguments.length === 2 && !Array.isArray(data)) {
     channels = data;
     data = decorators.has(type) ? null : [{}];
   }
@@ -89,6 +93,7 @@ export const densityY = (...args) => explicitType(Density1DMark, 'areaY', ...arg
 export const density = (...args) => implicitType(Density2DMark, ...args);
 export const denseLine = (...args) => implicitType(DenseLineMark, ...args);
 export const contour = (...args) => implicitType(ContourMark, ...args);
+export const heatmap = (...args) => implicitType(HeatmapMark, ...args);
 export const raster = (...args) => implicitType(RasterMark, ...args);
 export const rasterTile = (...args) => implicitType(RasterTileMark, ...args);
 
@@ -118,6 +123,6 @@ export const gridY = (...args) => mark('gridY', ...args);
 export const gridFx = (...args) => mark('gridFx', ...args);
 export const gridFy = (...args) => mark('gridFy', ...args);
 
-export const geo = (...args) => mark('geo', ...args);
+export const geo = (...args) => implicitType(GeoMark, ...args);
 export const sphere = (...args) => mark('sphere', ...args);
 export const graticule = (...args) => mark('graticule', ...args);

package/src/plot/named-plots.js

@@ -0,0 +1,49 @@
+export class NamedPlots extends Map {
+  request(name, callback) {
+    if (this.has(name)) {
+      callback(this.get(name));
+    } else {
+      const waiting = this.waiting || (this.waiting = new Map);
+      const list = waiting.get(name) || [];
+      waiting.set(name, list.concat(callback));
+    }
+  }
+  set(name, plot) {
+    if (this.has(name)) {
+      console.warn(`Overwriting named plot "${name}".`);
+    }
+    const { waiting } = this;
+    if (waiting?.has(name)) {
+      waiting.get(name).forEach(fn => fn(plot));
+      waiting.delete(name);
+    }
+    return super.set(name, plot);
+  }
+}
+
+/**
+ * Default instance of named plots map.
+ */
+export const namedPlots = new NamedPlots();
+
+/**
+ * Context-sensitive lookup of named plots.
+ * This method proxies access to the NamedPlots.request().
+ * If the provided context object has a local namedPlots, that is used.
+ * Otherwise the default instance is used.
+ */
+export function requestNamedPlot(ctx, name, callback) {
+  const map = ctx?.context?.namedPlots ?? namedPlots;
+  map.request(name, callback);
+}
+
+/**
+ * Context-sensitive addition of named plots.
+ * This method proxies access to the NamedPlots.set().
+ * If the provided context object has a local namedPlots, that is used.
+ * Otherwise the default instance is used.
+ */
+export function setNamedPlot(ctx, name, plot) {
+  const map = ctx?.context?.namedPlots ?? namedPlots;
+  map.set(name, plot);
+}

package/src/plot/plot.js

@@ -0,0 +1,9 @@
+import { Plot } from '@uwdata/mosaic-plot';
+import { connect } from '../connect.js';
+
+export function plot(...directives) {
+  const p = new Plot();
+  directives.flat().forEach(dir => dir(p));
+  connect(this, ...p.marks); // this -> optional API context
+  return p.element;
+}

package/src/directives/plot.js

@@ -1,39 +0,0 @@
-import { coordinator } from '@uwdata/mosaic-core';
-import { Plot } from '../plot.js';
-
-export function plot(...directives) {
-  const p = new Plot();
-  directives.flat().forEach(dir => dir(p));
-  p.marks.forEach(mark => coordinator().connect(mark));
-  return p.element;
-}
-
-export class NamedPlots extends Map {
-  request(name, callback) {
-    if (this.has(name)) {
-      callback(this.get(name));
-    } else {
-      const waiting = this.waiting || (this.waiting = new Map);
-      const list = waiting.get(name) || [];
-      waiting.set(name, list.concat(callback));
-    }
-  }
-  set(name, plot) {
-    if (this.has(name)) {
-      console.warn(`Overwriting named plot "${name}".`);
-    }
-    const { waiting } = this;
-    if (waiting?.has(name)) {
-      waiting.get(name).forEach(fn => fn(plot));
-      waiting.delete(name);
-    }
-    return super.set(name, plot);
-  }
-}
-
-export const namedPlots = new NamedPlots();
-
-export function reset() {
-  namedPlots.clear();
-  coordinator().clear();
-}