mdt-charts 1.28.2 → 1.29.0

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

@@ -8,176 +8,212 @@ 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,5 +4,11 @@ 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,21 +1,26 @@
 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,27 +3,30 @@ 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,51 +1,50 @@
 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,5 +1,8 @@
-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;
 }