feat: channels can take array of definitions

plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/basic.jsx

@@ -41,8 +41,6 @@ export default [
                   type: 'nominal',
                   legend: true,
                 },
-              },
-              commonEncoding: {
                 group: [{ field: 'country_name', title: 'Country' }],
               },
             },

plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/ScatterPlot/stories/bubble.jsx

@@ -49,8 +49,6 @@ export default [
                   type: 'nominal',
                   legend: true,
                 },
-              },
-              commonEncoding: {
                 group: [{ field: 'country_name', title: 'Country' }],
               },
             },

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx

@@ -56,9 +56,8 @@ export default class BoxPlot extends React.PureComponent<Props> {
 
     const createEncoder = createSelector(
       (p: PartialSpec<Encoding>) => p.encoding,
-      p => p.commonEncoding,
       p => p.options,
-      (encoding, commonEncoding, options) => new Encoder({ encoding, commonEncoding, options }),
+      (encoding, options) => new Encoder({ encoding, options }),
     );
 
     this.createEncoder = () => {

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx

@@ -89,9 +89,8 @@ export default class LineChart extends PureComponent<Props> {
 
   private createEncoder = createSelector(
     (p: Props) => p.encoding,
-    p => p.commonEncoding,
     p => p.options,
-    (encoding, commonEncoding, options) => new Encoder({ encoding, commonEncoding, options }),
+    (encoding, options) => new Encoder({ encoding, options }),
   );
 
   private createAllSeries = createSelector(

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/transformProps.ts

@@ -14,13 +14,7 @@ export default function transformProps(chartProps: ChartProps) {
    * Use type-check to make sure the field names are expected ones
    * and only pick these fields to pass to the chart.
    */
-  const fieldsFromFormData: (keyof FormDataProps)[] = [
-    'commonEncoding',
-    'encoding',
-    'margin',
-    'options',
-    'theme',
-  ];
+  const fieldsFromFormData: (keyof FormDataProps)[] = ['encoding', 'margin', 'options', 'theme'];
 
   const fieldsFromHooks: (keyof HookProps)[] = [
     'TooltipRenderer',

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/DefaultTooltipRenderer.tsx

@@ -6,7 +6,7 @@ import { isFieldDef } from '../encodeable/types/ChannelDef';
 import { TooltipProps } from './ScatterPlot';
 
 export default function DefaultTooltipRenderer({ datum, encoder }: TooltipProps) {
-  const { channels, commonChannels } = encoder;
+  const { channels } = encoder;
   const { x, y, size, fill, stroke } = channels;
 
   const tooltipRows = [
@@ -35,7 +35,14 @@ export default function DefaultTooltipRenderer({ datum, encoder }: TooltipProps)
       valueColumn: size.format(datum.data),
     });
   }
-  commonChannels.group.forEach(g => {
+  channels.group.forEach(g => {
+    tooltipRows.push({
+      key: `${g.name}`,
+      keyColumn: g.getTitle(),
+      valueColumn: g.format(datum.data),
+    });
+  });
+  channels.tooltip.forEach(g => {
     tooltipRows.push({
       key: `${g.name}`,
       keyColumn: g.getTitle(),

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/Encoder.ts

@@ -9,8 +9,10 @@ import { ExtractChannelOutput } from '../encodeable/types/ChannelDef';
  */
 const channelTypes = {
   fill: 'Color',
+  group: 'Text',
   size: 'Numeric',
   stroke: 'Color',
+  tooltip: 'Text',
   x: 'X',
   y: 'Y',
 } as const;
@@ -30,8 +32,10 @@ type CreateChannelDef<
  */
 export type Encoding = {
   fill: CreateChannelDef<'fill', string>;
+  group: CreateChannelDef<'group', string>[];
   size: CreateChannelDef<'size', number>;
   stroke: CreateChannelDef<'stroke', string>;
+  tooltip: CreateChannelDef<'tooltip', string>[];
   x: CreateChannelDef<'x', number>;
   y: CreateChannelDef<'y', number>;
 };
@@ -47,8 +51,10 @@ export type ChannelOutput<ChannelName extends keyof Encoding> = ExtractChannelOu
 export default class Encoder extends AbstractEncoder<ChannelTypes, Encoding> {
   static readonly DEFAULT_ENCODINGS: Encoding = {
     fill: { value: '#222' },
+    group: [],
     size: { value: 5 },
     stroke: { value: 'none' },
+    tooltip: [],
     x: { field: 'x', type: 'quantitative' },
     y: { field: 'y', type: 'quantitative' },
   };

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx

@@ -48,6 +48,8 @@ export interface EncodedPoint {
   size: ChannelOutput<'size'>;
   fill: ChannelOutput<'fill'>;
   stroke: ChannelOutput<'stroke'>;
+  group: ChannelOutput<'group'>[];
+  tooltip: ChannelOutput<'tooltip'>[];
   data: PlainObject;
 }
 
@@ -64,9 +66,8 @@ export default class ScatterPlot extends PureComponent<Props> {
 
     const createEncoder = createSelector(
       (p: PartialSpec<Encoding>) => p.encoding,
-      p => p.commonEncoding,
       p => p.options,
-      (encoding, commonEncoding, options) => new Encoder({ encoding, commonEncoding, options }),
+      (encoding, options) => new Encoder({ encoding, options }),
     );
 
     this.createEncoder = () => {

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/legacy/transformProps.ts

@@ -88,8 +88,6 @@ export default function transformProps(chartProps: ChartProps) {
         },
         legend: showLegend,
       },
-    },
-    commonEncoding: {
       group: [{ field: entity }],
     },
   };

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/transformProps.ts

@@ -4,15 +4,14 @@ import { ChartProps } from '@superset-ui/chart';
 
 export default function transformProps(chartProps: ChartProps) {
   const { width, height, formData, payload } = chartProps;
-  const { encoding, commonEncoding, margin, theme } = formData;
+  const { encoding, margin, theme } = formData;
   const { data } = payload;
 
   return {
     data,
     width,
     height,
     encoding,
-    commonEncoding,
     margin,
     theme,
   };

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/AbstractEncoder.ts

@@ -20,11 +20,6 @@ export default abstract class AbstractEncoder<
       : ChannelEncoder<Unarray<Encoding[k]>>
   };
 
-  readonly commonChannels: {
-    group: ChannelEncoder<FieldDef>[];
-    tooltip: ChannelEncoder<FieldDef>[];
-  };
-
   readonly legends: {
     [key: string]: (keyof Encoding)[];
   };
@@ -78,25 +73,6 @@ export default abstract class AbstractEncoder<
 
     this.channels = tmp as Channels;
 
-    this.commonChannels = {
-      group: this.spec.commonEncoding.group.map(
-        (def, i) =>
-          new ChannelEncoder({
-            definition: def,
-            name: `group[${i}]`,
-            type: 'Text',
-          }),
-      ),
-      tooltip: this.spec.commonEncoding.tooltip.map(
-        (def, i) =>
-          new ChannelEncoder({
-            definition: def,
-            name: `tooltip[${i}]`,
-            type: 'Text',
-          }),
-      ),
-    };
-
     // Group the channels that use the same field together
     // so they can share the same legend.
     this.legends = {};
@@ -123,14 +99,9 @@ export default abstract class AbstractEncoder<
       return spec as FullSpec<Encoding, Options>;
     }
 
-    const { encoding, commonEncoding = {}, ...rest } = spec;
-    const { group = [], tooltip = [] } = commonEncoding;
+    const { encoding, ...rest } = spec;
 
     return {
-      commonEncoding: {
-        group,
-        tooltip,
-      },
       ...rest,
       encoding: {
         ...defaultEncoding,

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Base.ts

@@ -11,3 +11,7 @@ export function isArray<T>(maybeArray: T | T[]): maybeArray is T[] {
 export function isNotArray<T>(maybeArray: T | T[]): maybeArray is T {
   return !Array.isArray(maybeArray);
 }
+
+export function isDefined<T>(x: any): x is T {
+  return typeof x !== 'undefined';
+}

plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Specification.ts

@@ -1,23 +1,13 @@
-import { FieldDef } from './ChannelDef';
-
 export interface BaseOptions {
   namespace?: string;
 }
 
 export interface PartialSpec<Encoding, Options extends BaseOptions = BaseOptions> {
   encoding: Partial<Encoding>;
-  commonEncoding?: Partial<{
-    group: FieldDef[];
-    tooltip: FieldDef[];
-  }>;
   options?: Options;
 }
 
 export interface FullSpec<Encoding, Options extends BaseOptions = BaseOptions> {
   encoding: Encoding;
-  commonEncoding: {
-    group: FieldDef[];
-    tooltip: FieldDef[];
-  };
   options?: Options;
 }