@uwdata/mosaic-plot 0.12.2 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uwdata/mosaic-plot",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "description": "A Mosaic-powered plotting framework based on Observable Plot.",
   "keywords": [
     "data",
@@ -12,27 +12,24 @@
   "license": "BSD-3-Clause",
   "author": "Jeffrey Heer (https://idl.uw.edu)",
   "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "jsdelivr": "dist/mosaic-plot.min.js",
-  "unpkg": "dist/mosaic-plot.min.js",
+  "exports": {
+    "default": "./src/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/uwdata/mosaic.git"
   },
   "scripts": {
-    "prebuild": "rimraf dist && mkdir dist",
-    "build": "node ../../esbuild.js mosaic-plot",
     "lint": "eslint src test",
     "test": "vitest run",
-    "prepublishOnly": "npm run test && npm run lint && npm run build"
+    "prepublishOnly": "npm run test && npm run lint"
   },
   "dependencies": {
-    "@observablehq/plot": "^0.6.16",
-    "@uwdata/mosaic-core": "^0.12.2",
-    "@uwdata/mosaic-sql": "^0.12.2",
+    "@observablehq/plot": "^0.6.17",
+    "@uwdata/mosaic-core": "^0.14.0",
+    "@uwdata/mosaic-sql": "^0.14.0",
     "d3": "^7.9.0",
     "isoformat": "^0.2.1"
   },
-  "gitHead": "0ca741d840b98039255f26a5ceedf10be66f790e"
+  "gitHead": "a882aab60867e4e9d9738bc950aa9de32729a806"
 }

package/src/interactors/Interval1D.js

@@ -6,6 +6,10 @@ import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Interval1D {
   constructor(mark, {
     channel,

package/src/interactors/Interval2D.js

@@ -6,6 +6,10 @@ import { getField } from './util/get-field.js';
 import { invert } from './util/invert.js';
 import { sanitizeStyles } from './util/sanitize-styles.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Interval2D {
   constructor(mark, {
     selection,

package/src/interactors/Nearest.js

@@ -2,6 +2,10 @@ import { clausePoint, clausePoints, isSelection } from '@uwdata/mosaic-core';
 import { select, pointer, min } from 'd3';
 import { getField } from './util/get-field.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Nearest {
   constructor(mark, {
     selection,
@@ -71,12 +75,14 @@ export class Nearest {
 
     // trigger activation updates
     svg.addEventListener('pointerenter', evt => {
-      if (!evt.buttons) {
-        const v = this.channels.map(() => 0);
-        selection.activate(this.clause(v));
-      }
+      if (!evt.buttons) this.activate();
     });
   }
+
+  activate() {
+    const v = this.channels.map(() => 0);
+    this.selection.activate(this.clause(v));
+  }
 }
 
 /**

package/src/interactors/PanZoom.js

@@ -4,6 +4,10 @@ import { getField } from './util/get-field.js';
 
 const asc = (a, b) => a - b;
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class PanZoom {
   constructor(mark, {
     x = new Selection(),
@@ -59,7 +63,7 @@ export class PanZoom {
     this.svg = svg;
     if (this.initialized) return; else this.initialized = true;
 
-    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
+    const { panx, pany, mark: { plot: { element } } } = this;
 
     this.xscale = svg.scale('x');
     this.yscale = svg.scale('y');
@@ -85,19 +89,22 @@ export class PanZoom {
       let enter = false;
       element.addEventListener('pointerenter', evt => {
         if (enter) return; else enter = true;
-        if (evt.buttons) return; // don't activate if mouse down
-        if (panx) {
-          const { xscale, xfield } = this;
-          xsel.activate(this.clause(xscale.domain, xfield, xscale));
-        }
-        if (pany) {
-          const { yscale, yfield } = this;
-          ysel.activate(this.clause(yscale.domain, yfield, yscale));
-        }
+        if (!evt.buttons) this.activate(); // don't activate if mouse down
       });
       element.addEventListener('pointerleave', () => enter = false);
     }
   }
+
+  activate() {
+    if (this.panx) {
+      const { xscale, xfield } = this;
+      this.xsel.activate(this.clause(xscale.domain, xfield, xscale));
+    }
+    if (this.pany) {
+      const { yscale, yfield } = this;
+      this.ysel.activate(this.clause(yscale.domain, yfield, yscale));
+    }
+  }
 }
 
 function extent(ext, defaultTrue, defaultFalse) {

package/src/interactors/Region.js

@@ -8,6 +8,10 @@ import { sanitizeStyles } from './util/sanitize-styles.js';
 import { neqSome } from './util/neq.js';
 import { getDatum } from './util/get-datum.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Region {
   constructor(mark, {
     channels,

package/src/interactors/Toggle.js

@@ -2,6 +2,10 @@ import { clausePoints } from '@uwdata/mosaic-core';
 import { getDatum } from './util/get-datum.js';
 import { neq, neqSome } from './util/neq.js';
 
+/**
+ * @import {Activatable} from '@uwdata/mosaic-core'
+ * @implements {Activatable}
+ */
 export class Toggle {
   /**
    * @param {*} mark The mark to interact with.
@@ -12,8 +16,8 @@ export class Toggle {
     channels,
     peers = true
   }) {
-    this.value = null;
     this.mark = mark;
+    this.value = null;
     this.selection = selection;
     this.peers = peers;
     const fields = this.fields = [];
@@ -75,10 +79,13 @@ export class Toggle {
     });
 
     svg.addEventListener('pointerenter', evt => {
-      if (evt.buttons) return;
-      this.selection.activate(this.clause([this.fields.map(() => 0)]));
+      if (!evt.buttons) this.activate();
     });
   }
+
+  activate() {
+    this.selection.activate(this.clause([this.fields.map(() => 0)]));
+  }
 }
 
 function isTargetElement(groups, node) {

package/src/marks/ConnectedMark.js

@@ -39,7 +39,7 @@ export class ConnectedMark extends Mark {
         .filter(c => c !== as && c !== value);
       return m4(q, expr, as, value, cols);
     } else {
-      return q.orderby(field);
+      return q.orderby(as);
     }
   }
 }

package/src/marks/Mark.js

@@ -230,7 +230,7 @@ export function markQuery(channels, table, skip = []) {
     if (skip.includes(channel)) continue;
 
     if (channel === 'orderby') {
-      q.orderby(c.value);
+      q.orderby(c.value ?? field);
     } else if (field) {
       if (isAggregateExpression(field)) {
         aggr = true;

package/src/plot.js

@@ -10,19 +10,30 @@ const DEFAULT_ATTRIBUTES = {
 };
 
 export class Plot {
+  /**
+   * @param {HTMLElement} [element]
+   */
   constructor(element) {
+    /** @type {Record<string, any>} */
     this.attributes = { ...DEFAULT_ATTRIBUTES };
     this.listeners = null;
     this.interactors = [];
+    /** @type {{ legend: import('./legend.js').Legend, include: boolean }[]} */
     this.legends = [];
+    /** @type {import('./marks/Mark.js').Mark[]} */
     this.marks = [];
+    /** @type {Set<import('./marks/Mark.js').Mark> | null} */
     this.markset = null;
+    /** @type {Map<import('@uwdata/mosaic-core').Param, import('./marks/Mark.js').Mark[]>} */
+    this.params = new Map;
+    /** @type {ReturnType<synchronizer>} */
+    this.synch = synchronizer();
+
+    /** @type {HTMLElement} */
     this.element = element || document.createElement('div');
     this.element.setAttribute('class', 'plot');
     this.element.style.display = 'flex';
-    this.element.value = this;
-    this.params = new Map;
-    this.synch = synchronizer();
+    Object.assign(this.element, { value: this });
   }
 
   margins() {

package/src/transforms/bin.js

@@ -1,8 +1,6 @@
-import { ExprNode, add, dateBin, div, float64, floor, interval, mul, sub } from '@uwdata/mosaic-sql';
+import { ExprNode, binDate, binHistogram } from '@uwdata/mosaic-sql';
 import { Transform } from '../symbols.js';
 import { channelScale } from '../marks/util/channel-scale.js';
-import { bins } from './bin-step.js';
-import { timeInterval } from './time-interval.js';
 
 const EXTENT = new Set([
   'rectY-x', 'rectX-y', 'rect-x', 'rect-y', 'ruleY-x', 'ruleX-y'
@@ -54,29 +52,12 @@ class BinTransformNode extends ExprNode {
   toString() {
     const { mark, channel, column, options } = this;
     const { type, min, max } = mark.channelField(channel);
-    const { interval: i, steps, offset = 0 } = options;
-    const ival = i ?? (
-      type === 'date' || hasTimeScale(mark, channel) ? 'date' : 'number'
-    );
-
-    let result;
-    if (ival === 'number') {
-      // perform number binning
-      const { apply, sqlApply, sqlInvert } = channelScale(mark, channel);
-      const b = bins(apply(min), apply(max), options);
-      const col = sqlApply(column);
-      const alpha = float64((b.max - b.min) / b.steps);
-      const bin = floor(div(b.min === 0 ? col : sub(col, b.min), alpha));
-      const expr = add(b.min, mul(alpha, offset ? add(offset, bin) : bin));
-      result = sqlInvert(expr);
-    } else {
-      // perform date/time binning
-      const { interval: unit, step = 1 } = ival === 'date'
-        ? timeInterval(min, max, steps || 40)
-        : options;
-      const bin = dateBin(column, unit, step);
-      result = offset ? add(bin, interval(unit, offset * step)) : bin;
-    }
+    const isDate = options.interval
+      || type === 'date'
+      || hasTimeScale(mark, channel);
+    const result = isDate
+      ? binDate(column, [min, max], options)
+      : binHistogram(column, [min, max], options, channelScale(mark, channel));
     return `${result}`;
   }
 }

package/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({});

package/src/transforms/bin-step.js

@@ -1,43 +0,0 @@
-export function binStep(span, steps, minstep = 0, logb = Math.LN10) {
-  let v;
-
-  const level = Math.ceil(Math.log(steps) / logb);
-  let step = Math.max(
-    minstep,
-    Math.pow(10, Math.round(Math.log(span) / logb) - level)
-  );
-
-  // increase step size if too many bins
-  while (Math.ceil(span / step) > steps) { step *= 10; }
-
-  // decrease step size if allowed
-  const div = [5, 2];
-  for (let i = 0, n = div.length; i < n; ++i) {
-    v = step / div[i];
-    if (v >= minstep && span / v <= steps) step = v;
-  }
-
-  return step;
-}
-
-export function bins(min, max, options) {
-  let { step, steps, minstep = 0, nice = true } = options;
-
-  if (nice !== false) {
-    // use span to determine step size
-    const span = max - min;
-    const logb = Math.LN10;
-    step = step || binStep(span, steps || 25, minstep, logb);
-
-    // adjust min/max relative to step
-    let v = Math.log(step);
-    const precision = v >= 0 ? 0 : ~~(-v / logb) + 1;
-    const eps = Math.pow(10, -precision - 1);
-    v = Math.floor(min / step + eps) * step;
-    min = min < v ? v - step : v;
-    max = Math.ceil(max / step) * step;
-    steps = Math.round((max - min) / step);
-  }
-
-  return { min, max, steps };
-}

package/src/transforms/time-interval.js

@@ -1,53 +0,0 @@
-import { bisector } from 'd3';
-import { binStep } from './bin-step.js';
-
-const YEAR = 'year';
-const MONTH = 'month';
-const DAY = 'day';
-const HOUR = 'hour';
-const MINUTE = 'minute';
-const SECOND = 'second';
-const MILLISECOND = 'millisecond';
-
-const durationSecond = 1000;
-const durationMinute = durationSecond * 60;
-const durationHour = durationMinute * 60;
-const durationDay = durationHour * 24;
-const durationWeek = durationDay * 7;
-const durationMonth = durationDay * 30;
-const durationYear = durationDay * 365;
-
-/** @type {[string, number, number][]} */
-const intervals = [
-  [SECOND,  1,      durationSecond],
-  [SECOND,  5,  5 * durationSecond],
-  [SECOND, 15, 15 * durationSecond],
-  [SECOND, 30, 30 * durationSecond],
-  [MINUTE,  1,      durationMinute],
-  [MINUTE,  5,  5 * durationMinute],
-  [MINUTE, 15, 15 * durationMinute],
-  [MINUTE, 30, 30 * durationMinute],
-  [  HOUR,  1,      durationHour  ],
-  [  HOUR,  3,  3 * durationHour  ],
-  [  HOUR,  6,  6 * durationHour  ],
-  [  HOUR, 12, 12 * durationHour  ],
-  [   DAY,  1,      durationDay   ],
-  [   DAY,  7,      durationWeek  ],
-  [ MONTH,  1,      durationMonth ],
-  [ MONTH,  3,  3 * durationMonth ],
-  [  YEAR,  1,      durationYear  ]
-];
-
-export function timeInterval(min, max, steps) {
-  const span = max - min;
-  const target = span / steps;
-  let i = bisector(i => i[2]).right(intervals, target);
-  if (i === intervals.length) {
-    return { interval: YEAR, step: binStep(span / durationYear, steps) };
-  } else if (i) {
-    i = intervals[target / intervals[i - 1][2] < intervals[i][2] / target ? i - 1 : i];
-    return { interval: i[0], step: i[1] };
-  } else {
-    return { interval: MILLISECOND, step: binStep(span, steps, 1) };
-  }
-}