Skip to content
This repository has been archived by the owner on Dec 10, 2021. It is now read-only.

Commit

Permalink
feat(plugin-chart-echarts): support always show annotation label (#1449)
Browse files Browse the repository at this point in the history
  • Loading branch information
stephenLYZ authored Nov 4, 2021
1 parent c7a7173 commit 6babbbd
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 24 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ type BaseAnnotationLayer = {
name: string;
opacity?: AnnotationOpacity;
show: boolean;
showLabel: boolean;
style: AnnotationStyle;
width?: number;
};
Expand Down
79 changes: 55 additions & 24 deletions plugins/plugin-chart-echarts/src/Timeseries/transformers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ import {
ItemStyleOption,
LineStyleOption,
OptionName,
SeriesLabelOption,
SeriesLineLabelOption,
ZRLineType,
} from 'echarts/types/src/util/types';
import {
Expand Down Expand Up @@ -244,7 +246,7 @@ export function transformIntervalAnnotation(
const series: SeriesOption[] = [];
const annotations = extractRecordAnnotations(layer, annotationData);
annotations.forEach(annotation => {
const { name, color, opacity } = layer;
const { name, color, opacity, showLabel } = layer;
const { descriptions, intervalEnd, time, title } = annotation;
const label = formatAnnotationLabel(name, title, descriptions);
const intervalData: (MarkArea1DDataItemOption | MarkArea2DDataItemOption)[] = [
Expand All @@ -258,6 +260,32 @@ export function transformIntervalAnnotation(
},
],
];
const intervalLabel: SeriesLabelOption = showLabel
? {
show: true,
color: '#000000',
position: 'insideTop',
verticalAlign: 'top',
fontWeight: 'bold',
// @ts-ignore
emphasis: {
position: 'insideTop',
verticalAlign: 'top',
backgroundColor: '#ffffff',
},
}
: {
show: false,
color: '#000000',
// @ts-ignore
emphasis: {
fontWeight: 'bold',
show: true,
position: 'insideTop',
verticalAlign: 'top',
backgroundColor: '#ffffff',
},
};
series.push({
id: `Interval - ${label}`,
type: 'line',
Expand All @@ -271,18 +299,7 @@ export function transformIntervalAnnotation(
opacity: 0.8,
},
} as ItemStyleOption,
label: {
show: false,
color: '#000000',
// @ts-ignore
emphasis: {
fontWeight: 'bold',
show: true,
position: 'insideTop',
verticalAlign: 'top',
backgroundColor: '#ffffff',
},
},
label: intervalLabel,
data: intervalData,
},
});
Expand All @@ -299,7 +316,7 @@ export function transformEventAnnotation(
const series: SeriesOption[] = [];
const annotations = extractRecordAnnotations(layer, annotationData);
annotations.forEach(annotation => {
const { name, color, opacity, style, width } = layer;
const { name, color, opacity, style, width, showLabel } = layer;
const { descriptions, time, title } = annotation;
const label = formatAnnotationLabel(name, title, descriptions);
const eventData: MarkLine1DDataItemOption[] = [
Expand All @@ -320,15 +337,19 @@ export function transformEventAnnotation(
},
};

series.push({
id: `Event - ${label}`,
type: 'line',
animation: false,
markLine: {
silent: false,
symbol: 'none',
lineStyle,
label: {
const eventLabel: SeriesLineLabelOption = showLabel
? {
show: true,
color: '#000000',
position: 'insideEndTop',
fontWeight: 'bold',
formatter: (params: CallbackDataParams) => params.name,
// @ts-ignore
emphasis: {
backgroundColor: '#ffffff',
},
}
: {
show: false,
color: '#000000',
position: 'insideEndTop',
Expand All @@ -339,7 +360,17 @@ export function transformEventAnnotation(
show: true,
backgroundColor: '#ffffff',
},
},
};

series.push({
id: `Event - ${label}`,
type: 'line',
animation: false,
markLine: {
silent: false,
symbol: 'none',
lineStyle,
label: eventLabel,
data: eventData,
},
});
Expand Down

1 comment on commit 6babbbd

@vercel
Copy link

@vercel vercel bot commented on 6babbbd Nov 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.