@uwdata/vgplot 0.4.0 → 0.5.0

package/src/interactors/PanZoom.js

@@ -1,121 +0,0 @@
-import { select, zoom, ZoomTransform } from 'd3';
-import { Selection } from '@uwdata/mosaic-core';
-import { isBetween } from '@uwdata/mosaic-sql';
-import { getField } from './util/get-field.js';
-
-const asc = (a, b) => a - b;
-
-export class PanZoom {
-  constructor(mark, {
-    x = new Selection(),
-    y = new Selection(),
-    xfield,
-    yfield,
-    zoom = true,
-    panx = true,
-    pany = true
-  }) {
-    this.mark = mark;
-    this.xsel = x;
-    this.ysel = y;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
-    this.zoom = extent(zoom, [0, Infinity], [1, 1]);
-    this.panx = this.xsel && panx;
-    this.pany = this.ysel && pany;
-
-    const { plot } = mark;
-    if (panx) {
-      this.xsel.addEventListener('value', value => {
-        if (plot.setAttribute('xDomain', value)) plot.update();
-      });
-    }
-    if (pany) {
-      this.ysel.addEventListener('value', value => {
-        if (plot.setAttribute('yDomain', value)) plot.update();
-      });
-    }
-  }
-
-  publish(transform) {
-    if (this.panx) {
-      const xdom = rescaleX(transform, this.xscale);
-      this.xsel.update(this.clause(xdom, this.xfield, this.xscale));
-    }
-    if (this.pany) {
-      const ydom = rescaleY(transform, this.yscale);
-      this.ysel.update(this.clause(ydom, this.yfield, this.yscale));
-    }
-  }
-
-  clause(value, field, scale) {
-    return {
-      source: this,
-      schema: { type: 'interval', scales: [scale] },
-      clients: this.mark.plot.markSet,
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
-  }
-
-  init(svg) {
-    this.svg = svg;
-    if (this.initialized) return; else this.initialized = true;
-
-    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
-
-    this.xscale = svg.scale('x');
-    this.yscale = svg.scale('y');
-    const rx = this.xscale.range.slice().sort(asc);
-    const ry = this.yscale.range.slice().sort(asc);
-    const tx = extent(panx, [-Infinity, Infinity], rx);
-    const ty = extent(pany, [-Infinity, Infinity], ry);
-
-    const z = zoom()
-      .extent([[rx[0], ry[0]], [rx[1], ry[1]]])
-      .scaleExtent(this.zoom)
-      .translateExtent([[tx[0], ty[0]], [tx[1], ty[1]]])
-      .on('start', () => {
-        this.xscale = this.svg.scale('x');
-        this.yscale = this.svg.scale('y');
-      })
-      .on('end', () => element.__zoom = new ZoomTransform(1, 0, 0))
-      .on('zoom', ({ transform }) => this.publish(transform));
-
-    select(element).call(z);
-
-    if (panx || pany) {
-      let enter = false;
-      element.addEventListener('mouseenter', () => {
-        if (enter) return; else enter = true;
-        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));
-        }
-      });
-      element.addEventListener('mouseleave', () => enter = false);
-    }
-  }
-}
-
-function extent(ext, defaultTrue, defaultFalse) {
-  return ext
-    ? (Array.isArray(ext) ? ext : defaultTrue)
-    : defaultFalse;
-}
-
-function rescaleX(transform, scale) {
-  return scale.range
-    .map(transform.invertX, transform)
-    .map(scale.invert, scale);
-}
-
-function rescaleY(transform, scale) {
-  return scale.range
-    .map(transform.invertY, transform)
-    .map(scale.invert, scale);
-}

package/src/interactors/Toggle.js

@@ -1,111 +0,0 @@
-import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
-
-export class Toggle {
-  constructor(mark, {
-    selection,
-    channels,
-    peers = true
-  }) {
-    this.value = null;
-    this.mark = mark;
-    this.selection = selection;
-    this.peers = peers;
-    this.channels = channels.map(c => {
-      const q = c === 'color' ? ['fill', 'stroke']
-        : c === 'x' ? ['x', 'x1', 'x2']
-        : c === 'y' ? ['y', 'y1', 'y2']
-        : [c];
-      for (let i = 0; i < q.length; ++i) {
-        const f = mark.channelField(q[i]);
-        if (f) return {
-          field: f.field?.basis || f.field,
-          as: f.as
-        };
-      }
-      throw new Error(`Missing channel: ${c}`);
-    });
-  }
-
-  clause(value) {
-    const { channels, mark } = this;
-    let predicate = null;
-
-    if (value) {
-      const clauses = value.map(vals => {
-        const list = vals.map((v, i) => {
-          return isNotDistinct(channels[i].field, literal(v));
-        });
-        return list.length > 1 ? and(list) : list[0];
-      });
-      predicate = clauses.length > 1 ? or(clauses) : clauses[0];
-    }
-
-    return {
-      source: this,
-      schema: { type: 'point' },
-      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate
-    };
-  }
-
-  init(svg, selector, accessor) {
-    const { mark, channels, selection } = this;
-    const { data } = mark;
-    accessor = accessor || (target => {
-      const datum = data[target.__data__];
-      return channels.map(c => datum[c.as]);
-    });
-
-    selector = selector || `[data-index="${mark.index}"]`;
-    const groups = new Set(svg.querySelectorAll(selector));
-
-    svg.addEventListener('pointerdown', evt => {
-      const state = selection.single ? selection.value : this.value;
-      const target = evt.target;
-      let value = null;
-
-      if (isTargetElement(groups, target)) {
-        const point = accessor(target);
-        if (evt.shiftKey && state?.length) {
-          value = state.filter(s => neq(s, point));
-          if (value.length === state.length) value.push(point);
-        } else if (state?.length === 1 && !neq(state[0], point)) {
-          value = null;
-        } else {
-          value = [point];
-        }
-      }
-
-      this.value = value;
-      if (neqSome(state, value)) {
-        selection.update(this.clause(value));
-      }
-    });
-
-    svg.addEventListener('pointerenter', () => {
-      this.selection.activate(this.clause([this.channels.map(() => 0)]));
-    });
-  }
-}
-
-function isTargetElement(groups, node) {
-  return groups.has(node)
-    || groups.has(node.parentNode)
-    || groups.has(node.parentNode?.parentNode);
-}
-
-function neqSome(a, b) {
-  return (a == null || b == null)
-    ? (a != null || b != null)
-    : (a.length !== b.length || a.some((x, i) => neq(x, b[i])));
-}
-
-function neq(a, b) {
-  const n = a.length;
-  if (b.length !== n) return true;
-  for (let i = 0; i < n; ++i) {
-    if (a[i] !== b[i]) return true;
-  }
-  return false;
-}

package/src/interactors/util/brush.js

@@ -1,45 +0,0 @@
-import {
-  brush as d3_brush, brushX as d3_brushX, brushY as d3_brushY
-} from 'd3';
-
-function wrap(brush) {
-  const brushOn = brush.on;
-  let enabled = true;
-
-  function silence(callback) {
-    enabled = false;
-    callback();
-    enabled = true;
-  }
-
-  brush.reset = (...args) => {
-    silence(() => brush.clear(...args));
-  };
-
-  brush.moveSilent = (...args) => {
-    silence(() => brush.move(...args));
-  };
-
-  brush.on = (...args) => {
-    if (args.length > 1 && args[1]) {
-      // wrap callback to respect enabled flag
-      const callback = args[1];
-      args[1] = (...event) => enabled && callback(...event);
-    }
-    return brushOn(...args);
-  };
-
-  return brush;
-}
-
-export function brush() {
-  return wrap(d3_brush());
-}
-
-export function brushX() {
-  return wrap(d3_brushX());
-}
-
-export function brushY() {
-  return wrap(d3_brushY());
-}

package/src/interactors/util/close-to.js

@@ -1,9 +0,0 @@
-const EPS = 1e-12;
-
-export function closeTo(a, b) {
-  return a === b || (
-    a && b &&
-    Math.abs(a[0] - b[0]) < EPS &&
-    Math.abs(a[1] - b[1]) < EPS
-  ) || false;
-}

package/src/interactors/util/get-field.js

@@ -1,4 +0,0 @@
-export function getField(mark, channels) {
-  const field = mark.channelField(channels)?.field;
-  return field?.basis || field;
-}

package/src/interactors/util/invert.js

@@ -1,3 +0,0 @@
-export function invert(value, scale, pixelSize = 1) {
-  return scale.invert(pixelSize * Math.floor(value / pixelSize));
-}

package/src/interactors/util/patchScreenCTM.js

@@ -1,13 +0,0 @@
-/**
- * Patch the getScreenCTM method to memoize the last non-null
- * result seen. This will let the method continue to function
- * even after the node is removed from the DOM.
- */
-export function patchScreenCTM() {
-  const node = this;
-  const getScreenCTM = node.getScreenCTM;
-  let memo;
-  node.getScreenCTM = () => {
-    return node.isConnected ? (memo = getScreenCTM.call(node)) : memo;
-  };
-}

package/src/interactors/util/sanitize-styles.js

@@ -1,9 +0,0 @@
-import { toKebabCase } from './to-kebab-case.js';
-
-export function sanitizeStyles(styles) {
-  const s = {};
-  for (const name in styles) {
-    s[toKebabCase(name)] = styles[name];
-  }
-  return s;
-}

package/src/interactors/util/to-kebab-case.js

@@ -1,9 +0,0 @@
-export function toKebabCase(cc) {
-  const lc = cc.toLowerCase();
-  const n = cc.length;
-  let kc = '';
-  for (let i = 0; i < n; ++i) {
-    kc += (cc[i] !== lc[i] ? '-' : '') + lc[i];
-  }
-  return kc;
-}

package/src/layout/index.js

@@ -1,2 +0,0 @@
-export { hconcat, vconcat } from './concat.js';
-export { hspace, vspace } from './space.js';

package/src/legend.js

@@ -1,64 +0,0 @@
-import { Toggle } from './interactors/Toggle.js';
-
-export class Legend {
-  constructor(channel, options) {
-    const { as, ...rest } = options;
-    this.channel = channel;
-    this.options = { label: null, ...rest };
-    this.selection = as;
-
-    this.element = document.createElement('div');
-    this.element.setAttribute('class', 'legend');
-    this.element.value = this;
-  }
-
-  setPlot(plot) {
-    const { channel, selection } = this;
-    const mark = findMark(plot, channel);
-    if (this.selection && mark) {
-      this.handler = new Toggle(mark, { selection, channels: [channel] });
-      this.selection.addEventListener('value', () => this.update());
-    }
-  }
-
-  init(svg) {
-    const { channel, options, handler } = this;
-    const scale = svg.scale(channel);
-    const opt = scale.type === 'ordinal'
-      ? options
-      : { marginTop: 1, tickSize: 2, height: 28, ...options };
-    this.legend = svg.legend(channel, opt);
-
-    if (handler) {
-      handler.init(this.legend, ':scope > div', el => [el.__data__]);
-      this.update();
-    }
-
-    this.element.replaceChildren(this.legend);
-    return this.element;
-  }
-
-  update() {
-    if (!this.legend) return;
-    const { value } = this.selection;
-    const curr = value && value.length ? new Set(value.map(v => v[0])) : null;
-    const nodes = this.legend.querySelectorAll(':scope > div');
-    for (const node of nodes) {
-      const selected = curr ? curr.has(node.__data__) : true;
-      node.style.opacity = selected ? 1 : 0.2;
-    }
-  }
-}
-
-function findMark({ marks }, channel) {
-  const channels = channel === 'color' ? ['fill', 'stroke']
-    : channel === 'opacity' ? ['opacity', 'fillOpacity', 'strokeOpacity']
-    : null;
-  if (channels == null) return null;
-  for (let i = marks.length - 1; i > -1; --i) {
-    if (marks[i].channelField(channels)) {
-      return marks[i];
-    }
-  }
-  return null;
-}

package/src/marks/ConnectedMark.js

@@ -1,63 +0,0 @@
-import { Query, argmax, argmin, max, min, sql } from '@uwdata/mosaic-sql';
-import { binField } from './util/bin-field.js';
-import { filteredExtent } from './util/extent.js';
-import { Mark } from './Mark.js';
-
-export class ConnectedMark extends Mark {
-  constructor(type, source, encodings) {
-    const dim = type.endsWith('X') ? 'y' : 'x';
-    const req = { [dim]: ['count', 'min', 'max'] };
-
-    super(type, source, encodings, req);
-    this.dim = dim;
-  }
-
-  query(filter = []) {
-    const { plot, dim, source, stats } = this;
-    const { optimize = true } = source.options || {};
-    const { field, as } = this.channelField(dim);
-    const q = super.query(filter);
-
-    if (optimize) {
-      // TODO: handle stacked data
-      const { column } = field;
-      const { count, max, min } = stats[column];
-      const size = dim === 'x' ? plot.innerWidth() : plot.innerHeight();
-
-      const [lo, hi] = filteredExtent(filter, column) || [min, max];
-      const scale = (hi - lo) / (max - min);
-      if (count * scale > size * 4) {
-        const dd = binField(this, dim, as);
-        const val = this.channelField(dim === 'x' ? 'y' : 'x').as;
-        const cols = q.select().map(c => c.as).filter(c => c !== as && c !== val);
-        return m4(q, dd, as, val, lo, hi, size, cols);
-      }
-    }
-
-    return q.orderby(as);
-  }
-}
-
-/**
- * M4 is an optimization for value-preserving time-series aggregation
- * (http://www.vldb.org/pvldb/vol7/p797-jugel.pdf). This implementation uses
- * an efficient version with a single scan and the aggregate function
- * argmin and argmax, following https://arxiv.org/pdf/2306.03714.pdf.
- */
-function m4(input, bx, x, y, lo, hi, width, cols = []) {
-  const bins = sql`FLOOR(${width / (hi - lo)}::DOUBLE * (${bx} - ${+lo}::DOUBLE))::INTEGER`;
-
-  const q = (sel) => Query
-    .from(input)
-    .select(sel)
-    .groupby(bins, cols);
-
-  return Query
-    .union(
-      q([{ [x]: min(x), [y]: argmin(y, x) }, ...cols]),
-      q([{ [x]: max(x), [y]: argmax(y, x) }, ...cols]),
-      q([{ [x]: argmin(x, y), [y]: min(y) }, ...cols]),
-      q([{ [x]: argmax(x, y), [y]: max(y) }, ...cols])
-    )
-    .orderby(cols, x);
-}

package/src/marks/ContourMark.js

@@ -1,89 +0,0 @@
-import { contours, max } from 'd3';
-import { handleParam } from './util/handle-param.js';
-import { Grid2DMark } from './Grid2DMark.js';
-import { channelOption } from './Mark.js';
-
-export class ContourMark extends Grid2DMark {
-  constructor(source, options) {
-    const { thresholds = 10, ...channels } = options;
-    super('geo', source, channels);
-    handleParam(this, 'thresholds', thresholds, () => {
-      return this.grids ? this.contours().update() : null
-    });
-  }
-
-  convolve() {
-    return super.convolve().contours();
-  }
-
-  contours() {
-    const { bins, densityMap, kde, thresholds, groupby, plot } = this;
-
-    let tz = thresholds;
-    if (!Array.isArray(tz)) {
-      const scale = max(kde.map(k => max(k)));
-      tz = Array.from({length: tz - 1}, (_, i) => (scale * (i + 1)) / tz);
-    }
-
-    if (densityMap.fill || densityMap.stroke) {
-      if (this.plot.getAttribute('colorScale') !== 'log') {
-        this.plot.setAttribute('colorZero', true);
-      }
-    }
-
-    // transform contours into data space coordinates
-    // so we play nice with scale domains & axes
-    const [nx, ny] = bins;
-    const [x0, x1] = plot.getAttribute('xDomain');
-    const [y0, y1] = plot.getAttribute('yDomain');
-    const sx = (x1 - x0) / nx;
-    const sy = (y1 - y0) / ny;
-    const xo = +x0;
-    const yo = +y0;
-    const x = v => xo + v * sx;
-    const y = v => yo + v * sy;
-    const contour = contours().size(bins);
-
-    // generate contours
-    this.data = kde.flatMap(k => tz.map(t => {
-      const c = transform(contour.contour(k, t), x, y);
-      groupby.forEach((name, i) => c[name] = k.key[i]);
-      c.density = t;
-      return c;
-    }));
-
-    return this;
-  }
-
-  plotSpecs() {
-    const { type, channels, densityMap, data } = this;
-    const options = {};
-    for (const c of channels) {
-      const { channel } = c;
-      if (channel !== 'x' && channel !== 'y') {
-        options[channel] = channelOption(c);
-      }
-    }
-    if (densityMap.fill) options.fill = 'density';
-    if (densityMap.stroke) options.stroke = 'density';
-    return [{ type, data, options }];
-  }
-}
-
-function transform(geometry, x, y) {
-  function transformPolygon(coordinates) {
-    coordinates.forEach(transformRing);
-  }
-
-  function transformRing(coordinates) {
-    coordinates.forEach(transformPoint);
-  }
-
-  function transformPoint(coordinates) {
-    coordinates[0] = x(coordinates[0]);
-    coordinates[1] = y(coordinates[1]);
-  }
-
-  geometry.coordinates.forEach(transformPolygon);
-  return geometry;
-}