|
|
@ -17,10 +17,11 @@ |
|
|
import { |
|
|
import { |
|
|
ECharts, |
|
|
ECharts, |
|
|
EChartsOption, |
|
|
EChartsOption, |
|
|
EChartsSeriesItem, |
|
|
EChartsSeriesItem, EChartsShape, |
|
|
EChartsTooltipTrigger, |
|
|
EChartsTooltipTrigger, |
|
|
EChartsTooltipWidgetSettings, |
|
|
EChartsTooltipWidgetSettings, |
|
|
measureThresholdLabelOffset, timeAxisBandWidthCalculator |
|
|
measureThresholdOffset, |
|
|
|
|
|
timeAxisBandWidthCalculator |
|
|
} from '@home/components/widget/lib/chart/echarts-widget.models'; |
|
|
} from '@home/components/widget/lib/chart/echarts-widget.models'; |
|
|
import { |
|
|
import { |
|
|
autoDateFormat, |
|
|
autoDateFormat, |
|
|
@ -30,12 +31,17 @@ import { |
|
|
textStyle, |
|
|
textStyle, |
|
|
tsToFormatTimeUnit |
|
|
tsToFormatTimeUnit |
|
|
} from '@shared/models/widget-settings.models'; |
|
|
} from '@shared/models/widget-settings.models'; |
|
|
import { XAXisOption, YAXisOption } from 'echarts/types/dist/shared'; |
|
|
import { |
|
|
|
|
|
LabelLayoutOptionCallback, |
|
|
|
|
|
VisualMapComponentOption, |
|
|
|
|
|
XAXisOption, |
|
|
|
|
|
YAXisOption |
|
|
|
|
|
} from 'echarts/types/dist/shared'; |
|
|
import { CustomSeriesOption, LineSeriesOption } from 'echarts/charts'; |
|
|
import { CustomSeriesOption, LineSeriesOption } from 'echarts/charts'; |
|
|
import { |
|
|
import { |
|
|
formatValue, |
|
|
formatValue, |
|
|
isDefinedAndNotNull, |
|
|
isDefinedAndNotNull, |
|
|
isFunction, |
|
|
isFunction, isNumber, |
|
|
isNumeric, |
|
|
isNumeric, |
|
|
isUndefined, |
|
|
isUndefined, |
|
|
isUndefinedOrNull, |
|
|
isUndefinedOrNull, |
|
|
@ -45,7 +51,7 @@ import { |
|
|
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; |
|
|
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; |
|
|
import tinycolor from 'tinycolor2'; |
|
|
import tinycolor from 'tinycolor2'; |
|
|
import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes'; |
|
|
import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes'; |
|
|
import { SeriesLabelOption } from 'echarts/types/src/util/types'; |
|
|
import { LabelFormatterCallback, LabelLayoutOption, SeriesLabelOption } from 'echarts/types/src/util/types'; |
|
|
import { |
|
|
import { |
|
|
BarRenderContext, |
|
|
BarRenderContext, |
|
|
BarRenderSharedContext, |
|
|
BarRenderSharedContext, |
|
|
@ -58,6 +64,7 @@ import { TbColorScheme } from '@shared/models/color.models'; |
|
|
import { AbstractControl, ValidationErrors } from '@angular/forms'; |
|
|
import { AbstractControl, ValidationErrors } from '@angular/forms'; |
|
|
import { MarkLine2DDataItemOption } from 'echarts/types/src/component/marker/MarkLineModel'; |
|
|
import { MarkLine2DDataItemOption } from 'echarts/types/src/component/marker/MarkLineModel'; |
|
|
import { DatePipe } from '@angular/common'; |
|
|
import { DatePipe } from '@angular/common'; |
|
|
|
|
|
import { BuiltinTextPosition } from 'zrender/src/core/types'; |
|
|
|
|
|
|
|
|
export enum TimeSeriesChartType { |
|
|
export enum TimeSeriesChartType { |
|
|
default = 'default', |
|
|
default = 'default', |
|
|
@ -74,7 +81,7 @@ export const timeSeriesChartTypeTranslations = new Map<TimeSeriesChartType, stri |
|
|
] |
|
|
] |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
const timeSeriesChartColorScheme: TbColorScheme = { |
|
|
export const timeSeriesChartColorScheme: TbColorScheme = { |
|
|
'threshold.line': { |
|
|
'threshold.line': { |
|
|
light: 'rgba(0, 0, 0, 0.76)', |
|
|
light: 'rgba(0, 0, 0, 0.76)', |
|
|
dark: '#eee' |
|
|
dark: '#eee' |
|
|
@ -127,34 +134,6 @@ export const timeSeriesAxisPositionTranslations = new Map<AxisPosition, string>( |
|
|
] |
|
|
] |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
export enum TimeSeriesChartShape { |
|
|
|
|
|
emptyCircle = 'emptyCircle', |
|
|
|
|
|
circle = 'circle', |
|
|
|
|
|
rect = 'rect', |
|
|
|
|
|
roundRect = 'roundRect', |
|
|
|
|
|
triangle = 'triangle', |
|
|
|
|
|
diamond = 'diamond', |
|
|
|
|
|
pin = 'pin', |
|
|
|
|
|
arrow = 'arrow', |
|
|
|
|
|
none = 'none' |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const timeSeriesChartShapes = Object.keys(TimeSeriesChartShape) as TimeSeriesChartShape[]; |
|
|
|
|
|
|
|
|
|
|
|
export const timeSeriesChartShapeTranslations = new Map<TimeSeriesChartShape, string>( |
|
|
|
|
|
[ |
|
|
|
|
|
[TimeSeriesChartShape.emptyCircle, 'widgets.time-series-chart.shape-empty-circle'], |
|
|
|
|
|
[TimeSeriesChartShape.circle, 'widgets.time-series-chart.shape-circle'], |
|
|
|
|
|
[TimeSeriesChartShape.rect, 'widgets.time-series-chart.shape-rect'], |
|
|
|
|
|
[TimeSeriesChartShape.roundRect, 'widgets.time-series-chart.shape-round-rect'], |
|
|
|
|
|
[TimeSeriesChartShape.triangle, 'widgets.time-series-chart.shape-triangle'], |
|
|
|
|
|
[TimeSeriesChartShape.diamond, 'widgets.time-series-chart.shape-diamond'], |
|
|
|
|
|
[TimeSeriesChartShape.pin, 'widgets.time-series-chart.shape-pin'], |
|
|
|
|
|
[TimeSeriesChartShape.arrow, 'widgets.time-series-chart.shape-arrow'], |
|
|
|
|
|
[TimeSeriesChartShape.none, 'widgets.time-series-chart.shape-none'] |
|
|
|
|
|
] |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
export enum TimeSeriesChartLineType { |
|
|
export enum TimeSeriesChartLineType { |
|
|
solid = 'solid', |
|
|
solid = 'solid', |
|
|
dashed = 'dashed', |
|
|
dashed = 'dashed', |
|
|
@ -401,6 +380,38 @@ export const defaultTimeSeriesChartYAxisSettings: TimeSeriesChartYAxisSettings = |
|
|
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light |
|
|
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const defaultTimeSeriesChartXAxisSettings: TimeSeriesChartXAxisSettings = { |
|
|
|
|
|
show: true, |
|
|
|
|
|
label: '', |
|
|
|
|
|
labelFont: { |
|
|
|
|
|
family: 'Roboto', |
|
|
|
|
|
size: 12, |
|
|
|
|
|
sizeUnit: 'px', |
|
|
|
|
|
style: 'normal', |
|
|
|
|
|
weight: '600', |
|
|
|
|
|
lineHeight: '1' |
|
|
|
|
|
}, |
|
|
|
|
|
labelColor: timeSeriesChartColorScheme['axis.label'].light, |
|
|
|
|
|
position: AxisPosition.bottom, |
|
|
|
|
|
showTickLabels: true, |
|
|
|
|
|
tickLabelFont: { |
|
|
|
|
|
family: 'Roboto', |
|
|
|
|
|
size: 10, |
|
|
|
|
|
sizeUnit: 'px', |
|
|
|
|
|
style: 'normal', |
|
|
|
|
|
weight: '400', |
|
|
|
|
|
lineHeight: '1' |
|
|
|
|
|
}, |
|
|
|
|
|
tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light, |
|
|
|
|
|
ticksFormat: {}, |
|
|
|
|
|
showTicks: true, |
|
|
|
|
|
ticksColor: timeSeriesChartColorScheme['axis.ticks'].light, |
|
|
|
|
|
showLine: true, |
|
|
|
|
|
lineColor: timeSeriesChartColorScheme['axis.line'].light, |
|
|
|
|
|
showSplitLines: true, |
|
|
|
|
|
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
export type TimeSeriesChartYAxes = {[id: TimeSeriesChartYAxisId]: TimeSeriesChartYAxisSettings}; |
|
|
export type TimeSeriesChartYAxes = {[id: TimeSeriesChartYAxisId]: TimeSeriesChartYAxisSettings}; |
|
|
|
|
|
|
|
|
export interface TimeSeriesChartThreshold { |
|
|
export interface TimeSeriesChartThreshold { |
|
|
@ -415,16 +426,19 @@ export interface TimeSeriesChartThreshold { |
|
|
units?: string; |
|
|
units?: string; |
|
|
decimals?: number; |
|
|
decimals?: number; |
|
|
lineColor: string; |
|
|
lineColor: string; |
|
|
lineType: TimeSeriesChartLineType; |
|
|
lineType: TimeSeriesChartLineType | number | number[]; |
|
|
lineWidth: number; |
|
|
lineWidth: number; |
|
|
startSymbol: TimeSeriesChartShape; |
|
|
startSymbol: EChartsShape; |
|
|
startSymbolSize: number; |
|
|
startSymbolSize: number; |
|
|
endSymbol: TimeSeriesChartShape; |
|
|
endSymbol: EChartsShape; |
|
|
endSymbolSize: number; |
|
|
endSymbolSize: number; |
|
|
showLabel: boolean; |
|
|
showLabel: boolean; |
|
|
labelPosition: ThresholdLabelPosition; |
|
|
labelPosition: ThresholdLabelPosition; |
|
|
labelFont: Font; |
|
|
labelFont: Font; |
|
|
labelColor: string; |
|
|
labelColor: string; |
|
|
|
|
|
enableLabelBackground: boolean; |
|
|
|
|
|
labelBackground: string; |
|
|
|
|
|
additionalLabelOption?: {[key: string]: any}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export const timeSeriesChartThresholdValid = (threshold: TimeSeriesChartThreshold): boolean => { |
|
|
export const timeSeriesChartThresholdValid = (threshold: TimeSeriesChartThreshold): boolean => { |
|
|
@ -469,9 +483,9 @@ export const timeSeriesChartThresholdDefaultSettings: TimeSeriesChartThreshold = |
|
|
lineColor: timeSeriesChartColorScheme['threshold.line'].light, |
|
|
lineColor: timeSeriesChartColorScheme['threshold.line'].light, |
|
|
lineType: TimeSeriesChartLineType.solid, |
|
|
lineType: TimeSeriesChartLineType.solid, |
|
|
lineWidth: 1, |
|
|
lineWidth: 1, |
|
|
startSymbol: TimeSeriesChartShape.none, |
|
|
startSymbol: EChartsShape.none, |
|
|
startSymbolSize: 5, |
|
|
startSymbolSize: 5, |
|
|
endSymbol: TimeSeriesChartShape.arrow, |
|
|
endSymbol: EChartsShape.arrow, |
|
|
endSymbolSize: 5, |
|
|
endSymbolSize: 5, |
|
|
showLabel: true, |
|
|
showLabel: true, |
|
|
labelPosition: ThresholdLabelPosition.end, |
|
|
labelPosition: ThresholdLabelPosition.end, |
|
|
@ -483,7 +497,9 @@ export const timeSeriesChartThresholdDefaultSettings: TimeSeriesChartThreshold = |
|
|
weight: '400', |
|
|
weight: '400', |
|
|
lineHeight: '1' |
|
|
lineHeight: '1' |
|
|
}, |
|
|
}, |
|
|
labelColor: timeSeriesChartColorScheme['threshold.label'].light |
|
|
labelColor: timeSeriesChartColorScheme['threshold.label'].light, |
|
|
|
|
|
enableLabelBackground: false, |
|
|
|
|
|
labelBackground: 'rgba(255,255,255,0.56)' |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export enum TimeSeriesChartNoAggregationBarWidthStrategy { |
|
|
export enum TimeSeriesChartNoAggregationBarWidthStrategy { |
|
|
@ -513,6 +529,25 @@ export interface TimeSeriesChartNoAggregationBarWidthSettings { |
|
|
barWidth?: TimeSeriesChartBarWidth; |
|
|
barWidth?: TimeSeriesChartBarWidth; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const timeSeriesChartNoAggregationBarWidthDefaultSettings: TimeSeriesChartNoAggregationBarWidthSettings = { |
|
|
|
|
|
strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group, |
|
|
|
|
|
groupWidth: { |
|
|
|
|
|
relative: true, |
|
|
|
|
|
relativeWidth: 2, |
|
|
|
|
|
absoluteWidth: 1000 |
|
|
|
|
|
}, |
|
|
|
|
|
barWidth: { |
|
|
|
|
|
relative: true, |
|
|
|
|
|
relativeWidth: 2, |
|
|
|
|
|
absoluteWidth: 1000 |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export interface TimeSeriesChartBarWidthSettings { |
|
|
|
|
|
barGap: number; |
|
|
|
|
|
intervalGap: number; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
export enum TimeSeriesChartAnimationEasing { |
|
|
export enum TimeSeriesChartAnimationEasing { |
|
|
linear = 'linear', |
|
|
linear = 'linear', |
|
|
quadraticIn = 'quadraticIn', |
|
|
quadraticIn = 'quadraticIn', |
|
|
@ -560,6 +595,50 @@ export interface TimeSeriesChartAnimationSettings { |
|
|
animationDelayUpdate: number; |
|
|
animationDelayUpdate: number; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const timeSeriesChartAnimationDefaultSettings: TimeSeriesChartAnimationSettings = { |
|
|
|
|
|
animation: true, |
|
|
|
|
|
animationThreshold: 2000, |
|
|
|
|
|
animationDuration: 500, |
|
|
|
|
|
animationEasing: TimeSeriesChartAnimationEasing.cubicOut, |
|
|
|
|
|
animationDelay: 0, |
|
|
|
|
|
animationDurationUpdate: 300, |
|
|
|
|
|
animationEasingUpdate: TimeSeriesChartAnimationEasing.cubicOut, |
|
|
|
|
|
animationDelayUpdate: 0 |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export interface TimeSeriesChartVisualMapPiece { |
|
|
|
|
|
lt?: number; |
|
|
|
|
|
gt?: number; |
|
|
|
|
|
lte?: number; |
|
|
|
|
|
gte?: number; |
|
|
|
|
|
value?: number; |
|
|
|
|
|
color?: string; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export const createTimeSeriesChartVisualMapPiece = (color: string, from?: number, to?: number): TimeSeriesChartVisualMapPiece => { |
|
|
|
|
|
const piece: TimeSeriesChartVisualMapPiece = { |
|
|
|
|
|
color |
|
|
|
|
|
}; |
|
|
|
|
|
if (isNumber(from) && isNumber(to)) { |
|
|
|
|
|
if (from === to) { |
|
|
|
|
|
piece.value = from; |
|
|
|
|
|
} else { |
|
|
|
|
|
piece.gte = from; |
|
|
|
|
|
piece.lt = to; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (isNumber(from)) { |
|
|
|
|
|
piece.gte = from; |
|
|
|
|
|
} else if (isNumber(to)) { |
|
|
|
|
|
piece.lt = to; |
|
|
|
|
|
} |
|
|
|
|
|
return piece; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export interface TimeSeriesChartVisualMapSettings { |
|
|
|
|
|
outOfRangeColor: string; |
|
|
|
|
|
pieces: TimeSeriesChartVisualMapPiece[]; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { |
|
|
export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { |
|
|
thresholds: TimeSeriesChartThreshold[]; |
|
|
thresholds: TimeSeriesChartThreshold[]; |
|
|
darkMode: boolean; |
|
|
darkMode: boolean; |
|
|
@ -568,7 +647,9 @@ export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { |
|
|
yAxes: TimeSeriesChartYAxes; |
|
|
yAxes: TimeSeriesChartYAxes; |
|
|
xAxis: TimeSeriesChartXAxisSettings; |
|
|
xAxis: TimeSeriesChartXAxisSettings; |
|
|
animation: TimeSeriesChartAnimationSettings; |
|
|
animation: TimeSeriesChartAnimationSettings; |
|
|
|
|
|
barWidthSettings: TimeSeriesChartBarWidthSettings; |
|
|
noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings; |
|
|
noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings; |
|
|
|
|
|
visualMapSettings?: TimeSeriesChartVisualMapSettings; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { |
|
|
export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { |
|
|
@ -581,60 +662,16 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { |
|
|
defaultTimeSeriesChartYAxisSettings, |
|
|
defaultTimeSeriesChartYAxisSettings, |
|
|
{ id: 'default', order: 0 } as TimeSeriesChartYAxisSettings) |
|
|
{ id: 'default', order: 0 } as TimeSeriesChartYAxisSettings) |
|
|
}, |
|
|
}, |
|
|
xAxis: { |
|
|
xAxis: mergeDeep({} as TimeSeriesChartXAxisSettings, |
|
|
show: true, |
|
|
defaultTimeSeriesChartXAxisSettings), |
|
|
label: '', |
|
|
animation: mergeDeep({} as TimeSeriesChartAnimationSettings, |
|
|
labelFont: { |
|
|
timeSeriesChartAnimationDefaultSettings), |
|
|
family: 'Roboto', |
|
|
barWidthSettings: { |
|
|
size: 12, |
|
|
barGap: 0.3, |
|
|
sizeUnit: 'px', |
|
|
intervalGap: 0.6 |
|
|
style: 'normal', |
|
|
|
|
|
weight: '600', |
|
|
|
|
|
lineHeight: '1' |
|
|
|
|
|
}, |
|
|
|
|
|
labelColor: timeSeriesChartColorScheme['axis.label'].light, |
|
|
|
|
|
position: AxisPosition.bottom, |
|
|
|
|
|
showTickLabels: true, |
|
|
|
|
|
tickLabelFont: { |
|
|
|
|
|
family: 'Roboto', |
|
|
|
|
|
size: 10, |
|
|
|
|
|
sizeUnit: 'px', |
|
|
|
|
|
style: 'normal', |
|
|
|
|
|
weight: '400', |
|
|
|
|
|
lineHeight: '1' |
|
|
|
|
|
}, |
|
|
|
|
|
tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light, |
|
|
|
|
|
ticksFormat: {}, |
|
|
|
|
|
showTicks: true, |
|
|
|
|
|
ticksColor: timeSeriesChartColorScheme['axis.ticks'].light, |
|
|
|
|
|
showLine: true, |
|
|
|
|
|
lineColor: timeSeriesChartColorScheme['axis.line'].light, |
|
|
|
|
|
showSplitLines: true, |
|
|
|
|
|
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light |
|
|
|
|
|
}, |
|
|
|
|
|
animation: { |
|
|
|
|
|
animation: true, |
|
|
|
|
|
animationThreshold: 2000, |
|
|
|
|
|
animationDuration: 500, |
|
|
|
|
|
animationEasing: TimeSeriesChartAnimationEasing.cubicOut, |
|
|
|
|
|
animationDelay: 0, |
|
|
|
|
|
animationDurationUpdate: 300, |
|
|
|
|
|
animationEasingUpdate: TimeSeriesChartAnimationEasing.cubicOut, |
|
|
|
|
|
animationDelayUpdate: 0 |
|
|
|
|
|
}, |
|
|
|
|
|
noAggregationBarWidthSettings: { |
|
|
|
|
|
strategy: TimeSeriesChartNoAggregationBarWidthStrategy.group, |
|
|
|
|
|
groupWidth: { |
|
|
|
|
|
relative: true, |
|
|
|
|
|
relativeWidth: 2, |
|
|
|
|
|
absoluteWidth: 1000 |
|
|
|
|
|
}, |
|
|
|
|
|
barWidth: { |
|
|
|
|
|
relative: true, |
|
|
|
|
|
relativeWidth: 2, |
|
|
|
|
|
absoluteWidth: 1000 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
noAggregationBarWidthSettings: mergeDeep({} as TimeSeriesChartNoAggregationBarWidthSettings, |
|
|
|
|
|
timeSeriesChartNoAggregationBarWidthDefaultSettings), |
|
|
showTooltip: true, |
|
|
showTooltip: true, |
|
|
tooltipTrigger: EChartsTooltipTrigger.axis, |
|
|
tooltipTrigger: EChartsTooltipTrigger.axis, |
|
|
tooltipValueFont: { |
|
|
tooltipValueFont: { |
|
|
@ -683,7 +720,10 @@ export interface LineSeriesSettings { |
|
|
pointLabelPosition: SeriesLabelPosition; |
|
|
pointLabelPosition: SeriesLabelPosition; |
|
|
pointLabelFont: Font; |
|
|
pointLabelFont: Font; |
|
|
pointLabelColor: string; |
|
|
pointLabelColor: string; |
|
|
pointShape: TimeSeriesChartShape; |
|
|
enablePointLabelBackground: boolean; |
|
|
|
|
|
pointLabelBackground: string; |
|
|
|
|
|
pointLabelFormatter?: string | LabelFormatterCallback; |
|
|
|
|
|
pointShape: EChartsShape; |
|
|
pointSize: number; |
|
|
pointSize: number; |
|
|
fillAreaSettings: SeriesFillSettings; |
|
|
fillAreaSettings: SeriesFillSettings; |
|
|
} |
|
|
} |
|
|
@ -693,9 +733,14 @@ export interface BarSeriesSettings { |
|
|
borderWidth: number; |
|
|
borderWidth: number; |
|
|
borderRadius: number; |
|
|
borderRadius: number; |
|
|
showLabel: boolean; |
|
|
showLabel: boolean; |
|
|
labelPosition: SeriesLabelPosition; |
|
|
labelPosition: SeriesLabelPosition | BuiltinTextPosition; |
|
|
labelFont: Font; |
|
|
labelFont: Font; |
|
|
labelColor: string; |
|
|
labelColor: string; |
|
|
|
|
|
enableLabelBackground: boolean; |
|
|
|
|
|
labelBackground: string; |
|
|
|
|
|
labelFormatter?: string | LabelFormatterCallback; |
|
|
|
|
|
labelLayout?: LabelLayoutOption | LabelLayoutOptionCallback; |
|
|
|
|
|
additionalLabelOption?: {[key: string]: any}; |
|
|
backgroundSettings: SeriesFillSettings; |
|
|
backgroundSettings: SeriesFillSettings; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -732,7 +777,9 @@ export const timeSeriesChartKeyDefaultSettings: TimeSeriesChartKeySettings = { |
|
|
lineHeight: '1' |
|
|
lineHeight: '1' |
|
|
}, |
|
|
}, |
|
|
pointLabelColor: timeSeriesChartColorScheme['series.label'].light, |
|
|
pointLabelColor: timeSeriesChartColorScheme['series.label'].light, |
|
|
pointShape: TimeSeriesChartShape.emptyCircle, |
|
|
enablePointLabelBackground: false, |
|
|
|
|
|
pointLabelBackground: 'rgba(255,255,255,0.56)', |
|
|
|
|
|
pointShape: EChartsShape.emptyCircle, |
|
|
pointSize: 4, |
|
|
pointSize: 4, |
|
|
fillAreaSettings: { |
|
|
fillAreaSettings: { |
|
|
type: SeriesFillType.none, |
|
|
type: SeriesFillType.none, |
|
|
@ -758,6 +805,8 @@ export const timeSeriesChartKeyDefaultSettings: TimeSeriesChartKeySettings = { |
|
|
lineHeight: '1' |
|
|
lineHeight: '1' |
|
|
}, |
|
|
}, |
|
|
labelColor: timeSeriesChartColorScheme['series.label'].light, |
|
|
labelColor: timeSeriesChartColorScheme['series.label'].light, |
|
|
|
|
|
enableLabelBackground: false, |
|
|
|
|
|
labelBackground: 'rgba(255,255,255,0.56)', |
|
|
backgroundSettings: { |
|
|
backgroundSettings: { |
|
|
type: SeriesFillType.none, |
|
|
type: SeriesFillType.none, |
|
|
opacity: 0.4, |
|
|
opacity: 0.4, |
|
|
@ -944,7 +993,12 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartXAxisSettin |
|
|
fontFamily: xAxisTickLabelStyle.fontFamily, |
|
|
fontFamily: xAxisTickLabelStyle.fontFamily, |
|
|
fontSize: xAxisTickLabelStyle.fontSize, |
|
|
fontSize: xAxisTickLabelStyle.fontSize, |
|
|
hideOverlap: true, |
|
|
hideOverlap: true, |
|
|
formatter: (value: number, index: number, extra: {level: number}) => { |
|
|
/** Min/Max time label always visible **/ |
|
|
|
|
|
/* alignMinLabel: 'left', |
|
|
|
|
|
alignMaxLabel: 'right', |
|
|
|
|
|
showMinLabel: true, |
|
|
|
|
|
showMaxLabel: true, */ |
|
|
|
|
|
formatter: (value: number, _index: number, extra: {level: number}) => { |
|
|
const unit = tsToFormatTimeUnit(value); |
|
|
const unit = tsToFormatTimeUnit(value); |
|
|
const format = ticksFormat[unit]; |
|
|
const format = ticksFormat[unit]; |
|
|
const formatted = datePipe.transform(value, format); |
|
|
const formatted = datePipe.transform(value, format); |
|
|
@ -974,6 +1028,21 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartXAxisSettin |
|
|
}; |
|
|
}; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const createTimeSeriesVisualMapOption = (settings: TimeSeriesChartVisualMapSettings, |
|
|
|
|
|
selectedRanges: {[key: number]: boolean}): VisualMapComponentOption => ({ |
|
|
|
|
|
show: false, |
|
|
|
|
|
type: 'piecewise', |
|
|
|
|
|
selected: selectedRanges, |
|
|
|
|
|
dimension: 1, |
|
|
|
|
|
pieces: settings.pieces, |
|
|
|
|
|
outOfRange: { |
|
|
|
|
|
color: settings.outOfRangeColor |
|
|
|
|
|
}, |
|
|
|
|
|
inRange: !settings.pieces.length ? { |
|
|
|
|
|
color: settings.outOfRangeColor |
|
|
|
|
|
} : undefined |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
export const generateChartData = (dataItems: TimeSeriesChartDataItem[], |
|
|
export const generateChartData = (dataItems: TimeSeriesChartDataItem[], |
|
|
thresholdItems: TimeSeriesChartThresholdItem[], |
|
|
thresholdItems: TimeSeriesChartThresholdItem[], |
|
|
stack: boolean, |
|
|
stack: boolean, |
|
|
@ -983,7 +1052,7 @@ export const generateChartData = (dataItems: TimeSeriesChartDataItem[], |
|
|
let series = generateChartSeries(dataItems, |
|
|
let series = generateChartSeries(dataItems, |
|
|
stack, noAggregation, barRenderSharedContext, darkMode); |
|
|
stack, noAggregation, barRenderSharedContext, darkMode); |
|
|
if (thresholdItems.length) { |
|
|
if (thresholdItems.length) { |
|
|
const thresholds = generateChartThresholds(thresholdItems, darkMode); |
|
|
const thresholds = generateChartThresholds(thresholdItems); |
|
|
series = series.concat(thresholds); |
|
|
series = series.concat(thresholds); |
|
|
} |
|
|
} |
|
|
return series; |
|
|
return series; |
|
|
@ -995,7 +1064,7 @@ export const calculateThresholdsOffset = (chart: ECharts, |
|
|
const result: [number, number] = [0, 0]; |
|
|
const result: [number, number] = [0, 0]; |
|
|
for (const item of thresholdItems) { |
|
|
for (const item of thresholdItems) { |
|
|
const yAxis = yAxisList[item.yAxisIndex]; |
|
|
const yAxis = yAxisList[item.yAxisIndex]; |
|
|
const offset = measureThresholdLabelOffset(chart, yAxis.id, item.id, item.value); |
|
|
const offset = measureThresholdOffset(chart, yAxis.id, item.id, item.value); |
|
|
result[0] = Math.max(result[0], offset[0]); |
|
|
result[0] = Math.max(result[0], offset[0]); |
|
|
result[1] = Math.max(result[1], offset[1]); |
|
|
result[1] = Math.max(result[1], offset[1]); |
|
|
} |
|
|
} |
|
|
@ -1017,7 +1086,7 @@ export const parseThresholdData = (value: any): TimeSeriesChartThresholdValue => |
|
|
return thresholdValue; |
|
|
return thresholdValue; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const generateChartThresholds = (thresholdItems: TimeSeriesChartThresholdItem[], darkMode: boolean): Array<LineSeriesOption> => { |
|
|
const generateChartThresholds = (thresholdItems: TimeSeriesChartThresholdItem[]): Array<LineSeriesOption> => { |
|
|
const series: Array<LineSeriesOption> = []; |
|
|
const series: Array<LineSeriesOption> = []; |
|
|
for (const item of thresholdItems) { |
|
|
for (const item of thresholdItems) { |
|
|
if (isDefinedAndNotNull(item.value)) { |
|
|
if (isDefinedAndNotNull(item.value)) { |
|
|
@ -1056,6 +1125,14 @@ const generateChartThresholds = (thresholdItems: TimeSeriesChartThresholdItem[], |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
if (item.settings.enableLabelBackground) { |
|
|
|
|
|
seriesOption.markLine.label.backgroundColor = item.settings.labelBackground; |
|
|
|
|
|
seriesOption.markLine.label.padding = [4, 5]; |
|
|
|
|
|
seriesOption.markLine.label.borderRadius = 4; |
|
|
|
|
|
} |
|
|
|
|
|
if (item.settings.additionalLabelOption) { |
|
|
|
|
|
seriesOption.markLine.label = {...seriesOption.markLine.label, ...item.settings.additionalLabelOption}; |
|
|
|
|
|
} |
|
|
item.option = seriesOption; |
|
|
item.option = seriesOption; |
|
|
} |
|
|
} |
|
|
seriesOption.markLine.data = []; |
|
|
seriesOption.markLine.data = []; |
|
|
@ -1131,7 +1208,7 @@ const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], |
|
|
|
|
|
|
|
|
export const updateDarkMode = (options: EChartsOption, settings: TimeSeriesChartSettings, |
|
|
export const updateDarkMode = (options: EChartsOption, settings: TimeSeriesChartSettings, |
|
|
yAxisList: TimeSeriesChartYAxis[], |
|
|
yAxisList: TimeSeriesChartYAxis[], |
|
|
dataItems: TimeSeriesChartDataItem[], thresholdDataItems: TimeSeriesChartThresholdItem[], |
|
|
dataItems: TimeSeriesChartDataItem[], |
|
|
darkMode: boolean): EChartsOption => { |
|
|
darkMode: boolean): EChartsOption => { |
|
|
options.darkMode = darkMode; |
|
|
options.darkMode = darkMode; |
|
|
if (Array.isArray(options.yAxis)) { |
|
|
if (Array.isArray(options.yAxis)) { |
|
|
@ -1171,7 +1248,7 @@ export const updateDarkMode = (options: EChartsOption, settings: TimeSeriesChart |
|
|
} else { |
|
|
} else { |
|
|
if (item.barRenderContext?.labelOption?.show) { |
|
|
if (item.barRenderContext?.labelOption?.show) { |
|
|
const barSettings = item.dataKey.settings as BarSeriesSettings; |
|
|
const barSettings = item.dataKey.settings as BarSeriesSettings; |
|
|
item.barRenderContext.labelOption.rich.value.color = prepareChartThemeColor(barSettings.labelColor, |
|
|
(item.barRenderContext.labelOption.rich.value as any).fill = prepareChartThemeColor(barSettings.labelColor, |
|
|
darkMode, 'series.label'); |
|
|
darkMode, 'series.label'); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -1215,7 +1292,10 @@ const createTimeSeriesChartSeries = (item: TimeSeriesChartDataItem, |
|
|
const lineSeriesOption = seriesOption as LineSeriesOption; |
|
|
const lineSeriesOption = seriesOption as LineSeriesOption; |
|
|
lineSeriesOption.type = 'line'; |
|
|
lineSeriesOption.type = 'line'; |
|
|
lineSeriesOption.label = createSeriesLabelOption(item, lineSettings.showPointLabel, |
|
|
lineSeriesOption.label = createSeriesLabelOption(item, lineSettings.showPointLabel, |
|
|
lineSettings.pointLabelFont, lineSettings.pointLabelColor, lineSettings.pointLabelPosition, darkMode); |
|
|
lineSettings.pointLabelFont, lineSettings.pointLabelColor, |
|
|
|
|
|
lineSettings.enablePointLabelBackground, lineSettings.pointLabelBackground, |
|
|
|
|
|
lineSettings.pointLabelPosition, |
|
|
|
|
|
lineSettings.pointLabelFormatter, false, darkMode); |
|
|
lineSeriesOption.step = lineSettings.step ? lineSettings.stepType : false; |
|
|
lineSeriesOption.step = lineSettings.step ? lineSettings.stepType : false; |
|
|
lineSeriesOption.smooth = lineSettings.smooth; |
|
|
lineSeriesOption.smooth = lineSettings.smooth; |
|
|
if (lineSettings.smooth) { |
|
|
if (lineSettings.smooth) { |
|
|
@ -1229,7 +1309,7 @@ const createTimeSeriesChartSeries = (item: TimeSeriesChartDataItem, |
|
|
lineSeriesOption.areaStyle = {}; |
|
|
lineSeriesOption.areaStyle = {}; |
|
|
if (lineSettings.fillAreaSettings.type === SeriesFillType.opacity) { |
|
|
if (lineSettings.fillAreaSettings.type === SeriesFillType.opacity) { |
|
|
lineSeriesOption.areaStyle.opacity = lineSettings.fillAreaSettings.opacity; |
|
|
lineSeriesOption.areaStyle.opacity = lineSettings.fillAreaSettings.opacity; |
|
|
} else { |
|
|
} else if (lineSettings.fillAreaSettings.type === SeriesFillType.gradient) { |
|
|
lineSeriesOption.areaStyle.opacity = 1; |
|
|
lineSeriesOption.areaStyle.opacity = 1; |
|
|
lineSeriesOption.areaStyle.color = createLinearOpacityGradient(seriesColor, lineSettings.fillAreaSettings.gradient); |
|
|
lineSeriesOption.areaStyle.color = createLinearOpacityGradient(seriesColor, lineSettings.fillAreaSettings.gradient); |
|
|
} |
|
|
} |
|
|
@ -1256,9 +1336,12 @@ const createTimeSeriesChartSeries = (item: TimeSeriesChartDataItem, |
|
|
} |
|
|
} |
|
|
item.barRenderContext.visualSettings = barVisualSettings; |
|
|
item.barRenderContext.visualSettings = barVisualSettings; |
|
|
item.barRenderContext.labelOption = createSeriesLabelOption(item, barSettings.showLabel, |
|
|
item.barRenderContext.labelOption = createSeriesLabelOption(item, barSettings.showLabel, |
|
|
barSettings.labelFont, barSettings.labelColor, barSettings.labelPosition, darkMode); |
|
|
barSettings.labelFont, barSettings.labelColor, barSettings.enableLabelBackground, barSettings.labelBackground, |
|
|
|
|
|
barSettings.labelPosition, barSettings.labelFormatter, true, darkMode); |
|
|
|
|
|
item.barRenderContext.additionalLabelOption = barSettings.additionalLabelOption; |
|
|
barSeriesOption.renderItem = (params, api) => |
|
|
barSeriesOption.renderItem = (params, api) => |
|
|
renderTimeSeriesBar(params, api, item.barRenderContext); |
|
|
renderTimeSeriesBar(params, api, item.barRenderContext); |
|
|
|
|
|
barSeriesOption.labelLayout = barSettings.labelLayout; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
seriesOption.data = item.data; |
|
|
seriesOption.data = item.data; |
|
|
@ -1266,30 +1349,63 @@ const createTimeSeriesChartSeries = (item: TimeSeriesChartDataItem, |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const createSeriesLabelOption = (item: TimeSeriesChartDataItem, show: boolean, |
|
|
const createSeriesLabelOption = (item: TimeSeriesChartDataItem, show: boolean, |
|
|
labelFont: Font, labelColor: string, position: SeriesLabelPosition, |
|
|
labelFont: Font, labelColor: string, |
|
|
|
|
|
enableBackground: boolean, labelBackground: string, |
|
|
|
|
|
position: SeriesLabelPosition | BuiltinTextPosition, |
|
|
|
|
|
labelFormatter: string | LabelFormatterCallback, |
|
|
|
|
|
labelColorFill: boolean, |
|
|
darkMode: boolean): SeriesLabelOption => { |
|
|
darkMode: boolean): SeriesLabelOption => { |
|
|
let labelStyle: ComponentStyle = {}; |
|
|
let labelStyle: ComponentStyle = {}; |
|
|
if (show) { |
|
|
if (show) { |
|
|
labelStyle = createChartTextStyle(labelFont, labelColor, darkMode, 'series.label'); |
|
|
labelStyle = createChartTextStyle(labelFont, labelColor, darkMode, 'series.label', labelColorFill); |
|
|
} |
|
|
} |
|
|
return { |
|
|
let formatter: LabelFormatterCallback; |
|
|
show, |
|
|
if (isFunction(labelFormatter)) { |
|
|
position, |
|
|
formatter = labelFormatter as LabelFormatterCallback; |
|
|
formatter: (params): string => { |
|
|
} else if (labelFormatter?.length) { |
|
|
|
|
|
const formatFunction = parseFunction(labelFormatter, ['value']); |
|
|
|
|
|
formatter = (params): string => { |
|
|
|
|
|
let result: string; |
|
|
|
|
|
try { |
|
|
|
|
|
result = formatFunction(params.value[1]); |
|
|
|
|
|
} catch (_e) { |
|
|
|
|
|
} |
|
|
|
|
|
if (isUndefined(result)) { |
|
|
|
|
|
result = formatValue(params.value[1], item.decimals, item.units, false); |
|
|
|
|
|
} |
|
|
|
|
|
return `{value|${result}}`; |
|
|
|
|
|
}; |
|
|
|
|
|
} else { |
|
|
|
|
|
formatter = (params): string => { |
|
|
const value = formatValue(params.value[1], item.decimals, item.units, false); |
|
|
const value = formatValue(params.value[1], item.decimals, item.units, false); |
|
|
return `{value|${value}}`; |
|
|
return `{value|${value}}`; |
|
|
}, |
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
const labelOption: SeriesLabelOption = { |
|
|
|
|
|
show, |
|
|
|
|
|
position, |
|
|
|
|
|
formatter, |
|
|
rich: { |
|
|
rich: { |
|
|
value: labelStyle |
|
|
value: labelStyle |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
if (enableBackground) { |
|
|
|
|
|
labelOption.backgroundColor = labelBackground; |
|
|
|
|
|
labelOption.padding = [4, 5]; |
|
|
|
|
|
labelOption.borderRadius = 4; |
|
|
|
|
|
} |
|
|
|
|
|
return labelOption; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const createChartTextStyle = (font: Font, color: string, darkMode: boolean, colorKey?: string): ComponentStyle => { |
|
|
const createChartTextStyle = (font: Font, color: string, darkMode: boolean, colorKey?: string, fill = false): ComponentStyle => { |
|
|
const style = textStyle(font); |
|
|
const style = textStyle(font); |
|
|
delete style.lineHeight; |
|
|
delete style.lineHeight; |
|
|
style.fontSize = font.size; |
|
|
style.fontSize = font.size; |
|
|
style.color = prepareChartThemeColor(color, darkMode, colorKey); |
|
|
if (fill) { |
|
|
|
|
|
style.fill = prepareChartThemeColor(color, darkMode, colorKey); |
|
|
|
|
|
} else { |
|
|
|
|
|
style.color = prepareChartThemeColor(color, darkMode, colorKey); |
|
|
|
|
|
} |
|
|
return style; |
|
|
return style; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
Igor Kulikov
2 years ago
GitHub