From 97a95ffcda35df79a00bd483044507fe64cfe421 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 16 May 2019 15:17:38 -0700 Subject: [PATCH] feat: support tooltip and legend overrides (#101) --- .../plugins/superset-ui-plugins/package.json | 2 +- .../superset-ui-plugins-demo/package.json | 2 +- .../superset-ui-preset-chart-xy/package.json | 2 +- .../src/Line/ChartFormData.ts | 12 +--- ...Tooltip.tsx => DefaultTooltipRenderer.tsx} | 2 +- .../src/Line/Line.tsx | 72 +++++++++++++------ .../src/Line/transformProps.ts | 32 +++++++-- 7 files changed, 82 insertions(+), 42 deletions(-) rename superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/{renderTooltip.tsx => DefaultTooltipRenderer.tsx} (97%) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json index eb772b24a41cd..f79ef2da4921a 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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", diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json index e068f8a072f5f..dbf2f5ab5c610 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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", diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/package.json index 3495a3d1f4a56..0e8b113da47f8 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/package.json +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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", diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/ChartFormData.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/ChartFormData.ts index bf62054bbedde..e3fcd9c5e6ec3 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/ChartFormData.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/renderTooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx similarity index 97% rename from superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/renderTooltip.tsx rename to superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx index 5f466567be953..59b1f4626103d 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/renderTooltip.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx index 77fc54cffe4dc..26889909aef4c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/Line.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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; + +export type Hooks = { + TooltipRenderer?: React.ComponentType; +} & LegendHooks; + type Props = { className?: string; width: string | number; height: string | number; - margin?: Margin; data: Dataset; - theme?: ChartTheme; - renderTooltip?: React.ComponentType; -} & PartialSpec & +} & Hooks & + RenderingFormData & Readonly; export interface Series { @@ -94,12 +102,13 @@ class LineChart extends PureComponent { }; 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 { y: number; }; }; - }) => - renderTooltip({ - encoder: this.encoder, - allSeries, - theme, - datum, - series, - }) - } + }) => ( + + )} > {({ onMouseLeave, @@ -258,14 +267,31 @@ class LineChart extends PureComponent { )); } + renderLegend() { + const { + data, + LegendGroupRenderer, + LegendItemRenderer, + LegendItemLabelRenderer, + LegendItemMarkRenderer, + } = this.props; + + return ( + + 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 - () => data={data} encoder={this.encoder} /> - : undefined; return ( { width={width} height={height} position="top" - renderLegend={renderLegend} + renderLegend={this.encoder.hasLegend() ? this.renderLegend : undefined} renderChart={this.renderChart} /> ); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/transformProps.ts index 7933ebd4760ca..2354954de59bf 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/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), }; }