mdt-charts 1.28.1 → 1.29.0

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

@@ -1,24 +1,24 @@
 export class NewTooltip {
-    getEl() {
-        return this.elSelection;
-    }
-    findInWrapper(wrapper) {
-        this.elSelection = wrapper.select(`.${NewTooltip.tooltipBlockClass}`);
-        return this.elSelection;
-    }
-    render(wrapper) {
-        this.elSelection = wrapper.append("div").attr("class", NewTooltip.tooltipBlockClass);
-        return this.elSelection;
-    }
-    appendContent(content) {
-        this.elSelection.node().appendChild(content);
-    }
-    setCoordinate(coordinate) {
-        this.elSelection
-            .style("right", coordinate.right)
-            .style("bottom", coordinate.bottom)
-            .style("left", coordinate.left)
-            .style("top", coordinate.top);
-    }
+	getEl() {
+		return this.elSelection;
+	}
+	findInWrapper(wrapper) {
+		this.elSelection = wrapper.select(`.${NewTooltip.tooltipBlockClass}`);
+		return this.elSelection;
+	}
+	render(wrapper) {
+		this.elSelection = wrapper.append("div").attr("class", NewTooltip.tooltipBlockClass);
+		return this.elSelection;
+	}
+	appendContent(content) {
+		this.elSelection.node().appendChild(content);
+	}
+	setCoordinate(coordinate) {
+		this.elSelection
+			.style("right", coordinate.right)
+			.style("bottom", coordinate.bottom)
+			.style("left", coordinate.left)
+			.style("top", coordinate.top);
+	}
 }
 NewTooltip.tooltipBlockClass = "mdt-charts-tooltip-block";

package/lib/engine/features/tolltip/newTooltip/newTooltipService.d.ts

@@ -1,17 +1,22 @@
 export interface TooltipPreCoordinate {
-    top: number;
-    left: number;
+	top: number;
+	left: number;
 }
 export interface Sizable {
-    width: number;
-    height: number;
+	width: number;
+	height: number;
 }
 export interface ElBounding extends Sizable {
-    left: number;
-    top: number;
-    bottom: number;
+	left: number;
+	top: number;
+	bottom: number;
 }
 export declare class NewTooltipServiceClass {
-    getTooltipByWindow(tooltipBounding: Sizable, preCoordinate: TooltipPreCoordinate, windowSize: Sizable, parentBounding?: ElBounding): TooltipPreCoordinate;
+	getTooltipByWindow(
+		tooltipBounding: Sizable,
+		preCoordinate: TooltipPreCoordinate,
+		windowSize: Sizable,
+		parentBounding?: ElBounding
+	): TooltipPreCoordinate;
 }
 export declare const TooltipService: NewTooltipServiceClass;

package/lib/engine/features/tolltip/newTooltip/newTooltipService.js

@@ -1,26 +1,29 @@
 export class NewTooltipServiceClass {
-    getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, parentBounding) {
-        const scrollPad = 18;
-        const coordinate = {
-            top: preCoordinate.top,
-            left: preCoordinate.left
-        };
-        const blockBounding = parentBounding !== null && parentBounding !== void 0 ? parentBounding : {
-            top: 0,
-            left: 0,
-            height: windowSize.height,
-            width: windowSize.width,
-            bottom: windowSize.height
-        };
-        if (preCoordinate.left < 0 && Math.abs(preCoordinate.left) > blockBounding.left)
-            coordinate.left = -blockBounding.left;
-        if (blockBounding.left + preCoordinate.left + tooltipBounding.width > windowSize.width - scrollPad)
-            coordinate.left = windowSize.width - blockBounding.left - tooltipBounding.width - scrollPad;
-        if (preCoordinate.top + blockBounding.top < 0 && -preCoordinate.top > blockBounding.top)
-            coordinate.top = -blockBounding.top;
-        if (blockBounding.top + preCoordinate.top + tooltipBounding.height > windowSize.height)
-            coordinate.top = blockBounding.height - tooltipBounding.height - (blockBounding.bottom - windowSize.height);
-        return coordinate;
-    }
+	getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, parentBounding) {
+		const scrollPad = 18;
+		const coordinate = {
+			top: preCoordinate.top,
+			left: preCoordinate.left
+		};
+		const blockBounding =
+			parentBounding !== null && parentBounding !== void 0
+				? parentBounding
+				: {
+						top: 0,
+						left: 0,
+						height: windowSize.height,
+						width: windowSize.width,
+						bottom: windowSize.height
+				  };
+		if (preCoordinate.left < 0 && Math.abs(preCoordinate.left) > blockBounding.left)
+			coordinate.left = -blockBounding.left;
+		if (blockBounding.left + preCoordinate.left + tooltipBounding.width > windowSize.width - scrollPad)
+			coordinate.left = windowSize.width - blockBounding.left - tooltipBounding.width - scrollPad;
+		if (preCoordinate.top + blockBounding.top < 0 && -preCoordinate.top > blockBounding.top)
+			coordinate.top = -blockBounding.top;
+		if (blockBounding.top + preCoordinate.top + tooltipBounding.height > windowSize.height)
+			coordinate.top = blockBounding.height - tooltipBounding.height - (blockBounding.bottom - windowSize.height);
+		return coordinate;
+	}
 }
 export const TooltipService = new NewTooltipServiceClass();

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

@@ -4,15 +4,21 @@ import { MdtChartsDataSource } from "../../../config/config";
 import { Scales } from "../scale/scale";
 import { TooltipSettings } from "../../../designer/designerConfig";
 export declare class Tooltip {
-    static readonly tooltipBlockClass: string;
-    static readonly tooltipLineClass = "mdt-charts-tooltip-line";
-    static readonly tooltipWrapperClass = "mdt-charts-tooltip-wrapper";
-    static readonly tooltipContentClass = "mdt-charts-tooltip-content";
-    static readonly tooltipArrowClass = "mdt-charts-tooltip-arrow";
-    static render(block: Block, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>, data: MdtChartsDataSource, tooltipOptions: TooltipSettings, scales?: Scales): void;
-    static hide(block: Block): void;
-    private static renderTooltipFor2DCharts;
-    private static renderTooltipForPolar;
-    private static renderLineTooltip;
-    private static renderTooltipForDonut;
+	static readonly tooltipBlockClass: string;
+	static readonly tooltipLineClass = "mdt-charts-tooltip-line";
+	static readonly tooltipWrapperClass = "mdt-charts-tooltip-wrapper";
+	static readonly tooltipContentClass = "mdt-charts-tooltip-content";
+	static readonly tooltipArrowClass = "mdt-charts-tooltip-arrow";
+	static render(
+		block: Block,
+		model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>,
+		data: MdtChartsDataSource,
+		tooltipOptions: TooltipSettings,
+		scales?: Scales
+	): void;
+	static hide(block: Block): void;
+	private static renderTooltipFor2DCharts;
+	private static renderTooltipForPolar;
+	private static renderLineTooltip;
+	private static renderTooltipForDonut;
 }

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

@@ -12,148 +12,302 @@ import { DomHelper } from "../../helpers/domHelper";
 import { NewTooltip } from "./newTooltip/newTooltip";
 import { MarkDot } from "../../../engine/features/markDots/markDot";
 export class Tooltip {
-    static render(block, model, data, tooltipOptions, scales) {
-        TooltipComponentsManager.renderTooltipWrapper(block);
-        const withTooltipIndex = model.options.charts.findIndex((chart) => chart.tooltip.show);
-        if (withTooltipIndex !== -1) {
-            if (model.options.type === "2d") {
-                this.renderTooltipFor2DCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
-            }
-            else if (model.options.type === "polar") {
-                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
-            }
-        }
-    }
-    static hide(block) {
-        TooltipComponentsManager.hideComponent(block.getWrapper().select(`.${this.tooltipBlockClass}`));
-        TooltipComponentsManager.hideComponent(block.getSvg().select(`.${this.tooltipLineClass}`));
-    }
-    static renderTooltipFor2DCharts(block, data, blockSize, margin, scales, options, tooltipOptions) {
-        if (scales.key.domain().length === 0)
-            return;
-        const tooltipParams = {
-            type: "2d",
-            scales,
-            margin,
-            blockSize,
-            charts: options.charts,
-            chartOrientation: options.orient,
-            keyAxisOrient: options.axis.key.orient,
-            dataOptions: options.data,
-            scaleKeyModel: options.scale.key,
-            tooltipSettings: tooltipOptions,
-            tooltipOptions: options.tooltip
-        };
-        this.renderLineTooltip(block, data, tooltipParams);
-    }
-    static renderTooltipForPolar(block, options, data, blockSize, margin, chartThickness, tooltipOptions) {
-        const attrTransform = block.getSvg().select(`.${Donut.donutBlockClass}`).attr("transform");
-        const translateNums = Helper.getTranslateNumbers(attrTransform);
-        const arcItems = Donut.getAllArcGroups(block);
-        this.renderTooltipForDonut(block, arcItems, data, options.data, options.charts[0], blockSize, margin, chartThickness, tooltipOptions, options.tooltip, { x: translateNums[0], y: translateNums[1] });
-    }
-    static renderLineTooltip(block, data, args) {
-        const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
-        const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
-        const tooltipLine = TooltipComponentsManager.renderTooltipLine(block);
-        const tipBox = TipBox.renderOrGet(block, args.margin, args.blockSize);
-        let currentKey = null;
-        tipBox.on("mousemove", function (e) {
-            const keyValue = e.detail.keyValue ||
-                TipBoxHelper.getKeyValueByPointer(pointer(e, this), args.chartOrientation, args.margin, args.blockSize, args.scales.key, args.scaleKeyModel.type);
-            if (args.tooltipSettings.position === "followCursor") {
-                const tooltipCoordinate = TooltipHelper.getTooltipCursorCoordinate(e.detail.pointer || pointer(e, this), block.getSvg().node().getBoundingClientRect(), tooltipBlock.getEl().node().getBoundingClientRect());
-                TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, 0);
-            }
-            if (!currentKey || currentKey !== keyValue) {
-                TooltipComponentsManager.showComponent(tooltipBlock.getEl());
-                if (args.type === "2d")
-                    TooltipDomHelper.fillForMulti2DCharts(tooltipContent, args.charts.filter((ch) => ch.tooltip.show), data, args.dataOptions, keyValue, args.tooltipOptions);
-                if (args.tooltipSettings.position === "fixed") {
-                    const tooltipCoordinate = TooltipHelper.getTooltipFixedCoordinate(args.scales.key, args.margin, keyValue, block.getSvg().node().getBoundingClientRect(), tooltipContent.node().getBoundingClientRect(), args.keyAxisOrient, window.innerWidth, window.innerHeight);
-                    TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, block.transitionManager.durations.tooltipSlide);
-                }
-                const tooltipLineAttributes = TooltipHelper.getTooltipLineAttributes(args.scales.key, args.margin, keyValue, args.chartOrientation, args.blockSize);
-                TooltipComponentsManager.setTooltipLineAttributes(tooltipLine, tooltipLineAttributes, block.transitionManager.durations.tooltipSlide);
-                TooltipComponentsManager.showComponent(tooltipLine);
-                if (args.type === "2d") {
-                    args.charts.forEach((chart) => {
-                        const elements = DomHelper.get2DChartElements(block, chart);
-                        if (!block.filterEventManager.isSelected(currentKey)) {
-                            const oldElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
-                            if (chart.type !== "bar")
-                                MarkDot.tryMakeMarkDotVisible(oldElements, chart.markersOptions, false);
-                            ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
-                            if (block.filterEventManager.getSelectedKeys().length > 0) {
-                                ElementHighlighter.toggleActivityStyle(oldElements, false);
-                            }
-                        }
-                        const selectedElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
-                        if (chart.type !== "bar")
-                            MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
-                        ElementHighlighter.toggleActivityStyle(selectedElements, true);
-                        if (block.filterEventManager.getSelectedKeys().length === 0 ||
-                            block.filterEventManager.isSelected(keyValue)) {
-                            ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
-                        }
-                    });
-                }
-                currentKey = keyValue;
-            }
-        });
-        tipBox.on("mouseleave", function () {
-            TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
-            TooltipComponentsManager.hideComponent(tooltipLine);
-            if (args.type === "2d")
-                ElementHighlighter.removeUnselected2DHighlight(block, args.dataOptions.keyField.name, args.charts, block.transitionManager.durations.markerHover);
-            currentKey = null;
-        });
-    }
-    static renderTooltipForDonut(block, elements, data, dataOptions, chart, blockSize, margin, donutThickness, tooltipSettings, tooltipOptions, translate) {
-        const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
-        const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
-        let tooltipArrow;
-        if (tooltipSettings.position === "fixed")
-            tooltipArrow = TooltipComponentsManager.renderTooltipArrow(tooltipBlock.getEl());
-        if (tooltipSettings.position === "followCursor") {
-            elements.on("mousemove", function (e) {
-                const pointerCoordinate = !pointer(e, block.getSvg().node())[0]
-                    ? e.detail.pointer
-                    : pointer(e, block.getSvg().node());
-                const tooltipCoordinate = TooltipHelper.getTooltipCursorCoordinate(pointerCoordinate, block.getSvg().node().getBoundingClientRect(), tooltipBlock.getEl().node().getBoundingClientRect());
-                tooltipBlock.setCoordinate(tooltipCoordinate);
-            });
-        }
-        elements.on("mouseover", function (e, dataRow) {
-            TooltipComponentsManager.showComponent(tooltipBlock.getEl());
-            TooltipDomHelper.fillForPolarChart(tooltipContent, chart, data, dataOptions, dataRow.data[dataOptions.keyField.name], select(this).select("path").style("fill"), tooltipOptions);
-            if (tooltipSettings.position === "fixed") {
-                const coordinatePointer = TooltipDomHelper.getRecalcedCoordinateByArrow(DonutHelper.getArcCentroid(blockSize, margin, dataRow, donutThickness), tooltipBlock.getEl(), blockSize, tooltipArrow, translate.x, translate.y);
-                coordinatePointer[0] = coordinatePointer[0] + translate.x;
-                coordinatePointer[1] = coordinatePointer[1] + translate.y;
-                const tooltipCoordinate = TooltipHelper.getCoordinateByPointer(coordinatePointer);
-                tooltipBlock.setCoordinate(tooltipCoordinate);
-            }
-            ElementHighlighter.toggleActivityStyle(select(this), true);
-            const clones = Donut.getAllArcClones(block).filter((d) => d.data[dataOptions.keyField.name] === dataRow.data[dataOptions.keyField.name]);
-            if (clones.nodes().length === 0 &&
-                (block.filterEventManager.getSelectedKeys().length === 0 ||
-                    block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name]))) {
-                ElementHighlighter.renderArcCloneAndHighlight(block, margin, select(this), blockSize, donutThickness);
-            }
-        });
-        elements.on("mouseleave", function (e, dataRow) {
-            TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
-            if (!block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name])) {
-                ElementHighlighter.removeCloneForElem(block, dataOptions.keyField.name, select(this));
-                ElementHighlighter.removeShadowClone(block, dataOptions.keyField.name, select(this), margin, blockSize, donutThickness);
-                ElementHighlighter.toggleDonutHighlightState(select(this), margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false);
-                if (block.filterEventManager.getSelectedKeys().length > 0) {
-                    ElementHighlighter.toggleActivityStyle(select(this), false);
-                }
-            }
-        });
-    }
+	static render(block, model, data, tooltipOptions, scales) {
+		TooltipComponentsManager.renderTooltipWrapper(block);
+		const withTooltipIndex = model.options.charts.findIndex((chart) => chart.tooltip.show);
+		if (withTooltipIndex !== -1) {
+			if (model.options.type === "2d") {
+				this.renderTooltipFor2DCharts(
+					block,
+					data,
+					model.blockCanvas.size,
+					model.chartBlock.margin,
+					scales,
+					model.options,
+					tooltipOptions
+				);
+			} else if (model.options.type === "polar") {
+				this.renderTooltipForPolar(
+					block,
+					model.options,
+					data,
+					model.blockCanvas.size,
+					model.chartBlock.margin,
+					DonutHelper.getThickness(
+						model.options.chartCanvas,
+						model.blockCanvas.size,
+						model.chartBlock.margin
+					),
+					model.otherComponents.tooltipBlock
+				);
+			}
+		}
+	}
+	static hide(block) {
+		TooltipComponentsManager.hideComponent(block.getWrapper().select(`.${this.tooltipBlockClass}`));
+		TooltipComponentsManager.hideComponent(block.getSvg().select(`.${this.tooltipLineClass}`));
+	}
+	static renderTooltipFor2DCharts(block, data, blockSize, margin, scales, options, tooltipOptions) {
+		if (scales.key.domain().length === 0) return;
+		const tooltipParams = {
+			type: "2d",
+			scales,
+			margin,
+			blockSize,
+			charts: options.charts,
+			chartOrientation: options.orient,
+			keyAxisOrient: options.axis.key.orient,
+			dataOptions: options.data,
+			scaleKeyModel: options.scale.key,
+			tooltipSettings: tooltipOptions,
+			tooltipOptions: options.tooltip
+		};
+		this.renderLineTooltip(block, data, tooltipParams);
+	}
+	static renderTooltipForPolar(block, options, data, blockSize, margin, chartThickness, tooltipOptions) {
+		const attrTransform = block.getSvg().select(`.${Donut.donutBlockClass}`).attr("transform");
+		const translateNums = Helper.getTranslateNumbers(attrTransform);
+		const arcItems = Donut.getAllArcGroups(block);
+		this.renderTooltipForDonut(
+			block,
+			arcItems,
+			data,
+			options.data,
+			options.charts[0],
+			blockSize,
+			margin,
+			chartThickness,
+			tooltipOptions,
+			options.tooltip,
+			{ x: translateNums[0], y: translateNums[1] }
+		);
+	}
+	static renderLineTooltip(block, data, args) {
+		const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
+		const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
+		const tooltipLine = TooltipComponentsManager.renderTooltipLine(block);
+		const tipBox = TipBox.renderOrGet(block, args.margin, args.blockSize);
+		let currentKey = null;
+		tipBox.on("mousemove", function (e) {
+			const keyValue =
+				e.detail.keyValue ||
+				TipBoxHelper.getKeyValueByPointer(
+					pointer(e, this),
+					args.chartOrientation,
+					args.margin,
+					args.blockSize,
+					args.scales.key,
+					args.scaleKeyModel.type
+				);
+			if (args.tooltipSettings.position === "followCursor") {
+				const tooltipCoordinate = TooltipHelper.getTooltipCursorCoordinate(
+					e.detail.pointer || pointer(e, this),
+					block.getSvg().node().getBoundingClientRect(),
+					tooltipBlock.getEl().node().getBoundingClientRect()
+				);
+				TooltipComponentsManager.setLineTooltipCoordinate(
+					tooltipBlock,
+					tooltipCoordinate,
+					args.chartOrientation,
+					0
+				);
+			}
+			if (!currentKey || currentKey !== keyValue) {
+				TooltipComponentsManager.showComponent(tooltipBlock.getEl());
+				if (args.type === "2d")
+					TooltipDomHelper.fillForMulti2DCharts(
+						tooltipContent,
+						args.charts.filter((ch) => ch.tooltip.show),
+						data,
+						args.dataOptions,
+						keyValue,
+						args.tooltipOptions
+					);
+				if (args.tooltipSettings.position === "fixed") {
+					const tooltipCoordinate = TooltipHelper.getTooltipFixedCoordinate(
+						args.scales.key,
+						args.margin,
+						keyValue,
+						block.getSvg().node().getBoundingClientRect(),
+						tooltipContent.node().getBoundingClientRect(),
+						args.keyAxisOrient,
+						window.innerWidth,
+						window.innerHeight
+					);
+					TooltipComponentsManager.setLineTooltipCoordinate(
+						tooltipBlock,
+						tooltipCoordinate,
+						args.chartOrientation,
+						block.transitionManager.durations.tooltipSlide
+					);
+				}
+				const tooltipLineAttributes = TooltipHelper.getTooltipLineAttributes(
+					args.scales.key,
+					args.margin,
+					keyValue,
+					args.chartOrientation,
+					args.blockSize
+				);
+				TooltipComponentsManager.setTooltipLineAttributes(
+					tooltipLine,
+					tooltipLineAttributes,
+					block.transitionManager.durations.tooltipSlide
+				);
+				TooltipComponentsManager.showComponent(tooltipLine);
+				if (args.type === "2d") {
+					args.charts.forEach((chart) => {
+						const elements = DomHelper.get2DChartElements(block, chart);
+						if (!block.filterEventManager.isSelected(currentKey)) {
+							const oldElements = DomHelper.getChartElementsByKeys(
+								elements,
+								chart.isSegmented,
+								args.dataOptions.keyField.name,
+								[currentKey]
+							);
+							if (chart.type !== "bar")
+								MarkDot.tryMakeMarkDotVisible(oldElements, chart.markersOptions, false);
+							ElementHighlighter.toggle2DElements(
+								oldElements,
+								false,
+								chart,
+								block.transitionManager.durations.markerHover
+							);
+							if (block.filterEventManager.getSelectedKeys().length > 0) {
+								ElementHighlighter.toggleActivityStyle(oldElements, false);
+							}
+						}
+						const selectedElements = DomHelper.getChartElementsByKeys(
+							elements,
+							chart.isSegmented,
+							args.dataOptions.keyField.name,
+							[keyValue]
+						);
+						if (chart.type !== "bar")
+							MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
+						ElementHighlighter.toggleActivityStyle(selectedElements, true);
+						if (
+							block.filterEventManager.getSelectedKeys().length === 0 ||
+							block.filterEventManager.isSelected(keyValue)
+						) {
+							ElementHighlighter.toggle2DElements(
+								selectedElements,
+								true,
+								chart,
+								block.transitionManager.durations.markerHover
+							);
+						}
+					});
+				}
+				currentKey = keyValue;
+			}
+		});
+		tipBox.on("mouseleave", function () {
+			TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
+			TooltipComponentsManager.hideComponent(tooltipLine);
+			if (args.type === "2d")
+				ElementHighlighter.removeUnselected2DHighlight(
+					block,
+					args.dataOptions.keyField.name,
+					args.charts,
+					block.transitionManager.durations.markerHover
+				);
+			currentKey = null;
+		});
+	}
+	static renderTooltipForDonut(
+		block,
+		elements,
+		data,
+		dataOptions,
+		chart,
+		blockSize,
+		margin,
+		donutThickness,
+		tooltipSettings,
+		tooltipOptions,
+		translate
+	) {
+		const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
+		const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
+		let tooltipArrow;
+		if (tooltipSettings.position === "fixed")
+			tooltipArrow = TooltipComponentsManager.renderTooltipArrow(tooltipBlock.getEl());
+		if (tooltipSettings.position === "followCursor") {
+			elements.on("mousemove", function (e) {
+				const pointerCoordinate = !pointer(e, block.getSvg().node())[0]
+					? e.detail.pointer
+					: pointer(e, block.getSvg().node());
+				const tooltipCoordinate = TooltipHelper.getTooltipCursorCoordinate(
+					pointerCoordinate,
+					block.getSvg().node().getBoundingClientRect(),
+					tooltipBlock.getEl().node().getBoundingClientRect()
+				);
+				tooltipBlock.setCoordinate(tooltipCoordinate);
+			});
+		}
+		elements.on("mouseover", function (e, dataRow) {
+			TooltipComponentsManager.showComponent(tooltipBlock.getEl());
+			TooltipDomHelper.fillForPolarChart(
+				tooltipContent,
+				chart,
+				data,
+				dataOptions,
+				dataRow.data[dataOptions.keyField.name],
+				select(this).select("path").style("fill"),
+				tooltipOptions
+			);
+			if (tooltipSettings.position === "fixed") {
+				const coordinatePointer = TooltipDomHelper.getRecalcedCoordinateByArrow(
+					DonutHelper.getArcCentroid(blockSize, margin, dataRow, donutThickness),
+					tooltipBlock.getEl(),
+					blockSize,
+					tooltipArrow,
+					translate.x,
+					translate.y
+				);
+				coordinatePointer[0] = coordinatePointer[0] + translate.x;
+				coordinatePointer[1] = coordinatePointer[1] + translate.y;
+				const tooltipCoordinate = TooltipHelper.getCoordinateByPointer(coordinatePointer);
+				tooltipBlock.setCoordinate(tooltipCoordinate);
+			}
+			ElementHighlighter.toggleActivityStyle(select(this), true);
+			const clones = Donut.getAllArcClones(block).filter(
+				(d) => d.data[dataOptions.keyField.name] === dataRow.data[dataOptions.keyField.name]
+			);
+			if (
+				clones.nodes().length === 0 &&
+				(block.filterEventManager.getSelectedKeys().length === 0 ||
+					block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name]))
+			) {
+				ElementHighlighter.renderArcCloneAndHighlight(block, margin, select(this), blockSize, donutThickness);
+			}
+		});
+		elements.on("mouseleave", function (e, dataRow) {
+			TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
+			if (!block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name])) {
+				ElementHighlighter.removeCloneForElem(block, dataOptions.keyField.name, select(this));
+				ElementHighlighter.removeShadowClone(
+					block,
+					dataOptions.keyField.name,
+					select(this),
+					margin,
+					blockSize,
+					donutThickness
+				);
+				ElementHighlighter.toggleDonutHighlightState(
+					select(this),
+					margin,
+					blockSize,
+					donutThickness,
+					block.transitionManager.durations.higlightedScale,
+					false
+				);
+				if (block.filterEventManager.getSelectedKeys().length > 0) {
+					ElementHighlighter.toggleActivityStyle(select(this), false);
+				}
+			}
+		});
+	}
 }
 Tooltip.tooltipBlockClass = NewTooltip.tooltipBlockClass;
 Tooltip.tooltipLineClass = "mdt-charts-tooltip-line";