mdt-charts 1.28.2 → 1.29.0

package/lib/engine/features/tolltip/tooltipComponentsManager.d.ts

@@ -4,14 +4,25 @@ import { TooltipLineAttributes } from "./tooltipDomHelper";
 import { ChartOrientation } from "../../../config/config";
 import { NewTooltip, TooltipCoordinate } from "./newTooltip/newTooltip";
 export declare class TooltipComponentsManager {
-    static showComponent(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): void;
-    static hideComponent(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): void;
-    static renderTooltipWrapper(block: Block): void;
-    static renderTooltipBlock(block: Block, translateX?: number, translateY?: number): NewTooltip;
-    static renderTooltipContentBlock(tooltipBlock: NewTooltip): Selection<HTMLDivElement, unknown, HTMLElement, any>;
-    static renderTooltipLine(block: Block): Selection<SVGLineElement, unknown, HTMLElement, any>;
-    static setTooltipLineAttributes(tooltipLine: Selection<SVGLineElement, unknown, HTMLElement, any>, attributes: TooltipLineAttributes, transition: number): void;
-    static getLineWidth(tooltipLine: Selection<BaseType, any, BaseType, any>): number;
-    static renderTooltipArrow(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): Selection<BaseType, unknown, HTMLElement, any>;
-    static setLineTooltipCoordinate(tooltip: NewTooltip, tooltipCoordinate: TooltipCoordinate, chartOrientation: ChartOrientation, transition?: number): void;
+	static showComponent(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): void;
+	static hideComponent(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): void;
+	static renderTooltipWrapper(block: Block): void;
+	static renderTooltipBlock(block: Block, translateX?: number, translateY?: number): NewTooltip;
+	static renderTooltipContentBlock(tooltipBlock: NewTooltip): Selection<HTMLDivElement, unknown, HTMLElement, any>;
+	static renderTooltipLine(block: Block): Selection<SVGLineElement, unknown, HTMLElement, any>;
+	static setTooltipLineAttributes(
+		tooltipLine: Selection<SVGLineElement, unknown, HTMLElement, any>,
+		attributes: TooltipLineAttributes,
+		transition: number
+	): void;
+	static getLineWidth(tooltipLine: Selection<BaseType, any, BaseType, any>): number;
+	static renderTooltipArrow(
+		tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>
+	): Selection<BaseType, unknown, HTMLElement, any>;
+	static setLineTooltipCoordinate(
+		tooltip: NewTooltip,
+		tooltipCoordinate: TooltipCoordinate,
+		chartOrientation: ChartOrientation,
+		transition?: number
+	): void;
 }

package/lib/engine/features/tolltip/tooltipComponentsManager.js

@@ -5,118 +5,117 @@ import { interrupt } from "d3-transition";
 import { Tooltip } from "./tooltip";
 import { NewTooltip } from "./newTooltip/newTooltip";
 export class TooltipComponentsManager {
-    static showComponent(tooltipBlock) {
-        tooltipBlock.style("display", "block");
-    }
-    static hideComponent(tooltipBlock) {
-        tooltipBlock.style("display", "none");
-    }
-    static renderTooltipWrapper(block) {
-        let tooltipWrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
-        if (tooltipWrapper.empty())
-            block.getWrapper().append("div").attr("class", Tooltip.tooltipWrapperClass);
-    }
-    static renderTooltipBlock(block, translateX = 0, translateY = 0) {
-        const wrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
-        const tooltipService = new NewTooltip();
-        let tooltipBlock = tooltipService.findInWrapper(wrapper);
-        if (tooltipBlock.empty()) {
-            tooltipBlock = tooltipService.render(wrapper);
-            tooltipBlock.style("position", "absolute").style("display", "none");
-        }
-        if (translateX !== 0 || translateY !== 0)
-            tooltipBlock.style("transform", `translate(${translateX}px, ${translateY}px)`);
-        return tooltipService;
-    }
-    static renderTooltipContentBlock(tooltipBlock) {
-        let tooltipContentBlock = tooltipBlock.getEl().select(`.${Tooltip.tooltipContentClass}`);
-        if (tooltipContentBlock.empty()) {
-            tooltipContentBlock = select(document.createElement("div")).attr("class", Tooltip.tooltipContentClass);
-            tooltipBlock.appendContent(tooltipContentBlock.node());
-        }
-        return tooltipContentBlock;
-    }
-    static renderTooltipLine(block) {
-        let tooltipLine = block.svg.getChartBlock().select(`.${Tooltip.tooltipLineClass}`);
-        if (tooltipLine.empty())
-            tooltipLine = block.svg.getChartBlock().append("line").attr("class", Tooltip.tooltipLineClass).lower();
-        return tooltipLine;
-    }
-    static setTooltipLineAttributes(tooltipLine, attributes, transition) {
-        interrupt(tooltipLine.node());
-        if (transition > 0 && tooltipLine.style("display") === "block") {
-            tooltipLine
-                .interrupt()
-                .transition()
-                .duration(transition)
-                .ease(easeLinear)
-                .attr("x1", attributes.x1)
-                .attr("x2", attributes.x2)
-                .attr("y1", attributes.y1)
-                .attr("y2", attributes.y2);
-        }
-        else {
-            tooltipLine
-                .attr("x1", attributes.x1)
-                .attr("x2", attributes.x2)
-                .attr("y1", attributes.y1)
-                .attr("y2", attributes.y2);
-        }
-    }
-    static getLineWidth(tooltipLine) {
-        return parseFloat(tooltipLine.style("stroke-width"));
-    }
-    static renderTooltipArrow(tooltipBlock) {
-        let arrowSize = ARROW_SIZE / 2;
-        let tooltipArrow = tooltipBlock.select(`.${Tooltip.tooltipArrowClass}`);
-        if (tooltipArrow.empty())
-            tooltipArrow = tooltipBlock
-                .append("div")
-                .attr("class", Tooltip.tooltipArrowClass)
-                .style("position", "absolute")
-                .style("left", `${ARROW_DEFAULT_POSITION}px`)
-                .style("border-top-width", `${arrowSize}px`)
-                .style("border-right-width", `${arrowSize}px`)
-                .style("border-bottom-width", `0px`)
-                .style("border-left-width", `${arrowSize}px`);
-        return tooltipArrow;
-    }
-    static setLineTooltipCoordinate(tooltip, tooltipCoordinate, chartOrientation, transition = null) {
-        const tooltipBlock = tooltip.getEl();
-        interrupt(tooltipBlock.node());
-        if (!transition || transition <= 0)
-            tooltip.setCoordinate(tooltipCoordinate);
-        if (chartOrientation === "vertical" &&
-            tooltipBlock.style("left") !== "0px" &&
-            tooltipBlock.style("right") !== "0px" &&
-            tooltipCoordinate.right !== "0px" &&
-            tooltipCoordinate.left !== null) {
-            tooltipBlock
-                .style("right", tooltipCoordinate.right)
-                .style("bottom", tooltipCoordinate.bottom)
-                .style("top", tooltipCoordinate.top)
-                .interrupt()
-                .transition()
-                .duration(transition)
-                .ease(easeLinear)
-                .style("left", tooltipCoordinate.left);
-        }
-        else if (chartOrientation === "horizontal" &&
-            tooltipBlock.style("top") !== "0px" &&
-            parseInt(tooltipBlock.style("bottom")) > 0 &&
-            tooltipCoordinate.bottom === null) {
-            tooltipBlock
-                .style("right", tooltipCoordinate.right)
-                .style("bottom", tooltipCoordinate.bottom)
-                .style("left", tooltipCoordinate.left)
-                .interrupt()
-                .transition()
-                .duration(transition)
-                .ease(easeLinear)
-                .style("top", tooltipCoordinate.top);
-        }
-        else {
-            tooltip.setCoordinate(tooltipCoordinate);
-        }
-    }
+	static showComponent(tooltipBlock) {
+		tooltipBlock.style("display", "block");
+	}
+	static hideComponent(tooltipBlock) {
+		tooltipBlock.style("display", "none");
+	}
+	static renderTooltipWrapper(block) {
+		let tooltipWrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
+		if (tooltipWrapper.empty()) block.getWrapper().append("div").attr("class", Tooltip.tooltipWrapperClass);
+	}
+	static renderTooltipBlock(block, translateX = 0, translateY = 0) {
+		const wrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
+		const tooltipService = new NewTooltip();
+		let tooltipBlock = tooltipService.findInWrapper(wrapper);
+		if (tooltipBlock.empty()) {
+			tooltipBlock = tooltipService.render(wrapper);
+			tooltipBlock.style("position", "absolute").style("display", "none");
+		}
+		if (translateX !== 0 || translateY !== 0)
+			tooltipBlock.style("transform", `translate(${translateX}px, ${translateY}px)`);
+		return tooltipService;
+	}
+	static renderTooltipContentBlock(tooltipBlock) {
+		let tooltipContentBlock = tooltipBlock.getEl().select(`.${Tooltip.tooltipContentClass}`);
+		if (tooltipContentBlock.empty()) {
+			tooltipContentBlock = select(document.createElement("div")).attr("class", Tooltip.tooltipContentClass);
+			tooltipBlock.appendContent(tooltipContentBlock.node());
+		}
+		return tooltipContentBlock;
+	}
+	static renderTooltipLine(block) {
+		let tooltipLine = block.svg.getChartBlock().select(`.${Tooltip.tooltipLineClass}`);
+		if (tooltipLine.empty())
+			tooltipLine = block.svg.getChartBlock().append("line").attr("class", Tooltip.tooltipLineClass).lower();
+		return tooltipLine;
+	}
+	static setTooltipLineAttributes(tooltipLine, attributes, transition) {
+		interrupt(tooltipLine.node());
+		if (transition > 0 && tooltipLine.style("display") === "block") {
+			tooltipLine
+				.interrupt()
+				.transition()
+				.duration(transition)
+				.ease(easeLinear)
+				.attr("x1", attributes.x1)
+				.attr("x2", attributes.x2)
+				.attr("y1", attributes.y1)
+				.attr("y2", attributes.y2);
+		} else {
+			tooltipLine
+				.attr("x1", attributes.x1)
+				.attr("x2", attributes.x2)
+				.attr("y1", attributes.y1)
+				.attr("y2", attributes.y2);
+		}
+	}
+	static getLineWidth(tooltipLine) {
+		return parseFloat(tooltipLine.style("stroke-width"));
+	}
+	static renderTooltipArrow(tooltipBlock) {
+		let arrowSize = ARROW_SIZE / 2;
+		let tooltipArrow = tooltipBlock.select(`.${Tooltip.tooltipArrowClass}`);
+		if (tooltipArrow.empty())
+			tooltipArrow = tooltipBlock
+				.append("div")
+				.attr("class", Tooltip.tooltipArrowClass)
+				.style("position", "absolute")
+				.style("left", `${ARROW_DEFAULT_POSITION}px`)
+				.style("border-top-width", `${arrowSize}px`)
+				.style("border-right-width", `${arrowSize}px`)
+				.style("border-bottom-width", `0px`)
+				.style("border-left-width", `${arrowSize}px`);
+		return tooltipArrow;
+	}
+	static setLineTooltipCoordinate(tooltip, tooltipCoordinate, chartOrientation, transition = null) {
+		const tooltipBlock = tooltip.getEl();
+		interrupt(tooltipBlock.node());
+		if (!transition || transition <= 0) tooltip.setCoordinate(tooltipCoordinate);
+		if (
+			chartOrientation === "vertical" &&
+			tooltipBlock.style("left") !== "0px" &&
+			tooltipBlock.style("right") !== "0px" &&
+			tooltipCoordinate.right !== "0px" &&
+			tooltipCoordinate.left !== null
+		) {
+			tooltipBlock
+				.style("right", tooltipCoordinate.right)
+				.style("bottom", tooltipCoordinate.bottom)
+				.style("top", tooltipCoordinate.top)
+				.interrupt()
+				.transition()
+				.duration(transition)
+				.ease(easeLinear)
+				.style("left", tooltipCoordinate.left);
+		} else if (
+			chartOrientation === "horizontal" &&
+			tooltipBlock.style("top") !== "0px" &&
+			parseInt(tooltipBlock.style("bottom")) > 0 &&
+			tooltipCoordinate.bottom === null
+		) {
+			tooltipBlock
+				.style("right", tooltipCoordinate.right)
+				.style("bottom", tooltipCoordinate.bottom)
+				.style("left", tooltipCoordinate.left)
+				.interrupt()
+				.transition()
+				.duration(transition)
+				.ease(easeLinear)
+				.style("top", tooltipCoordinate.top);
+		} else {
+			tooltip.setCoordinate(tooltipCoordinate);
+		}
+	}
 }

package/lib/engine/features/tolltip/tooltipDomHelper.d.ts

@@ -3,31 +3,53 @@ import { MdtChartsDataSource, TooltipOptions } from "../../../config/config";
 import { OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
 import { Size } from "../../../config/config";
 export interface TooltipLineAttributes {
-    x1: number;
-    x2: number;
-    y1: number;
-    y2: number;
+	x1: number;
+	x2: number;
+	y1: number;
+	y2: number;
 }
 export declare const ARROW_SIZE = 20;
 export declare const ARROW_DEFAULT_POSITION = 9;
 export declare const TOOLTIP_ARROW_PADDING_X: number;
 export declare const TOOLTIP_ARROW_PADDING_Y = 13;
 export declare class TooltipDomHelper {
-    private static readonly groupClass;
-    private static readonly headClass;
-    private static readonly textItemClass;
-    private static readonly tooltipLegendDefaultMarker;
-    static fillForMulti2DCharts(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, tooltipOptions?: TooltipOptions): void;
-    static fillForPolarChart(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, chart: PolarChartModel, data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, markColor: string, tooltipOptions?: TooltipOptions): void;
-    static getRecalcedCoordinateByArrow(coordinate: [number, number], tooltipBlock: Selection<HTMLElement, unknown, HTMLElement, any>, blockSize: Size, tooltipArrow: Selection<BaseType, unknown, HTMLElement, any>, translateX?: number, translateY?: number): [number, number];
-    private static renderHead;
-    private static fillValuesContent;
-    private static getTooltipItemHtml;
-    private static getTooltipContentItemHtml;
-    private static setTooltipArrowCoordinate;
-    private static fillContentByFunction;
-    private static setWhiteSpaceForTextBlocks;
-    private static getMarkerCreator;
-    private static addAggregatorTooltipItem;
-    private static fillCharts;
+	private static readonly groupClass;
+	private static readonly headClass;
+	private static readonly textItemClass;
+	private static readonly tooltipLegendDefaultMarker;
+	static fillForMulti2DCharts(
+		contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>,
+		charts: TwoDimensionalChartModel[],
+		data: MdtChartsDataSource,
+		dataOptions: OptionsModelData,
+		keyValue: string,
+		tooltipOptions?: TooltipOptions
+	): void;
+	static fillForPolarChart(
+		contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>,
+		chart: PolarChartModel,
+		data: MdtChartsDataSource,
+		dataOptions: OptionsModelData,
+		keyValue: string,
+		markColor: string,
+		tooltipOptions?: TooltipOptions
+	): void;
+	static getRecalcedCoordinateByArrow(
+		coordinate: [number, number],
+		tooltipBlock: Selection<HTMLElement, unknown, HTMLElement, any>,
+		blockSize: Size,
+		tooltipArrow: Selection<BaseType, unknown, HTMLElement, any>,
+		translateX?: number,
+		translateY?: number
+	): [number, number];
+	private static renderHead;
+	private static fillValuesContent;
+	private static getTooltipItemHtml;
+	private static getTooltipContentItemHtml;
+	private static setTooltipArrowCoordinate;
+	private static fillContentByFunction;
+	private static setWhiteSpaceForTextBlocks;
+	private static getMarkerCreator;
+	private static addAggregatorTooltipItem;
+	private static fillCharts;
 }

package/lib/engine/features/tolltip/tooltipDomHelper.js

@@ -7,127 +7,151 @@ export const ARROW_DEFAULT_POSITION = 9;
 export const TOOLTIP_ARROW_PADDING_X = ARROW_DEFAULT_POSITION - (ARROW_SIZE * Math.sqrt(2) - ARROW_SIZE) / 2 + 14;
 export const TOOLTIP_ARROW_PADDING_Y = 13;
 export class TooltipDomHelper {
-    static fillForMulti2DCharts(contentBlock, charts, data, dataOptions, keyValue, tooltipOptions) {
-        const chartDataRows = [];
-        charts.forEach((chart) => {
-            chart.data.valueFields.forEach((field, index) => {
-                chartDataRows.push({
-                    field,
-                    markColor: chart.style.elementColors[index % chart.style.elementColors.length],
-                    markerCreator: this.getMarkerCreator(chart.legend)
-                });
-            });
-        });
-        this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
-    }
-    static fillForPolarChart(contentBlock, chart, data, dataOptions, keyValue, markColor, tooltipOptions) {
-        const chartDataRows = [
-            {
-                field: chart.data.valueField,
-                markColor,
-                markerCreator: this.getMarkerCreator(chart.legend)
-            }
-        ];
-        this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
-    }
-    static getRecalcedCoordinateByArrow(coordinate, tooltipBlock, blockSize, tooltipArrow, translateX = 0, translateY = 0) {
-        const tooltipBlockNode = tooltipBlock.node();
-        const horizontalPad = TooltipHelper.getHorizontalPad(coordinate[0], tooltipBlockNode.getBoundingClientRect().width, blockSize, translateX);
-        const verticalPad = TooltipHelper.getVerticalPad(coordinate[1], tooltipBlockNode.getBoundingClientRect().height, translateY);
-        this.setTooltipArrowCoordinate(tooltipArrow, TooltipHelper.getTooltipArrowPadding(tooltipBlockNode.getBoundingClientRect().width, horizontalPad));
-        return [
-            coordinate[0] - TOOLTIP_ARROW_PADDING_X - horizontalPad,
-            coordinate[1] - TOOLTIP_ARROW_PADDING_Y - tooltipBlockNode.getBoundingClientRect().height - verticalPad
-        ];
-    }
-    static renderHead(contentBlock, keyValue) {
-        contentBlock.append("div").attr("class", `${this.groupClass} ${this.headClass}`).text(keyValue);
-    }
-    static fillValuesContent(contentBlock, { markColor, tooltipHtml, markerCreator }) {
-        const group = contentBlock.append("div").attr("class", this.groupClass);
-        if (markColor) {
-            const colorBlock = group.append("div").attr("class", "tooltip-color");
-            markerCreator === null || markerCreator === void 0 ? void 0 : markerCreator.renderMarker(colorBlock, markColor);
-        }
-        group
-            .append("div")
-            .attr("class", "tooltip-texts")
-            .append("div")
-            .attr("class", this.textItemClass)
-            .html(tooltipHtml);
-    }
-    static getTooltipItemHtml(row, valueField, tooltipOptions) {
-        const formattedValueByDefault = ValueFormatter.formatField(valueField.format, row[valueField.name]);
-        const formattedValue = (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.formatValue) ? tooltipOptions.formatValue({
-            rawValue: row[valueField.name],
-            autoFormattedValue: formattedValueByDefault
-        })
-            : formattedValueByDefault;
-        const text = this.getTooltipContentItemHtml(valueField.title, formattedValue);
-        return text;
-    }
-    static getTooltipContentItemHtml(fieldTitle, fieldValue) {
-        return `<span class="tooltip-field-title">${fieldTitle}</span>
+	static fillForMulti2DCharts(contentBlock, charts, data, dataOptions, keyValue, tooltipOptions) {
+		const chartDataRows = [];
+		charts.forEach((chart) => {
+			chart.data.valueFields.forEach((field, index) => {
+				chartDataRows.push({
+					field,
+					markColor: chart.style.elementColors[index % chart.style.elementColors.length],
+					markerCreator: this.getMarkerCreator(chart.legend)
+				});
+			});
+		});
+		this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
+	}
+	static fillForPolarChart(contentBlock, chart, data, dataOptions, keyValue, markColor, tooltipOptions) {
+		const chartDataRows = [
+			{
+				field: chart.data.valueField,
+				markColor,
+				markerCreator: this.getMarkerCreator(chart.legend)
+			}
+		];
+		this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
+	}
+	static getRecalcedCoordinateByArrow(
+		coordinate,
+		tooltipBlock,
+		blockSize,
+		tooltipArrow,
+		translateX = 0,
+		translateY = 0
+	) {
+		const tooltipBlockNode = tooltipBlock.node();
+		const horizontalPad = TooltipHelper.getHorizontalPad(
+			coordinate[0],
+			tooltipBlockNode.getBoundingClientRect().width,
+			blockSize,
+			translateX
+		);
+		const verticalPad = TooltipHelper.getVerticalPad(
+			coordinate[1],
+			tooltipBlockNode.getBoundingClientRect().height,
+			translateY
+		);
+		this.setTooltipArrowCoordinate(
+			tooltipArrow,
+			TooltipHelper.getTooltipArrowPadding(tooltipBlockNode.getBoundingClientRect().width, horizontalPad)
+		);
+		return [
+			coordinate[0] - TOOLTIP_ARROW_PADDING_X - horizontalPad,
+			coordinate[1] - TOOLTIP_ARROW_PADDING_Y - tooltipBlockNode.getBoundingClientRect().height - verticalPad
+		];
+	}
+	static renderHead(contentBlock, keyValue) {
+		contentBlock.append("div").attr("class", `${this.groupClass} ${this.headClass}`).text(keyValue);
+	}
+	static fillValuesContent(contentBlock, { markColor, tooltipHtml, markerCreator }) {
+		const group = contentBlock.append("div").attr("class", this.groupClass);
+		if (markColor) {
+			const colorBlock = group.append("div").attr("class", "tooltip-color");
+			markerCreator === null || markerCreator === void 0
+				? void 0
+				: markerCreator.renderMarker(colorBlock, markColor);
+		}
+		group
+			.append("div")
+			.attr("class", "tooltip-texts")
+			.append("div")
+			.attr("class", this.textItemClass)
+			.html(tooltipHtml);
+	}
+	static getTooltipItemHtml(row, valueField, tooltipOptions) {
+		const formattedValueByDefault = ValueFormatter.formatField(valueField.format, row[valueField.name]);
+		const formattedValue = (
+			tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.formatValue
+		)
+			? tooltipOptions.formatValue({
+					rawValue: row[valueField.name],
+					autoFormattedValue: formattedValueByDefault
+			  })
+			: formattedValueByDefault;
+		const text = this.getTooltipContentItemHtml(valueField.title, formattedValue);
+		return text;
+	}
+	static getTooltipContentItemHtml(fieldTitle, fieldValue) {
+		return `<span class="tooltip-field-title">${fieldTitle}</span>
                 <span class="tooltip-field-value">${fieldValue}</span>`;
-    }
-    static setTooltipArrowCoordinate(tooltipArrow, horizontalPad) {
-        if (horizontalPad !== 0)
-            tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION + Math.floor(horizontalPad)}px`);
-        else
-            tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION}px`);
-    }
-    static fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler) {
-        const row = Helper.getRowsByKeys([keyValue], dataOptions.keyField.name, data[dataOptions.dataSource])[0];
-        contentBlock.html(htmlHandler(row));
-        this.setWhiteSpaceForTextBlocks(contentBlock);
-        contentBlock.selectAll(".tooltip-text-item").style("display", "block");
-    }
-    static setWhiteSpaceForTextBlocks(contentBlock) {
-        contentBlock.selectAll(`.${this.textItemClass}`).style("white-space", "pre-wrap");
-    }
-    static getMarkerCreator(options) {
-        return getMarkerCreator(options, { default: { cssClass: TooltipDomHelper.tooltipLegendDefaultMarker } });
-    }
-    static addAggregatorTooltipItem(tooltipOptions, data, tooltipItems) {
-        if (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.aggregator) {
-            const aggregatorContent = tooltipOptions.aggregator.content({ row: data });
-            const aggregatorHtml = aggregatorContent.type === "plainText"
-                ? aggregatorContent.textContent
-                : this.getTooltipContentItemHtml(aggregatorContent.caption, aggregatorContent.value);
-            const tooltipAggregatorItem = {
-                markColor: undefined,
-                tooltipHtml: aggregatorHtml,
-                markerCreator: undefined
-            };
-            if (tooltipOptions.aggregator.position === "underValues")
-                tooltipItems.push(tooltipAggregatorItem);
-            else
-                tooltipItems.unshift(tooltipAggregatorItem);
-        }
-    }
-    static fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions) {
-        const row = data[dataOptions.dataSource].find((d) => d[dataOptions.keyField.name] === keyValue);
-        contentBlock.html("");
-        if (!(tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.html)) {
-            const tooltipItems = [];
-            this.renderHead(contentBlock, keyValue);
-            chartDataRows.forEach((dataRow) => {
-                const html = this.getTooltipItemHtml(row, dataRow.field, tooltipOptions);
-                tooltipItems.push({
-                    markColor: dataRow.markColor,
-                    tooltipHtml: html,
-                    markerCreator: dataRow.markerCreator
-                });
-            });
-            this.addAggregatorTooltipItem(tooltipOptions, row, tooltipItems);
-            tooltipItems.forEach((item) => {
-                this.fillValuesContent(contentBlock, item);
-            });
-        }
-        else {
-            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, tooltipOptions.html);
-        }
-    }
+	}
+	static setTooltipArrowCoordinate(tooltipArrow, horizontalPad) {
+		if (horizontalPad !== 0) tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION + Math.floor(horizontalPad)}px`);
+		else tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION}px`);
+	}
+	static fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler) {
+		const row = Helper.getRowsByKeys([keyValue], dataOptions.keyField.name, data[dataOptions.dataSource])[0];
+		contentBlock.html(htmlHandler(row));
+		this.setWhiteSpaceForTextBlocks(contentBlock);
+		contentBlock.selectAll(".tooltip-text-item").style("display", "block");
+	}
+	static setWhiteSpaceForTextBlocks(contentBlock) {
+		contentBlock.selectAll(`.${this.textItemClass}`).style("white-space", "pre-wrap");
+	}
+	static getMarkerCreator(options) {
+		return getMarkerCreator(options, {
+			default: { cssClass: TooltipDomHelper.tooltipLegendDefaultMarker }
+		});
+	}
+	static addAggregatorTooltipItem(tooltipOptions, data, tooltipItems) {
+		if (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.aggregator) {
+			const aggregatorContent = tooltipOptions.aggregator.content({
+				row: data
+			});
+			const aggregatorHtml =
+				aggregatorContent.type === "plainText"
+					? aggregatorContent.textContent
+					: this.getTooltipContentItemHtml(aggregatorContent.caption, aggregatorContent.value);
+			const tooltipAggregatorItem = {
+				markColor: undefined,
+				tooltipHtml: aggregatorHtml,
+				markerCreator: undefined
+			};
+			if (tooltipOptions.aggregator.position === "underValues") tooltipItems.push(tooltipAggregatorItem);
+			else tooltipItems.unshift(tooltipAggregatorItem);
+		}
+	}
+	static fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions) {
+		const row = data[dataOptions.dataSource].find((d) => d[dataOptions.keyField.name] === keyValue);
+		contentBlock.html("");
+		if (!(tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.html)) {
+			const tooltipItems = [];
+			this.renderHead(contentBlock, keyValue);
+			chartDataRows.forEach((dataRow) => {
+				const html = this.getTooltipItemHtml(row, dataRow.field, tooltipOptions);
+				tooltipItems.push({
+					markColor: dataRow.markColor,
+					tooltipHtml: html,
+					markerCreator: dataRow.markerCreator
+				});
+			});
+			this.addAggregatorTooltipItem(tooltipOptions, row, tooltipItems);
+			tooltipItems.forEach((item) => {
+				this.fillValuesContent(contentBlock, item);
+			});
+		} else {
+			this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, tooltipOptions.html);
+		}
+	}
 }
 TooltipDomHelper.groupClass = "tooltip-group";
 TooltipDomHelper.headClass = "tooltip-head";