mdt-charts 1.29.0 → 1.30.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, options) {
+        this.manager.clearSelection(engine.block.filterEventManager, model, options);
+    }
 }

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

@@ -2,15 +2,15 @@ import { ChartNotation, MdtChartsDataSource } from "../../config/config";
 import { Model } from "../../model/model";
 import { Block } from "../block/block";
 import { Engine } from "../engine";
-import { FilterEventManager } from "../filterManager/filterEventManager";
+import { ChartClearSelectionOptions, 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, options?: ChartClearSelectionOptions): 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,74 +4,26 @@ 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,235 +9,186 @@ 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");