mirror of
https://github.com/apache/superset.git
synced 2026-04-10 03:45:22 +00:00
355 lines
12 KiB
TypeScript
355 lines
12 KiB
TypeScript
/**
|
|
* 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 { ChartProps, SqlaFormData } from '@superset-ui/core';
|
|
import { supersetTheme } from '@apache-superset/core/ui';
|
|
import { EchartsTimeseriesChartProps } from '../../../src/types';
|
|
import transformProps from '../../../src/Timeseries/transformProps';
|
|
import { DEFAULT_FORM_DATA } from '../../../src/Timeseries/constants';
|
|
import { EchartsTimeseriesSeriesType } from '../../../src/Timeseries/types';
|
|
|
|
describe('Bar Chart X-axis Time Formatting', () => {
|
|
const baseFormData: SqlaFormData = {
|
|
...DEFAULT_FORM_DATA,
|
|
colorScheme: 'bnbColors',
|
|
datasource: '3__table',
|
|
granularity_sqla: '__timestamp',
|
|
metric: ['Sales', 'Marketing', 'Operations'],
|
|
groupby: [],
|
|
viz_type: 'echarts_timeseries_bar',
|
|
seriesType: EchartsTimeseriesSeriesType.Bar,
|
|
orientation: 'vertical',
|
|
};
|
|
|
|
const timeseriesData = [
|
|
{
|
|
data: [
|
|
{ Sales: 100, __timestamp: 1609459200000 }, // 2021-01-01
|
|
{ Marketing: 150, __timestamp: 1612137600000 }, // 2021-02-01
|
|
{ Operations: 200, __timestamp: 1614556800000 }, // 2021-03-01
|
|
],
|
|
colnames: ['Sales', 'Marketing', 'Operations', '__timestamp'],
|
|
coltypes: ['BIGINT', 'BIGINT', 'BIGINT', 'TIMESTAMP'],
|
|
},
|
|
];
|
|
|
|
const baseChartPropsConfig = {
|
|
width: 800,
|
|
height: 600,
|
|
queriesData: timeseriesData,
|
|
theme: supersetTheme,
|
|
};
|
|
|
|
describe('Default xAxisTimeFormat', () => {
|
|
it('should use smart_date as default xAxisTimeFormat', () => {
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: baseFormData,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Check that the x-axis has a formatter applied
|
|
expect(transformedProps.echartOptions.xAxis).toHaveProperty('axisLabel');
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(typeof xAxis.axisLabel.formatter).toBe('function');
|
|
});
|
|
|
|
it('should apply xAxisTimeFormat from DEFAULT_FORM_DATA when not explicitly set', () => {
|
|
const formDataWithoutTimeFormat = {
|
|
...baseFormData,
|
|
};
|
|
delete formDataWithoutTimeFormat.xAxisTimeFormat;
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: formDataWithoutTimeFormat,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Should still have a formatter since DEFAULT_FORM_DATA includes xAxisTimeFormat
|
|
expect(transformedProps.echartOptions.xAxis).toHaveProperty('axisLabel');
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
});
|
|
});
|
|
|
|
describe('Custom xAxisTimeFormat', () => {
|
|
it('should respect custom xAxisTimeFormat when explicitly set', () => {
|
|
const customFormData = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: '%Y-%m-%d',
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: customFormData,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Verify the formatter function exists and is applied
|
|
expect(transformedProps.echartOptions.xAxis).toHaveProperty('axisLabel');
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(typeof xAxis.axisLabel.formatter).toBe('function');
|
|
|
|
// The key test is that a formatter exists - the actual formatting is handled by d3-time-format
|
|
const { formatter } = xAxis.axisLabel;
|
|
expect(formatter).toBeDefined();
|
|
expect(typeof formatter).toBe('function');
|
|
});
|
|
|
|
it('should handle different time format options', () => {
|
|
const timeFormats = [
|
|
'%Y-%m-%d',
|
|
'%Y/%m/%d',
|
|
'%m/%d/%Y',
|
|
'%b %d, %Y',
|
|
'smart_date',
|
|
];
|
|
|
|
timeFormats.forEach(timeFormat => {
|
|
const customFormData = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: timeFormat,
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: customFormData,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(typeof xAxis.axisLabel.formatter).toBe('function');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Orientation-specific behavior', () => {
|
|
it('should apply time formatting to x-axis in vertical bar charts', () => {
|
|
const verticalFormData = {
|
|
...baseFormData,
|
|
orientation: 'vertical',
|
|
xAxisTimeFormat: '%Y-%m',
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: verticalFormData,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// In vertical orientation, time should be on x-axis
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(typeof xAxis.axisLabel.formatter).toBe('function');
|
|
});
|
|
|
|
it('should apply time formatting to y-axis in horizontal bar charts', () => {
|
|
const horizontalFormData = {
|
|
...baseFormData,
|
|
orientation: 'horizontal',
|
|
xAxisTimeFormat: '%Y-%m',
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: horizontalFormData,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// In horizontal orientation, axes are swapped, so time should be on y-axis
|
|
const yAxis = transformedProps.echartOptions.yAxis as any;
|
|
expect(yAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(typeof yAxis.axisLabel.formatter).toBe('function');
|
|
});
|
|
});
|
|
|
|
describe('Integration with existing features', () => {
|
|
it('should work with axis bounds', () => {
|
|
const formDataWithBounds = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: '%Y-%m-%d',
|
|
truncateXAxis: true,
|
|
xAxisBounds: [null, null] as [number | null, number | null],
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: formDataWithBounds,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
// The xAxis should be configured with the time formatting
|
|
expect(transformedProps.echartOptions.xAxis).toBeDefined();
|
|
});
|
|
|
|
it('should work with label rotation', () => {
|
|
const formDataWithRotation = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: '%Y-%m-%d',
|
|
xAxisLabelRotation: 45,
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: formDataWithRotation,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(xAxis.axisLabel).toHaveProperty('rotate', 45);
|
|
});
|
|
|
|
it('should maintain time formatting consistency with tooltip', () => {
|
|
const formDataWithTooltip = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: '%Y-%m-%d',
|
|
tooltipTimeFormat: '%Y-%m-%d',
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: formDataWithTooltip,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Both axis and tooltip should have formatters
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
expect(xAxis.axisLabel).toHaveProperty('formatter');
|
|
expect(transformedProps.xValueFormatter).toBeDefined();
|
|
expect(typeof transformedProps.xValueFormatter).toBe('function');
|
|
});
|
|
});
|
|
|
|
describe('Regression test for Issue #30373', () => {
|
|
it('should not be stuck on adaptive formatting', () => {
|
|
// Test the exact scenario described in the issue
|
|
const issueFormData = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: '%Y-%m-%d %H:%M:%S', // Non-adaptive format
|
|
};
|
|
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: issueFormData,
|
|
});
|
|
|
|
const transformedProps = transformProps(
|
|
chartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Verify formatter exists - this is the key fix, ensuring xAxisTimeFormat is used
|
|
const xAxis = transformedProps.echartOptions.xAxis as any;
|
|
const { formatter } = xAxis.axisLabel;
|
|
|
|
expect(formatter).toBeDefined();
|
|
expect(typeof formatter).toBe('function');
|
|
|
|
// The important part is that the xAxisTimeFormat is being used from formData
|
|
// The actual formatting is handled by the underlying time formatter
|
|
});
|
|
|
|
it('should allow changing from smart_date to other formats', () => {
|
|
// First create with smart_date (default)
|
|
const smartDateFormData = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: 'smart_date',
|
|
};
|
|
|
|
const smartDateChartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: smartDateFormData,
|
|
});
|
|
|
|
const smartDateProps = transformProps(
|
|
smartDateChartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Then change to a different format
|
|
const customFormatFormData = {
|
|
...baseFormData,
|
|
xAxisTimeFormat: '%b %Y',
|
|
};
|
|
|
|
const customFormatChartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: customFormatFormData,
|
|
});
|
|
|
|
const customFormatProps = transformProps(
|
|
customFormatChartProps as EchartsTimeseriesChartProps,
|
|
);
|
|
|
|
// Both should have formatters - the key is that they're not undefined
|
|
const smartDateXAxis = smartDateProps.echartOptions.xAxis as any;
|
|
const customFormatXAxis = customFormatProps.echartOptions.xAxis as any;
|
|
|
|
expect(smartDateXAxis.axisLabel.formatter).toBeDefined();
|
|
expect(customFormatXAxis.axisLabel.formatter).toBeDefined();
|
|
|
|
// Both should be functions that can format time
|
|
expect(typeof smartDateXAxis.axisLabel.formatter).toBe('function');
|
|
expect(typeof customFormatXAxis.axisLabel.formatter).toBe('function');
|
|
});
|
|
|
|
it('should have xAxisTimeFormat in formData by default', () => {
|
|
// This test specifically verifies our fix - that DEFAULT_FORM_DATA includes xAxisTimeFormat
|
|
const chartProps = new ChartProps({
|
|
...baseChartPropsConfig,
|
|
formData: baseFormData,
|
|
});
|
|
|
|
expect(chartProps.formData.xAxisTimeFormat).toBeDefined();
|
|
expect(chartProps.formData.xAxisTimeFormat).toBe('smart_date');
|
|
});
|
|
});
|
|
});
|