From cddc01a0a9f2412ad3fa22a8862aef504ba35a03 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Thu, 30 May 2019 10:19:05 -0700 Subject: [PATCH] fix: convert scale config to data-ui's config correctly (#115) --- .../src/BoxPlot/BoxPlot.tsx | 5 +- .../src/Line/Line.tsx | 5 +- .../src/ScatterPlot/ScatterPlot.tsx | 5 +- .../src/encodeable/types/Scale.ts | 4 +- .../src/utils/XYChartLayout.tsx | 5 +- .../utils/convertScaleToDataUIScaleShape.ts | 62 +++++++++++++++++++ 6 files changed, 77 insertions(+), 9 deletions(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/convertScaleToDataUIScaleShape.ts 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 51b7d61d366c..0d0776aa8fdb 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 @@ -13,6 +13,7 @@ import { PartialSpec } from '../encodeable/types/Specification'; import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createMarginSelector'; import createXYChartLayoutSelector from '../utils/selectors/createXYChartLayoutSelector'; import { BoxPlotDataRow } from './types'; +import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape'; export interface TooltipProps { datum: BoxPlotDataRow; @@ -116,8 +117,8 @@ export default class BoxPlot extends React.PureComponent { )} showYGrid theme={theme} - xScale={channels.x.definition.scale} - yScale={channels.y.definition.scale} + xScale={convertScaleToDataUIScale(channels.x.scale!.config)} + yScale={convertScaleToDataUIScale(channels.y.scale!.config)} > {children} {layout.renderXAxis()} 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 1fb7b4dad4f4..c9cd4f173084 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 @@ -24,6 +24,7 @@ import { PartialSpec } from '../encodeable/types/Specification'; import DefaultTooltipRenderer from './DefaultTooltipRenderer'; import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createMarginSelector'; import createXYChartLayoutSelector from '../utils/selectors/createXYChartLayoutSelector'; +import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape'; export interface TooltipProps { encoder: Encoder; @@ -255,8 +256,8 @@ export default class LineChart extends PureComponent { snapTooltipToDataX theme={theme} tooltipData={tooltipData} - xScale={channels.x.definition.scale} - yScale={channels.y.definition.scale} + xScale={convertScaleToDataUIScale(channels.x.scale!.config)} + yScale={convertScaleToDataUIScale(channels.y.scale!.config)} > {children} {layout.renderXAxis()} 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 8e974839b2a9..7c6241172af2 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 @@ -13,6 +13,7 @@ import { PartialSpec } from '../encodeable/types/Specification'; import createMarginSelector, { DEFAULT_MARGIN } from '../utils/selectors/createMarginSelector'; import createXYChartLayoutSelector from '../utils/selectors/createXYChartLayoutSelector'; import DefaultTooltipRenderer from './DefaultTooltipRenderer'; +import convertScaleToDataUIScale from '../utils/convertScaleToDataUIScaleShape'; export interface TooltipProps { datum: EncodedPoint; @@ -131,8 +132,8 @@ export default class ScatterPlot extends PureComponent { )} showYGrid theme={theme} - xScale={channels.x.definition.scale} - yScale={channels.y.definition.scale} + xScale={convertScaleToDataUIScale(channels.x.scale!.config)} + yScale={convertScaleToDataUIScale(channels.y.scale!.config)} > {children} {layout.renderXAxis()} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Scale.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Scale.ts index 2f8e58a6b52f..3d8f5d3fd48b 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Scale.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/encodeable/types/Scale.ts @@ -5,11 +5,13 @@ import { SchemeParams, ScaleType } from 'vega-lite/build/src/scale'; export interface Scale { type?: ScaleType; domain?: number[] | string[] | boolean[] | DateTime[]; + paddingInner?: number; + paddingOuter?: number; range?: Output[]; clamp?: boolean; nice?: boolean; scheme?: string | SchemeParams; - // vega-lite does not have this + /** vega-lite does not have this */ namespace?: string; } 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 536accebc8b3..de104fe52b6d 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 @@ -12,6 +12,7 @@ import { AxisOrient } from '../encodeable/types/Axis'; import { XFieldDef, YFieldDef } from '../encodeable/types/ChannelDef'; import { PlainObject } from '../encodeable/types/Data'; import { DEFAULT_LABEL_ANGLE } from './constants'; +import convertScaleToDataUIScale from './convertScaleToDataUIScaleShape'; // Additional margin to avoid content hidden behind scroll bar const OVERFLOW_MARGIN = 8; @@ -71,8 +72,8 @@ export default class XYChartLayout { width, height, margin, - xScale: xEncoder.definition.scale || {}, - yScale: yEncoder.definition.scale || {}, + xScale: convertScaleToDataUIScale(xEncoder.scale!.config || {}), + yScale: convertScaleToDataUIScale(yEncoder.scale!.config || {}), theme, children, }); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/convertScaleToDataUIScaleShape.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/convertScaleToDataUIScaleShape.ts new file mode 100644 index 000000000000..78f886531b0e --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-preset-chart-xy/src/utils/convertScaleToDataUIScaleShape.ts @@ -0,0 +1,62 @@ +import { Value } from 'vega-lite/build/src/channeldef'; +import { Scale } from '../encodeable/types/Scale'; + +type DataUIScaleType = 'time' | 'timeUtc' | 'linear' | 'band'; + +interface DataUIScale { + type: DataUIScaleType; + domain?: number[] | string[]; + includeZero?: boolean; + nice?: boolean; + paddingInner?: number; + paddingOuter?: number; + range?: number[] | string[]; + rangeRound?: number[] | string[]; +} + +function isCompatibleDomainOrRange( + array: Scale['domain'] | Scale['range'], +): array is number[] | string[] { + return ( + typeof array !== 'undefined' && + array.length > 0 && + (typeof array[0] === 'string' || typeof array[0] === 'number') + ); +} + +/** + * Convert encodeable scale object into @data-ui's scale config + * @param scale + */ +export default function convertScaleToDataUIScale(scale: Scale) { + const { type, domain, range, nice, paddingInner, paddingOuter } = scale; + + let outputType: DataUIScaleType; + + if (type === 'linear' || type === 'time' || type === 'band') { + outputType = type; + } else if (type === 'utc') { + outputType = 'timeUtc'; + } else { + throw new Error(`Unsupported scale type: ${type}`); + } + + const output: DataUIScale = { type: outputType }; + if (isCompatibleDomainOrRange(domain)) { + output.domain = domain; + } + if (isCompatibleDomainOrRange(range)) { + output.range = range; + } + if (typeof nice !== 'undefined') { + output.nice = nice; + } + if (typeof paddingInner !== 'undefined') { + output.paddingInner = paddingInner; + } + if (typeof paddingOuter !== 'undefined') { + output.paddingOuter = paddingOuter; + } + + return output; +}