You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yo...@apache.org on 2022/09/26 12:14:51 UTC
[superset] branch master updated: feat: adding XAxis to BigNumberTrend (#21577)
This is an automated email from the ASF dual-hosted git repository.
yongjiezhao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new f4646f8edb feat: adding XAxis to BigNumberTrend (#21577)
f4646f8edb is described below
commit f4646f8edba396dba24e6ff4fbc054d073d77fd7
Author: Yongjie Zhao <yo...@apache.org>
AuthorDate: Mon Sep 26 20:14:17 2022 +0800
feat: adding XAxis to BigNumberTrend (#21577)
---
.../superset-ui-chart-controls/src/index.ts | 1 +
.../src/shared-controls/constants.tsx | 35 +++++++++++++++++--
.../src/shared-controls/dndControls.tsx | 29 +++-------------
.../BigNumber/BigNumberWithTrendline/buildQuery.ts | 40 ++++++++++------------
.../BigNumberWithTrendline/controlPanel.tsx | 25 ++++++++++++--
.../BigNumberWithTrendline/transformProps.ts | 10 +++---
.../plugin-chart-echarts/src/BigNumber/types.ts | 2 +-
.../test/BigNumber/transformProps.test.ts | 7 ++--
8 files changed, 89 insertions(+), 60 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
index 5ed1768e69..66ef14917a 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
@@ -37,3 +37,4 @@ export { legacySortBy } from './shared-controls/legacySortBy';
export * from './shared-controls/emitFilterControl';
export * from './shared-controls/components';
export * from './types';
+export { xAxisMixin, temporalColumnMixin } from './shared-controls/constants';
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
index 91427e1461..8de12bfcf6 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/constants.tsx
@@ -20,10 +20,16 @@ import {
FeatureFlag,
isFeatureEnabled,
QueryFormData,
+ QueryResponse,
t,
validateNonEmpty,
} from '@superset-ui/core';
-import { ControlPanelState, ControlState } from '../types';
+import {
+ BaseControlConfig,
+ ControlPanelState,
+ ControlState,
+ Dataset,
+} from '../types';
const getAxisLabel = (
formData: QueryFormData,
@@ -32,7 +38,7 @@ const getAxisLabel = (
? { label: t('Y-axis'), description: t('Dimension to use on y-axis.') }
: { label: t('X-axis'), description: t('Dimension to use on x-axis.') };
-export const xAxisControlConfig = {
+export const xAxisMixin = {
label: (state: ControlPanelState) => getAxisLabel(state?.form_data).label,
multi: false,
description: (state: ControlPanelState) =>
@@ -51,3 +57,28 @@ export const xAxisControlConfig = {
},
default: undefined,
};
+
+export const temporalColumnMixin: Pick<BaseControlConfig, 'mapStateToProps'> = {
+ mapStateToProps: ({ datasource }) => {
+ if (datasource?.columns[0]?.hasOwnProperty('column_name')) {
+ const temporalColumns =
+ (datasource as Dataset)?.columns?.filter(c => c.is_dttm) ?? [];
+ return {
+ options: temporalColumns,
+ default:
+ (datasource as Dataset)?.main_dttm_col ||
+ temporalColumns[0]?.column_name ||
+ null,
+ isTemporal: true,
+ };
+ }
+ const sortedQueryColumns = (datasource as QueryResponse)?.columns?.sort(
+ query => (query?.is_dttm ? -1 : 1),
+ );
+ return {
+ options: sortedQueryColumns,
+ default: sortedQueryColumns[0]?.name || null,
+ isTemporal: true,
+ };
+ },
+};
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx
index 679ac940a5..691dbca7c0 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx
@@ -22,7 +22,6 @@ import {
FeatureFlag,
isFeatureEnabled,
QueryColumn,
- QueryResponse,
t,
validateNonEmpty,
} from '@superset-ui/core';
@@ -39,8 +38,9 @@ import {
ColumnOption,
ColumnMeta,
FilterOption,
+ temporalColumnMixin,
} from '..';
-import { xAxisControlConfig } from './constants';
+import { xAxisMixin } from './constants';
type Control = {
savedMetrics?: Metric[] | null;
@@ -231,6 +231,7 @@ export const dndSecondaryMetricControl: typeof dndAdhocMetricControl = {
export const dndGranularitySqlaControl: typeof dndSeriesControl = {
...dndSeriesControl,
+ ...temporalColumnMixin,
label: TIME_FILTER_LABELS.granularity_sqla,
description: t(
'The time column for the visualization. Note that you ' +
@@ -247,33 +248,11 @@ export const dndGranularitySqlaControl: typeof dndSeriesControl = {
optionRenderer: (c: ColumnMeta) => <ColumnOption showType column={c} />,
valueRenderer: (c: ColumnMeta) => <ColumnOption column={c} />,
valueKey: 'column_name',
- mapStateToProps: ({ datasource }) => {
- if (datasource?.columns[0]?.hasOwnProperty('column_name')) {
- const temporalColumns =
- (datasource as Dataset)?.columns?.filter(c => c.is_dttm) ?? [];
- return {
- options: temporalColumns,
- default:
- (datasource as Dataset)?.main_dttm_col ||
- temporalColumns[0]?.column_name ||
- null,
- isTemporal: true,
- };
- }
- const sortedQueryColumns = (datasource as QueryResponse)?.columns?.sort(
- query => (query?.is_dttm ? -1 : 1),
- );
- return {
- options: sortedQueryColumns,
- default: sortedQueryColumns[0]?.name || null,
- isTemporal: true,
- };
- },
};
export const dndXAxisControl: typeof dndGroupByControl = {
...dndGroupByControl,
- ...xAxisControlConfig,
+ ...xAxisMixin,
};
export function withDndFallback(
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.ts
index de75b50838..19ad713a26 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/buildQuery.ts
@@ -18,7 +18,9 @@
*/
import {
buildQueryContext,
- DTTM_ALIAS,
+ ensureIsArray,
+ getXAxis,
+ isXAxisSet,
QueryFormData,
} from '@superset-ui/core';
import {
@@ -29,25 +31,19 @@ import {
} from '@superset-ui/chart-controls';
export default function buildQuery(formData: QueryFormData) {
- return buildQueryContext(formData, baseQueryObject => {
- const { x_axis } = formData;
- const is_timeseries = x_axis === DTTM_ALIAS || !x_axis;
-
- return [
- {
- ...baseQueryObject,
- is_timeseries: true,
- post_processing: [
- pivotOperator(formData, {
- ...baseQueryObject,
- index: x_axis,
- is_timeseries,
- }),
- rollingWindowOperator(formData, baseQueryObject),
- resampleOperator(formData, baseQueryObject),
- flattenOperator(formData, baseQueryObject),
- ],
- },
- ];
- });
+ return buildQueryContext(formData, baseQueryObject => [
+ {
+ ...baseQueryObject,
+ columns: [
+ ...(isXAxisSet(formData) ? ensureIsArray(getXAxis(formData)) : []),
+ ],
+ ...(isXAxisSet(formData) ? {} : { is_timeseries: true }),
+ post_processing: [
+ pivotOperator(formData, baseQueryObject),
+ rollingWindowOperator(formData, baseQueryObject),
+ resampleOperator(formData, baseQueryObject),
+ flattenOperator(formData, baseQueryObject),
+ ],
+ },
+ ]);
}
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
index d88d105f27..7c46ca6a5f 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@@ -16,7 +16,12 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { smartDateFormatter, t } from '@superset-ui/core';
+import {
+ FeatureFlag,
+ isFeatureEnabled,
+ smartDateFormatter,
+ t,
+} from '@superset-ui/core';
import {
ControlPanelConfig,
D3_FORMAT_DOCS,
@@ -24,17 +29,27 @@ import {
formatSelectOptions,
getStandardizedControls,
sections,
+ temporalColumnMixin,
} from '@superset-ui/chart-controls';
import React from 'react';
import { headerFontSize, subheaderFontSize } from '../sharedControls';
const config: ControlPanelConfig = {
controlPanelSections: [
- sections.legacyTimeseriesTime,
+ sections.genericTime,
{
label: t('Query'),
expanded: true,
- controlSetRows: [['metric'], ['adhoc_filters']],
+ controlSetRows: [
+ [isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES) ? 'x_axis' : null],
+ [
+ isFeatureEnabled(FeatureFlag.GENERIC_CHART_AXES)
+ ? 'time_grain_sqla'
+ : null,
+ ],
+ ['metric'],
+ ['adhoc_filters'],
+ ],
},
{
label: t('Options'),
@@ -270,6 +285,10 @@ const config: ControlPanelConfig = {
y_axis_format: {
label: t('Number format'),
},
+ x_axis: {
+ label: t('TEMPORAL X-AXIS'),
+ ...temporalColumnMixin,
+ },
},
formDataOverrides: formData => ({
...formData,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
index 98fe277486..6a7ffdcbdc 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -17,17 +17,16 @@
* under the License.
*/
import {
- DTTM_ALIAS,
extractTimegrain,
getNumberFormatter,
NumberFormats,
- QueryFormData,
GenericDataType,
getMetricLabel,
t,
smartDateVerboseFormatter,
NumberFormatter,
TimeFormatter,
+ getXAxis,
} from '@superset-ui/core';
import { EChartsCoreOption, graphic } from 'echarts';
import {
@@ -88,7 +87,7 @@ export default function transformProps(
yAxisFormat,
timeRangeFixed,
} = formData;
- const granularity = extractTimegrain(rawFormData as QueryFormData);
+ const granularity = extractTimegrain(rawFormData);
const {
data = [],
colnames = [],
@@ -103,10 +102,11 @@ export default function transformProps(
const { r, g, b } = colorPicker;
const mainColor = `rgb(${r}, ${g}, ${b})`;
+ const timeColumn = getXAxis(rawFormData) as string;
let trendLineData;
let percentChange = 0;
let bigNumber = data.length === 0 ? null : data[0][metricName];
- let timestamp = data.length === 0 ? null : data[0][DTTM_ALIAS];
+ let timestamp = data.length === 0 ? null : data[0][timeColumn];
let bigNumberFallback;
const metricColtypeIndex = colnames.findIndex(name => name === metricName);
@@ -115,7 +115,7 @@ export default function transformProps(
if (data.length > 0) {
const sortedData = (data as BigNumberDatum[])
- .map(d => [d[DTTM_ALIAS], parseMetricValue(d[metricName])])
+ .map(d => [d[timeColumn], parseMetricValue(d[metricName])])
// sort in time descending order
.sort((a, b) => (a[0] !== null && b[0] !== null ? b[0] - a[0] : 0));
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts
index 49f5ea2bfd..60c43770e3 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts
@@ -43,7 +43,7 @@ export type BigNumberWithTrendlineFormData = BigNumberTotalFormData & {
compareLag?: string | number;
};
-export type BigNumberTotalChartProps = ChartProps & {
+export type BigNumberTotalChartProps = ChartProps<QueryFormData> & {
formData: BigNumberTotalFormData;
queriesData: (ChartDataResponseResult & {
data?: BigNumberDatum[];
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
index 6529c2dafa..f138765987 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/BigNumber/transformProps.test.ts
@@ -36,7 +36,8 @@ const formData = {
a: 1,
},
compareLag: 1,
- timeGrainSqla: 'P3M' as TimeGranularity,
+ timeGrainSqla: TimeGranularity.QUARTER,
+ granularitySqla: 'ds',
compareSuffix: 'over last quarter',
viz_type: 'big_number',
yAxisFormat: '.3s',
@@ -44,6 +45,7 @@ const formData = {
};
const rawFormData = {
+ datasource: '1__table',
metric: 'value',
color_picker: {
r: 0,
@@ -52,7 +54,8 @@ const rawFormData = {
a: 1,
},
compare_lag: 1,
- time_grain_sqla: 'P3M' as TimeGranularity,
+ time_grain_sqla: TimeGranularity.QUARTER,
+ granularity_sqla: 'ds',
compare_suffix: 'over last quarter',
viz_type: 'big_number',
y_axis_format: '.3s',