mdt-charts 1.29.0 → 1.30.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,22 +1,17 @@
 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,29 +1,26 @@
 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,21 +4,15 @@ 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,302 +12,148 @@ 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";