mdt-charts 1.29.0 → 1.29.1

package/lib/engine/features/valueLabels/valueLabels.js

@@ -8,212 +8,176 @@ import { ValueLabelsCollision } from "../../../engine/features/valueLabelsCollis
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
 import { getStackedData } from "../../twoDimensionalNotation/line/lineHelper";
 export class ChartValueLabels {
-	constructor(globalOptions, chart) {
-		this.globalOptions = globalOptions;
-		this.chart = chart;
-		this.renderPipeline = new Pipeline();
-		this.attrsProvider = new ValueLabelsAttrsProvider();
-		this.options = chart.valueLabels;
-		this.renderPipeline.push((valueLabels, { style }) => {
-			valueLabels.attr("fill", "currentColor").style("font-size", style.fontSize).style("color", style.color);
-			if (style.cssClassName) valueLabels.classed(style.cssClassName, true);
-			return valueLabels;
-		});
-	}
-	render(scales, data) {
-		if (this.chart.isSegmented) {
-			const preparedData = getStackedData(data, this.chart);
-			preparedData.forEach((segment, segmentIndex) => {
-				if (!segment[0]) return;
-				this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, "1", (d) => d.data);
-			});
-		} else {
-			this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-				this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, (d) => d);
-			});
-		}
-	}
-	update(scales, newData, updatedOptions) {
-		const updatePromises = [];
-		this.options = updatedOptions;
-		if (this.chart.isSegmented) {
-			const preparedData = getStackedData(newData, this.chart);
-			preparedData.forEach((segment, segmentIndex) => {
-				var _a;
-				const promise = this.updateByGroupIndex(
-					scales,
-					segmentIndex,
-					segment,
-					"1",
-					(d) => d.data,
-					(_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName
-				);
-				updatePromises.push(promise);
-			});
-		} else {
-			this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-				const promise = this.updateByGroupIndex(
-					scales,
-					vfIndex,
-					newData,
-					valueField.name,
-					(d) => d,
-					valueField.name
-				);
-				updatePromises.push(promise);
-			});
-		}
-		return Promise.all(updatePromises);
-	}
-	renderByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
-		let valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data).enter().append("text");
-		valueLabels = this.renderPipeline.execute(valueLabels, {
-			style: this.globalOptions.canvas.style
-		});
-		const attrs = this.attrsProvider.getAttrs(
-			this.globalOptions,
-			this.options,
-			scales,
-			datumField,
-			dataRowAccessor
-		);
-		this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
-		this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
-	}
-	updateByGroupIndex(scales, groupIndex, data, datumField, dataRowAccessor, valueFieldName) {
-		return new Promise((resolve) => {
-			const valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data);
-			valueLabels.exit().remove();
-			const attrs = this.attrsProvider.getAttrs(
-				this.globalOptions,
-				this.options,
-				scales,
-				datumField,
-				dataRowAccessor
-			);
-			if (!valueFieldName) {
-				resolve();
-				return;
-			}
-			let newValueLabels = valueLabels.enter().append("text");
-			newValueLabels = this.renderPipeline.execute(newValueLabels, {
-				style: this.globalOptions.canvas.style
-			});
-			const mergedValueLabels = newValueLabels.merge(valueLabels);
-			this.setAttrs(newValueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
-			this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
-			this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor, true, resolve);
-		});
-	}
-	getAllValueLabelsOfChart(vfIndex) {
-		const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
-		return block.selectAll(
-			`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(
-				this.chart.cssClasses
-			)}.chart-element-${vfIndex}`
-		);
-	}
-	setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
-		const animationName = "labels-updating";
-		let selection = valueLabels
-			.text((d) => formatter(dataRowAccessor(d)[valueFieldName]))
-			.attr("dominant-baseline", attrs.dominantBaseline)
-			.attr("text-anchor", attrs.textAnchor);
-		if (animate) {
-			selection = selection
-				.interrupt(animationName)
-				.transition(animationName)
-				.duration(this.globalOptions.elementAccessors.getBlock().transitionManager.durations.chartUpdate);
-		}
-		selection
-			.attr("x", (d) => attrs.x(d))
-			.attr("y", (d) => attrs.y(d))
-			.attr("transform", (d) => {
-				var _a;
-				return ((_a = this.chart.valueLabels.rotation) === null || _a === void 0 ? void 0 : _a.angle)
-					? `rotate(${this.chart.valueLabels.rotation.angle}, ${attrs.x(d)}, ${attrs.y(d)})`
-					: null;
-			});
-		const handleElements = () => {
-			if (this.chart.valueLabels.handleElement) {
-				const thisClass = this;
-				selection.each(function (d) {
-					thisClass.chart.valueLabels.handleElement({
-						element: this,
-						value: dataRowAccessor(d)[valueFieldName]
-					});
-				});
-			}
-		};
-		if (animate)
-			selection.on("end", () => {
-				onEndAnimation();
-				handleElements();
-			});
-		else handleElements();
-	}
-	setClasses(textLabels, cssClasses, vfIndex) {
-		textLabels.classed(ChartValueLabels.valueLabelClass, true);
-		textLabels.classed(CLASSES.dataLabel, true);
-		DomHelper.setCssClasses(textLabels, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
-	}
+    constructor(globalOptions, chart) {
+        this.globalOptions = globalOptions;
+        this.chart = chart;
+        this.renderPipeline = new Pipeline();
+        this.attrsProvider = new ValueLabelsAttrsProvider();
+        this.options = chart.valueLabels;
+        this.renderPipeline.push((valueLabels, { style }) => {
+            valueLabels.attr("fill", "currentColor").style("font-size", style.fontSize).style("color", style.color);
+            if (style.cssClassName)
+                valueLabels.classed(style.cssClassName, true);
+            return valueLabels;
+        });
+    }
+    render(scales, data) {
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(data, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                if (!segment[0])
+                    return;
+                this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, "1", (d) => d.data);
+            });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, (d) => d);
+            });
+        }
+    }
+    update(scales, newData, updatedOptions) {
+        const updatePromises = [];
+        this.options = updatedOptions;
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(newData, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                var _a;
+                const promise = this.updateByGroupIndex(scales, segmentIndex, segment, "1", (d) => d.data, (_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName);
+                updatePromises.push(promise);
+            });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                const promise = this.updateByGroupIndex(scales, vfIndex, newData, valueField.name, (d) => d, valueField.name);
+                updatePromises.push(promise);
+            });
+        }
+        return Promise.all(updatePromises);
+    }
+    renderByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        let valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data).enter().append("text");
+        valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
+        const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor);
+        this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
+        this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
+    }
+    updateByGroupIndex(scales, groupIndex, data, datumField, dataRowAccessor, valueFieldName) {
+        return new Promise((resolve) => {
+            const valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data);
+            valueLabels.exit().remove();
+            const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor);
+            if (!valueFieldName) {
+                resolve();
+                return;
+            }
+            let newValueLabels = valueLabels.enter().append("text");
+            newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
+            const mergedValueLabels = newValueLabels.merge(valueLabels);
+            this.setAttrs(newValueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
+            this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
+            this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor, true, resolve);
+        });
+    }
+    getAllValueLabelsOfChart(vfIndex) {
+        const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
+        return block.selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
+    }
+    setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
+        const animationName = "labels-updating";
+        let selection = valueLabels
+            .text((d) => formatter(dataRowAccessor(d)[valueFieldName]))
+            .attr("dominant-baseline", attrs.dominantBaseline)
+            .attr("text-anchor", attrs.textAnchor);
+        if (animate) {
+            selection = selection
+                .interrupt(animationName)
+                .transition(animationName)
+                .duration(this.globalOptions.elementAccessors.getBlock().transitionManager.durations.chartUpdate);
+        }
+        selection
+            .attr("x", (d) => attrs.x(d))
+            .attr("y", (d) => attrs.y(d))
+            .attr("transform", (d) => {
+            var _a;
+            return ((_a = this.chart.valueLabels.rotation) === null || _a === void 0 ? void 0 : _a.angle) ? `rotate(${this.chart.valueLabels.rotation.angle}, ${attrs.x(d)}, ${attrs.y(d)})`
+                : null;
+        });
+        const handleElements = () => {
+            if (this.chart.valueLabels.handleElement) {
+                const thisClass = this;
+                selection.each(function (d) {
+                    thisClass.chart.valueLabels.handleElement({
+                        element: this,
+                        value: dataRowAccessor(d)[valueFieldName]
+                    });
+                });
+            }
+        };
+        if (animate)
+            selection.on("end", () => {
+                onEndAnimation();
+                handleElements();
+            });
+        else
+            handleElements();
+    }
+    setClasses(textLabels, cssClasses, vfIndex) {
+        textLabels.classed(ChartValueLabels.valueLabelClass, true);
+        textLabels.classed(CLASSES.dataLabel, true);
+        DomHelper.setCssClasses(textLabels, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
+    }
 }
 ChartValueLabels.valueLabelClass = NamesHelper.getClassName("value-label");
 export class CanvasValueLabels {
-	constructor(options) {
-		this.options = options;
-		this.chartsValueLabels = [];
-	}
-	render(scales, charts, data, dataOptions) {
-		const valueLabelsSettings = this.options.canvas.valueLabels;
-		const chartsWithLabels = charts.filter((chart) => {
-			var _a;
-			return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show;
-		});
-		if (chartsWithLabels.length === 0) return;
-		chartsWithLabels.forEach((chart) => {
-			const chartScales = this.getChartScales(scales, chart);
-			const chartValueLabels = new ChartValueLabels(this.options, chart);
-			this.chartsValueLabels.push(chartValueLabels);
-			chartValueLabels.render(chartScales, data[dataOptions.dataSource]);
-		});
-		const valueLabels = this.getAllValueLabels();
-		ValueLabelsCollision.resolveValueLabelsCollisions(valueLabels, valueLabelsSettings);
-	}
-	update(scales, charts, data, dataOptions, newCanvasOptions) {
-		this.options.canvas.valueLabels = newCanvasOptions;
-		const chartsWithLabels = charts.filter((chart) => {
-			var _a;
-			return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show;
-		});
-		if (chartsWithLabels.length === 0) return;
-		if (this.options.canvas.valueLabels.collision.otherValueLables.mode === "hide")
-			this.toggleOldValueLabelsVisibility();
-		const chartsUpdatePromises = chartsWithLabels.map((chart, index) => {
-			const chartScales = this.getChartScales(scales, chart);
-			return this.chartsValueLabels[index].update(chartScales, data[dataOptions.dataSource], chart.valueLabels);
-		});
-		Promise.all(chartsUpdatePromises).then(() => {
-			ValueLabelsCollision.resolveValueLabelsCollisions(
-				this.getAllValueLabels(),
-				this.options.canvas.valueLabels
-			);
-		});
-	}
-	toggleOldValueLabelsVisibility() {
-		const oldValueLabels = this.getAllValueLabels();
-		oldValueLabels.each(function () {
-			if (this.style.display === "none") select(this).style("display", "block");
-		});
-	}
-	getAllValueLabels() {
-		const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
-		return block.selectAll(`.${ChartValueLabels.valueLabelClass}`);
-	}
-	getChartScales(scales, chart) {
-		return {
-			key: scales.key,
-			value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
-		};
-	}
+    constructor(options) {
+        this.options = options;
+        this.chartsValueLabels = [];
+    }
+    render(scales, charts, data, dataOptions) {
+        const valueLabelsSettings = this.options.canvas.valueLabels;
+        const chartsWithLabels = charts.filter((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show; });
+        if (chartsWithLabels.length === 0)
+            return;
+        chartsWithLabels.forEach((chart) => {
+            const chartScales = this.getChartScales(scales, chart);
+            const chartValueLabels = new ChartValueLabels(this.options, chart);
+            this.chartsValueLabels.push(chartValueLabels);
+            chartValueLabels.render(chartScales, data[dataOptions.dataSource]);
+        });
+        const valueLabels = this.getAllValueLabels();
+        ValueLabelsCollision.resolveValueLabelsCollisions(valueLabels, valueLabelsSettings);
+    }
+    update(scales, charts, data, dataOptions, newCanvasOptions) {
+        this.options.canvas.valueLabels = newCanvasOptions;
+        const chartsWithLabels = charts.filter((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show; });
+        if (chartsWithLabels.length === 0)
+            return;
+        if (this.options.canvas.valueLabels.collision.otherValueLables.mode === "hide")
+            this.toggleOldValueLabelsVisibility();
+        const chartsUpdatePromises = chartsWithLabels.map((chart, index) => {
+            const chartScales = this.getChartScales(scales, chart);
+            return this.chartsValueLabels[index].update(chartScales, data[dataOptions.dataSource], chart.valueLabels);
+        });
+        Promise.all(chartsUpdatePromises).then(() => {
+            ValueLabelsCollision.resolveValueLabelsCollisions(this.getAllValueLabels(), this.options.canvas.valueLabels);
+        });
+    }
+    toggleOldValueLabelsVisibility() {
+        const oldValueLabels = this.getAllValueLabels();
+        oldValueLabels.each(function () {
+            if (this.style.display === "none")
+                select(this).style("display", "block");
+        });
+    }
+    getAllValueLabels() {
+        const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
+        return block.selectAll(`.${ChartValueLabels.valueLabelClass}`);
+    }
+    getChartScales(scales, chart) {
+        return {
+            key: scales.key,
+            value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
+        };
+    }
 }

package/lib/engine/features/valueLabels/valueLabelsHelper.d.ts

@@ -4,11 +4,5 @@ import { Scales } from "../../../engine/features/scale/scale";
 import { Segment } from "../../twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
 import { MdtChartsDataRow } from "../../../config/config";
 export declare class ValueLabelsAttrsProvider {
-	getAttrs(
-		globalOptions: ValueLabelsOptions,
-		valueLabels: TwoDimChartValueLabelsOptions,
-		scales: Scales,
-		datumField: string,
-		dataRowAccessor: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow
-	): ValueLabelAttrs;
+    getAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, datumField: string, dataRowAccessor: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow): ValueLabelAttrs;
 }

package/lib/engine/features/valueLabels/valueLabelsHelper.js

@@ -1,26 +1,21 @@
 import { Scale } from "../../../engine/features/scale/scale";
 export class ValueLabelsAttrsProvider {
-	getAttrs(globalOptions, valueLabels, scales, datumField, dataRowAccessor) {
-		let attrs = {
-			x: null,
-			y: null,
-			dominantBaseline: valueLabels.dominantBaseline,
-			textAnchor: valueLabels.textAnchor
-		};
-		const orient = globalOptions.canvas.keyAxisOrient;
-		if (orient === "left" || orient === "right") {
-			attrs.x = (d) => valueLabels.handleX(scales.value(valueLabels.handleScaledValue(d, datumField)));
-			attrs.y = (d) =>
-				valueLabels.handleY(
-					Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName])
-				);
-		} else if (orient === "bottom" || orient === "top") {
-			attrs.x = (d) =>
-				valueLabels.handleX(
-					Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName])
-				);
-			attrs.y = (d) => valueLabels.handleY(scales.value(valueLabels.handleScaledValue(d, datumField)));
-		}
-		return attrs;
-	}
+    getAttrs(globalOptions, valueLabels, scales, datumField, dataRowAccessor) {
+        let attrs = {
+            x: null,
+            y: null,
+            dominantBaseline: valueLabels.dominantBaseline,
+            textAnchor: valueLabels.textAnchor
+        };
+        const orient = globalOptions.canvas.keyAxisOrient;
+        if (orient === "left" || orient === "right") {
+            attrs.x = (d) => valueLabels.handleX(scales.value(valueLabels.handleScaledValue(d, datumField)));
+            attrs.y = (d) => valueLabels.handleY(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
+        }
+        else if (orient === "bottom" || orient === "top") {
+            attrs.x = (d) => valueLabels.handleX(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
+            attrs.y = (d) => valueLabels.handleY(scales.value(valueLabels.handleScaledValue(d, datumField)));
+        }
+        return attrs;
+    }
 }

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.d.ts

@@ -3,30 +3,27 @@ import { TwoDimensionalValueLabels } from "../../../model/model";
 import { MdtChartsDataRow } from "../../../config/config";
 export declare type ValueLabelOnCanvasIndex = number;
 export interface BoundingRect {
-	x: number;
-	y: number;
-	width: number;
-	height: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
 }
 export interface ValueLabelElementRectInfo {
-	index: ValueLabelOnCanvasIndex;
-	boundingClientRect: BoundingRect;
+    index: ValueLabelOnCanvasIndex;
+    boundingClientRect: BoundingRect;
 }
 export interface ValueLabelElement extends ValueLabelElementRectInfo {
-	svgElement: SVGTextElement;
+    svgElement: SVGTextElement;
 }
 export interface LabelVisibility {
-	index: ValueLabelOnCanvasIndex;
-	isVisible: boolean;
+    index: ValueLabelOnCanvasIndex;
+    isVisible: boolean;
 }
 export declare class ValueLabelsCollision {
-	static resolveValueLabelsCollisions(
-		newValueLabels: Selection<SVGTextElement, MdtChartsDataRow, SVGGElement, unknown>,
-		valueLabelsSettings: TwoDimensionalValueLabels
-	): void;
-	private static getValueLabelElementsRectInfo;
-	private static shiftValueLabelsCollision;
-	private static handleCollisionShift;
-	private static toggleValueLabelElementsVisibility;
-	private static changeLabelElementCoordinateByAxis;
+    static resolveValueLabelsCollisions(newValueLabels: Selection<SVGTextElement, MdtChartsDataRow, SVGGElement, unknown>, valueLabelsSettings: TwoDimensionalValueLabels): void;
+    private static getValueLabelElementsRectInfo;
+    private static shiftValueLabelsCollision;
+    private static handleCollisionShift;
+    private static toggleValueLabelElementsVisibility;
+    private static changeLabelElementCoordinateByAxis;
 }

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.js

@@ -1,50 +1,51 @@
 import { select } from "d3-selection";
 import { ValueLabelsCollisionHelper } from "../../../engine/features/valueLabelsCollision/valueLabelsCollisionHelper";
 export class ValueLabelsCollision {
-	static resolveValueLabelsCollisions(newValueLabels, valueLabelsSettings) {
-		const valueLabelElementsRectInfo = this.getValueLabelElementsRectInfo(newValueLabels);
-		this.shiftValueLabelsCollision(valueLabelElementsRectInfo, valueLabelsSettings.collision.chartBlock);
-		if (valueLabelsSettings.collision.otherValueLables.mode === "hide")
-			this.toggleValueLabelElementsVisibility(valueLabelElementsRectInfo);
-	}
-	static getValueLabelElementsRectInfo(valueLabels) {
-		let ValueLabelElementsReactInfo = [];
-		valueLabels.each(function (_, index) {
-			const { height, width } = this.getBoundingClientRect();
-			const x = +this.getAttribute("x");
-			const y = +this.getAttribute("y");
-			ValueLabelElementsReactInfo.push({
-				index,
-				svgElement: this,
-				boundingClientRect: { x, y, width, height }
-			});
-		});
-		return ValueLabelElementsReactInfo;
-	}
-	static shiftValueLabelsCollision(valueLabelElementsRectInfo, chartBlock) {
-		valueLabelElementsRectInfo.forEach((element) => {
-			this.handleCollisionShift(chartBlock, element);
-		});
-	}
-	static handleCollisionShift(chartBlock, element) {
-		const sides = Object.keys(chartBlock);
-		sides.forEach((side) => {
-			const blockSide = chartBlock[side];
-			const axisCoordinate = side === "left" || side === "right" ? "x" : "y";
-			if (blockSide.mode === "shift" && blockSide.hasCollision(element.boundingClientRect)) {
-				blockSide.shiftCoordinate(element.boundingClientRect);
-				this.changeLabelElementCoordinateByAxis(element, axisCoordinate);
-			}
-		});
-	}
-	static toggleValueLabelElementsVisibility(elements) {
-		const labelsVisibility = ValueLabelsCollisionHelper.calculateValueLabelsVisibility(elements);
-		labelsVisibility.forEach((label) => {
-			const labelInfo = elements.find((element) => element.index === label.index);
-			if (labelInfo && !label.isVisible) select(labelInfo.svgElement).style("display", "none");
-		});
-	}
-	static changeLabelElementCoordinateByAxis(element, axis) {
-		select(element.svgElement).attr(axis, element.boundingClientRect[axis]);
-	}
+    static resolveValueLabelsCollisions(newValueLabels, valueLabelsSettings) {
+        const valueLabelElementsRectInfo = this.getValueLabelElementsRectInfo(newValueLabels);
+        this.shiftValueLabelsCollision(valueLabelElementsRectInfo, valueLabelsSettings.collision.chartBlock);
+        if (valueLabelsSettings.collision.otherValueLables.mode === "hide")
+            this.toggleValueLabelElementsVisibility(valueLabelElementsRectInfo);
+    }
+    static getValueLabelElementsRectInfo(valueLabels) {
+        let ValueLabelElementsReactInfo = [];
+        valueLabels.each(function (_, index) {
+            const { height, width } = this.getBoundingClientRect();
+            const x = +this.getAttribute("x");
+            const y = +this.getAttribute("y");
+            ValueLabelElementsReactInfo.push({
+                index,
+                svgElement: this,
+                boundingClientRect: { x, y, width, height }
+            });
+        });
+        return ValueLabelElementsReactInfo;
+    }
+    static shiftValueLabelsCollision(valueLabelElementsRectInfo, chartBlock) {
+        valueLabelElementsRectInfo.forEach((element) => {
+            this.handleCollisionShift(chartBlock, element);
+        });
+    }
+    static handleCollisionShift(chartBlock, element) {
+        const sides = Object.keys(chartBlock);
+        sides.forEach((side) => {
+            const blockSide = chartBlock[side];
+            const axisCoordinate = side === "left" || side === "right" ? "x" : "y";
+            if (blockSide.mode === "shift" && blockSide.hasCollision(element.boundingClientRect)) {
+                blockSide.shiftCoordinate(element.boundingClientRect);
+                this.changeLabelElementCoordinateByAxis(element, axisCoordinate);
+            }
+        });
+    }
+    static toggleValueLabelElementsVisibility(elements) {
+        const labelsVisibility = ValueLabelsCollisionHelper.calculateValueLabelsVisibility(elements);
+        labelsVisibility.forEach((label) => {
+            const labelInfo = elements.find((element) => element.index === label.index);
+            if (labelInfo && !label.isVisible)
+                select(labelInfo.svgElement).style("display", "none");
+        });
+    }
+    static changeLabelElementCoordinateByAxis(element, axis) {
+        select(element.svgElement).attr(axis, element.boundingClientRect[axis]);
+    }
 }

package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.d.ts

@@ -1,8 +1,5 @@
-import {
-	LabelVisibility,
-	ValueLabelElementRectInfo
-} from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
+import { LabelVisibility, ValueLabelElementRectInfo } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
 export declare class ValueLabelsCollisionHelper {
-	static calculateValueLabelsVisibility(elements: ValueLabelElementRectInfo[]): Map<number, LabelVisibility>;
-	private static isOverlapping;
+    static calculateValueLabelsVisibility(elements: ValueLabelElementRectInfo[]): Map<number, LabelVisibility>;
+    private static isOverlapping;
 }