shorthand extra channels

Author: mbostock

src/channel.d.ts

@@ -61,7 +61,7 @@ export type ChannelName =
  * An object literal of channel definitions. This is also used to represent
  * materialized channel states after mark initialization.
  */
-export type Channels = Record<string, Channel>;
+export type Channels = {[key in ChannelName]?: Channel};
 
 /**
  * A channel definition. This is also used to represent the materialized channel

src/mark.d.ts

@@ -1,4 +1,4 @@
-import type {ChannelDomainSort, Channels, ChannelValue, ChannelValues, ChannelValueSpec} from "./channel.js";
+import type {Channel, ChannelDomainSort, ChannelValue, ChannelValues, ChannelValueSpec} from "./channel.js";
 import type {Context} from "./context.js";
 import type {Dimensions} from "./dimensions.js";
 import type {plot} from "./plot.js";
@@ -448,7 +448,7 @@ export interface MarkOptions {
    * An object defining additional custom channels. This meta option may be used
    * by an **initializer** to declare extra channels.
    */
-  channels?: Channels;
+  channels?: Record<string, Channel | ChannelValue>;
 }
 
 /** The abstract base class for Mark implementations. */

src/mark.js

@@ -1,6 +1,7 @@
 import {channelDomain, createChannels, valueObject} from "./channel.js";
 import {defined} from "./defined.js";
 import {maybeFacetAnchor} from "./facet.js";
+import {maybeValues} from "./options.js";
 import {arrayify, isDomainSort, isOptions, keyword, maybeNamed, range, singleton} from "./options.js";
 import {project} from "./projection.js";
 import {maybeClip, styles} from "./style.js";
@@ -38,7 +39,7 @@ export class Mark {
     }
     this.facetAnchor = maybeFacetAnchor(facetAnchor);
     channels = maybeNamed(channels);
-    if (extraChannels !== undefined) channels = {...maybeNamed(extraChannels), ...channels};
+    if (extraChannels !== undefined) channels = {...maybeValues(maybeNamed(extraChannels)), ...channels};
     if (defaults !== undefined) channels = {...styles(this, options, defaults), ...channels};
     this.channels = Object.fromEntries(
       Object.entries(channels)

src/options.js

@@ -328,6 +328,15 @@ export function maybeValue(value) {
   return value === undefined || isOptions(value) ? value : {value};
 }
 
+// Like maybeValue, but for an object for values.
+export function maybeValues(channels) {
+  return Object.fromEntries(
+    Object.entries(channels).map(([name, channel]) => {
+      return [name, maybeValue(channel)];
+    })
+  );
+}
+
 // Coerces the given channel values (if any) to numbers. This is useful when
 // values will be interpolated into other code, such as an SVG transform, and
 // where we don’t wish to allow unexpected behavior for weird input.

test/plots/tip.ts

@@ -80,10 +80,7 @@ export async function tipDotFacets() {
           y: "height",
           fx: "sex",
           fy: "date_of_birth",
-          channels: {
-            name: {value: "name"},
-            sport: {value: "sport"}
-          }
+          channels: {name: "name", sport: "sport"}
         })
       )
     ]
@@ -107,7 +104,7 @@ export async function tipGeoCentroid() {
     marks: [
       Plot.geo(countymesh),
       Plot.geo(counties, {...pointer, stroke: "red", strokeWidth: 2}),
-      Plot.tip(counties.features, {...pointer, channels: {name: {value: (d) => d.properties.name}}})
+      Plot.tip(counties.features, {...pointer, channels: {name: (d) => d.properties.name}})
     ]
   });
 }