From 7faf874c1b9613258606fb10f5800a185c30c81e Mon Sep 17 00:00:00 2001 From: Yongjie Zhao Date: Sun, 5 Jun 2022 21:17:31 +0800 Subject: [PATCH] feat: derived metrics use different line style (#20242) --- .../src/operators/utils/index.ts | 1 + .../src/operators/utils/isDerivedSeries.ts | 41 ++++++++ .../operators/boxplotOperator.test.ts | 2 +- .../operators/contributionOperator.test.ts | 2 +- .../operators/flattenOperator.test.ts | 0 .../operators/pivotOperator.test.ts | 2 +- .../operators/prophetOperator.test.ts | 2 +- .../operators/renameOperator.test.ts | 0 .../operators/resampleOperator.test.ts | 0 .../operators/rollingWindowOperator.test.ts | 2 +- .../operators/sortOperator.test.ts | 2 +- .../operators/timeCompareOperator.test.ts | 2 +- .../timeComparePivotOperator.test.ts | 5 +- .../operators/utils/isDerivedSeries.test.ts | 99 +++++++++++++++++++ .../src/Timeseries/transformProps.ts | 6 ++ .../src/Timeseries/transformers.ts | 5 +- 16 files changed, 161 insertions(+), 10 deletions(-) create mode 100644 superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/isDerivedSeries.ts rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/boxplotOperator.test.ts (97%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/contributionOperator.test.ts (96%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/flattenOperator.test.ts (100%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/pivotOperator.test.ts (98%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/prophetOperator.test.ts (98%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/renameOperator.test.ts (100%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/resampleOperator.test.ts (100%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/rollingWindowOperator.test.ts (98%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/sortOperator.test.ts (98%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/timeCompareOperator.test.ts (98%) rename superset-frontend/packages/superset-ui-chart-controls/test/{utils => }/operators/timeComparePivotOperator.test.ts (98%) create mode 100644 superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/index.ts index e4dfbd776908..8d65ca1e590f 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/index.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/index.ts @@ -19,4 +19,5 @@ */ export { getMetricOffsetsMap } from './getMetricOffsetsMap'; export { isTimeComparison } from './isTimeComparison'; +export { isDerivedSeries } from './isDerivedSeries'; export { TIME_COMPARISON_SEPARATOR } from './constants'; diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/isDerivedSeries.ts b/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/isDerivedSeries.ts new file mode 100644 index 000000000000..24623e5570f3 --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/src/operators/utils/isDerivedSeries.ts @@ -0,0 +1,41 @@ +/* eslint-disable camelcase */ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitationsxw + * under the License. + */ +import { + ensureIsArray, + JsonObject, + QueryFormData, + ComparisionType, +} from '@superset-ui/core'; +import { isString } from 'lodash'; + +export const isDerivedSeries = ( + series: JsonObject, + formData: QueryFormData, +): boolean => { + const comparisonType = formData.comparison_type; + if (comparisonType !== ComparisionType.Values) { + return false; + } + + const timeCompare: string[] = ensureIsArray(formData?.time_compare); + return isString(series.name) + ? !!timeCompare.find(timeOffset => series.name.endsWith(timeOffset)) + : false; +}; diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/boxplotOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts similarity index 97% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/boxplotOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts index 4699fba9f699..2bc353b7e3c3 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/boxplotOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/boxplotOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { boxplotOperator } from '../../../src'; +import { boxplotOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/contributionOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts similarity index 96% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/contributionOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts index aa6404bb2635..2f571836fcdc 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/contributionOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/contributionOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { contributionOperator } from '../../../src'; +import { contributionOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/flattenOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/flattenOperator.test.ts similarity index 100% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/flattenOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/flattenOperator.test.ts diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/pivotOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts similarity index 98% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/pivotOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts index 9787136cbca3..326b7edd8573 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/pivotOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/pivotOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { pivotOperator } from '../../../src'; +import { pivotOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/prophetOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts similarity index 98% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/prophetOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts index 48ced3ba1f2a..824efe5c15cc 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/prophetOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/prophetOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { DTTM_ALIAS, QueryObject, SqlaFormData } from '@superset-ui/core'; -import { prophetOperator } from '../../../src'; +import { prophetOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/renameOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts similarity index 100% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/renameOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/renameOperator.test.ts diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/resampleOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/resampleOperator.test.ts similarity index 100% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/resampleOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/resampleOperator.test.ts diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/rollingWindowOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts similarity index 98% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/rollingWindowOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts index eec2bb73efea..5bd37a4d9c76 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/rollingWindowOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/rollingWindowOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { rollingWindowOperator } from '../../../src'; +import { rollingWindowOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/sortOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts similarity index 98% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/sortOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts index 54cf34834889..6f0267d91305 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/sortOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/sortOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { sortOperator } from '../../../src'; +import { sortOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeCompareOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts similarity index 98% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeCompareOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts index 197ccee7bb02..a2e6b313801d 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeCompareOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeCompareOperator.test.ts @@ -17,7 +17,7 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { timeCompareOperator } from '../../../src'; +import { timeCompareOperator } from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeComparePivotOperator.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts similarity index 98% rename from superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeComparePivotOperator.test.ts rename to superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts index b12f6ebe30c6..4ce88cb9c124 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/operators/timeComparePivotOperator.test.ts +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/timeComparePivotOperator.test.ts @@ -17,7 +17,10 @@ * under the License. */ import { QueryObject, SqlaFormData } from '@superset-ui/core'; -import { timeCompareOperator, timeComparePivotOperator } from '../../../src'; +import { + timeCompareOperator, + timeComparePivotOperator, +} from '@superset-ui/chart-controls'; const formData: SqlaFormData = { metrics: [ diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts new file mode 100644 index 000000000000..05a1d738abc8 --- /dev/null +++ b/superset-frontend/packages/superset-ui-chart-controls/test/operators/utils/isDerivedSeries.test.ts @@ -0,0 +1,99 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { isDerivedSeries } from '@superset-ui/chart-controls'; +import { SqlaFormData, ComparisionType } from '@superset-ui/core'; + +const formData: SqlaFormData = { + datasource: 'foo', + viz_type: 'table', +}; +const series = { + id: 'metric__1 month ago', + name: 'metric__1 month ago', + data: [100], +}; + +test('should be false if comparison type is not actual values', () => { + expect(isDerivedSeries(series, formData)).toEqual(false); + Object.keys(ComparisionType) + .filter(type => type === ComparisionType.Values) + .forEach(type => { + const formDataWithComparisionType = { + ...formData, + comparison_type: type, + time_compare: ['1 month ago'], + }; + expect(isDerivedSeries(series, formDataWithComparisionType)).toEqual( + false, + ); + }); +}); + +test('should be true if comparison type is values', () => { + const formDataWithActualTypes = { + ...formData, + comparison_type: ComparisionType.Values, + time_compare: ['1 month ago', '1 month later'], + }; + expect(isDerivedSeries(series, formDataWithActualTypes)).toEqual(true); +}); + +test('should be false if series name does not match time_compare', () => { + const arbitrary_series = { + id: 'arbitrary column', + name: 'arbitrary column', + data: [100], + }; + const formDataWithActualTypes = { + ...formData, + comparison_type: ComparisionType.Values, + time_compare: ['1 month ago', '1 month later'], + }; + expect(isDerivedSeries(arbitrary_series, formDataWithActualTypes)).toEqual( + false, + ); +}); + +test('should be false if time compare is not suffix', () => { + const series = { + id: '1 month ago__metric', + name: '1 month ago__metric', + data: [100], + }; + const formDataWithActualTypes = { + ...formData, + comparison_type: ComparisionType.Values, + time_compare: ['1 month ago', '1 month later'], + }; + expect(isDerivedSeries(series, formDataWithActualTypes)).toEqual(false); +}); + +test('should be false if series name invalid', () => { + const series = { + id: 123, + name: 123, + data: [100], + }; + const formDataWithActualTypes = { + ...formData, + comparison_type: ComparisionType.Values, + time_compare: ['1 month ago', '1 month later'], + }; + expect(isDerivedSeries(series, formDataWithActualTypes)).toEqual(false); +}); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 87396c0015d7..8b91308b2046 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -31,7 +31,9 @@ import { isTimeseriesAnnotationLayer, TimeseriesChartDataResponseResult, } from '@superset-ui/core'; +import { isDerivedSeries } from '@superset-ui/chart-controls'; import { EChartsCoreOption, SeriesOption } from 'echarts'; +import { ZRLineType } from 'echarts/types/src/util/types'; import { DEFAULT_FORM_DATA, EchartsTimeseriesChartProps, @@ -181,6 +183,9 @@ export default function transformProps( } rawSeries.forEach(entry => { + const lineStyle = isDerivedSeries(entry, chartProps.rawFormData) + ? { type: 'dashed' as ZRLineType } + : {}; const transformedSeries = transformSeries(entry, colorScale, { area, filterState, @@ -199,6 +204,7 @@ export default function transformProps( richTooltip, sliceId, isHorizontal, + lineStyle, }); if (transformedSeries) series.push(transformedSeries); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index d514f969d623..4ab7309dbca8 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -87,6 +87,7 @@ export function transformSeries( seriesKey?: OptionName; sliceId?: number; isHorizontal?: boolean; + lineStyle?: LineStyleOption; }, ): SeriesOption | undefined { const { name } = series; @@ -183,8 +184,8 @@ export function transformSeries( } } const lineStyle = isConfidenceBand - ? { opacity: OpacityEnum.Transparent } - : { opacity }; + ? { ...opts.lineStyle, opacity: OpacityEnum.Transparent } + : { ...opts.lineStyle, opacity }; return { ...series, yAxisIndex,