feat: support tooltip and legend overrides (#101)

package.json

@@ -41,7 +41,7 @@
   "devDependencies": {
     "@superset-ui/build-config": "^0.0.9",
     "@superset-ui/commit-config": "^0.0.9",
-    "@superset-ui/chart": "^0.11.3",
+    "@superset-ui/chart": "^0.11.6",
     "@superset-ui/color": "^0.11.3",
     "@superset-ui/connection": "^0.11.0",
     "@superset-ui/core": "^0.11.0",

packages/superset-ui-plugins-demo/package.json

@@ -49,7 +49,7 @@
     "gh-pages": "^2.0.1"
   },
   "peerDependencies": {
-    "@superset-ui/chart": "^0.11.0",
+    "@superset-ui/chart": "^0.11.6",
     "@superset-ui/color": "^0.11.0",
     "@superset-ui/connection": "^0.11.0",
     "@superset-ui/time-format": "^0.11.0",

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

@@ -47,7 +47,7 @@
     "vega-lite": "^3.1.0"
   },
   "peerDependencies": {
-    "@superset-ui/chart": "^0.10.2 || ^0.11.0",
+    "@superset-ui/chart": "^0.10.2 || ^0.11.6",
     "@superset-ui/color": "^0.10.0 || ^0.11.0",
     "@superset-ui/core": "^0.10.0 || ^0.11.0",
     "@superset-ui/dimension": "^0.10.4 || ^0.11.0",

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

@@ -1,12 +1,6 @@
 import { ChartFormData } from '@superset-ui/chart';
-import { Margin } from '@superset-ui/dimension';
-import { ChartTheme } from '@data-ui/theme';
-import { Encoding } from './Encoder';
+import { RenderingFormData } from './Line';
 
-type LineFormData = ChartFormData & {
-  encoding: Encoding;
-  margin?: Margin;
-  theme?: ChartTheme;
-};
+type CombinedFormData = ChartFormData & RenderingFormData;
 
-export default LineFormData;
+export default CombinedFormData;

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

@@ -8,7 +8,7 @@ import { TooltipInput } from './Line';
 
 const MARK_STYLE = { marginRight: 4 };
 
-export default function renderTooltip({
+export default function DefaultTooltipRenderer({
   allSeries,
   datum,
   encoder,

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

@@ -18,9 +18,9 @@ import XYChartLayout from '../utils/XYChartLayout';
 import WithLegend from '../components/WithLegend';
 import Encoder, { ChannelTypes, Encoding, Outputs } from './Encoder';
 import { Dataset, PlainObject } from '../encodeable/types/Data';
-import ChartLegend from '../components/legend/ChartLegend';
+import ChartLegend, { Hooks as LegendHooks } from '../components/legend/ChartLegend';
 import { PartialSpec } from '../encodeable/types/Specification';
-import defaultTooltip from './renderTooltip';
+import DefaultTooltipRenderer from './DefaultTooltipRenderer';
 
 chartTheme.gridStyles.stroke = '#f1f3f5';
 
@@ -40,20 +40,28 @@ export interface TooltipInput {
 
 const defaultProps = {
   className: '',
-  renderTooltip: defaultTooltip,
   margin: DEFAULT_MARGIN,
   theme: chartTheme,
+  TooltipRenderer: DefaultTooltipRenderer,
 };
 
+/** Part of formData that is needed for rendering logic in this file */
+export type RenderingFormData = {
+  margin?: Margin;
+  theme?: ChartTheme;
+} & PartialSpec<Encoding>;
+
+export type Hooks = {
+  TooltipRenderer?: React.ComponentType<TooltipInput>;
+} & LegendHooks<ChannelTypes>;
+
 type Props = {
   className?: string;
   width: string | number;
   height: string | number;
-  margin?: Margin;
   data: Dataset;
-  theme?: ChartTheme;
-  renderTooltip?: React.ComponentType<TooltipInput>;
-} & PartialSpec<Encoding> &
+} & Hooks &
+  RenderingFormData &
   Readonly<typeof defaultProps>;
 
 export interface Series {
@@ -94,12 +102,13 @@ class LineChart extends PureComponent<Props> {
     };
 
     this.encoder = createEncoder(this.props);
+    this.renderLegend = this.renderLegend.bind(this);
     this.renderChart = this.renderChart.bind(this);
   }
 
   renderChart(dim: Dimension) {
     const { width, height } = dim;
-    const { data, margin, theme, renderTooltip } = this.props;
+    const { data, margin, theme, TooltipRenderer } = this.props;
 
     const { channels } = this.encoder;
     const fieldNames = this.encoder.getGroupBys();
@@ -198,15 +207,15 @@ class LineChart extends PureComponent<Props> {
               y: number;
             };
           };
-        }) =>
-          renderTooltip({
-            encoder: this.encoder,
-            allSeries,
-            theme,
-            datum,
-            series,
-          })
-        }
+        }) => (
+          <TooltipRenderer
+            encoder={this.encoder}
+            allSeries={allSeries}
+            datum={datum}
+            series={series}
+            theme={theme}
+          />
+        )}
       >
         {({
           onMouseLeave,
@@ -258,22 +267,39 @@ class LineChart extends PureComponent<Props> {
     ));
   }
 
+  renderLegend() {
+    const {
+      data,
+      LegendGroupRenderer,
+      LegendItemRenderer,
+      LegendItemLabelRenderer,
+      LegendItemMarkRenderer,
+    } = this.props;
+
+    return (
+      <ChartLegend<ChannelTypes, Outputs, Encoding>
+        data={data}
+        encoder={this.encoder}
+        LegendGroupRenderer={LegendGroupRenderer}
+        LegendItemRenderer={LegendItemRenderer}
+        LegendItemMarkRenderer={LegendItemMarkRenderer}
+        LegendItemLabelRenderer={LegendItemLabelRenderer}
+      />
+    );
+  }
+
   render() {
-    const { className, data, width, height } = this.props;
+    const { className, width, height } = this.props;
 
     this.createEncoder();
-    const renderLegend = this.encoder.hasLegend()
-      ? // eslint-disable-next-line react/jsx-props-no-multi-spaces
-        () => <ChartLegend<ChannelTypes, Outputs, Encoding> data={data} encoder={this.encoder} />
-      : undefined;
 
     return (
       <WithLegend
         className={`superset-chart-line ${className}`}
         width={width}
         height={height}
         position="top"
-        renderLegend={renderLegend}
+        renderLegend={this.encoder.hasLegend() ? this.renderLegend : undefined}
         renderChart={this.renderChart}
       />
     );

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

@@ -1,20 +1,40 @@
+import { pick } from 'lodash';
 import { ChartProps } from '@superset-ui/chart';
-import ChartFormData from './ChartFormData';
+import { Hooks, RenderingFormData } from './Line';
 
 /* eslint-disable sort-keys */
 
 export default function transformProps(chartProps: ChartProps) {
   const { width, height, payload } = chartProps;
-  const formData = chartProps.formData as ChartFormData;
-  const { encoding, margin, theme } = formData;
   const { data } = payload;
+  const formData = chartProps.formData as RenderingFormData;
+  const hooks = chartProps.hooks as Hooks;
+
+  /**
+   * 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 RenderingFormData)[] = [
+    'commonEncoding',
+    'encoding',
+    'margin',
+    'options',
+    'theme',
+  ];
+
+  const fieldsFromHooks: (keyof Hooks)[] = [
+    'TooltipRenderer',
+    'LegendGroupRenderer',
+    'LegendItemRenderer',
+    'LegendItemMarkRenderer',
+    'LegendItemLabelRenderer',
+  ];
 
   return {
     data,
     width,
     height,
-    encoding,
-    margin,
-    theme,
+    ...pick(formData, fieldsFromFormData),
+    ...pick(hooks, fieldsFromHooks),
   };
 }