mdt-charts 1.29.0 → 1.30.0

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

@@ -4,25 +4,14 @@ 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,117 +5,118 @@ 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,53 +3,31 @@ 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,151 +7,127 @@ 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";