@jrkasprzyk/parcoord-es 3.0.1 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jrkasprzyk/parcoord-es",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "ES6 module of Parallel Coordinates, based on d3 v7 modules",
   "main": "dist/parcoords.js",
   "module": "dist/parcoords.esm.js",

package/src/api/brushable.js

@@ -1,81 +1,86 @@
-import { brushSelection, brushY } from 'd3-brush';
-import { select } from 'd3-selection';
-
-const brushable = (config, pc, flags) =>
-  function() {
-    if (!pc.g()) {
-      pc.createAxes();
-    }
-
-    const g = pc.g();
-
-    // Add and store a brush for each axis.
-    g.append('svg:g')
-      .attr('class', 'brush')
-      .each(function(d) {
-        if (config.dimensions[d] !== undefined) {
-          config.dimensions[d]['brush'] = brushY(select(this)).extent([
-            [-15, 0],
-            [15, config.dimensions[d].yscale.range()[0]],
-          ]);
-          select(this).call(
-            config.dimensions[d]['brush']
-              .on('start', function(event) {
-                if (event.sourceEvent !== null && !event.sourceEvent.ctrlKey) {
-                  pc.brushReset();
-                }
-              })
-              .on('brush', function(event) {
-                if (!event.sourceEvent.ctrlKey) {
-                  pc.brush();
-                }
-              })
-              .on('end', function(event) {
-                // save brush selection is ctrl key is held
-                // store important brush information and
-                // the html element of the selection,
-                // to make a dummy selection element
-                if (event.sourceEvent.ctrlKey) {
-                  let html = select(this)
-                    .select('.selection')
-                    .nodes()[0].outerHTML;
-                  html = html.replace(
-                    'class="selection"',
-                    'class="selection dummy' +
-                      ' selection-' +
-                      config.brushes.length +
-                      '"'
-                  );
-                  let dat = select(this).nodes()[0].__data__;
-                  let brush = {
-                    id: config.brushes.length,
-                    extent: brushSelection(this),
-                    html: html,
-                    data: dat,
-                  };
-                  config.brushes.push(brush);
-                  select(select(this).nodes()[0].parentNode)
-                    .select('.axis')
-                    .nodes()[0].outerHTML += html;
-                  pc.brush();
-                  config.dimensions[d].brush.move(select(this, null));
-                  select(this)
-                    .select('.selection')
-                    .attr('style', 'display:none');
-                  pc.brushable();
-                } else {
-                  pc.brush();
-                }
-              })
-          );
-          select(this).on('dblclick', function() {
-            pc.brushReset(d);
-          });
-        }
-      });
-
-    flags.brushable = true;
-    return this;
-  };
-
-export default brushable;
+import { brushSelection, brushY } from 'd3-brush';
+import { select } from 'd3-selection';
+
+const brushable = (config, pc, flags) =>
+  function() {
+    if (!pc.g()) {
+      pc.createAxes();
+    }
+
+    const g = pc.g();
+
+    // Add and store a brush for each axis.
+    g.append('svg:g')
+      .attr('class', 'brush')
+      .each(function(d) {
+        if (config.dimensions[d] !== undefined) {
+          config.dimensions[d]['brush'] = brushY(select(this)).extent([
+            [-15, 0],
+            [15, config.dimensions[d].yscale.range()[0]],
+          ]);
+          select(this).call(
+            config.dimensions[d]['brush']
+              .on('start', function(event) {
+                // `!=` also catches the undefined d3 v6+ uses for a
+                // programmatic brush.move, which `!== null` let through
+                // straight into the .ctrlKey dereference below.
+                if (event.sourceEvent != null && !event.sourceEvent.ctrlKey) {
+                  pc.brushReset();
+                }
+              })
+              .on('brush', function(event) {
+                // A programmatic brush.move leaves sourceEvent undefined in
+                // d3 v6+; treat that as "no Ctrl key" rather than dereferencing.
+                if (!(event.sourceEvent && event.sourceEvent.ctrlKey)) {
+                  pc.brush();
+                }
+              })
+              .on('end', function(event) {
+                // save brush selection is ctrl key is held
+                // store important brush information and
+                // the html element of the selection,
+                // to make a dummy selection element
+                if (event.sourceEvent && event.sourceEvent.ctrlKey) {
+                  let html = select(this)
+                    .select('.selection')
+                    .nodes()[0].outerHTML;
+                  html = html.replace(
+                    'class="selection"',
+                    'class="selection dummy' +
+                      ' selection-' +
+                      config.brushes.length +
+                      '"'
+                  );
+                  let dat = select(this).nodes()[0].__data__;
+                  let brush = {
+                    id: config.brushes.length,
+                    extent: brushSelection(this),
+                    html: html,
+                    data: dat,
+                  };
+                  config.brushes.push(brush);
+                  select(select(this).nodes()[0].parentNode)
+                    .select('.axis')
+                    .nodes()[0].outerHTML += html;
+                  pc.brush();
+                  config.dimensions[d].brush.move(select(this, null));
+                  select(this)
+                    .select('.selection')
+                    .attr('style', 'display:none');
+                  pc.brushable();
+                } else {
+                  pc.brush();
+                }
+              })
+          );
+          select(this).on('dblclick', function() {
+            pc.brushReset(d);
+          });
+        }
+      });
+
+    flags.brushable = true;
+    return this;
+  };
+
+export default brushable;

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

@@ -1,92 +1,94 @@
-import { brushY, brushSelection } from 'd3-brush';
-import invertByScale from '../invertByScale';
-import selected from './selected';
-
-const brushUpdated = (config, pc, events, args) => newSelection => {
-  config.brushed = newSelection;
-  events.call('brush', pc, config.brushed, args);
-  pc.renderBrushed();
-};
-
-const brushFor = (state, config, pc, events, brushGroup) => (
-  axis,
-  _selector
-) => {
-  // handle hidden axes which will not be a property of dimensions
-  if (!config.dimensions.hasOwnProperty(axis)) {
-    return () => {};
-  }
-
-  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(_selector).extent([[-15, 0], [15, brushRangeMax]]);
-
-  const convertBrushArguments = args => {
-    const args_array = Array.prototype.slice.call(args);
-    const axis = args_array[0];
-
-    const raw = brushSelection(args_array[2][0]) || [];
-
-    // handle hidden axes which will not have a yscale
-    let yscale = null;
-    if (config.dimensions.hasOwnProperty(axis)) {
-      yscale = config.dimensions[axis].yscale;
-    }
-
-    // ordinal scales do not have invert
-    const scaled = invertByScale(raw, yscale);
-
-    return {
-      axis: args_array[0],
-      node: args_array[2][0],
-      selection: {
-        raw,
-        scaled,
-      },
-    };
-  };
-
-  _brush
-    .on('start', function(event) {
-      if (event.sourceEvent !== null) {
-        events.call(
-          'brushstart',
-          pc,
-          config.brushed,
-          convertBrushArguments(arguments)
-        );
-        if (typeof event.sourceEvent.stopPropagation === 'function') {
-          event.sourceEvent.stopPropagation();
-        }
-      }
-    })
-    .on('brush', function() {
-      brushUpdated(
-        config,
-        pc,
-        events,
-        convertBrushArguments(arguments)
-      )(selected(state, config, brushGroup)());
-    })
-    .on('end', function() {
-      brushUpdated(config, pc, events)(selected(state, config, brushGroup)());
-      events.call(
-        'brushend',
-        pc,
-        config.brushed,
-        convertBrushArguments(arguments)
-      );
-    });
-
-  state.brushes[axis] = _brush;
-  state.brushNodes[axis] = _selector.node();
-
-  return _brush;
-};
-
-export default brushFor;
+import { brushY, brushSelection } from 'd3-brush';
+import invertByScale from '../invertByScale';
+import selected from './selected';
+
+const brushUpdated = (config, pc, events, args) => newSelection => {
+  config.brushed = newSelection;
+  events.call('brush', pc, config.brushed, args);
+  pc.renderBrushed();
+};
+
+const brushFor = (state, config, pc, events, brushGroup) => (
+  axis,
+  _selector
+) => {
+  // handle hidden axes which will not be a property of dimensions
+  if (!config.dimensions.hasOwnProperty(axis)) {
+    return () => {};
+  }
+
+  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(_selector).extent([[-15, 0], [15, brushRangeMax]]);
+
+  // d3 v6+ invokes listeners as (event, datum); the v5 (datum, index, nodes)
+  // layout this used to slice out of `arguments` no longer exists. The axis name
+  // is already in scope above, and the node is the listener's `this`.
+  const convertBrushArguments = node => {
+    const raw = brushSelection(node) || [];
+
+    // handle hidden axes which will not have a yscale
+    let yscale = null;
+    if (config.dimensions.hasOwnProperty(axis)) {
+      yscale = config.dimensions[axis].yscale;
+    }
+
+    // ordinal scales do not have invert
+    const scaled = invertByScale(raw, yscale);
+
+    return {
+      axis,
+      node,
+      selection: {
+        raw,
+        scaled,
+      },
+    };
+  };
+
+  _brush
+    .on('start', function(event) {
+      // d3 v6+ leaves sourceEvent undefined for a programmatic brush.move,
+      // where v5 set it to null; `!=` catches both.
+      if (event.sourceEvent != null) {
+        events.call(
+          'brushstart',
+          pc,
+          config.brushed,
+          convertBrushArguments(this)
+        );
+        if (typeof event.sourceEvent.stopPropagation === 'function') {
+          event.sourceEvent.stopPropagation();
+        }
+      }
+    })
+    .on('brush', function() {
+      brushUpdated(
+        config,
+        pc,
+        events,
+        convertBrushArguments(this)
+      )(selected(state, config, brushGroup)());
+    })
+    .on('end', function() {
+      brushUpdated(config, pc, events)(selected(state, config, brushGroup)());
+      events.call(
+        'brushend',
+        pc,
+        config.brushed,
+        convertBrushArguments(this)
+      );
+    });
+
+  state.brushes[axis] = _brush;
+  state.brushNodes[axis] = _selector.node();
+
+  return _brush;
+};
+
+export default brushFor;

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

@@ -1,102 +1,104 @@
-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;
+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) {
+      // d3 v6+ leaves sourceEvent undefined for a programmatic brush.move,
+      // where v5 set it to null; `!=` catches both.
+      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;