multicat data selectors

Author: nicolaskruchten

dev/dataSources.js

@@ -1728,16 +1728,10 @@ export default {
   'jagged ints': [2, 1, 3, 5, 4, 6],
   'toggle ints': [1, -1, 1, -1, 1, -1],
   'big ints': [1000, 10100, 10000, 20000, 100000],
-  dates: [
-    '2010-01-01',
-    '2010-07-01',
-    '2011-01-01',
-    '2011-07-01',
-    '2012-01-01',
-    '2012-06-01',
-  ],
+  dates: ['2010-01-01', '2010-07-01', '2011-01-01', '2011-07-01', '2012-01-01', '2012-06-01'],
   months: ['January', 'February', 'March', 'April', 'May', 'June'],
   colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
+  buckets: ['A', 'A', 'A', 'B', 'B', 'B'],
   'blue and red': ['blue', 'red'],
   countries: [
     'Angola',

src/components/fields/DataSelector.js

@@ -35,6 +35,18 @@ export class UnconnectedDataSelector extends Component {
     this.is2D = false;
     if (props.container) {
       this.is2D =
+        ((props.attr === 'x' || props.attr === 'y') &&
+          [
+            'scatter',
+            'scattergl',
+            'bar',
+            'heatmap',
+            'heatmapgl',
+            'violin',
+            'box',
+            'contour',
+            'contourgl',
+          ].includes(props.container.type)) ||
         (props.attr === 'z' &&
           [
             'contour',
@@ -60,14 +72,23 @@ export class UnconnectedDataSelector extends Component {
     const update = {};
     let data;
 
-    if (Array.isArray(value)) {
-      data = value.filter(v => Array.isArray(this.dataSources[v])).map(v => this.dataSources[v]);
+    const adjustedValue =
+      Array.isArray(value) &&
+      value.length === 1 &&
+      (this.props.attr === 'x' || this.props.attr === 'y')
+        ? value[0]
+        : value;
+
+    if (Array.isArray(adjustedValue)) {
+      data = adjustedValue
+        .filter(v => Array.isArray(this.dataSources[v]))
+        .map(v => this.dataSources[v]);
     } else {
-      data = this.dataSources[value] || null;
+      data = this.dataSources[adjustedValue] || null;
     }
 
     update[this.props.attr] = maybeTransposeData(data, this.srcAttr, this.props.container.type);
-    update[this.srcAttr] = maybeAdjustSrc(value, this.srcAttr, this.props.container.type, {
+    update[this.srcAttr] = maybeAdjustSrc(adjustedValue, this.srcAttr, this.props.container.type, {
       fromSrc: this.context.srcConverters ? this.context.srcConverters.fromSrc : null,
     });