fix(echart): multiple time shift line pattern (#38866)

This commit is contained in:
JUST.in DO IT
2026-03-26 04:56:05 -07:00
committed by GitHub
parent 38d3a39c06
commit e045f49787
5 changed files with 131 additions and 32 deletions

View File

@@ -955,6 +955,7 @@ test('should apply dashed line style to time comparison series with single metri
formData: {
...timeCompareFormData,
time_compare: ['1 week ago'],
timeShiftColor: true,
comparison_type: ComparisonType.Values,
},
queriesData: queriesDataWithTimeCompare,
@@ -974,18 +975,9 @@ test('should apply dashed line style to time comparison series with single metri
expect(comparisonSeries).toBeDefined();
// Main series should not have a dash pattern array
expect(Array.isArray(mainSeries?.lineStyle?.type)).toBe(false);
// Comparison series should have a visible dash pattern array [dash, gap]
expect(Array.isArray(comparisonSeries?.lineStyle?.type)).toBe(true);
expect(
Array.isArray(comparisonSeries?.lineStyle?.type)
? comparisonSeries.lineStyle.type[0]
: undefined,
).toBeGreaterThanOrEqual(4);
expect(
Array.isArray(comparisonSeries?.lineStyle?.type)
? comparisonSeries.lineStyle.type[1]
: undefined,
).toBeGreaterThanOrEqual(3);
expect(mainSeries?.lineStyle?.type).not.toBe('dotted');
// Comparison series should have a visible dash pattern
expect(comparisonSeries?.lineStyle?.type).toBe('dotted');
});
test('should apply dashed line style to time comparison series with metric__offset pattern', () => {
@@ -1008,6 +1000,7 @@ test('should apply dashed line style to time comparison series with metric__offs
formData: {
...timeCompareFormData,
time_compare: ['1 week ago'],
timeShiftColor: true,
comparison_type: ComparisonType.Values,
},
queriesData: queriesDataWithTimeCompare,
@@ -1029,18 +1022,8 @@ test('should apply dashed line style to time comparison series with metric__offs
expect(comparisonSeries).toBeDefined();
// Main series should not have a dash pattern array
expect(Array.isArray(mainSeries?.lineStyle?.type)).toBe(false);
// Comparison series should have a visible dash pattern array [dash, gap]
expect(Array.isArray(comparisonSeries?.lineStyle?.type)).toBe(true);
expect(
Array.isArray(comparisonSeries?.lineStyle?.type)
? comparisonSeries.lineStyle.type[0]
: undefined,
).toBeGreaterThanOrEqual(4);
expect(
Array.isArray(comparisonSeries?.lineStyle?.type)
? comparisonSeries.lineStyle.type[1]
: undefined,
).toBeGreaterThanOrEqual(3);
// Comparison series should have a visible dash pattern
expect(comparisonSeries?.lineStyle?.type).toBe('dotted');
});
test('should apply connectNulls to time comparison series', () => {
@@ -1352,3 +1335,52 @@ test('should not apply axis bounds calculation when seriesType is not Bar for ho
// Should not have explicit max set when seriesType is not Bar
expect(xAxisRaw.max).toBeUndefined();
});
test('should assign distinct dash patterns for multiple time offsets consistently', () => {
const queriesDataWithMultipleOffsets = [
createTestQueryData([
{
sum__num: 100,
'1 year ago': 80,
'2 years ago': 60,
__timestamp: 599616000000,
},
{
sum__num: 150,
'1 year ago': 120,
'2 years ago': 90,
__timestamp: 599916000000,
},
]),
];
const chartProps = createTestChartProps({
formData: {
...timeCompareFormData,
time_compare: ['1 year ago', '2 years ago'],
comparison_type: ComparisonType.Values,
timeShiftColor: true,
},
queriesData: queriesDataWithMultipleOffsets,
});
const transformed = transformProps(chartProps);
const series = (transformed.echartOptions.series as SeriesOption[]) || [];
const series1 = series.find(s => s.name === '1 year ago') as any;
const series2 = series.find(s => s.name === '2 years ago') as any;
expect(series1).toBeDefined();
expect(series2).toBeDefined();
const pattern1 = series1.lineStyle?.type;
const symbol1 = series1.symbol;
const pattern2 = series2.lineStyle?.type;
const symbol2 = series2.symbol;
// must be different patterns
expect(pattern1).not.toEqual(pattern2);
// must be different patterns
expect(symbol1).not.toEqual(symbol2);
});