feat: migrate xy-chart to use encodable (#420)

* feat: use encodable in BoxPlot

* feat: migrate legend

* docs: update storybook

* fix: label overlap

* fix: lint

* fix: remove comments

* fix: path

Author: kristw

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/data.js renamed to packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/data.ts

@@ -41,6 +41,7 @@
     "csstype": "^2.6.3",
     "d3-array": "^2.1.0",
     "d3-scale": "^3.0.0",
+    "encodable": "^0.2.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "reselect": "^4.0.0",

packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/index.js renamed to packages/superset-ui-plugins-demo/storybook/stories/preset-chart-xy/BoxPlot/index.ts

@@ -4,74 +4,67 @@ import { chartTheme, ChartTheme } from '@data-ui/theme';
 import { Margin, Dimension } from '@superset-ui/dimension';
 import { WithLegend } from '@superset-ui/chart-composition';
 import DefaultTooltipRenderer from './DefaultTooltipRenderer';
-import Encoder, { Encoding } from './Encoder';
+import {
+  BoxPlotEncodingConfig,
+  BoxPlotEncoding,
+  BoxPlotEncoder,
+  boxPlotEncoderFactory,
+} from './Encoder';
 import { Dataset, PlainObject } from '../encodeable/types/Data';
-import { PartialSpec } from '../encodeable/types/Specification';
-import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createMarginSelector';
+import createMarginSelector, { DEFAULT_MARGIN } from '../utils2/createMarginSelector';
 import { BoxPlotDataRow } from './types';
 import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape';
-import createXYChartLayoutWithTheme from '../utils/createXYChartLayoutWithTheme';
-import createEncoderSelector from '../encodeable/createEncoderSelector';
-import createRenderLegend from '../components/legend/createRenderLegend';
-import { LegendHooks } from '../components/legend/types';
+import createXYChartLayoutWithTheme from '../utils2/createXYChartLayoutWithTheme';
+import createRenderLegend from '../components/legend2/createRenderLegend';
+import { LegendHooks } from '../components/legend2/types';
+import { isFieldDef } from '../encodeable/types/ChannelDef';
 
 export interface TooltipProps {
   datum: BoxPlotDataRow;
   color: string;
-  encoder: Encoder;
+  encoder: BoxPlotEncoder;
 }
 
 const defaultProps = {
   className: '',
   margin: DEFAULT_MARGIN,
+  encoding: {},
   theme: chartTheme,
   TooltipRenderer: DefaultTooltipRenderer,
 } as const;
 
 export type HookProps = {
   TooltipRenderer?: React.ComponentType<TooltipProps>;
-} & LegendHooks<Encoder>;
+} & LegendHooks<BoxPlotEncodingConfig>;
 
 type Props = {
   className?: string;
   width: string | number;
   height: string | number;
   margin?: Margin;
+  encoding?: Partial<BoxPlotEncoding>;
   data: Dataset;
   theme?: ChartTheme;
-} & PartialSpec<Encoding> &
-  HookProps &
+} & HookProps &
   Readonly<typeof defaultProps>;
 
 export default class BoxPlot extends React.PureComponent<Props> {
-  private createEncoder = createEncoderSelector(Encoder);
+  private createEncoder = boxPlotEncoderFactory.createSelector();
 
   private createMargin = createMarginSelector();
 
   static defaultProps = defaultProps;
 
-  constructor(props: Props) {
-    super(props);
-
-    this.renderChart = this.renderChart.bind(this);
-  }
-
-  renderChart(dim: Dimension) {
+  renderChart = (dim: Dimension) => {
     const { width, height } = dim;
-    const { data, margin, theme, TooltipRenderer } = this.props;
-    const encoder = this.createEncoder(this.props);
+    const { data, margin, theme, TooltipRenderer, encoding } = this.props;
+    const encoder = this.createEncoder(encoding);
     const { channels } = encoder;
 
-    const isHorizontal = channels.y.definition.type === 'nominal';
+    const isHorizontal =
+      isFieldDef(channels.y.definition) && channels.y.definition.type === 'nominal';
 
-    if (typeof channels.x.scale !== 'undefined') {
-      const xDomain = channels.x.getDomain(data);
-      channels.x.scale.setDomain(xDomain);
-    }
-    if (typeof channels.y.scale !== 'undefined') {
-      const yDomain = channels.y.getDomain(data);
-      channels.y.scale.setDomain(yDomain);
-    }
+    encoder.setDomainFromDataset(data);
 
     const layout = createXYChartLayoutWithTheme({
       width,
@@ -93,34 +86,34 @@ export default class BoxPlot extends React.PureComponent<Props> {
           <TooltipRenderer datum={datum} color={color} encoder={encoder} />
         )}
         theme={theme}
-        xScale={convertScaleToDataUIScale(channels.x.scale!.config)}
-        yScale={convertScaleToDataUIScale(channels.y.scale!.config)}
+        xScale={convertScaleToDataUIScale(channels.x.definition.scale as any)}
+        yScale={convertScaleToDataUIScale(channels.y.definition.scale as any)}
       >
         {layout.renderXAxis()}
         {layout.renderYAxis()}
         <BoxPlotSeries
-          key={channels.x.definition.field}
+          key={isFieldDef(channels.x.definition) ? channels.x.definition.field : ''}
           animated
           data={
             isHorizontal
-              ? data.map(row => ({ ...row, y: channels.y.get(row) }))
-              : data.map(row => ({ ...row, x: channels.x.get(row) }))
+              ? data.map(row => ({ ...row, y: channels.y.getValueFromDatum(row) }))
+              : data.map(row => ({ ...row, x: channels.x.getValueFromDatum(row) }))
           }
-          fill={(datum: PlainObject) => channels.color.encode(datum, '#55acee')}
+          fill={(datum: PlainObject) => channels.color.encodeDatum(datum, '#55acee')}
           fillOpacity={0.4}
-          stroke={(datum: PlainObject) => channels.color.encode(datum)}
+          stroke={(datum: PlainObject) => channels.color.encodeDatum(datum)}
           strokeWidth={1}
           widthRatio={0.6}
-          horizontal={channels.y.definition.type === 'nominal'}
+          horizontal={isHorizontal}
         />
       </XYChart>
     ));
-  }
+  };
 
   render() {
-    const { className, data, width, height } = this.props;
+    const { className, data, encoding, width, height } = this.props;
 
-    const encoder = this.createEncoder(this.props);
+    const encoder = this.createEncoder(encoding);
 
     return (
       <WithLegend

packages/superset-ui-preset-chart-xy/package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import { isDefined } from '@superset-ui/core';
 import { TooltipFrame, TooltipTable } from '@superset-ui/chart-composition';
-import Encoder from './Encoder';
+import { BoxPlotEncoder } from './Encoder';
 import { BoxPlotDataRow } from './types';
 
 export default function DefaultTooltipRenderer({
@@ -11,13 +11,12 @@ export default function DefaultTooltipRenderer({
 }: {
   datum: BoxPlotDataRow;
   color: string;
-  encoder: Encoder;
+  encoder: BoxPlotEncoder;
 }) {
   const { label, min, max, median, firstQuartile, thirdQuartile, outliers } = datum;
   const { channels } = encoder;
 
-  const formatValue =
-    channels.y.definition.type === 'nominal' ? channels.x.formatValue : channels.y.formatValue;
+  const { formatValue } = channels.y;
 
   const data = [];
   if (isDefined(min)) {

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

@@ -1,51 +1,26 @@
-import { Value } from 'vega-lite/build/src/channeldef';
-import { ChannelTypeToDefMap } from '../encodeable/types/Channel';
-import { ExtractChannelOutput } from '../encodeable/types/ChannelDef';
-import createEncoderClass from '../encodeable/createEncoderClass';
+import { createEncoderFactory, Encoder } from 'encodable';
+import { DeriveEncoding } from 'encodable/lib/types/Encoding';
 
-/**
- * Define channel types
- */
-const channelTypes = {
-  color: 'Color',
-  x: 'XBand',
-  y: 'YBand',
-} as const;
-
-export type ChannelTypes = typeof channelTypes;
-
-/**
- * TEMPLATE:
- * Helper for defining encoding
- */
-type CreateChannelDef<
-  ChannelName extends keyof ChannelTypes,
-  Output extends Value
-> = ChannelTypeToDefMap<Output>[ChannelTypes[ChannelName]];
-
-/**
- * Encoding definition
- */
-export type Encoding = {
-  color: CreateChannelDef<'color', string>;
-  x: CreateChannelDef<'x', number | null>;
-  y: CreateChannelDef<'y', number | null>;
+export type BoxPlotEncodingConfig = {
+  x: ['XBand', number];
+  y: ['YBand', number];
+  color: ['Color', string];
 };
 
-/**
- * TEMPLATE:
- * Can use this to get returned type of a Channel
- * example usage: ChannelOutput<'x'>
- */
-export type ChannelOutput<ChannelName extends keyof Encoding> = ExtractChannelOutput<
-  Encoding[ChannelName]
->;
-
-export default class Encoder extends createEncoderClass<ChannelTypes, Encoding>({
-  channelTypes,
+// eslint-disable-next-line import/prefer-default-export
+export const boxPlotEncoderFactory = createEncoderFactory<BoxPlotEncodingConfig>({
+  channelTypes: {
+    x: 'XBand',
+    y: 'YBand',
+    color: 'Color',
+  },
   defaultEncoding: {
-    color: { value: '#222' },
     x: { field: 'x', type: 'nominal' },
     y: { field: 'y', type: 'quantitative' },
+    color: { value: '#222' },
   },
-}) {}
+});
+
+export type BoxPlotEncoding = DeriveEncoding<BoxPlotEncodingConfig>;
+
+export type BoxPlotEncoder = Encoder<BoxPlotEncodingConfig>;

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

@@ -16,7 +16,7 @@ import Encoder, { Encoding, ChannelOutput } from './Encoder';
 import { Dataset, PlainObject } from '../encodeable/types/Data';
 import { PartialSpec } from '../encodeable/types/Specification';
 import DefaultTooltipRenderer from './DefaultTooltipRenderer';
-import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createMarginSelector';
+import createMarginSelector, { DEFAULT_MARGIN } from '../utils2/createMarginSelector';
 import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape';
 import createXYChartLayoutWithTheme from '../utils/createXYChartLayoutWithTheme';
 import createEncoderSelector from '../encodeable/createEncoderSelector';

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

@@ -6,7 +6,7 @@ import { WithLegend } from '@superset-ui/chart-composition';
 import Encoder, { Encoding, ChannelOutput } from './Encoder';
 import { Dataset, PlainObject } from '../encodeable/types/Data';
 import { PartialSpec } from '../encodeable/types/Specification';
-import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createMarginSelector';
+import createMarginSelector, { DEFAULT_MARGIN } from '../utils2/createMarginSelector';
 import DefaultTooltipRenderer from './DefaultTooltipRenderer';
 import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape';
 import { isScaleFieldDef } from '../encodeable/types/ChannelDef';

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

@@ -0,0 +1,52 @@
+import React, { CSSProperties, PureComponent } from 'react';
+import { EncodingConfig } from 'encodable/lib/types/Encoding';
+import { LegendRendererProps } from './types';
+import DefaultLegendGroup from './DefaultLegendGroup';
+
+const LEGEND_CONTAINER_STYLE: CSSProperties = {
+  display: 'flex',
+  flexBasis: 'auto',
+  flexGrow: 1,
+  flexShrink: 1,
+  maxHeight: 100,
+  overflowY: 'auto',
+  position: 'relative',
+};
+
+export type Props<Config extends EncodingConfig> = LegendRendererProps<Config>;
+
+export default class DefaultLegend<Config extends EncodingConfig> extends PureComponent<
+  Props<Config>
+> {
+  render() {
+    const {
+      groups,
+      LegendGroupRenderer = DefaultLegendGroup,
+      LegendItemRenderer,
+      LegendItemMarkRenderer,
+      LegendItemLabelRenderer,
+      style,
+    } = this.props;
+
+    const combinedStyle =
+      typeof style === 'undefined'
+        ? LEGEND_CONTAINER_STYLE
+        : { ...LEGEND_CONTAINER_STYLE, ...style };
+
+    return (
+      <div style={combinedStyle}>
+        {groups
+          .filter(group => 'items' in group && group.items.length > 0)
+          .map(group => (
+            <LegendGroupRenderer
+              key={group.field}
+              group={group}
+              ItemRenderer={LegendItemRenderer}
+              ItemMarkRenderer={LegendItemMarkRenderer}
+              ItemLabelRenderer={LegendItemLabelRenderer}
+            />
+          ))}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,42 @@
+import React, { CSSProperties } from 'react';
+import { EncodingConfig } from 'encodable/lib/types/Encoding';
+import { LegendGroupRendererProps } from './types';
+import DefaultLegendItem from './DefaultLegendItem';
+
+const LEGEND_GROUP_STYLE: CSSProperties = {
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'row',
+  flexGrow: 1,
+  flexShrink: 1,
+  flexWrap: 'wrap',
+  fontSize: '0.8em',
+  justifyContent: 'flex-end',
+  padding: 8,
+};
+
+export default function DefaultLegendGroupRenderer<Config extends EncodingConfig>({
+  group,
+  ItemRenderer = DefaultLegendItem,
+  ItemMarkRenderer,
+  ItemLabelRenderer,
+  style,
+}: LegendGroupRendererProps<Config>) {
+  const combinedStyle =
+    typeof style === 'undefined' ? LEGEND_GROUP_STYLE : { ...LEGEND_GROUP_STYLE, ...style };
+
+  return (
+    <div style={combinedStyle}>
+      {'items' in group &&
+        group.items.map(item => (
+          <ItemRenderer
+            key={`legend-item-${group.field}-${item.input}`}
+            group={group}
+            item={item}
+            MarkRenderer={ItemMarkRenderer}
+            LabelRenderer={ItemLabelRenderer}
+          />
+        ))}
+    </div>
+  );
+}