- default picker on bin and group transforms

- possible picker on rect and bar marks
- sets the value on init — though it needs async again :(
- click a second time to retrieve the full data
- the picker is not tested, but it doesn't break tests anymore

Author: Fil

src/mark.js

@@ -46,10 +46,18 @@ export class Mark {
     };
   }
   update(g, values) {
-    const svg = g.ownerSVGElement;
-    console.log(values);
-    svg.value = values;
-    svg.dispatchEvent(new CustomEvent('input'));
+    // 🌶 this doesn't work in node
+    if (typeof window === 'undefined') return;
+    // 🌶 async (to allow setting up the initial values)
+    // todo: let the plot inform of the update method
+    const all = (this.values || (this.values = values)); // keep initial values
+    setTimeout(() => {
+      const svg = g.ownerSVGElement;
+      if (svg.value === values) values = all; // reset
+      console.log(values);
+      svg.value = values;
+        svg.dispatchEvent(new CustomEvent('input'));
+    }, 1);
   }
 }
 

src/marks/bar.js

@@ -13,6 +13,7 @@ export class AbstractBar extends Mark {
       title,
       fill,
       stroke,
+      picker,
       inset = 0,
       insetTop = inset,
       insetRight = inset,
@@ -32,7 +33,8 @@ export class AbstractBar extends Mark {
         {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
-        {name: "stroke", value: vstroke, scale: "color", optional: true}
+        {name: "stroke", value: vstroke, scale: "color", optional: true},
+        {name: "picker", value: picker === true ? d => d : picker, optional: true}
       ],
       options
     );
@@ -47,15 +49,19 @@ export class AbstractBar extends Mark {
   render(I, scales, channels, dimensions) {
     const {rx, ry} = this;
     const {color} = scales;
-    const {z: Z, title: L, fill: F, stroke: S} = channels;
+    const {z: Z, title: L, fill: F, stroke: S, picker: J} = channels;
     const index = filter(I, ...this._positions(channels), F, S);
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
-    return create("svg:g")
+    const node = create("svg:g")
         .call(applyIndirectStyles, this)
         .call(this._transform, scales)
         .call(g => g.selectAll()
           .data(index)
           .join("rect")
+            .call(J ? rect => rect
+              .on("click", (event, i) => super.update(event.currentTarget, J[i]))
+              : () => {}
+            )
             .call(applyDirectStyles, this)
             .attr("x", this._x(scales, channels, dimensions))
             .attr("width", this._width(scales, channels, dimensions))
@@ -67,6 +73,9 @@ export class AbstractBar extends Mark {
             .call(ry != null ? rect => rect.attr("ry", ry) : () => {})
             .call(title(L)))
       .node();
+    console.log({J});
+    if (J) this.update(node, J.flat());
+    return node;
   }
   _x({x}, {x: X}, {marginLeft}) {
     const {insetLeft} = this;

src/marks/rect.js

@@ -16,7 +16,7 @@ export class Rect extends Mark {
       title,
       fill,
       stroke,
-      picker = d => d,
+      picker,
       inset = 0,
       insetTop = inset,
       insetRight = inset,
@@ -40,7 +40,7 @@ export class Rect extends Mark {
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
         {name: "stroke", value: vstroke, scale: "color", optional: true},
-        {name: "picker", value: picker, optional: true}
+        {name: "picker", value: picker === true ? d => d : picker, optional: true}
       ],
       options
     );
@@ -60,7 +60,7 @@ export class Rect extends Mark {
     const {rx, ry} = this;
     const index = filter(I, X1, Y2, X2, Y2, F, S);
     if (Z) index.sort((i, j) => ascending(Z[i], Z[j]));
-    return create("svg:g")
+    const node = create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y)
         .call(g => g.selectAll()
@@ -81,6 +81,8 @@ export class Rect extends Mark {
             .attr("stroke", S && (i => color(S[i])))
             .call(title(L)))
       .node();
+    if (J) this.update(node, J.flat());
+    return node;
   }
 }
 

src/transforms/group.js

@@ -3,13 +3,13 @@ import {defined} from "../defined.js";
 import {valueof, maybeColor, maybeTransform, maybeValue, maybeLazyChannel, lazyChannel, first, identity, take, maybeTuple} from "../mark.js";
 
 export function groupX({x, ...options} = {}) {
-  const [transform, X, y, z, fill, stroke] = group1(x, options);
-  return {x: X, y, ...transform, z, fill, stroke};
+  const [transform, X, y, z, fill, stroke, picker] = group1(x, options);
+  return {x: X, y, ...transform, picker, z, fill, stroke};
 }
 
 export function groupY({y, ...options} = {}) {
-  const [transform, Y, x, z, fill, stroke] = group1(y, options);
-  return {y: Y, x, ...transform, z, fill, stroke};
+  const [transform, Y, x, z, fill, stroke, picker] = group1(y, options);
+  return {y: Y, x, ...transform, picker, z, fill, stroke};
 }
 
 export function groupR(options) {
@@ -21,8 +21,8 @@ export function groupFill(options) {
 }
 
 export function group({x, y, out, ...options} = {}) {
-  const [transform, X, Y, L, z, fill, stroke] = group2(x, y, options);
-  return {x: X, y: Y, ...transform, z, fill, stroke, [out]: L};
+  const [transform, X, Y, L, z, fill, stroke, picker] = group2(x, y, options);
+  return {x: X, y: Y, ...transform, picker, z, fill, stroke, [out]: L};
 }
 
 function group1(x = identity, {domain, normalize, ...options} = {}) {
@@ -35,6 +35,7 @@ function group1(x = identity, {domain, normalize, ...options} = {}) {
   const [vstroke] = maybeColor(stroke);
   const [F = fill, setF] = maybeLazyChannel(vfill);
   const [S = stroke, setS] = maybeLazyChannel(vstroke);
+  const [J, setJ] = lazyChannel();
   const defined = maybeDomain(domain);
   return [
     {
@@ -71,14 +72,16 @@ function group1(x = identity, {domain, normalize, ...options} = {}) {
           }
           groupIndex.push(groupFacet);
         }
+        setJ(groupData);
         return {data: groupData, index: groupIndex};
       })
     },
     X,
     Y,
     Z,
     F,
-    S
+    S,
+    J
   ];
 }
 
@@ -96,6 +99,7 @@ function group2(xv, yv, {domain, normalize, ...options} = {}) {
   const [vstroke] = maybeColor(stroke);
   const [F = fill, setF] = maybeLazyChannel(vfill);
   const [S = stroke, setS] = maybeLazyChannel(vstroke);
+  const [J, setJ] = lazyChannel();
   const xdefined = maybeDomain(xdomain);
   const ydefined = maybeDomain(ydomain);
   return [
@@ -139,6 +143,7 @@ function group2(xv, yv, {domain, normalize, ...options} = {}) {
           }
           groupIndex.push(groupFacet);
         }
+        setJ(groupData);
         return {data: groupData, index: groupIndex};
       })
     },
@@ -147,7 +152,8 @@ function group2(xv, yv, {domain, normalize, ...options} = {}) {
     L,
     Z,
     F,
-    S
+    S,
+    J
   ];
 }