|
|
@ -115,6 +115,7 @@ export type EChartsSeriesItem = { |
|
|
decimals?: number; |
|
|
decimals?: number; |
|
|
latestData?: FormattedData; |
|
|
latestData?: FormattedData; |
|
|
tooltipValueFormatFunction?: EChartsTooltipValueFormatFunction; |
|
|
tooltipValueFormatFunction?: EChartsTooltipValueFormatFunction; |
|
|
|
|
|
comparisonItem?: boolean; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export enum EChartsShape { |
|
|
export enum EChartsShape { |
|
|
@ -200,9 +201,9 @@ export const timeAxisBandWidthCalculator: TimeAxisBandWidthCalculator = (model) |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export const getXAxis = (chart: ECharts): Axis2D => { |
|
|
export const getAxis = (chart: ECharts, mainType: string, axisId: string): Axis2D => { |
|
|
const model: GlobalModel = (chart as any).getModel(); |
|
|
const model: GlobalModel = (chart as any).getModel(); |
|
|
const models = model.queryComponents({mainType: 'xAxis'}); |
|
|
const models = model.queryComponents({mainType, id: axisId}); |
|
|
if (models?.length) { |
|
|
if (models?.length) { |
|
|
const axisModel = models[0] as AxisModel; |
|
|
const axisModel = models[0] as AxisModel; |
|
|
return axisModel.axis; |
|
|
return axisModel.axis; |
|
|
@ -210,27 +211,20 @@ export const getXAxis = (chart: ECharts): Axis2D => { |
|
|
return null; |
|
|
return null; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export const getYAxis = (chart: ECharts, axisId: string): Axis2D => { |
|
|
export const calculateAxisSize = (chart: ECharts, mainType: string, axisId: string): number => { |
|
|
const model: GlobalModel = (chart as any).getModel(); |
|
|
const axis = getAxis(chart, mainType, axisId); |
|
|
const models = model.queryComponents({mainType: 'yAxis', id: axisId}); |
|
|
return _calculateAxisSize(axis); |
|
|
if (models?.length) { |
|
|
|
|
|
const axisModel = models[0] as AxisModel; |
|
|
|
|
|
return axisModel.axis; |
|
|
|
|
|
} |
|
|
|
|
|
return null; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const calculateYAxisWidth = (chart: ECharts, axisId: string): number => { |
|
|
|
|
|
const axis = getYAxis(chart, axisId); |
|
|
|
|
|
return calculateAxisSize(axis); |
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export const calculateXAxisHeight = (chart: ECharts): number => { |
|
|
export const measureAxisNameSize = (chart: ECharts, mainType: string, axisId: string, name: string): number => { |
|
|
const axis = getXAxis(chart); |
|
|
const axis = getAxis(chart, mainType, axisId); |
|
|
return calculateAxisSize(axis); |
|
|
if (axis) { |
|
|
|
|
|
return axis.model.getModel('nameTextStyle').getTextRect(name).height; |
|
|
|
|
|
} |
|
|
|
|
|
return 0; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const calculateAxisSize = (axis: Axis2D): number => { |
|
|
const _calculateAxisSize = (axis: Axis2D): number => { |
|
|
let size = 0; |
|
|
let size = 0; |
|
|
if (axis && axis.model.option.show) { |
|
|
if (axis && axis.model.option.show) { |
|
|
const labelUnionRect = estimateLabelUnionRect(axis); |
|
|
const labelUnionRect = estimateLabelUnionRect(axis); |
|
|
@ -247,22 +241,6 @@ const calculateAxisSize = (axis: Axis2D): number => { |
|
|
return size; |
|
|
return size; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export const measureYAxisNameWidth = (chart: ECharts, axisId: string, name: string): number => { |
|
|
|
|
|
const axis = getYAxis(chart, axisId); |
|
|
|
|
|
if (axis) { |
|
|
|
|
|
return axis.model.getModel('nameTextStyle').getTextRect(name).height; |
|
|
|
|
|
} |
|
|
|
|
|
return 0; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export const measureXAxisNameHeight = (chart: ECharts, name: string): number => { |
|
|
|
|
|
const axis = getXAxis(chart); |
|
|
|
|
|
if (axis) { |
|
|
|
|
|
return axis.model.getModel('nameTextStyle').getTextRect(name).height; |
|
|
|
|
|
} |
|
|
|
|
|
return 0; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const measureSymbolOffset = (symbol: string, symbolSize: any): number => { |
|
|
const measureSymbolOffset = (symbol: string, symbolSize: any): number => { |
|
|
if (isNumber(symbolSize)) { |
|
|
if (isNumber(symbolSize)) { |
|
|
if (symbol) { |
|
|
if (symbol) { |
|
|
@ -280,7 +258,7 @@ const measureSymbolOffset = (symbol: string, symbolSize: any): number => { |
|
|
|
|
|
|
|
|
export const measureThresholdOffset = (chart: ECharts, axisId: string, thresholdId: string, value: any): [number, number] => { |
|
|
export const measureThresholdOffset = (chart: ECharts, axisId: string, thresholdId: string, value: any): [number, number] => { |
|
|
const offset: [number, number] = [0,0]; |
|
|
const offset: [number, number] = [0,0]; |
|
|
const axis = getYAxis(chart, axisId); |
|
|
const axis = getAxis(chart, 'yAxis', axisId); |
|
|
if (axis && !axis.scale.isBlank()) { |
|
|
if (axis && !axis.scale.isBlank()) { |
|
|
const extent = axis.scale.getExtent(); |
|
|
const extent = axis.scale.getExtent(); |
|
|
const model: GlobalModel = (chart as any).getModel(); |
|
|
const model: GlobalModel = (chart as any).getModel(); |
|
|
@ -352,7 +330,7 @@ export const measureThresholdOffset = (chart: ECharts, axisId: string, threshold |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
export const getAxisExtent = (chart: ECharts, axisId: string): [number, number] => { |
|
|
export const getAxisExtent = (chart: ECharts, axisId: string): [number, number] => { |
|
|
const axis = getYAxis(chart, axisId); |
|
|
const axis = getAxis(chart, 'yAxis', axisId); |
|
|
if (axis) { |
|
|
if (axis) { |
|
|
return axis.scale.getExtent(); |
|
|
return axis.scale.getExtent(); |
|
|
} |
|
|
} |
|
|
@ -503,43 +481,72 @@ export const echartsTooltipFormatter = (renderer: Renderer2, |
|
|
focusedSeriesIndex: number, |
|
|
focusedSeriesIndex: number, |
|
|
series?: EChartsSeriesItem[], |
|
|
series?: EChartsSeriesItem[], |
|
|
interval?: Interval): null | HTMLElement => { |
|
|
interval?: Interval): null | HTMLElement => { |
|
|
if (!params || Array.isArray(params) && !params[0]) { |
|
|
|
|
|
return null; |
|
|
const tooltipParams = mapTooltipParams(params, series, focusedSeriesIndex); |
|
|
} |
|
|
if (!tooltipParams.items.length && !tooltipParams.comparisonItems.length) { |
|
|
const firstParam = Array.isArray(params) ? params[0] : params; |
|
|
|
|
|
if (!firstParam.value) { |
|
|
|
|
|
return null; |
|
|
return null; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const tooltipElement: HTMLElement = renderer.createElement('div'); |
|
|
const tooltipElement: HTMLElement = renderer.createElement('div'); |
|
|
renderer.setStyle(tooltipElement, 'display', 'flex'); |
|
|
renderer.setStyle(tooltipElement, 'display', 'flex'); |
|
|
renderer.setStyle(tooltipElement, 'flex-direction', 'column'); |
|
|
renderer.setStyle(tooltipElement, 'flex-direction', 'column'); |
|
|
renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); |
|
|
renderer.setStyle(tooltipElement, 'align-items', 'flex-start'); |
|
|
renderer.setStyle(tooltipElement, 'gap', '4px'); |
|
|
renderer.setStyle(tooltipElement, 'gap', '16px'); |
|
|
if (settings.tooltipShowDate) { |
|
|
|
|
|
const dateElement: HTMLElement = renderer.createElement('div'); |
|
|
buildItemsTooltip(tooltipElement, tooltipParams.items, renderer, tooltipDateFormat, settings, valueFormatFunction, interval); |
|
|
let dateText: string; |
|
|
buildItemsTooltip(tooltipElement, tooltipParams.comparisonItems, renderer, tooltipDateFormat, settings, valueFormatFunction, interval); |
|
|
const startTs = firstParam.value[2]; |
|
|
|
|
|
const endTs = firstParam.value[3]; |
|
|
return tooltipElement; |
|
|
if (settings.tooltipDateInterval && startTs && endTs && (endTs - 1) > startTs) { |
|
|
}; |
|
|
const startDateText = tooltipDateFormat.update(startTs, interval); |
|
|
|
|
|
const endDateText = tooltipDateFormat.update(endTs - 1, interval); |
|
|
interface TooltipItem { |
|
|
if (startDateText === endDateText) { |
|
|
param: CallbackDataParams; |
|
|
dateText = startDateText; |
|
|
dataItem: EChartsSeriesItem; |
|
|
} else { |
|
|
} |
|
|
dateText = startDateText + ' - ' + endDateText; |
|
|
|
|
|
} |
|
|
interface TooltipParams { |
|
|
} else { |
|
|
items: TooltipItem[]; |
|
|
const ts = firstParam.value[0]; |
|
|
comparisonItems: TooltipItem[]; |
|
|
dateText = tooltipDateFormat.update(ts, interval); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const buildItemsTooltip = (tooltipElement: HTMLElement, |
|
|
|
|
|
items: TooltipItem[], |
|
|
|
|
|
renderer: Renderer2, |
|
|
|
|
|
tooltipDateFormat: DateFormatProcessor, |
|
|
|
|
|
settings: EChartsTooltipWidgetSettings, |
|
|
|
|
|
valueFormatFunction: EChartsTooltipValueFormatFunction, |
|
|
|
|
|
interval?: Interval) => { |
|
|
|
|
|
if (items.length) { |
|
|
|
|
|
const tooltipItemsElement: HTMLElement = renderer.createElement('div'); |
|
|
|
|
|
renderer.setStyle(tooltipItemsElement, 'display', 'flex'); |
|
|
|
|
|
renderer.setStyle(tooltipItemsElement, 'flex-direction', 'column'); |
|
|
|
|
|
renderer.setStyle(tooltipItemsElement, 'align-items', 'flex-start'); |
|
|
|
|
|
renderer.setStyle(tooltipItemsElement, 'gap', '4px'); |
|
|
|
|
|
renderer.appendChild(tooltipElement, tooltipItemsElement); |
|
|
|
|
|
if (settings.tooltipShowDate) { |
|
|
|
|
|
renderer.appendChild(tooltipItemsElement, |
|
|
|
|
|
constructEchartsTooltipDateElement(renderer, tooltipDateFormat, settings, items[0].param, interval)); |
|
|
|
|
|
} |
|
|
|
|
|
for (const item of items) { |
|
|
|
|
|
renderer.appendChild(tooltipItemsElement, |
|
|
|
|
|
constructEchartsTooltipSeriesElement(renderer, settings, item, valueFormatFunction)); |
|
|
} |
|
|
} |
|
|
renderer.appendChild(dateElement, renderer.createText(dateText)); |
|
|
} |
|
|
renderer.setStyle(dateElement, 'font-family', settings.tooltipDateFont.family); |
|
|
}; |
|
|
renderer.setStyle(dateElement, 'font-size', settings.tooltipDateFont.size + settings.tooltipDateFont.sizeUnit); |
|
|
|
|
|
renderer.setStyle(dateElement, 'font-style', settings.tooltipDateFont.style); |
|
|
const mapTooltipParams = (params: CallbackDataParams[] | CallbackDataParams, |
|
|
renderer.setStyle(dateElement, 'font-weight', settings.tooltipDateFont.weight); |
|
|
series?: EChartsSeriesItem[], |
|
|
renderer.setStyle(dateElement, 'line-height', settings.tooltipDateFont.lineHeight); |
|
|
focusedSeriesIndex?: number): TooltipParams => { |
|
|
renderer.setStyle(dateElement, 'color', settings.tooltipDateColor); |
|
|
const result: TooltipParams = { |
|
|
renderer.appendChild(tooltipElement, dateElement); |
|
|
items: [], |
|
|
|
|
|
comparisonItems: [] |
|
|
|
|
|
}; |
|
|
|
|
|
if (!params || Array.isArray(params) && !params[0]) { |
|
|
|
|
|
return result; |
|
|
|
|
|
} |
|
|
|
|
|
const firstParam = Array.isArray(params) ? params[0] : params; |
|
|
|
|
|
if (!firstParam.value) { |
|
|
|
|
|
return result; |
|
|
} |
|
|
} |
|
|
let seriesParams: CallbackDataParams = null; |
|
|
let seriesParams: CallbackDataParams = null; |
|
|
if (Array.isArray(params) && focusedSeriesIndex > -1) { |
|
|
if (Array.isArray(params) && focusedSeriesIndex > -1) { |
|
|
@ -548,22 +555,63 @@ export const echartsTooltipFormatter = (renderer: Renderer2, |
|
|
seriesParams = params; |
|
|
seriesParams = params; |
|
|
} |
|
|
} |
|
|
if (seriesParams) { |
|
|
if (seriesParams) { |
|
|
renderer.appendChild(tooltipElement, |
|
|
appendTooltipItem(result, seriesParams, series); |
|
|
constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, valueFormatFunction, series)); |
|
|
|
|
|
} else if (Array.isArray(params)) { |
|
|
} else if (Array.isArray(params)) { |
|
|
for (seriesParams of params) { |
|
|
for (seriesParams of params) { |
|
|
renderer.appendChild(tooltipElement, |
|
|
appendTooltipItem(result, seriesParams, series); |
|
|
constructEchartsTooltipSeriesElement(renderer, settings, seriesParams, valueFormatFunction, series)); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
return tooltipElement; |
|
|
return result; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const appendTooltipItem = (tooltipParams: TooltipParams, seriesParams: CallbackDataParams, series?: EChartsSeriesItem[]) => { |
|
|
|
|
|
const dataItem = series?.find(s => s.id === seriesParams.seriesId); |
|
|
|
|
|
const tooltipItem: TooltipItem = { |
|
|
|
|
|
param: seriesParams, |
|
|
|
|
|
dataItem |
|
|
|
|
|
}; |
|
|
|
|
|
if (dataItem?.comparisonItem) { |
|
|
|
|
|
tooltipParams.comparisonItems.push(tooltipItem); |
|
|
|
|
|
} else { |
|
|
|
|
|
tooltipParams.items.push(tooltipItem); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const constructEchartsTooltipDateElement = (renderer: Renderer2, |
|
|
|
|
|
tooltipDateFormat: DateFormatProcessor, |
|
|
|
|
|
settings: EChartsTooltipWidgetSettings, |
|
|
|
|
|
param: CallbackDataParams, |
|
|
|
|
|
interval?: Interval): HTMLElement => { |
|
|
|
|
|
const dateElement: HTMLElement = renderer.createElement('div'); |
|
|
|
|
|
let dateText: string; |
|
|
|
|
|
const startTs = param.value[2]; |
|
|
|
|
|
const endTs = param.value[3]; |
|
|
|
|
|
if (settings.tooltipDateInterval && startTs && endTs && (endTs - 1) > startTs) { |
|
|
|
|
|
const startDateText = tooltipDateFormat.update(startTs, interval); |
|
|
|
|
|
const endDateText = tooltipDateFormat.update(endTs - 1, interval); |
|
|
|
|
|
if (startDateText === endDateText) { |
|
|
|
|
|
dateText = startDateText; |
|
|
|
|
|
} else { |
|
|
|
|
|
dateText = startDateText + ' - ' + endDateText; |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
const ts = param.value[0]; |
|
|
|
|
|
dateText = tooltipDateFormat.update(ts, interval); |
|
|
|
|
|
} |
|
|
|
|
|
renderer.appendChild(dateElement, renderer.createText(dateText)); |
|
|
|
|
|
renderer.setStyle(dateElement, 'font-family', settings.tooltipDateFont.family); |
|
|
|
|
|
renderer.setStyle(dateElement, 'font-size', settings.tooltipDateFont.size + settings.tooltipDateFont.sizeUnit); |
|
|
|
|
|
renderer.setStyle(dateElement, 'font-style', settings.tooltipDateFont.style); |
|
|
|
|
|
renderer.setStyle(dateElement, 'font-weight', settings.tooltipDateFont.weight); |
|
|
|
|
|
renderer.setStyle(dateElement, 'line-height', settings.tooltipDateFont.lineHeight); |
|
|
|
|
|
renderer.setStyle(dateElement, 'color', settings.tooltipDateColor); |
|
|
|
|
|
return dateElement; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const constructEchartsTooltipSeriesElement = (renderer: Renderer2, |
|
|
const constructEchartsTooltipSeriesElement = (renderer: Renderer2, |
|
|
settings: EChartsTooltipWidgetSettings, |
|
|
settings: EChartsTooltipWidgetSettings, |
|
|
seriesParams: CallbackDataParams, |
|
|
item: TooltipItem, |
|
|
valueFormatFunction: EChartsTooltipValueFormatFunction, |
|
|
valueFormatFunction: EChartsTooltipValueFormatFunction): HTMLElement => { |
|
|
series?: EChartsSeriesItem[]): HTMLElement => { |
|
|
|
|
|
const labelValueElement: HTMLElement = renderer.createElement('div'); |
|
|
const labelValueElement: HTMLElement = renderer.createElement('div'); |
|
|
renderer.setStyle(labelValueElement, 'display', 'flex'); |
|
|
renderer.setStyle(labelValueElement, 'display', 'flex'); |
|
|
renderer.setStyle(labelValueElement, 'flex-direction', 'row'); |
|
|
renderer.setStyle(labelValueElement, 'flex-direction', 'row'); |
|
|
@ -579,10 +627,10 @@ const constructEchartsTooltipSeriesElement = (renderer: Renderer2, |
|
|
renderer.setStyle(circleElement, 'width', '8px'); |
|
|
renderer.setStyle(circleElement, 'width', '8px'); |
|
|
renderer.setStyle(circleElement, 'height', '8px'); |
|
|
renderer.setStyle(circleElement, 'height', '8px'); |
|
|
renderer.setStyle(circleElement, 'border-radius', '50%'); |
|
|
renderer.setStyle(circleElement, 'border-radius', '50%'); |
|
|
renderer.setStyle(circleElement, 'background', seriesParams.color); |
|
|
renderer.setStyle(circleElement, 'background', item.param.color); |
|
|
renderer.appendChild(labelElement, circleElement); |
|
|
renderer.appendChild(labelElement, circleElement); |
|
|
const labelTextElement: HTMLElement = renderer.createElement('div'); |
|
|
const labelTextElement: HTMLElement = renderer.createElement('div'); |
|
|
renderer.appendChild(labelTextElement, renderer.createText(seriesParams.seriesName)); |
|
|
renderer.appendChild(labelTextElement, renderer.createText(item.param.seriesName)); |
|
|
renderer.setStyle(labelTextElement, 'font-family', 'Roboto'); |
|
|
renderer.setStyle(labelTextElement, 'font-family', 'Roboto'); |
|
|
renderer.setStyle(labelTextElement, 'font-size', '12px'); |
|
|
renderer.setStyle(labelTextElement, 'font-size', '12px'); |
|
|
renderer.setStyle(labelTextElement, 'font-style', 'normal'); |
|
|
renderer.setStyle(labelTextElement, 'font-style', 'normal'); |
|
|
@ -596,21 +644,18 @@ const constructEchartsTooltipSeriesElement = (renderer: Renderer2, |
|
|
let latestData: FormattedData; |
|
|
let latestData: FormattedData; |
|
|
let units = ''; |
|
|
let units = ''; |
|
|
let decimals = 0; |
|
|
let decimals = 0; |
|
|
if (series) { |
|
|
if (item.dataItem) { |
|
|
const item = series.find(s => s.id === seriesParams.seriesId); |
|
|
if (item.dataItem.tooltipValueFormatFunction) { |
|
|
if (item) { |
|
|
formatFunction = item.dataItem.tooltipValueFormatFunction; |
|
|
if (item.tooltipValueFormatFunction) { |
|
|
|
|
|
formatFunction = item.tooltipValueFormatFunction; |
|
|
|
|
|
} |
|
|
|
|
|
latestData = item.latestData; |
|
|
|
|
|
units = item.units; |
|
|
|
|
|
decimals = item.decimals; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
latestData = item.dataItem.latestData; |
|
|
|
|
|
units = item.dataItem.units; |
|
|
|
|
|
decimals = item.dataItem.decimals; |
|
|
} |
|
|
} |
|
|
if (!latestData) { |
|
|
if (!latestData) { |
|
|
latestData = {} as FormattedData; |
|
|
latestData = {} as FormattedData; |
|
|
} |
|
|
} |
|
|
const value = formatFunction(seriesParams.value[1], latestData, units, decimals); |
|
|
const value = formatFunction(item.param.value[1], latestData, units, decimals); |
|
|
renderer.appendChild(valueElement, renderer.createText(value)); |
|
|
renderer.appendChild(valueElement, renderer.createText(value)); |
|
|
renderer.setStyle(valueElement, 'flex', '1'); |
|
|
renderer.setStyle(valueElement, 'flex', '1'); |
|
|
renderer.setStyle(valueElement, 'text-align', 'end'); |
|
|
renderer.setStyle(valueElement, 'text-align', 'end'); |
|
|
|
Igor Kulikov
2 years ago
GitHub