mdt-charts 1.28.1 → 1.29.0

package/lib/engine/contentManager/contentManager.js

@@ -1,18 +1,18 @@
 import { getChartContentManager } from "./contentManagerFactory";
 export class ContentManager {
-    constructor(model) {
-        this.manager = getChartContentManager(model);
-    }
-    render(model, engine) {
-        this.manager.render(engine, model);
-    }
-    updateData(block, model, newData) {
-        this.manager.updateData(block, model, newData);
-    }
-    updateColors(engine, model) {
-        this.manager.updateColors(engine.block, model);
-    }
-    clearSelection(engine, model) {
-        this.manager.clearSelection(engine.block.filterEventManager, model);
-    }
+	constructor(model) {
+		this.manager = getChartContentManager(model);
+	}
+	render(model, engine) {
+		this.manager.render(engine, model);
+	}
+	updateData(block, model, newData) {
+		this.manager.updateData(block, model, newData);
+	}
+	updateColors(engine, model) {
+		this.manager.updateColors(engine.block, model);
+	}
+	clearSelection(engine, model) {
+		this.manager.clearSelection(engine.block.filterEventManager, model);
+	}
 }

package/lib/engine/contentManager/contentManagerFactory.d.ts

@@ -4,13 +4,13 @@ import { Block } from "../block/block";
 import { Engine } from "../engine";
 import { FilterEventManager } from "../filterManager/filterEventManager";
 export interface ChartContentManager {
-    render(engine: Engine, model: Model): void;
-    updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
-    updateColors(block: Block, model: Model): void;
-    clearSelection(filterEventManager: FilterEventManager, model: Model): void;
+	render(engine: Engine, model: Model): void;
+	updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
+	updateColors(block: Block, model: Model): void;
+	clearSelection(filterEventManager: FilterEventManager, model: Model): void;
 }
 export declare class ContentManagerFactory {
-    private managers;
-    getManager(type: ChartNotation): ChartContentManager;
+	private managers;
+	getManager(type: ChartNotation): ChartContentManager;
 }
 export declare function getChartContentManager(model: Model): ChartContentManager;

package/lib/engine/contentManager/contentManagerFactory.js

@@ -1,18 +1,18 @@
 import { PolarManager } from "../polarNotation/polarManager";
 import { TwoDimensionalManager } from "../twoDimensionalNotation/twoDimensionalManager";
 export class ContentManagerFactory {
-    constructor() {
-        this.managers = {
-            "2d": TwoDimensionalManager,
-            polar: PolarManager
-        };
-    }
-    getManager(type) {
-        const managerClass = this.managers[type];
-        return new managerClass();
-    }
+	constructor() {
+		this.managers = {
+			"2d": TwoDimensionalManager,
+			polar: PolarManager
+		};
+	}
+	getManager(type) {
+		const managerClass = this.managers[type];
+		return new managerClass();
+	}
 }
 export function getChartContentManager(model) {
-    const factory = new ContentManagerFactory();
-    return factory.getManager(model.options.type);
+	const factory = new ContentManagerFactory();
+	return factory.getManager(model.options.type);
 }

package/lib/engine/elementHighlighter/elementHighlighter.d.ts

@@ -4,26 +4,74 @@ import { BlockMargin, TwoDimensionalChartModel } from "../../model/model";
 import { Block } from "../block/block";
 import { MdtChartsDataRow, Size } from "../../config/config";
 export declare class ElementHighlighter {
-    private static inactiveElemClass;
-    static toggleActivityStyle(elementSelection: Selection<BaseType, unknown, BaseType, unknown>, isActive: boolean): void;
-    /**
-     * @param blurPercent процент от макс. размера блюра
-     */
-    static setShadowFilter(elemSelection: Selection<BaseType, any, BaseType, any>, blurPercent?: number): void;
-    static removeFilter(elemSelection: Selection<BaseType, any, BaseType, any>): void;
-    static removeShadowClone(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, margin: BlockMargin, blockSize: Size, donutThickness: number): void;
-    static removeCloneForElem(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>): void;
-    static removeDonutArcClones(block: Block): void;
-    static renderArcCloneAndHighlight(block: Block, margin: BlockMargin, arcSelection: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, blockSize: Size, donutThickness: number): void;
-    static toggleDonutHighlightState(segment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, margin: BlockMargin, blockSize: Size, donutThickness: number, transitionDuration: number, on: boolean): Promise<any>;
-    static removeDonutHighlightingByKeys(arcSegments: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, keyFieldName: string, keyValues: string[], margin: BlockMargin, blockSize: Size, donutThickness: number): void;
-    static setInactiveFor2D(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[]): void;
-    static remove2DChartsFullHighlighting(block: Block, charts: TwoDimensionalChartModel[], transitionDuration?: number): void;
-    static removeUnselected2DHighlight(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[], transitionDuration: number): void;
-    static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chart: TwoDimensionalChartModel, transitionDuration: number): void;
-    private static makeArcClone;
-    private static makeArcShadow;
-    private static renderDonutSegmentClone;
-    private static toggleBar;
-    private static toggleDot;
+	private static inactiveElemClass;
+	static toggleActivityStyle(
+		elementSelection: Selection<BaseType, unknown, BaseType, unknown>,
+		isActive: boolean
+	): void;
+	/**
+	 * @param blurPercent процент от макс. размера блюра
+	 */
+	static setShadowFilter(elemSelection: Selection<BaseType, any, BaseType, any>, blurPercent?: number): void;
+	static removeFilter(elemSelection: Selection<BaseType, any, BaseType, any>): void;
+	static removeShadowClone(
+		block: Block,
+		keyFieldName: string,
+		selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>,
+		margin: BlockMargin,
+		blockSize: Size,
+		donutThickness: number
+	): void;
+	static removeCloneForElem(
+		block: Block,
+		keyFieldName: string,
+		selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>
+	): void;
+	static removeDonutArcClones(block: Block): void;
+	static renderArcCloneAndHighlight(
+		block: Block,
+		margin: BlockMargin,
+		arcSelection: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>,
+		blockSize: Size,
+		donutThickness: number
+	): void;
+	static toggleDonutHighlightState(
+		segment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>,
+		margin: BlockMargin,
+		blockSize: Size,
+		donutThickness: number,
+		transitionDuration: number,
+		on: boolean
+	): Promise<any>;
+	static removeDonutHighlightingByKeys(
+		arcSegments: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>,
+		keyFieldName: string,
+		keyValues: string[],
+		margin: BlockMargin,
+		blockSize: Size,
+		donutThickness: number
+	): void;
+	static setInactiveFor2D(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[]): void;
+	static remove2DChartsFullHighlighting(
+		block: Block,
+		charts: TwoDimensionalChartModel[],
+		transitionDuration?: number
+	): void;
+	static removeUnselected2DHighlight(
+		block: Block,
+		keyFieldName: string,
+		charts: TwoDimensionalChartModel[],
+		transitionDuration: number
+	): void;
+	static toggle2DElements(
+		elemSelection: Selection<BaseType, any, BaseType, any>,
+		isHighlight: boolean,
+		chart: TwoDimensionalChartModel,
+		transitionDuration: number
+	): void;
+	private static makeArcClone;
+	private static makeArcShadow;
+	private static renderDonutSegmentClone;
+	private static toggleBar;
+	private static toggleDot;
 }

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -9,186 +9,235 @@ import * as chroma from "chroma-js";
 import { NamesHelper } from "../helpers/namesHelper";
 import { DonutHelper } from "../polarNotation/donut/DonutHelper";
 export class ElementHighlighter {
-    static toggleActivityStyle(elementSelection, isActive) {
-        elementSelection.classed(this.inactiveElemClass, !isActive);
-    }
-    /**
-     * @param blurPercent процент от макс. размера блюра
-     */
-    static setShadowFilter(elemSelection, blurPercent = 1) {
-        const maxBlurSize = 8;
-        elemSelection.each(function () {
-            const elemFill = select(this).style("fill") || "rgb(0, 0, 0)";
-            const colorInRgb = chroma(elemFill).css();
-            const shadowColor = Helper.getRgbaFromRgb(colorInRgb, 0.6);
-            select(this).style("filter", `drop-shadow(0px 0px ${blurPercent * maxBlurSize}px ${shadowColor})`);
-        });
-    }
-    static removeFilter(elemSelection) {
-        elemSelection.style("filter", null);
-    }
-    static removeShadowClone(block, keyFieldName, selectedSegment, margin, blockSize, donutThickness) {
-        const shadowClone = Donut.getAllArcShadows(block).filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
-        this.removeFilter(shadowClone.select("path"));
-        this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false).then(() => shadowClone.remove());
-    }
-    static removeCloneForElem(block, keyFieldName, selectedSegment) {
-        const clone = Donut.getAllArcClones(block).filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
-        clone.remove();
-    }
-    static removeDonutArcClones(block) {
-        Donut.getAllArcClones(block).remove();
-        Donut.getAllArcShadows(block).remove();
-    }
-    static renderArcCloneAndHighlight(block, margin, arcSelection, blockSize, donutThickness) {
-        const clone = this.makeArcClone(arcSelection, block);
-        const shadowClone = this.makeArcShadow(arcSelection, block);
-        this.toggleDonutHighlightState(arcSelection, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
-        this.toggleDonutHighlightState(clone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
-        this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
-        this.setShadowFilter(shadowClone.select("path"), donutThickness / 60);
-    }
-    static toggleDonutHighlightState(segment, margin, blockSize, donutThickness, transitionDuration, on) {
-        return new Promise((resolve) => {
-            let scaleSize = 0;
-            if (on)
-                scaleSize = 5; // Если нужно выделить сегмент, то scaleSize не равен нулю и отображается увеличенным
-            segment
-                .select("path")
-                .interrupt()
-                .transition()
-                .duration(transitionDuration)
-                .on("end", () => resolve(""))
-                .ease(easeLinear)
-                .attr("d", (d, i) => DonutHelper.getArcGeneratorObject(blockSize, margin, donutThickness)
-                .outerRadius(DonutHelper.getOuterRadius(margin, blockSize) + scaleSize)
-                .innerRadius(DonutHelper.getOuterRadius(margin, blockSize) - donutThickness - scaleSize)(d, i));
-        });
-    }
-    static removeDonutHighlightingByKeys(arcSegments, keyFieldName, keyValues, margin, blockSize, donutThickness) {
-        const segments = DomHelper.getChartElementsByKeys(arcSegments, true, keyFieldName, keyValues, SelectionCondition.Exclude);
-        this.toggleDonutHighlightState(segments, margin, blockSize, donutThickness, 0, false);
-    }
-    static setInactiveFor2D(block, keyFieldName, charts) {
-        charts.forEach((chart) => {
-            const elems = DomHelper.get2DChartElements(block, chart);
-            if (block.filterEventManager.getSelectedKeys().length === 0) {
-                this.toggleActivityStyle(elems, true);
-            }
-            else {
-                const unselectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
-                const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys());
-                this.toggleActivityStyle(unselectedElems, false);
-                this.toggleActivityStyle(selectedElems, true);
-            }
-        });
-    }
-    static remove2DChartsFullHighlighting(block, charts, transitionDuration = 0) {
-        charts.forEach((chart) => {
-            const elems = DomHelper.get2DChartElements(block, chart);
-            if (chart.type !== "bar")
-                MarkDot.tryMakeMarkDotVisible(elems, chart.markersOptions, false);
-            this.toggle2DElements(elems, false, chart, transitionDuration);
-            this.toggleActivityStyle(elems, true);
-        });
-    }
-    static removeUnselected2DHighlight(block, keyFieldName, charts, transitionDuration) {
-        charts.forEach((chart) => {
-            const elems = DomHelper.get2DChartElements(block, chart);
-            const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
-            if (chart.type !== "bar")
-                MarkDot.tryMakeMarkDotVisible(selectedElems, chart.markersOptions, false);
-            this.toggle2DElements(selectedElems, false, chart, transitionDuration);
-            if (block.filterEventManager.getSelectedKeys().length > 0)
-                this.toggleActivityStyle(selectedElems, false);
-        });
-    }
-    static toggle2DElements(elemSelection, isHighlight, chart, transitionDuration) {
-        if (chart.type === "area" || chart.type === "line") {
-            elemSelection.call(this.toggleDot, isHighlight, chart.markersOptions.styles, transitionDuration);
-        }
-        else {
-            this.toggleBar(elemSelection, isHighlight);
-            if (isHighlight) {
-                elemSelection.each(function (d) {
-                    const attrs = this.attrs;
-                    const blurPercent = (attrs.orient === "vertical" ? attrs.width : attrs.height) / 30; // 30px = max bar size, 13px - max blurSize
-                    ElementHighlighter.setShadowFilter(select(this), blurPercent);
-                });
-            }
-            else {
-                this.removeFilter(elemSelection);
-            }
-        }
-    }
-    static makeArcClone(segment, block) {
-        const clone = this.renderDonutSegmentClone(segment, `${Donut.arcCloneClass}`);
-        block
-            .getSvg()
-            .select(`.${Donut.arcClonesGroupClass}`)
-            .append(function () {
-            return clone.node();
-        });
-        return clone;
-    }
-    static makeArcShadow(segment, block) {
-        const shadowClone = this.renderDonutSegmentClone(segment, `${Donut.arcShadowClass}`);
-        block
-            .getSvg()
-            .select(`.${Donut.arcShadowsGroupClass}`)
-            .append(function () {
-            return shadowClone.node();
-        });
-        return shadowClone;
-    }
-    static renderDonutSegmentClone(segment, newClass) {
-        return segment
-            .clone(true)
-            .style("pointer-events", "none")
-            .classed(`${Donut.arcCloneClass}`, false)
-            .classed(newClass, true)
-            .remove();
-    }
-    static toggleBar(elemSelection, isHighlight) {
-        const animationName = "bar-highlight";
-        if (isHighlight) {
-            elemSelection.each(function () {
-                const attrs = this.attrs;
-                const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
-                if (attrs.orient === "vertical") {
-                    handler.attr("x", attrs.x - attrs.scaleSize).attr("width", attrs.width + attrs.scaleSize * 2);
-                }
-                else {
-                    handler.attr("y", attrs.y - attrs.scaleSize).attr("height", attrs.height + attrs.scaleSize * 2);
-                }
-            });
-        }
-        else {
-            elemSelection.each(function () {
-                const attrs = this.attrs;
-                const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
-                handler.attr("x", attrs.x).attr("width", attrs.width).attr("y", attrs.y).attr("height", attrs.height);
-            });
-        }
-    }
-    static toggleDot(elementSelection, isScaled, styles, transitionDuration = 0) {
-        const animationName = "size-scale";
-        elementSelection.nodes().forEach((node) => {
-            interrupt(node, animationName);
-        });
-        let elementsHandler = elementSelection;
-        if (transitionDuration > 0) {
-            elementsHandler = elementsHandler
-                .interrupt()
-                .transition(animationName)
-                .duration(transitionDuration)
-                .ease(easeLinear);
-        }
-        elementsHandler
-            .attr("r", isScaled ? styles.highlighted.size.radius : styles.normal.size.radius)
-            .style("stroke-width", isScaled ? styles.highlighted.size.borderSize : styles.normal.size.borderSize).each(function () {
-            select(this).style("fill", isScaled ? select(this).style("stroke") : "white");
-        });
-    }
+	static toggleActivityStyle(elementSelection, isActive) {
+		elementSelection.classed(this.inactiveElemClass, !isActive);
+	}
+	/**
+	 * @param blurPercent процент от макс. размера блюра
+	 */
+	static setShadowFilter(elemSelection, blurPercent = 1) {
+		const maxBlurSize = 8;
+		elemSelection.each(function () {
+			const elemFill = select(this).style("fill") || "rgb(0, 0, 0)";
+			const colorInRgb = chroma(elemFill).css();
+			const shadowColor = Helper.getRgbaFromRgb(colorInRgb, 0.6);
+			select(this).style("filter", `drop-shadow(0px 0px ${blurPercent * maxBlurSize}px ${shadowColor})`);
+		});
+	}
+	static removeFilter(elemSelection) {
+		elemSelection.style("filter", null);
+	}
+	static removeShadowClone(block, keyFieldName, selectedSegment, margin, blockSize, donutThickness) {
+		const shadowClone = Donut.getAllArcShadows(block).filter(
+			(d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]
+		);
+		this.removeFilter(shadowClone.select("path"));
+		this.toggleDonutHighlightState(
+			shadowClone,
+			margin,
+			blockSize,
+			donutThickness,
+			block.transitionManager.durations.higlightedScale,
+			false
+		).then(() => shadowClone.remove());
+	}
+	static removeCloneForElem(block, keyFieldName, selectedSegment) {
+		const clone = Donut.getAllArcClones(block).filter(
+			(d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]
+		);
+		clone.remove();
+	}
+	static removeDonutArcClones(block) {
+		Donut.getAllArcClones(block).remove();
+		Donut.getAllArcShadows(block).remove();
+	}
+	static renderArcCloneAndHighlight(block, margin, arcSelection, blockSize, donutThickness) {
+		const clone = this.makeArcClone(arcSelection, block);
+		const shadowClone = this.makeArcShadow(arcSelection, block);
+		this.toggleDonutHighlightState(
+			arcSelection,
+			margin,
+			blockSize,
+			donutThickness,
+			block.transitionManager.durations.higlightedScale,
+			true
+		);
+		this.toggleDonutHighlightState(
+			clone,
+			margin,
+			blockSize,
+			donutThickness,
+			block.transitionManager.durations.higlightedScale,
+			true
+		);
+		this.toggleDonutHighlightState(
+			shadowClone,
+			margin,
+			blockSize,
+			donutThickness,
+			block.transitionManager.durations.higlightedScale,
+			true
+		);
+		this.setShadowFilter(shadowClone.select("path"), donutThickness / 60);
+	}
+	static toggleDonutHighlightState(segment, margin, blockSize, donutThickness, transitionDuration, on) {
+		return new Promise((resolve) => {
+			let scaleSize = 0;
+			if (on) scaleSize = 5; // Если нужно выделить сегмент, то scaleSize не равен нулю и отображается увеличенным
+			segment
+				.select("path")
+				.interrupt()
+				.transition()
+				.duration(transitionDuration)
+				.on("end", () => resolve(""))
+				.ease(easeLinear)
+				.attr("d", (d, i) =>
+					DonutHelper.getArcGeneratorObject(blockSize, margin, donutThickness)
+						.outerRadius(DonutHelper.getOuterRadius(margin, blockSize) + scaleSize)
+						.innerRadius(DonutHelper.getOuterRadius(margin, blockSize) - donutThickness - scaleSize)(d, i)
+				);
+		});
+	}
+	static removeDonutHighlightingByKeys(arcSegments, keyFieldName, keyValues, margin, blockSize, donutThickness) {
+		const segments = DomHelper.getChartElementsByKeys(
+			arcSegments,
+			true,
+			keyFieldName,
+			keyValues,
+			SelectionCondition.Exclude
+		);
+		this.toggleDonutHighlightState(segments, margin, blockSize, donutThickness, 0, false);
+	}
+	static setInactiveFor2D(block, keyFieldName, charts) {
+		charts.forEach((chart) => {
+			const elems = DomHelper.get2DChartElements(block, chart);
+			if (block.filterEventManager.getSelectedKeys().length === 0) {
+				this.toggleActivityStyle(elems, true);
+			} else {
+				const unselectedElems = DomHelper.getChartElementsByKeys(
+					elems,
+					chart.isSegmented,
+					keyFieldName,
+					block.filterEventManager.getSelectedKeys(),
+					SelectionCondition.Exclude
+				);
+				const selectedElems = DomHelper.getChartElementsByKeys(
+					elems,
+					chart.isSegmented,
+					keyFieldName,
+					block.filterEventManager.getSelectedKeys()
+				);
+				this.toggleActivityStyle(unselectedElems, false);
+				this.toggleActivityStyle(selectedElems, true);
+			}
+		});
+	}
+	static remove2DChartsFullHighlighting(block, charts, transitionDuration = 0) {
+		charts.forEach((chart) => {
+			const elems = DomHelper.get2DChartElements(block, chart);
+			if (chart.type !== "bar") MarkDot.tryMakeMarkDotVisible(elems, chart.markersOptions, false);
+			this.toggle2DElements(elems, false, chart, transitionDuration);
+			this.toggleActivityStyle(elems, true);
+		});
+	}
+	static removeUnselected2DHighlight(block, keyFieldName, charts, transitionDuration) {
+		charts.forEach((chart) => {
+			const elems = DomHelper.get2DChartElements(block, chart);
+			const selectedElems = DomHelper.getChartElementsByKeys(
+				elems,
+				chart.isSegmented,
+				keyFieldName,
+				block.filterEventManager.getSelectedKeys(),
+				SelectionCondition.Exclude
+			);
+			if (chart.type !== "bar") MarkDot.tryMakeMarkDotVisible(selectedElems, chart.markersOptions, false);
+			this.toggle2DElements(selectedElems, false, chart, transitionDuration);
+			if (block.filterEventManager.getSelectedKeys().length > 0) this.toggleActivityStyle(selectedElems, false);
+		});
+	}
+	static toggle2DElements(elemSelection, isHighlight, chart, transitionDuration) {
+		if (chart.type === "area" || chart.type === "line") {
+			elemSelection.call(this.toggleDot, isHighlight, chart.markersOptions.styles, transitionDuration);
+		} else {
+			this.toggleBar(elemSelection, isHighlight);
+			if (isHighlight) {
+				elemSelection.each(function (d) {
+					const attrs = this.attrs;
+					const blurPercent = (attrs.orient === "vertical" ? attrs.width : attrs.height) / 30; // 30px = max bar size, 13px - max blurSize
+					ElementHighlighter.setShadowFilter(select(this), blurPercent);
+				});
+			} else {
+				this.removeFilter(elemSelection);
+			}
+		}
+	}
+	static makeArcClone(segment, block) {
+		const clone = this.renderDonutSegmentClone(segment, `${Donut.arcCloneClass}`);
+		block
+			.getSvg()
+			.select(`.${Donut.arcClonesGroupClass}`)
+			.append(function () {
+				return clone.node();
+			});
+		return clone;
+	}
+	static makeArcShadow(segment, block) {
+		const shadowClone = this.renderDonutSegmentClone(segment, `${Donut.arcShadowClass}`);
+		block
+			.getSvg()
+			.select(`.${Donut.arcShadowsGroupClass}`)
+			.append(function () {
+				return shadowClone.node();
+			});
+		return shadowClone;
+	}
+	static renderDonutSegmentClone(segment, newClass) {
+		return segment
+			.clone(true)
+			.style("pointer-events", "none")
+			.classed(`${Donut.arcCloneClass}`, false)
+			.classed(newClass, true)
+			.remove();
+	}
+	static toggleBar(elemSelection, isHighlight) {
+		const animationName = "bar-highlight";
+		if (isHighlight) {
+			elemSelection.each(function () {
+				const attrs = this.attrs;
+				const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
+				if (attrs.orient === "vertical") {
+					handler.attr("x", attrs.x - attrs.scaleSize).attr("width", attrs.width + attrs.scaleSize * 2);
+				} else {
+					handler.attr("y", attrs.y - attrs.scaleSize).attr("height", attrs.height + attrs.scaleSize * 2);
+				}
+			});
+		} else {
+			elemSelection.each(function () {
+				const attrs = this.attrs;
+				const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
+				handler.attr("x", attrs.x).attr("width", attrs.width).attr("y", attrs.y).attr("height", attrs.height);
+			});
+		}
+	}
+	static toggleDot(elementSelection, isScaled, styles, transitionDuration = 0) {
+		const animationName = "size-scale";
+		elementSelection.nodes().forEach((node) => {
+			interrupt(node, animationName);
+		});
+		let elementsHandler = elementSelection;
+		if (transitionDuration > 0) {
+			elementsHandler = elementsHandler
+				.interrupt()
+				.transition(animationName)
+				.duration(transitionDuration)
+				.ease(easeLinear);
+		}
+		elementsHandler
+			.attr("r", isScaled ? styles.highlighted.size.radius : styles.normal.size.radius)
+			.style("stroke-width", isScaled ? styles.highlighted.size.borderSize : styles.normal.size.borderSize)
+			.each(function () {
+				select(this).style("fill", isScaled ? select(this).style("stroke") : "white");
+			});
+	}
 }
 ElementHighlighter.inactiveElemClass = NamesHelper.getClassName("opacity-inactive");