fix: Timeseries annotation layers (#34709)

This commit is contained in:
Michael S. Molina
2025-08-15 12:59:30 -03:00
committed by GitHub
parent 3a007f6284
commit fc95c4fc89
11 changed files with 69 additions and 183 deletions

View File

@@ -718,7 +718,7 @@ export default function transformProps(
ForecastSeriesEnum.Observation,
)
.map(entry => entry.id || entry.name || '')
.concat(extractAnnotationLabels(annotationLayers, annotationData)),
.concat(extractAnnotationLabels(annotationLayers)),
},
series: dedupSeries(reorderForecastSeries(series) as SeriesOption[]),
toolbox: {

View File

@@ -60,6 +60,7 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin
'Line chart is used to visualize measurements taken over a given category. Line chart is a type of chart which displays information as a series of data points connected by straight line segments. It is a basic type of chart common in many fields.',
),
exampleGallery: [{ url: example1 }, { url: example2 }],
canBeAnnotationTypes: [AnnotationType.Timeseries],
supportedAnnotationTypes: [
AnnotationType.Event,
AnnotationType.Formula,

View File

@@ -493,7 +493,7 @@ export default function transformProps(
ForecastSeriesEnum.Observation,
)
.map(entry => entry.name || '')
.concat(extractAnnotationLabels(annotationLayers, annotationData));
.concat(extractAnnotationLabels(annotationLayers));
let xAxis: any = {
type: xAxisType,

View File

@@ -25,7 +25,6 @@ import {
FilterState,
FormulaAnnotationLayer,
IntervalAnnotationLayer,
isTimeseriesAnnotationResult,
LegendState,
SupersetTheme,
TimeseriesAnnotationLayer,
@@ -557,26 +556,30 @@ export function transformTimeseriesAnnotation(
const { hideLine, name, opacity, showMarkers, style, width, color } = layer;
const result = annotationData[name];
const isHorizontal = orientation === OrientationType.Horizontal;
if (isTimeseriesAnnotationResult(result)) {
result.forEach(annotation => {
const { key, values } = annotation;
series.push({
type: 'line',
id: key,
name: key,
data: values.map(({ x, y }) =>
isHorizontal
? ([y, x] as [number, OptionName])
: ([x, y] as [OptionName, number]),
),
symbolSize: showMarkers ? markerSize : 0,
lineStyle: {
opacity: parseAnnotationOpacity(opacity),
type: style as ZRLineType,
width: hideLine ? 0 : width,
color: color || colorScale(name, sliceId),
},
});
const { records } = result;
if (records) {
const data = records.map(record => {
const keys = Object.keys(record);
const x = keys.length > 0 ? record[keys[0]] : 0;
const y = keys.length > 1 ? record[keys[1]] : 0;
return isHorizontal
? ([y, x] as [number, OptionName])
: ([x, y] as [OptionName, number]);
});
const computedStyle = {
opacity: parseAnnotationOpacity(opacity),
type: style as ZRLineType,
width: hideLine ? 0 : width,
color: color || colorScale(name, sliceId),
};
series.push({
type: 'line',
id: name,
name,
data,
symbolSize: showMarkers ? markerSize : 0,
itemStyle: computedStyle,
lineStyle: computedStyle,
});
}
return series;

View File

@@ -29,9 +29,7 @@ import {
DataRecord,
evalExpression,
FormulaAnnotationLayer,
isRecordAnnotationResult,
isTableAnnotationLayer,
isTimeseriesAnnotationResult,
} from '@superset-ui/core';
import { EchartsTimeseriesChartProps } from '../types';
import { EchartsMixedTimeseriesProps } from '../MixedTimeseries/types';
@@ -79,27 +77,24 @@ export function extractRecordAnnotations(
): Annotation[] {
const { name } = annotationLayer;
const result = annotationData[name];
if (isRecordAnnotationResult(result)) {
const { records } = result;
const {
descriptionColumns = [],
intervalEndColumn = '',
timeColumn = '',
titleColumn = '',
} = isTableAnnotationLayer(annotationLayer)
? annotationLayer
: NATIVE_COLUMN_NAMES;
const records = result?.records || [];
const {
descriptionColumns = [],
intervalEndColumn = '',
timeColumn = '',
titleColumn = '',
} = isTableAnnotationLayer(annotationLayer)
? annotationLayer
: NATIVE_COLUMN_NAMES;
return records.map(record => ({
descriptions: descriptionColumns.map(
column => (record[column] || '') as string,
) as string[],
intervalEnd: (record[intervalEndColumn] || '') as string,
time: (record[timeColumn] || '') as string,
title: (record[titleColumn] || '') as string,
}));
}
throw new Error('Please rerun the query.');
return records.map(record => ({
descriptions: descriptionColumns.map(
column => (record[column] || '') as string,
) as string[],
intervalEnd: (record[intervalEndColumn] || '') as string,
time: (record[timeColumn] || '') as string,
title: (record[titleColumn] || '') as string,
}));
}
export function formatAnnotationLabel(
@@ -120,23 +115,16 @@ export function formatAnnotationLabel(
return labels.join('\n\n');
}
export function extractAnnotationLabels(
layers: AnnotationLayer[],
data: AnnotationData,
): string[] {
export function extractAnnotationLabels(layers: AnnotationLayer[]): string[] {
const formulaAnnotationLabels = layers
.filter(anno => anno.annotationType === AnnotationType.Formula && anno.show)
.map(anno => anno.name);
const timeseriesAnnotationLabels = layers
.filter(
anno => anno.annotationType === AnnotationType.Timeseries && anno.show,
)
.flatMap(anno => {
const result = data[anno.name];
return isTimeseriesAnnotationResult(result)
? result.map(annoSeries => annoSeries.key)
: [];
});
.map(anno => anno.name);
return formulaAnnotationLabels.concat(timeseriesAnnotationLabels);
}