From 9add9b8e6470c5cb7ae1e9370e6ccdfb4f54a8ce Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Fri, 17 May 2019 00:01:34 -0700 Subject: [PATCH] refactor: use composition package (#104) * refactor: use composition package * refactor: remove WithLegend and ChartFrame --- .../plugins/superset-ui-plugins/package.json | 1 + .../superset-ui-plugins-demo/package.json | 1 + .../superset-ui-preset-chart-xy/package.json | 13 +- .../src/BoxPlot/BoxPlot.tsx | 2 +- .../src/BoxPlot/createTooltip.tsx | 5 +- .../src/Line/DefaultTooltipRenderer.tsx | 3 +- .../src/Line/Line.tsx | 3 +- .../src/ScatterPlot/ScatterPlot.tsx | 2 +- .../src/ScatterPlot/createTooltip.tsx | 3 +- .../src/components/ChartFrame.tsx | 47 ------- .../src/components/WithLegend.tsx | 132 ------------------ .../src/components/tooltip/TooltipFrame.tsx | 26 ---- .../src/components/tooltip/TooltipTable.tsx | 40 ------ .../src/utils/XYChartLayout.tsx | 2 +- 14 files changed, 17 insertions(+), 263 deletions(-) delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/ChartFrame.tsx delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/WithLegend.tsx delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipFrame.tsx delete mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipTable.tsx 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 f79ef2da4921a..a79243ee25cd8 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 @@ -42,6 +42,7 @@ "@superset-ui/build-config": "^0.0.9", "@superset-ui/commit-config": "^0.0.9", "@superset-ui/chart": "^0.11.6", + "@superset-ui/chart-composition": "^0.11.5", "@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 8087be49c6a6d..4dcb0bdb2c01e 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 @@ -50,6 +50,7 @@ }, "peerDependencies": { "@superset-ui/chart": "^0.11.6", + "@superset-ui/chart-composition": "^0.11.5", "@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 95827406f85ec..9365d49b5c0ef 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 @@ -48,12 +48,13 @@ }, "peerDependencies": { "@superset-ui/chart": "^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", - "@superset-ui/number-format": "^0.10.0 || ^0.11.0", - "@superset-ui/time-format": "^0.10.0 || ^0.11.0", - "@superset-ui/translation": "^0.10.0 || ^0.11.0", + "@superset-ui/chart-composition": "^0.11.5", + "@superset-ui/color": "^0.11.0", + "@superset-ui/core": "^0.11.0", + "@superset-ui/dimension": "^0.11.0", + "@superset-ui/number-format": "^0.11.0", + "@superset-ui/time-format": "^0.11.0", + "@superset-ui/translation": "^0.11.0", "react": "^16.2" } } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx index 089f40d2ea52c..bafac12f4ea5c 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/BoxPlot.tsx @@ -3,10 +3,10 @@ import React from 'react'; import { BoxPlotSeries, XYChart } from '@data-ui/xy-chart'; import { chartTheme, ChartTheme } from '@data-ui/theme'; import { Margin, Dimension } from '@superset-ui/dimension'; +import { WithLegend } from '@superset-ui/chart-composition'; import { createSelector } from 'reselect'; import createTooltip from './createTooltip'; import XYChartLayout from '../utils/XYChartLayout'; -import WithLegend from '../components/WithLegend'; import ChartLegend from '../components/legend/ChartLegend'; import Encoder, { ChannelTypes, Encoding, Outputs } from './Encoder'; import { Dataset, PlainObject } from '../encodeable/types/Data'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/createTooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/createTooltip.tsx index 23c0633cd4514..f32146c5eda4f 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/createTooltip.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/BoxPlot/createTooltip.tsx @@ -1,7 +1,6 @@ -import { isDefined } from '@superset-ui/core'; import React from 'react'; -import TooltipFrame from '../components/tooltip/TooltipFrame'; -import TooltipTable from '../components/tooltip/TooltipTable'; +import { isDefined } from '@superset-ui/core'; +import { TooltipFrame, TooltipTable } from '@superset-ui/chart-composition'; import Encoder from './Encoder'; import { BoxPlotDataRow } from './types'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx index 59b1f4626103d..4ad383a48425a 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/Line/DefaultTooltipRenderer.tsx @@ -1,9 +1,8 @@ /* eslint-disable no-magic-numbers */ import React from 'react'; +import { TooltipFrame, TooltipTable } from '@superset-ui/chart-composition'; import { chartTheme } from '@data-ui/theme'; -import TooltipFrame from '../components/tooltip/TooltipFrame'; -import TooltipTable from '../components/tooltip/TooltipTable'; import { TooltipInput } from './Line'; const MARK_STYLE = { marginRight: 4 }; 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 c83d91a803395..c9d62f9757c3d 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 @@ -12,10 +12,9 @@ import { } from '@data-ui/xy-chart'; import { chartTheme } from '@data-ui/theme'; import { Margin, Dimension } from '@superset-ui/dimension'; - +import { WithLegend } from '@superset-ui/chart-composition'; import { createSelector } from 'reselect'; 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, { Hooks as LegendHooks } from '../components/legend/ChartLegend'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx index 1ba6316f417dd..e267799eca460 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/ScatterPlot.tsx @@ -3,11 +3,11 @@ import React, { PureComponent } from 'react'; import { XYChart, PointSeries } from '@data-ui/xy-chart'; import { chartTheme, ChartTheme } from '@data-ui/theme'; import { Margin, Dimension } from '@superset-ui/dimension'; +import { WithLegend } from '@superset-ui/chart-composition'; import { extent as d3Extent } from 'd3-array'; import { createSelector } from 'reselect'; import createTooltip from './createTooltip'; 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'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/createTooltip.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/createTooltip.tsx index aabb41f003afb..badf3658e3a97 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/createTooltip.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/ScatterPlot/createTooltip.tsx @@ -1,8 +1,7 @@ /* eslint-disable no-magic-numbers */ import React from 'react'; -import TooltipFrame from '../components/tooltip/TooltipFrame'; -import TooltipTable from '../components/tooltip/TooltipTable'; +import { TooltipFrame, TooltipTable } from '@superset-ui/chart-composition'; import Encoder from './Encoder'; import { isFieldDef } from '../encodeable/types/ChannelDef'; import { EncodedPoint } from './ScatterPlot'; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/ChartFrame.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/ChartFrame.tsx deleted file mode 100644 index 6165ade37d8c0..0000000000000 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/ChartFrame.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React, { PureComponent } from 'react'; -import { isDefined } from '@superset-ui/core'; - -function checkNumber(input: any): input is number { - return isDefined(input) && typeof input === 'number'; -} - -type Props = { - contentWidth?: number; - contentHeight?: number; - height: number; - renderContent: ({ height, width }: { height: number; width: number }) => React.ReactNode; - width: number; -}; - -export default class ChartFrame extends PureComponent { - static defaultProps = { - renderContent() {}, - }; - - render() { - const { contentWidth, contentHeight, width, height, renderContent } = this.props; - - const overflowX = checkNumber(contentWidth) && contentWidth > width; - const overflowY = checkNumber(contentHeight) && contentHeight > height; - - if (overflowX || overflowY) { - return ( -
- {renderContent({ - height: Math.max(contentHeight || 0, height), - width: Math.max(contentWidth || 0, width), - })} -
- ); - } - - return renderContent({ height, width }); - } -} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/WithLegend.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/WithLegend.tsx deleted file mode 100644 index 5e3cf6c4a65e6..0000000000000 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/WithLegend.tsx +++ /dev/null @@ -1,132 +0,0 @@ -/* eslint-disable sort-keys */ -import React, { CSSProperties, ReactNode, PureComponent } from 'react'; -import { ParentSize } from '@vx/responsive'; -// eslint-disable-next-line import/no-unresolved -import * as CSS from 'csstype'; - -const defaultProps = { - className: '', - height: 'auto' as number | string, - width: 'auto' as number | string, - legendJustifyContent: undefined, - position: 'top', -}; - -type Props = { - className: string; - width: number | string; - height: number | string; - legendJustifyContent: 'center' | 'flex-start' | 'flex-end'; - position: 'top' | 'left' | 'bottom' | 'right'; - renderChart: (dim: { width: number; height: number }) => ReactNode; - renderLegend?: (params: { direction: string }) => ReactNode; -} & Readonly; - -const LEGEND_STYLE_BASE: CSSProperties = { - display: 'flex', - flexGrow: 0, - flexShrink: 0, - fontSize: '0.9em', - order: -1, - paddingTop: '5px', -}; - -const CHART_STYLE_BASE: CSSProperties = { - flexBasis: 'auto', - flexGrow: 1, - flexShrink: 1, - position: 'relative', -}; - -class WithLegend extends PureComponent { - static defaultProps = defaultProps; - - getContainerDirection(): CSS.FlexDirectionProperty { - const { position } = this.props; - switch (position) { - case 'left': - return 'row'; - case 'right': - return 'row-reverse'; - case 'bottom': - return 'column-reverse'; - default: - case 'top': - return 'column'; - } - } - - getLegendJustifyContent() { - const { legendJustifyContent, position } = this.props; - if (legendJustifyContent) { - return legendJustifyContent; - } - switch (position) { - case 'left': - return 'flex-start'; - case 'right': - return 'flex-start'; - case 'bottom': - return 'flex-end'; - default: - case 'top': - return 'flex-end'; - } - } - - render() { - const { className, width, height, position, renderChart, renderLegend } = this.props; - - const isHorizontal = position === 'left' || position === 'right'; - - const style: CSSProperties = { - display: 'flex', - flexDirection: this.getContainerDirection(), - }; - if (width) { - style.width = width; - } - if (height) { - style.height = height; - } - - const chartStyle: CSSProperties = { ...CHART_STYLE_BASE }; - if (isHorizontal) { - chartStyle.width = 0; - } else { - chartStyle.height = 0; - } - - const legendDirection = isHorizontal ? 'column' : 'row'; - const legendStyle: CSSProperties = { - ...LEGEND_STYLE_BASE, - flexDirection: legendDirection, - justifyContent: this.getLegendJustifyContent(), - }; - - return ( -
- {renderLegend && ( -
- {renderLegend({ - // Pass flexDirection for @vx/legend to arrange legend items - direction: legendDirection, - })} -
- )} -
- - {(parent: { width: number; height: number }) => - parent.width > 0 && parent.height > 0 - ? // Only render when necessary - renderChart(parent) - : null - } - -
-
- ); - } -} - -export default WithLegend; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipFrame.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipFrame.tsx deleted file mode 100644 index e4e3857959f3a..0000000000000 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipFrame.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { PureComponent } from 'react'; - -type Props = { - className?: string; - children: React.ReactNode; -}; - -const CONTAINER_STYLE = { padding: 8 }; - -class TooltipFrame extends PureComponent { - static defaultProps = { - className: '', - }; - - render() { - const { className, children } = this.props; - - return ( -
- {children} -
- ); - } -} - -export default TooltipFrame; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipTable.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipTable.tsx deleted file mode 100644 index e0fc6c4d63c5a..0000000000000 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/components/tooltip/TooltipTable.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { CSSProperties, PureComponent, ReactNode } from 'react'; - -type Props = { - className?: string; - data: { - key: string | number; - keyColumn?: ReactNode; - keyStyle?: CSSProperties; - valueColumn: ReactNode; - valueStyle?: CSSProperties; - }[]; -}; - -const VALUE_CELL_STYLE: CSSProperties = { paddingLeft: 8, textAlign: 'right' }; - -export default class TooltipTable extends PureComponent { - static defaultProps = { - className: '', - data: [], - }; - - render() { - const { className, data } = this.props; - - return ( - - - {data.map(({ key, keyColumn, keyStyle, valueColumn, valueStyle }, i) => ( - - - - - ))} - -
{keyColumn || key} - {valueColumn} -
- ); - } -} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx index c6a157adb3c76..3e8caf3e42ed9 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/XYChartLayout.tsx @@ -5,8 +5,8 @@ import collectScalesFromProps from '@data-ui/xy-chart/esm/utils/collectScalesFro import { XAxis, YAxis } from '@data-ui/xy-chart'; import { ChartTheme } from '@data-ui/theme'; import { Margin, mergeMargin } from '@superset-ui/dimension'; +import { ChartFrame } from '@superset-ui/chart-composition'; import createTickComponent from './createTickComponent'; -import ChartFrame from '../components/ChartFrame'; import ChannelEncoder from '../encodeable/ChannelEncoder'; import { AxisOrient } from '../encodeable/types/Axis'; import { XFieldDef, YFieldDef } from '../encodeable/types/ChannelDef';