fix(charts): add X Axis Number Format control for numeric X-axis columns (#38809)

Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>
This commit is contained in:
Enzo Martellucci
2026-03-31 12:38:07 +02:00
committed by GitHub
parent 2c9cf0bd55
commit e0a0a22542
16 changed files with 865 additions and 106 deletions

View File

@@ -17,7 +17,10 @@
* under the License.
*/
import { t } from '@apache-superset/core/translation';
import { getColumnLabel, QueryFormColumn } from '@superset-ui/core';
import { GenericDataType } from '@apache-superset/core/common';
import {
checkColumnType,
ControlPanelConfig,
ControlPanelsContainerProps,
ControlSubSectionHeader,
@@ -181,6 +184,30 @@ const config: ControlPanelConfig = {
...sharedControls.x_axis_time_format,
default: 'smart_date',
description: `${D3_TIME_FORMAT_DOCS}. ${TIME_SERIES_DESCRIPTION_TEXT}`,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Temporal],
),
disableStash: true,
resetOnHide: false,
},
},
],
[
{
name: 'x_axis_number_format',
config: {
...sharedControls.x_axis_number_format,
default: '~g',
mapStateToProps: undefined,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Numeric],
),
},
},
],

View File

@@ -17,8 +17,15 @@
* under the License.
*/
import { t } from '@apache-superset/core/translation';
import { ensureIsArray, JsonArray } from '@superset-ui/core';
import {
ensureIsArray,
getColumnLabel,
JsonArray,
QueryFormColumn,
} from '@superset-ui/core';
import { GenericDataType } from '@apache-superset/core/common';
import {
checkColumnType,
ControlPanelConfig,
ControlPanelsContainerProps,
ControlSetRow,
@@ -154,6 +161,13 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
Boolean(controls?.orientation.value === OrientationType.Vertical);
const isHorizontal = (controls: ControlStateMapping) =>
Boolean(controls?.orientation.value === OrientationType.Horizontal);
const isNumericXAxis = (controls: ControlStateMapping) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Numeric],
);
return [
[
{
@@ -163,7 +177,23 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
default: 'smart_date',
description: `${D3_TIME_FORMAT_DOCS}. ${TIME_SERIES_DESCRIPTION_TEXT}`,
visibility: ({ controls }: ControlPanelsContainerProps) =>
isXAxis ? isVertical(controls) : isHorizontal(controls),
(isXAxis ? isVertical(controls) : isHorizontal(controls)) &&
!isNumericXAxis(controls),
disableStash: true,
resetOnHide: false,
},
},
],
[
{
name: 'x_axis_number_format',
config: {
...sharedControls.x_axis_number_format,
default: '~g',
mapStateToProps: undefined,
visibility: ({ controls }: ControlPanelsContainerProps) =>
(isXAxis ? isVertical(controls) : isHorizontal(controls)) &&
isNumericXAxis(controls),
disableStash: true,
resetOnHide: false,
},

View File

@@ -17,7 +17,10 @@
* under the License.
*/
import { t } from '@apache-superset/core/translation';
import { getColumnLabel, QueryFormColumn } from '@superset-ui/core';
import { GenericDataType } from '@apache-superset/core/common';
import {
checkColumnType,
ControlPanelConfig,
ControlPanelsContainerProps,
ControlSubSectionHeader,
@@ -146,6 +149,30 @@ const config: ControlPanelConfig = {
...sharedControls.x_axis_time_format,
default: 'smart_date',
description: `${D3_TIME_FORMAT_DOCS}. ${TIME_SERIES_DESCRIPTION_TEXT}`,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Temporal],
),
disableStash: true,
resetOnHide: false,
},
},
],
[
{
name: 'x_axis_number_format',
config: {
...sharedControls.x_axis_number_format,
default: '~g',
mapStateToProps: undefined,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Numeric],
),
},
},
],

View File

@@ -17,7 +17,10 @@
* under the License.
*/
import { t } from '@apache-superset/core/translation';
import { getColumnLabel, QueryFormColumn } from '@superset-ui/core';
import { GenericDataType } from '@apache-superset/core/common';
import {
checkColumnType,
ControlPanelConfig,
ControlPanelsContainerProps,
ControlSubSectionHeader,
@@ -112,53 +115,28 @@ const config: ControlPanelConfig = {
...sharedControls.x_axis_time_format,
default: 'smart_date',
description: `${D3_TIME_FORMAT_DOCS}. ${TIME_SERIES_DESCRIPTION_TEXT}`,
visibility: ({ controls }: ControlPanelsContainerProps) => {
// check if x axis is a time column
const xAxisColumn = controls?.x_axis?.value;
const xAxisOptions = controls?.x_axis?.options;
if (!xAxisColumn || !Array.isArray(xAxisOptions)) {
return false;
}
const xAxisType = xAxisOptions.find(
option => option.column_name === xAxisColumn,
)?.type;
return (
typeof xAxisType === 'string' &&
xAxisType.toUpperCase().includes('TIME')
);
},
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Temporal],
),
disableStash: true,
resetOnHide: false,
},
},
{
name: 'x_axis_number_format',
config: {
...sharedControls.x_axis_number_format,
visibility: ({ controls }: ControlPanelsContainerProps) => {
// check if x axis is a floating-point column
const xAxisColumn = controls?.x_axis?.value;
const xAxisOptions = controls?.x_axis?.options;
if (!xAxisColumn || !Array.isArray(xAxisOptions)) {
return false;
}
const xAxisType = xAxisOptions.find(
option => option.column_name === xAxisColumn,
)?.type;
if (typeof xAxisType !== 'string') {
return false;
}
const typeUpper = xAxisType.toUpperCase();
return ['FLOAT', 'DOUBLE', 'REAL', 'NUMERIC', 'DECIMAL'].some(
t => typeUpper.includes(t),
);
},
default: '~g',
mapStateToProps: undefined,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Numeric],
),
},
},
],

View File

@@ -17,7 +17,10 @@
* under the License.
*/
import { t } from '@apache-superset/core/translation';
import { getColumnLabel, QueryFormColumn } from '@superset-ui/core';
import { GenericDataType } from '@apache-superset/core/common';
import {
checkColumnType,
ControlPanelConfig,
ControlPanelsContainerProps,
ControlSubSectionHeader,
@@ -111,6 +114,30 @@ const config: ControlPanelConfig = {
...sharedControls.x_axis_time_format,
default: 'smart_date',
description: `${D3_TIME_FORMAT_DOCS}. ${TIME_SERIES_DESCRIPTION_TEXT}`,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Temporal],
),
disableStash: true,
resetOnHide: false,
},
},
],
[
{
name: 'x_axis_number_format',
config: {
...sharedControls.x_axis_number_format,
default: '~g',
mapStateToProps: undefined,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Numeric],
),
},
},
],

View File

@@ -17,7 +17,10 @@
* under the License.
*/
import { t } from '@apache-superset/core/translation';
import { getColumnLabel, QueryFormColumn } from '@superset-ui/core';
import { GenericDataType } from '@apache-superset/core/common';
import {
checkColumnType,
ControlPanelConfig,
ControlPanelsContainerProps,
ControlSubSectionHeader,
@@ -163,6 +166,30 @@ const config: ControlPanelConfig = {
...sharedControls.x_axis_time_format,
default: 'smart_date',
description: `${D3_TIME_FORMAT_DOCS}. ${TIME_SERIES_DESCRIPTION_TEXT}`,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Temporal],
),
disableStash: true,
resetOnHide: false,
},
},
],
[
{
name: 'x_axis_number_format',
config: {
...sharedControls.x_axis_number_format,
default: '~g',
mapStateToProps: undefined,
visibility: ({ controls }: ControlPanelsContainerProps) =>
checkColumnType(
getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
controls?.datasource?.datasource,
[GenericDataType.Numeric],
),
},
},
],

View File

@@ -0,0 +1,115 @@
/**
* 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 { ControlPanelsContainerProps } from '@superset-ui/chart-controls/types';
import { GenericDataType } from '@apache-superset/core/common';
import controlPanel from '../../../src/Timeseries/Area/controlPanel';
const config = controlPanel;
const getControl = (controlName: string) => {
for (const section of config.controlPanelSections) {
if (section && section.controlSetRows) {
for (const row of section.controlSetRows) {
for (const control of row) {
if (
typeof control === 'object' &&
control !== null &&
'name' in control &&
control.name === controlName
) {
return control;
}
}
}
}
}
return null;
};
const mockControls = (
xAxisColumn: string | null,
typeGeneric: GenericDataType | null,
): ControlPanelsContainerProps => {
const columns =
xAxisColumn && typeGeneric !== null
? [{ column_name: xAxisColumn, type_generic: typeGeneric }]
: [];
return {
controls: {
// @ts-expect-error
x_axis: {
value: xAxisColumn,
},
// @ts-expect-error
datasource: {
datasource: { columns },
},
},
};
};
const timeFormatControl: any = getControl('x_axis_time_format');
const numberFormatControl: any = getControl('x_axis_number_format');
test('should include x_axis_time_format control', () => {
expect(timeFormatControl).toBeDefined();
expect(timeFormatControl.config.default).toBe('smart_date');
});
test('should include x_axis_number_format control', () => {
expect(numberFormatControl).toBeDefined();
expect(numberFormatControl.config.default).toBe('~g');
});
test('x_axis_time_format should be visible for temporal columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
true,
);
});
test('x_axis_time_format should be hidden for numeric columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
false,
);
});
test('x_axis_number_format should be visible for numeric columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
true,
);
});
test('x_axis_number_format should be hidden for temporal columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
false,
);
});
test('x_axis_number_format should be hidden for string columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('name', GenericDataType.String))).toBe(
false,
);
});

View File

@@ -16,11 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
import { ControlPanelsContainerProps } from '@superset-ui/chart-controls/types';
import { GenericDataType } from '@apache-superset/core/common';
import controlPanel from '../../../src/Timeseries/Regular/Bar/controlPanel';
import {
StackControlOptionsWithoutStream,
StackControlsValue,
} from '../../../src/constants';
import { OrientationType } from '../../../src/Timeseries/types';
const config = controlPanel;
@@ -218,3 +221,74 @@ test('should preserve stack value when formData does not have stack property', (
expect(result).not.toHaveProperty('stack');
});
// x_axis_number_format visibility tests
const mockBarControls = (
xAxisColumn: string | null,
typeGeneric: GenericDataType | null,
orientation: string = OrientationType.Vertical,
): ControlPanelsContainerProps => {
const columns =
xAxisColumn && typeGeneric !== null
? [{ column_name: xAxisColumn, type_generic: typeGeneric }]
: [];
return {
controls: {
// @ts-expect-error
x_axis: {
value: xAxisColumn,
},
// @ts-expect-error
orientation: {
value: orientation,
},
// @ts-expect-error
datasource: {
datasource: { columns },
},
},
};
};
const numberFormatControl: any = getControl('x_axis_number_format');
const timeFormatControl: any = getControl('x_axis_time_format');
test('should include x_axis_number_format control in the panel', () => {
expect(numberFormatControl).toBeDefined();
});
test('x_axis_number_format should be visible for numeric columns in vertical orientation', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockBarControls('year', GenericDataType.Numeric))).toBe(
true,
);
expect(visibilityFn(mockBarControls('price', GenericDataType.Numeric))).toBe(
true,
);
});
test('x_axis_number_format should be hidden for time columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockBarControls('date', GenericDataType.Temporal))).toBe(
false,
);
});
test('x_axis_number_format should be hidden for non-numeric columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockBarControls('name', GenericDataType.String))).toBe(
false,
);
expect(visibilityFn(mockBarControls('flag', GenericDataType.Boolean))).toBe(
false,
);
});
test('x_axis_time_format should be hidden for numeric columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockBarControls('year', GenericDataType.Numeric))).toBe(
false,
);
});

View File

@@ -0,0 +1,115 @@
/**
* 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 { ControlPanelsContainerProps } from '@superset-ui/chart-controls/types';
import { GenericDataType } from '@apache-superset/core/common';
import controlPanel from '../../../src/Timeseries/Regular/Line/controlPanel';
const config = controlPanel;
const getControl = (controlName: string) => {
for (const section of config.controlPanelSections) {
if (section && section.controlSetRows) {
for (const row of section.controlSetRows) {
for (const control of row) {
if (
typeof control === 'object' &&
control !== null &&
'name' in control &&
control.name === controlName
) {
return control;
}
}
}
}
}
return null;
};
const mockControls = (
xAxisColumn: string | null,
typeGeneric: GenericDataType | null,
): ControlPanelsContainerProps => {
const columns =
xAxisColumn && typeGeneric !== null
? [{ column_name: xAxisColumn, type_generic: typeGeneric }]
: [];
return {
controls: {
// @ts-expect-error
x_axis: {
value: xAxisColumn,
},
// @ts-expect-error
datasource: {
datasource: { columns },
},
},
};
};
const timeFormatControl: any = getControl('x_axis_time_format');
const numberFormatControl: any = getControl('x_axis_number_format');
test('should include x_axis_time_format control', () => {
expect(timeFormatControl).toBeDefined();
expect(timeFormatControl.config.default).toBe('smart_date');
});
test('should include x_axis_number_format control', () => {
expect(numberFormatControl).toBeDefined();
expect(numberFormatControl.config.default).toBe('~g');
});
test('x_axis_time_format should be visible for temporal columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
true,
);
});
test('x_axis_time_format should be hidden for numeric columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
false,
);
});
test('x_axis_number_format should be visible for numeric columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
true,
);
});
test('x_axis_number_format should be hidden for temporal columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
false,
);
});
test('x_axis_number_format should be hidden for string columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('name', GenericDataType.String))).toBe(
false,
);
});

View File

@@ -17,6 +17,7 @@
* under the License.
*/
import { ControlPanelsContainerProps } from '@superset-ui/chart-controls/types';
import { GenericDataType } from '@apache-superset/core/common';
import controlPanel from '../../../src/Timeseries/Regular/Scatter/controlPanel';
const config = controlPanel;
@@ -44,18 +45,22 @@ const getControl = (controlName: string) => {
const mockControls = (
xAxisColumn: string | null,
xAxisType: string | null,
typeGeneric: GenericDataType | null,
): ControlPanelsContainerProps => {
const options = xAxisType
? [{ column_name: xAxisColumn, type: xAxisType }]
: [];
const columns =
xAxisColumn && typeGeneric !== null
? [{ column_name: xAxisColumn, type_generic: typeGeneric }]
: [];
return {
controls: {
// @ts-expect-error
x_axis: {
value: xAxisColumn,
options: options,
},
// @ts-expect-error
datasource: {
datasource: { columns },
},
},
};
@@ -85,26 +90,21 @@ test('scatter chart control panel should have visibility function for x_axis_tim
const isTimeVisible = (
xAxisColumn: string | null,
xAxisType: string | null,
xAxisType: GenericDataType | null,
): boolean => {
const props = mockControls(xAxisColumn, xAxisType);
const visibilityFn = timeFormatControl?.config?.visibility;
return visibilityFn ? visibilityFn(props) : false;
};
test('x_axis_time_format control should be visible for any data types include TIME', () => {
expect(isTimeVisible('time_column', 'TIME')).toBe(true);
expect(isTimeVisible('time_column', 'TIME WITH TIME ZONE')).toBe(true);
expect(isTimeVisible('time_column', 'TIMESTAMP WITH TIME ZONE')).toBe(true);
expect(isTimeVisible('time_column', 'TIMESTAMP WITHOUT TIME ZONE')).toBe(
true,
);
test('x_axis_time_format control should be visible for temporal data types', () => {
expect(isTimeVisible('time_column', GenericDataType.Temporal)).toBe(true);
});
test('x_axis_time_format control should be hidden for data types that do NOT include TIME', () => {
expect(isTimeVisible('null', 'null')).toBe(false);
test('x_axis_time_format control should be hidden for non-temporal data types', () => {
expect(isTimeVisible(null, null)).toBe(false);
expect(isTimeVisible('float_column', 'FLOAT')).toBe(false);
expect(isTimeVisible('float_column', GenericDataType.Numeric)).toBe(false);
expect(isTimeVisible('name_column', GenericDataType.String)).toBe(false);
});
// tests for x_axis_number_format control
@@ -117,7 +117,7 @@ test('scatter chart control panel should include x_axis_number_format control in
test('scatter chart control panel should have correct default value for x_axis_number_format', () => {
expect(numberFormatControl).toBeDefined();
expect(numberFormatControl.config).toBeDefined();
expect(numberFormatControl.config.default).toBe('SMART_NUMBER');
expect(numberFormatControl.config.default).toBe('~g');
});
test('scatter chart control panel should have visibility function for x_axis_number_format', () => {
@@ -131,26 +131,20 @@ test('scatter chart control panel should have visibility function for x_axis_num
const isNumberVisible = (
xAxisColumn: string | null,
xAxisType: string | null,
xAxisType: GenericDataType | null,
): boolean => {
const props = mockControls(xAxisColumn, xAxisType);
const visibilityFn = numberFormatControl?.config?.visibility;
return visibilityFn ? visibilityFn(props) : false;
};
test('x_axis_number_format control should be visible for any floating-point data types', () => {
expect(isNumberVisible('float_column', 'FLOAT')).toBe(true);
expect(isNumberVisible('double_column', 'DOUBLE')).toBe(true);
expect(isNumberVisible('real_column', 'REAL')).toBe(true);
expect(isNumberVisible('numeric_column', 'NUMERIC')).toBe(true);
expect(isNumberVisible('decimal_column', 'DECIMAL')).toBe(true);
test('x_axis_number_format control should be visible for numeric data types', () => {
expect(isNumberVisible('float_column', GenericDataType.Numeric)).toBe(true);
expect(isNumberVisible('int_column', GenericDataType.Numeric)).toBe(true);
});
test('x_axis_number_format control should be hidden for any non-floating-point data types', () => {
expect(isNumberVisible('string_column', 'VARCHAR')).toBe(false);
expect(isNumberVisible('null', 'null')).toBe(false);
test('x_axis_number_format control should be hidden for non-numeric data types', () => {
expect(isNumberVisible('string_column', GenericDataType.String)).toBe(false);
expect(isNumberVisible(null, null)).toBe(false);
expect(isNumberVisible('time_column', 'TIMESTAMP WITHOUT TIME ZONE')).toBe(
false,
);
expect(isNumberVisible('time_column', GenericDataType.Temporal)).toBe(false);
});

View File

@@ -0,0 +1,101 @@
/**
* 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 { ControlPanelsContainerProps } from '@superset-ui/chart-controls/types';
import { GenericDataType } from '@apache-superset/core/common';
import controlPanel from '../../../src/Timeseries/Regular/SmoothLine/controlPanel';
const config = controlPanel;
const getControl = (controlName: string) => {
for (const section of config.controlPanelSections) {
if (section && section.controlSetRows) {
for (const row of section.controlSetRows) {
for (const control of row) {
if (
typeof control === 'object' &&
control !== null &&
'name' in control &&
control.name === controlName
) {
return control;
}
}
}
}
}
return null;
};
const mockControls = (
xAxisColumn: string | null,
typeGeneric: GenericDataType | null,
): ControlPanelsContainerProps => {
const columns =
xAxisColumn && typeGeneric !== null
? [{ column_name: xAxisColumn, type_generic: typeGeneric }]
: [];
return {
controls: {
// @ts-expect-error
x_axis: {
value: xAxisColumn,
},
// @ts-expect-error
datasource: {
datasource: { columns },
},
},
};
};
const timeFormatControl: any = getControl('x_axis_time_format');
const numberFormatControl: any = getControl('x_axis_number_format');
test('should include x_axis_time_format control', () => {
expect(timeFormatControl).toBeDefined();
expect(timeFormatControl.config.default).toBe('smart_date');
});
test('should include x_axis_number_format control', () => {
expect(numberFormatControl).toBeDefined();
expect(numberFormatControl.config.default).toBe('~g');
});
test('x_axis_number_format should be visible for numeric columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
true,
);
});
test('x_axis_number_format should be hidden for temporal columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
false,
);
});
test('x_axis_number_format should be hidden for string columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('name', GenericDataType.String))).toBe(
false,
);
});

View File

@@ -0,0 +1,115 @@
/**
* 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 { ControlPanelsContainerProps } from '@superset-ui/chart-controls/types';
import { GenericDataType } from '@apache-superset/core/common';
import controlPanel from '../../../src/Timeseries/Step/controlPanel';
const config = controlPanel;
const getControl = (controlName: string) => {
for (const section of config.controlPanelSections) {
if (section && section.controlSetRows) {
for (const row of section.controlSetRows) {
for (const control of row) {
if (
typeof control === 'object' &&
control !== null &&
'name' in control &&
control.name === controlName
) {
return control;
}
}
}
}
}
return null;
};
const mockControls = (
xAxisColumn: string | null,
typeGeneric: GenericDataType | null,
): ControlPanelsContainerProps => {
const columns =
xAxisColumn && typeGeneric !== null
? [{ column_name: xAxisColumn, type_generic: typeGeneric }]
: [];
return {
controls: {
// @ts-expect-error
x_axis: {
value: xAxisColumn,
},
// @ts-expect-error
datasource: {
datasource: { columns },
},
},
};
};
const timeFormatControl: any = getControl('x_axis_time_format');
const numberFormatControl: any = getControl('x_axis_number_format');
test('should include x_axis_time_format control', () => {
expect(timeFormatControl).toBeDefined();
expect(timeFormatControl.config.default).toBe('smart_date');
});
test('should include x_axis_number_format control', () => {
expect(numberFormatControl).toBeDefined();
expect(numberFormatControl.config.default).toBe('~g');
});
test('x_axis_time_format should be visible for temporal columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
true,
);
});
test('x_axis_time_format should be hidden for numeric columns', () => {
const visibilityFn = timeFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
false,
);
});
test('x_axis_number_format should be visible for numeric columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('year', GenericDataType.Numeric))).toBe(
true,
);
});
test('x_axis_number_format should be hidden for temporal columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('date', GenericDataType.Temporal))).toBe(
false,
);
});
test('x_axis_number_format should be hidden for string columns', () => {
const visibilityFn = numberFormatControl?.config?.visibility;
expect(visibilityFn(mockControls('name', GenericDataType.String))).toBe(
false,
);
});

View File

@@ -274,7 +274,11 @@ test('When menu item is clicked, call onSelection with clicked column and drill
test('matrixify_mode_rows enabled should not render component', () => {
const { container } = renderSubmenu({
formData: { ...defaultFormData, matrixify_enable: true, matrixify_mode_rows: 'metrics' },
formData: {
...defaultFormData,
matrixify_enable: true,
matrixify_mode_rows: 'metrics',
},
});
expect(container).toBeEmptyDOMElement();
});

View File

@@ -16,10 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import {
configureStore,
createListenerMiddleware,
} from '@reduxjs/toolkit';
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
import type { QueryEditor } from 'src/SqlLab/types';
import sqlLabReducer from 'src/SqlLab/reducers/sqlLab';
import {
@@ -369,7 +366,10 @@ test('onDidCloseTab fires with Tab on REMOVE_QUERY_EDITOR', async () => {
test('onDidChangeActiveTab fires with Tab on SET_ACTIVE_QUERY_EDITOR', () => {
// Add a second editor so switching back is a real change
mockStore.dispatch({ type: ADD_QUERY_EDITOR, queryEditor: makeSecondEditor() });
mockStore.dispatch({
type: ADD_QUERY_EDITOR,
queryEditor: makeSecondEditor(),
});
const listener = jest.fn();
const disposable = sqlLab.onDidChangeActiveTab(listener);
@@ -418,7 +418,10 @@ test('onDidCreateTab fires with Tab on ADD_QUERY_EDITOR', () => {
test('editor-scoped listener does not fire for a different editor', () => {
// Add a second editor (ADD_QUERY_EDITOR makes it active)
mockStore.dispatch({ type: ADD_QUERY_EDITOR, queryEditor: makeSecondEditor() });
mockStore.dispatch({
type: ADD_QUERY_EDITOR,
queryEditor: makeSecondEditor(),
});
// Switch back to editor-1 so the predicate captures immutable-1
mockStore.dispatch({
@@ -444,7 +447,10 @@ test('editor-scoped listener does not fire for a different editor', () => {
test('editor-scoped predicate filters tab events via queryEditor lookup', () => {
// Add a second editor and switch back to editor-1
mockStore.dispatch({ type: ADD_QUERY_EDITOR, queryEditor: makeSecondEditor() });
mockStore.dispatch({
type: ADD_QUERY_EDITOR,
queryEditor: makeSecondEditor(),
});
mockStore.dispatch({
type: SET_ACTIVE_QUERY_EDITOR,
queryEditor: { id: EDITOR_ID },
@@ -468,7 +474,10 @@ test('editor-scoped predicate filters tab events via queryEditor lookup', () =>
test('globalPredicate listener fires for a non-active tab', () => {
// Add editor-2 and switch to it
mockStore.dispatch({ type: ADD_QUERY_EDITOR, queryEditor: makeSecondEditor() });
mockStore.dispatch({
type: ADD_QUERY_EDITOR,
queryEditor: makeSecondEditor(),
});
mockStore.dispatch({
type: SET_ACTIVE_QUERY_EDITOR,
queryEditor: { id: 'editor-2' },

View File

@@ -523,30 +523,33 @@ const DashboardBuilder = () => {
({ dropIndicatorProps }: { dropIndicatorProps: JsonObject }) => (
<div>
{dropIndicatorProps && <div {...dropIndicatorProps} />}
{!isReport && topLevelTabs && !uiConfig.hideTab && !uiConfig.hideNav && (
<WithPopoverMenu
shouldFocus={shouldFocusTabs}
menuItems={[
<IconButton
key="collapse-tabs"
icon={<Icons.FallOutlined iconSize="xl" />}
label={t('Collapse tab content')}
onClick={handleDeleteTopLevelTabs}
/>,
]}
editMode={editMode}
>
<DashboardComponent
id={topLevelTabs?.id}
parentId={DASHBOARD_ROOT_ID}
depth={DASHBOARD_ROOT_DEPTH + 1}
index={0}
renderTabContent={false}
renderHoverMenu={false}
onChangeTab={handleChangeTab}
/>
</WithPopoverMenu>
)}
{!isReport &&
topLevelTabs &&
!uiConfig.hideTab &&
!uiConfig.hideNav && (
<WithPopoverMenu
shouldFocus={shouldFocusTabs}
menuItems={[
<IconButton
key="collapse-tabs"
icon={<Icons.FallOutlined iconSize="xl" />}
label={t('Collapse tab content')}
onClick={handleDeleteTopLevelTabs}
/>,
]}
editMode={editMode}
>
<DashboardComponent
id={topLevelTabs?.id}
parentId={DASHBOARD_ROOT_ID}
depth={DASHBOARD_ROOT_DEPTH + 1}
index={0}
renderTabContent={false}
renderHoverMenu={false}
onChangeTab={handleChangeTab}
/>
</WithPopoverMenu>
)}
</div>
),
[

View File

@@ -407,6 +407,119 @@ describe('ControlPanelsContainer', () => {
getChartControlPanelRegistry().remove('line');
});
test('should stash control value when visibility is false and disableStash is not set', async () => {
getChartControlPanelRegistry().remove('table');
getChartControlPanelRegistry().registerValue('table', {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'x_axis_time_format',
config: {
type: 'SelectControl',
label: t('Time Format'),
default: 'smart_date',
choices: [['smart_date', 'Adaptive Formatting']],
visibility: () => false,
},
},
],
],
},
],
});
const props = getDefaultProps();
props.form_data = {
...props.form_data,
x_axis_time_format: 'smart_date',
};
const { getByTestId } = render(
<>
<ControlPanelsContainer {...props} />
<FormDataMock />
</>,
{
useRedux: true,
initialState: {
explore: {
form_data: {
...defaultState.form_data,
x_axis_time_format: 'smart_date',
},
},
},
},
);
await waitFor(() => {
expect(getByTestId('mock-formdata')).not.toHaveTextContent(
'x_axis_time_format',
);
});
});
test('should preserve control value when visibility is false and disableStash is true', async () => {
getChartControlPanelRegistry().remove('table');
getChartControlPanelRegistry().registerValue('table', {
controlPanelSections: [
{
label: t('Query'),
expanded: true,
controlSetRows: [
[
{
name: 'x_axis_time_format',
config: {
type: 'SelectControl',
label: t('Time Format'),
default: 'smart_date',
choices: [['smart_date', 'Adaptive Formatting']],
visibility: () => false,
disableStash: true,
},
},
],
],
},
],
});
const props = getDefaultProps();
props.form_data = {
...props.form_data,
x_axis_time_format: 'smart_date',
};
const { getByTestId } = render(
<>
<ControlPanelsContainer {...props} />
<FormDataMock />
</>,
{
useRedux: true,
initialState: {
explore: {
form_data: {
...defaultState.form_data,
x_axis_time_format: 'smart_date',
},
},
},
},
);
await waitFor(() => {
expect(getByTestId('mock-formdata')).toHaveTextContent(
'x_axis_time_format',
);
});
});
test('should not show Matrixify tab for table chart types', async () => {
// Enable Matrixify feature flag
mockIsFeatureEnabled.mockImplementation(