@uwdata/vgplot 0.4.0 → 0.5.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@uwdata/vgplot",
-  "version": "0.4.0",
-  "description": "A Mosaic-based interactive grammar of graphics.",
+  "version": "0.5.0",
+  "description": "An API for interactive Mosaic-powered visualizations and dashboards.",
   "keywords": [
     "data",
     "visualization",
+    "interaction",
     "query",
     "database",
     "duckdb",
@@ -29,13 +30,10 @@
     "prepublishOnly": "npm run test && npm run lint && npm run build"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.13",
-    "@uwdata/mosaic-core": "^0.4.0",
-    "@uwdata/mosaic-inputs": "^0.4.0",
-    "@uwdata/mosaic-sql": "^0.4.0",
-    "d3": "^7.8.5",
-    "isoformat": "^0.2.1",
-    "topojson-client": "^3.1.0"
+    "@uwdata/mosaic-core": "^0.5.0",
+    "@uwdata/mosaic-inputs": "^0.5.0",
+    "@uwdata/mosaic-plot": "^0.5.0",
+    "@uwdata/mosaic-sql": "^0.5.0"
   },
-  "gitHead": "4114465543a21b25d6d14647db7d95af875d2519"
+  "gitHead": "92886dddfb126c1439924c5a0189e4639c3519a7"
 }

package/src/api.js

@@ -0,0 +1,292 @@
+export {
+  Param,
+  Selection,
+  coordinator
+} from '@uwdata/mosaic-core';
+
+export {
+  Fixed,
+  bin
+} from '@uwdata/mosaic-plot';
+
+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,
+  centroid, centroidX, centroidY, geojson,
+  create, loadExtension,
+  loadCSV, loadJSON, loadObjects, loadParquet, loadSpatial
+} from '@uwdata/mosaic-sql';
+
+export {
+  menu,
+  search,
+  slider,
+  table
+} from './inputs.js';
+
+export {
+  hconcat,
+  vconcat
+} from './layout/concat.js';
+
+export {
+  hspace,
+  vspace
+} from './layout/space.js';
+
+export {
+  name,
+  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,
+  colorN,
+  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 './plot/attributes.js';
+
+export {
+  from
+} from './plot/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 './plot/marks.js';
+
+export {
+  highlight,
+  intervalX,
+  intervalY,
+  intervalXY,
+  nearestX,
+  nearestY,
+  toggle,
+  toggleX,
+  toggleY,
+  toggleColor,
+  pan,
+  panX,
+  panY,
+  panZoom,
+  panZoomX,
+  panZoomY
+} from './plot/interactors.js';
+
+export {
+  colorLegend,
+  opacityLegend,
+  symbolLegend
+} from './plot/legends.js';
+
+export {
+  plot
+} from './plot/plot.js';

package/src/connect.js

@@ -0,0 +1,14 @@
+import { coordinator } from '@uwdata/mosaic-core';
+
+/**
+ * Context-sensitive connector for coordinator and clients.
+ * This method proxies access to Coordinator.connect().
+ * If the provided context object has an explicit coordinator, that is used.
+ * Otherwise the default coordinator singleton is used.
+ */
+export function connect(ctx, ...clients) {
+  const coord = ctx?.context?.coordinator ?? coordinator();
+  for (const client of clients) {
+    coord.connect(client);
+  }
+}

package/src/context.js

@@ -0,0 +1,20 @@
+import { coordinator as _coordinator } from '@uwdata/mosaic-core';
+import { NamedPlots } from './plot/named-plots.js';
+import * as vgplot from './api.js';
+
+export function createAPIContext({
+  coordinator = _coordinator(),
+  namedPlots = new NamedPlots,
+  extensions = null,
+  ...options
+} = {}) {
+  return {
+    ...vgplot,
+    ...extensions,
+    context: {
+      coordinator,
+      namedPlots,
+      ...options
+    }
+  };
+}

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);
+}