feat: derived metrics use different line style (#20242)

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';

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;
+};

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: [

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: [

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: [

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: [

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: [

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: [

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: [

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: [

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);
+});

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);
   });

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,