@jrkasprzyk/parcoord-es 3.0.0

package/src/brush/1d/index.js

@@ -0,0 +1,20 @@
+import brushExtents from './brushExtents';
+import install from './install';
+import selected from './selected';
+import uninstall from './uninstall';
+
+const install1DAxes = (brushGroup, config, pc, events) => {
+  const state = {
+    brushes: {},
+    brushNodes: {},
+  };
+
+  brushGroup.modes['1D-axes'] = {
+    install: install(state, config, pc, events, brushGroup),
+    uninstall: uninstall(state, pc),
+    selected: selected(state, config, brushGroup),
+    brushState: brushExtents(state, config, pc),
+  };
+};
+
+export default install1DAxes;

package/src/brush/1d/install.js

@@ -0,0 +1,41 @@
+import { select } from 'd3-selection';
+import brushExtents from './brushExtents';
+import brushReset from './brushReset';
+import brushFor from './brushFor';
+
+const install = (state, config, pc, events, brushGroup) => () => {
+  if (!pc.g()) {
+    pc.createAxes();
+  }
+
+  // Add and store a brush for each axis.
+  const brush = pc
+    .g()
+    .append('svg:g')
+    .attr('class', 'brush')
+    .each(function(d) {
+      select(this).call(
+        brushFor(state, config, pc, events, brushGroup)(d, select(this))
+      );
+    });
+  brush
+    .selectAll('rect')
+    .style('visibility', null)
+    .attr('x', -15)
+    .attr('width', 30);
+
+  brush.selectAll('rect.background').style('fill', 'transparent');
+
+  brush
+    .selectAll('rect.extent')
+    .style('fill', 'rgba(255,255,255,0.25)')
+    .style('stroke', 'rgba(0,0,0,0.6)');
+
+  brush.selectAll('.resize rect').style('fill', 'rgba(0,0,0,0.1)');
+
+  pc.brushExtents = brushExtents(state, config, pc);
+  pc.brushReset = brushReset(state, config, pc);
+  return pc;
+};
+
+export default install;

package/src/brush/1d/selected.js

@@ -0,0 +1,79 @@
+import { brushSelection } from 'd3-brush';
+//https://github.com/d3/d3-brush/issues/10
+
+// data within extents
+const selected = (state, config, brushGroup) => () => {
+  const { brushNodes } = state;
+  const is_brushed = p =>
+    brushNodes[p] && brushSelection(brushNodes[p]) !== null;
+
+  const actives = Object.keys(config.dimensions).filter(is_brushed);
+  const extents = actives.map(p => {
+    const _brushRange = brushSelection(brushNodes[p]);
+
+    if (typeof config.dimensions[p].yscale.invert === 'function') {
+      return [
+        config.dimensions[p].yscale.invert(_brushRange[1]),
+        config.dimensions[p].yscale.invert(_brushRange[0]),
+      ];
+    } else {
+      return _brushRange;
+    }
+  });
+  // We don't want to return the full data set when there are no axes brushed.
+  // Actually, when there are no axes brushed, by definition, no items are
+  // selected. So, let's avoid the filtering and just return false.
+  //if (actives.length === 0) return false;
+
+  // Resolves broken examples for now. They expect to get the full dataset back from empty brushes
+  if (actives.length === 0) return config.data;
+
+  // test if within range
+  const within = {
+    date: (d, p, dimension) => {
+      if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+        // if it is ordinal
+        return (
+          extents[dimension][0] <= config.dimensions[p].yscale(d[p]) &&
+          config.dimensions[p].yscale(d[p]) <= extents[dimension][1]
+        );
+      } else {
+        return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1];
+      }
+    },
+    number: (d, p, dimension) => {
+      if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+        // if it is ordinal
+        return (
+          extents[dimension][0] <= config.dimensions[p].yscale(d[p]) &&
+          config.dimensions[p].yscale(d[p]) <= extents[dimension][1]
+        );
+      } else {
+        return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1];
+      }
+    },
+    string: (d, p, dimension) => {
+      return (
+        extents[dimension][0] <= config.dimensions[p].yscale(d[p]) &&
+        config.dimensions[p].yscale(d[p]) <= extents[dimension][1]
+      );
+    },
+  };
+
+  return config.data.filter(d => {
+    switch (brushGroup.predicate) {
+      case 'AND':
+        return actives.every(function(p, dimension) {
+          return within[config.dimensions[p].type](d, p, dimension);
+        });
+      case 'OR':
+        return actives.some(function(p, dimension) {
+          return within[config.dimensions[p].type](d, p, dimension);
+        });
+      default:
+        throw new Error('Unknown brush predicate ' + config.brushPredicate);
+    }
+  });
+};
+
+export default selected;

package/src/brush/1d/uninstall.js

@@ -0,0 +1,12 @@
+const uninstall = (state, pc) => () => {
+  if (pc.g() !== undefined && pc.g() !== null)
+    pc.g()
+      .selectAll('.brush')
+      .remove();
+
+  state.brushes = {};
+  delete pc.brushExtents;
+  delete pc.brushReset;
+};
+
+export default uninstall;

package/src/brush/1d-multi/brushExtents.js

@@ -0,0 +1,101 @@
+import { select } from 'd3-selection';
+import { brushSelection } from 'd3-brush';
+import newBrush from './newBrush';
+import drawBrushes from './drawBrushes';
+import invertByScale from '../invertByScale';
+
+/**
+ *
+ * extents are in format of [[2,6], [3,5]]
+ *
+ * * @param state
+ * @param config
+ * @param pc
+ * @returns {Function}
+ */
+const brushExtents = (state, config, pc, events, brushGroup) => extents => {
+  const { brushes } = state;
+  const hiddenAxes = pc.hideAxis();
+
+  if (typeof extents === 'undefined') {
+    return Object.keys(config.dimensions)
+      .filter(d => !hiddenAxes.includes(d))
+      .reduce((acc, cur, pos) => {
+        const axisBrushes = brushes[cur];
+
+        if (axisBrushes === undefined || axisBrushes === null) {
+          acc[cur] = [];
+        } else {
+          acc[cur] = axisBrushes.reduce((d, p, i) => {
+            const raw = brushSelection(
+              document.getElementById('brush-' + pos + '-' + i)
+            );
+
+            if (raw) {
+              const yScale = config.dimensions[cur].yscale;
+              const scaled = invertByScale(raw, yScale);
+
+              d.push({
+                extent: p.brush.extent(),
+                selection: {
+                  raw,
+                  scaled,
+                },
+              });
+            }
+            return d;
+          }, []);
+        }
+
+        return acc;
+      }, {});
+  } else {
+    // //first get all the brush selections
+    // loop over each dimension and update appropriately (if it was passed in through extents)
+    Object.keys(config.dimensions).forEach((d, pos) => {
+      if (extents[d] === undefined || extents[d] === null) {
+        return;
+      }
+
+      const dim = config.dimensions[d];
+
+      const yExtents = extents[d].map(e => e.map(dim.yscale));
+
+      const _bs = yExtents.map((e, j) => {
+        const _brush = newBrush(state, config, pc, events, brushGroup)(
+          d,
+          select('#brush-group-' + pos)
+        );
+        //update the extent
+        //sets the brushable extent to the specified array of points [[x0, y0], [x1, y1]]
+        _brush.extent([[-15, e[1]], [15, e[0]]]);
+
+        return {
+          id: j,
+          brush: _brush,
+          ext: e,
+        };
+      });
+
+      brushes[d] = _bs;
+
+      drawBrushes(_bs, config, pc, d, select('#brush-group-' + pos));
+
+      //redraw the brush
+      //https://github.com/d3/d3-brush#brush_move
+      // For an x-brush, it must be defined as [x0, x1]; for a y-brush, it must be defined as [y0, y1].
+      _bs.forEach((f, k) => {
+        select('#brush-' + pos + '-' + k)
+          .call(f.brush)
+          .call(f.brush.move, f.ext.reverse());
+      });
+    });
+
+    //redraw the chart
+    pc.renderBrushed();
+
+    return pc;
+  }
+};
+
+export default brushExtents;

package/src/brush/1d-multi/brushFor.js

@@ -0,0 +1,13 @@
+import newBrush from './newBrush';
+import drawBrushes from './drawBrushes';
+
+const brushFor = (state, config, pc, events, brushGroup) => (
+  axis,
+  _selector
+) => {
+  const { brushes } = state;
+  newBrush(state, config, pc, events, brushGroup)(axis, _selector);
+  drawBrushes(brushes[axis], config, pc, axis, _selector);
+};
+
+export default brushFor;

package/src/brush/1d-multi/brushReset.js

@@ -0,0 +1,53 @@
+import { select } from 'd3-selection';
+import { brushSelection } from 'd3-brush';
+
+const brushReset = (state, config, pc) => dimension => {
+  const { brushes } = state;
+
+  if (dimension === undefined) {
+    if (pc.g() !== undefined && pc.g() !== null) {
+      Object.keys(config.dimensions).forEach((d, pos) => {
+        const axisBrush = brushes[d];
+
+        // hidden axes will be undefined
+        if (axisBrush) {
+          axisBrush.forEach((e, i) => {
+            const brush = document.getElementById('brush-' + pos + '-' + i);
+            if (brush && brushSelection(brush) !== null) {
+              pc.g()
+                .select('#brush-' + pos + '-' + i)
+                .call(e.brush.move, null);
+            }
+          });
+        }
+      });
+
+      pc.renderBrushed();
+    }
+  } else {
+    if (pc.g() !== undefined && pc.g() !== null) {
+      const axisBrush = brushes[dimension];
+      const pos = Object.keys(config.dimensions).indexOf(dimension);
+
+      if (axisBrush) {
+        axisBrush.forEach((e, i) => {
+          const brush = document.getElementById('brush-' + pos + '-' + i);
+          if (brushSelection(brush) !== null) {
+            pc.g()
+              .select('#brush-' + pos + '-' + i)
+              .call(e.brush.move, null);
+
+            if (typeof e.event === 'function') {
+              e.event(select('#brush-' + pos + '-' + i));
+            }
+          }
+        });
+      }
+
+      pc.renderBrushed();
+    }
+  }
+  return this;
+};
+
+export default brushReset;

package/src/brush/1d-multi/drawBrushes.js

@@ -0,0 +1,36 @@
+import { select } from 'd3-selection';
+
+const drawBrushes = (brushes, config, pc, axis, selector) => {
+  const brushSelection = selector.selectAll('.brush').data(brushes, d => d.id);
+
+  brushSelection
+    .enter()
+    .insert('g', '.brush')
+    .attr('class', 'brush')
+    .attr('dimension', axis)
+    .attr(
+      'id',
+      b => 'brush-' + Object.keys(config.dimensions).indexOf(axis) + '-' + b.id
+    )
+    .each(function(brushObject) {
+      brushObject.brush(select(this));
+    });
+
+  brushSelection.each(function(brushObject) {
+    select(this)
+      .attr('class', 'brush')
+      .selectAll('.overlay')
+      .style('pointer-events', function() {
+        const brush = brushObject.brush;
+        if (brushObject.id === brushes.length - 1 && brush !== undefined) {
+          return 'all';
+        } else {
+          return 'none';
+        }
+      });
+  });
+
+  brushSelection.exit().remove();
+};
+
+export default drawBrushes;

package/src/brush/1d-multi/index.js

@@ -0,0 +1,20 @@
+import brushExtents from './brushExtents';
+import install from './install';
+import selected from './selected';
+import uninstall from './uninstall';
+
+const install1DMultiAxes = (brushGroup, config, pc, events) => {
+  const state = {
+    brushes: {},
+    brushNodes: {},
+  };
+
+  brushGroup.modes['1D-axes-multi'] = {
+    install: install(state, config, pc, events, brushGroup),
+    uninstall: uninstall(state, pc),
+    selected: selected(state, config, brushGroup),
+    brushState: brushExtents(state, config, pc),
+  };
+};
+
+export default install1DMultiAxes;

package/src/brush/1d-multi/install.js

@@ -0,0 +1,29 @@
+import { select } from 'd3-selection';
+import brushExtents from './brushExtents';
+import brushReset from './brushReset';
+import brushFor from './brushFor';
+
+const install = (state, config, pc, events, brushGroup) => () => {
+  if (!pc.g()) {
+    pc.createAxes();
+  }
+
+  const hiddenAxes = pc.hideAxis();
+
+  pc.g()
+    .append('svg:g')
+    .attr('id', (d, i) => 'brush-group-' + i)
+    .attr('class', 'brush-group')
+    .attr('dimension', d => d)
+    .each(function(d) {
+      if (!hiddenAxes.includes(d)) {
+        brushFor(state, config, pc, events, brushGroup)(d, select(this));
+      }
+    });
+
+  pc.brushExtents = brushExtents(state, config, pc, events, brushGroup);
+  pc.brushReset = brushReset(state, config, pc);
+  return pc;
+};
+
+export default install;

package/src/brush/1d-multi/newBrush.js

@@ -0,0 +1,102 @@
+import { brushY, brushSelection } from 'd3-brush';
+import { select } from 'd3-selection';
+import drawBrushes from './drawBrushes';
+import selected from './selected';
+
+const brushUpdated = (config, pc, events) => newSelection => {
+  config.brushed = newSelection;
+  events.call('brush', pc, config.brushed);
+  pc.renderBrushed();
+};
+
+const newBrush = (state, config, pc, events, brushGroup) => (
+  axis,
+  _selector
+) => {
+  const { brushes, brushNodes } = state;
+
+  const brushRangeMax =
+    config.dimensions[axis].type === 'string'
+      ? config.dimensions[axis].yscale.range()[
+          config.dimensions[axis].yscale.range().length - 1
+        ]
+      : config.dimensions[axis].yscale.range()[0];
+
+  const brush = brushY().extent([[-15, 0], [15, brushRangeMax]]);
+  const id = brushes[axis] ? brushes[axis].length : 0;
+  const node =
+    'brush-' + Object.keys(config.dimensions).indexOf(axis) + '-' + id;
+
+  if (brushes[axis]) {
+    brushes[axis].push({
+      id,
+      brush,
+      node,
+    });
+  } else {
+    brushes[axis] = [{ id, brush, node }];
+  }
+
+  if (brushNodes[axis]) {
+    brushNodes[axis].push({ id, node });
+  } else {
+    brushNodes[axis] = [{ id, node }];
+  }
+
+  brush
+    .on('start', function(event) {
+      if (event.sourceEvent !== null) {
+        events.call('brushstart', pc, config.brushed);
+        if (typeof event.sourceEvent.stopPropagation === 'function') {
+          event.sourceEvent.stopPropagation();
+        }
+      }
+    })
+    .on('brush', function() {
+      // record selections
+      brushUpdated(
+        config,
+        pc,
+        events
+      )(selected(state, config, pc, events, brushGroup));
+    })
+    .on('end', function(event) {
+      // Figure out if our latest brush has a selection
+      const lastBrushID = brushes[axis][brushes[axis].length - 1].id;
+      const lastBrush = document.getElementById(
+        'brush-' +
+          Object.keys(config.dimensions).indexOf(axis) +
+          '-' +
+          lastBrushID
+      );
+      const selection = brushSelection(lastBrush);
+
+      if (
+        selection !== undefined &&
+        selection !== null &&
+        selection[0] !== selection[1]
+      ) {
+        newBrush(state, config, pc, events, brushGroup)(axis, _selector);
+
+        drawBrushes(brushes[axis], config, pc, axis, _selector);
+
+        brushUpdated(config, pc, events)(
+          selected(state, config, pc, events, brushGroup)
+        );
+      } else {
+        if (
+          event.sourceEvent &&
+          event.sourceEvent.toString() === '[object MouseEvent]' &&
+          event.selection === null
+        ) {
+          pc.brushReset(axis);
+        }
+      }
+
+      events.call('brushend', pc, config.brushed);
+    });
+
+  return brush;
+};
+
+export default newBrush;

package/src/brush/1d-multi/selected.js

@@ -0,0 +1,160 @@
+import { brushSelection } from 'd3-brush';
+
+// data within extents
+const selected = (state, config, pc, events, brushGroup) => {
+  const { brushes } = state;
+
+  const is_brushed = (p, pos) => {
+    const axisBrushes = brushes[p];
+
+    for (let i = 0; i < axisBrushes.length; i++) {
+      const brush = document.getElementById('brush-' + pos + '-' + i);
+
+      if (brush && brushSelection(brush) !== null) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  const actives = Object.keys(config.dimensions).filter(is_brushed);
+  const extents = actives.map(p => {
+    const axisBrushes = brushes[p];
+
+    return axisBrushes
+      .filter(d => !pc.hideAxis().includes(d))
+      .map((d, i) =>
+        brushSelection(
+          document.getElementById(
+            'brush-' + Object.keys(config.dimensions).indexOf(p) + '-' + i
+          )
+        )
+      )
+      .map((d, i) => {
+        if (d === null || d === undefined) {
+          return null;
+        } else if (typeof config.dimensions[p].yscale.invert === 'function') {
+          return [
+            config.dimensions[p].yscale.invert(d[1]),
+            config.dimensions[p].yscale.invert(d[0]),
+          ];
+        } else {
+          return d;
+        }
+      });
+  });
+
+  // We don't want to return the full data set when there are no axes brushed.
+  // Actually, when there are no axes brushed, by definition, no items are
+  // selected. So, let's avoid the filtering and just return false.
+  //if (actives.length === 0) return false;
+
+  // Resolves broken examples for now. They expect to get the full dataset back from empty brushes
+  if (actives.length === 0) return config.data;
+
+  // test if within range
+  const within = {
+    date: (d, p, i) => {
+      const dimExt = extents[i];
+
+      if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+        // if it is ordinal
+        for (const e of dimExt) {
+          if (e === null || e === undefined) {
+            continue;
+          }
+
+          if (
+            e[0] <= config.dimensions[p].yscale(d[p]) &&
+            config.dimensions[p].yscale(d[p]) <= e[1]
+          ) {
+            return true;
+          }
+        }
+
+        return false;
+      } else {
+        for (const e of dimExt) {
+          if (e === null || e === undefined) {
+            continue;
+          }
+
+          if (e[0] <= d[p] && d[p] <= e[1]) {
+            return true;
+          }
+        }
+
+        return false;
+      }
+    },
+    number: (d, p, i) => {
+      const dimExt = extents[i];
+
+      if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+        // if it is ordinal
+        for (const e of dimExt) {
+          if (e === null || e === undefined) {
+            continue;
+          }
+
+          if (
+            e[0] <= config.dimensions[p].yscale(d[p]) &&
+            config.dimensions[p].yscale(d[p]) <= e[1]
+          ) {
+            return true;
+          }
+        }
+
+        return false;
+      } else {
+        for (const e of dimExt) {
+          if (e === null || e === undefined) {
+            continue;
+          }
+
+          if (e[0] <= d[p] && d[p] <= e[1]) {
+            return true;
+          }
+        }
+
+        return false;
+      }
+    },
+    string: (d, p, i) => {
+      const dimExt = extents[i];
+
+      for (const e of dimExt) {
+        if (e === null || e === undefined) {
+          continue;
+        }
+
+        if (
+          e[0] <= config.dimensions[p].yscale(d[p]) &&
+          config.dimensions[p].yscale(d[p]) <= e[1]
+        ) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+  };
+
+  return config.data.filter(d => {
+    switch (brushGroup.predicate) {
+      case 'AND':
+        return actives.every((p, i) =>
+          within[config.dimensions[p].type](d, p, i)
+        );
+      case 'OR':
+        return actives.some((p, i) =>
+          within[config.dimensions[p].type](d, p, i)
+        );
+      default:
+        throw new Error('Unknown brush predicate ' + config.brushPredicate);
+    }
+  });
+};
+
+export default selected;

package/src/brush/1d-multi/uninstall.js

@@ -0,0 +1,12 @@
+const uninstall = (state, pc) => () => {
+  if (pc.g() !== undefined && pc.g() !== null)
+    pc.g()
+      .selectAll('.brush-group')
+      .remove();
+
+  state.brushes = {};
+  delete pc.brushExtents;
+  delete pc.brushReset;
+};
+
+export default uninstall;