mdt-charts 1.29.0 → 1.30.0

package/lib/engine/features/aggregator/aggregator.js

@@ -2,119 +2,108 @@ import { interpolateNumber } from "d3-interpolate";
 import { Helper } from "../../helpers/helper";
 import { ValueFormatter } from "../../valueFormatter";
 export class Aggregator {
-	static render(block, valueField, innerRadius, translate, fontSize, settings) {
-		const aggregator = this.buildConfig(valueField, settings);
-		this.renderText(block, innerRadius, aggregator, fontSize, translate);
-	}
-	static update(block, valueField, settings) {
-		const aggregator = this.buildConfig(valueField, settings);
-		this.updateText(block, aggregator, typeof aggregator.value === "string");
-	}
-	static buildConfig(valueField, settings) {
-		return {
-			name: settings.content.title,
-			value: settings.content.value,
-			format: valueField.format,
-			marginInPercent: settings.margin
-		};
-	}
-	static renderText(block, innerRadius, aggregatorInfo, fontSize, translate) {
-		if (innerRadius > 30) {
-			const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
-			const wrapper = this.renderWrapper(aggregatorObject);
-			wrapper
-				.append("div")
-				.attr("class", this.aggregatorValueClass)
-				.attr("title", this.formatValue(aggregatorInfo.format, aggregatorInfo.value))
-				.style("text-align", "center")
-				.style("font-size", `${fontSize}px`)
-				.text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
-			const titleBlock = wrapper
-				.append("div")
-				.attr("class", this.aggregatorTitleClass)
-				.attr("title", aggregatorInfo.name)
-				.style("text-align", "center")
-				.text(aggregatorInfo.name);
-			this.setTitleFontSize(titleBlock, innerRadius);
-			this.reCalculateAggregatorFontSize(
-				aggregatorObject.node().getBoundingClientRect().width,
-				block,
-				aggregatorInfo.marginInPercent
-			);
-		}
-	}
-	static formatValue(format, value) {
-		if (typeof value === "string") return value;
-		return ValueFormatter.formatField(format, value);
-	}
-	static updateText(block, newAggregator, withoutAnimation) {
-		const aggregatorObject = block.getSvg().select(`.${this.aggregatorObjectClass}`);
-		const thisClass = this;
-		const valueBlock = block.getSvg().select(`.${this.aggregatorValueClass}`);
-		if (withoutAnimation) {
-			valueBlock.text(this.formatValue(newAggregator.format, newAggregator.value));
-			return;
-		}
-		valueBlock
-			.interrupt()
-			.transition()
-			.duration(block.transitionManager.durations.chartUpdate)
-			.tween("text", function () {
-				const newValue =
-					typeof newAggregator.value === "string" ? parseFloat(newAggregator.value) : newAggregator.value;
-				const oldValue = Helper.parseFormattedToNumber(this.textContent, ",");
-				const precision = Helper.calcDigitsAfterDot(newValue);
-				const interpolateFunc = interpolateNumber(oldValue, newValue);
-				return (t) => {
-					this.textContent = thisClass.formatValue(
-						newAggregator.format,
-						parseFloat(interpolateFunc(t).toFixed(precision))
-					);
-					thisClass.reCalculateAggregatorFontSize(
-						aggregatorObject.node().getBoundingClientRect().width,
-						block,
-						newAggregator.marginInPercent
-					);
-				};
-			});
-	}
-	static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
-		const aggregatorValue = block.getSvg().select(`.${this.aggregatorValueClass}`);
-		const sizeCoefficient = 0.25;
-		let fontSize = wrapperSize * sizeCoefficient;
-		aggregatorValue.style("font-size", `${fontSize}px`);
-		const margin = (pad / 100) * wrapperSize;
-		while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - margin * 2 && fontSize > 12) {
-			aggregatorValue.style("font-size", `${(fontSize -= 2)}px`);
-		}
-	}
-	static setTitleFontSize(aggregatorTitle, innerRadius) {
-		const sizeCoefficient = 0.15;
-		aggregatorTitle.style("font-size", `${Math.round(innerRadius * sizeCoefficient)}px`);
-		aggregatorTitle.style("max-height", `${sizeCoefficient * 100}%`);
-	}
-	static renderAggregatorObject(block, innerRadius, translate) {
-		return block
-			.getSvg()
-			.append("foreignObject")
-			.attr("class", this.aggregatorObjectClass)
-			.attr("transform-origin", "center")
-			.attr("width", innerRadius * 2)
-			.attr("height", innerRadius * 2)
-			.attr("transform", `translate(${translate.x - innerRadius}, ${translate.y - innerRadius})`)
-			.style("pointer-events", `none`);
-	}
-	static renderWrapper(aggregatorObject) {
-		return aggregatorObject
-			.append("xhtml:div")
-			.style("width", "100%")
-			.style("height", "100%")
-			.style("border-radius", "50%")
-			.style("display", "flex")
-			.style("flex-direction", "column")
-			.style("justify-content", "center")
-			.style("align-items", "center");
-	}
+    static render(block, valueField, innerRadius, translate, fontSize, settings) {
+        const aggregator = this.buildConfig(valueField, settings);
+        this.renderText(block, innerRadius, aggregator, fontSize, translate);
+    }
+    static update(block, valueField, settings) {
+        const aggregator = this.buildConfig(valueField, settings);
+        this.updateText(block, aggregator, typeof aggregator.value === "string");
+    }
+    static buildConfig(valueField, settings) {
+        return {
+            name: settings.content.title,
+            value: settings.content.value,
+            format: valueField.format,
+            marginInPercent: settings.margin
+        };
+    }
+    static renderText(block, innerRadius, aggregatorInfo, fontSize, translate) {
+        if (innerRadius > 30) {
+            const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
+            const wrapper = this.renderWrapper(aggregatorObject);
+            wrapper
+                .append("div")
+                .attr("class", this.aggregatorValueClass)
+                .attr("title", this.formatValue(aggregatorInfo.format, aggregatorInfo.value))
+                .style("text-align", "center")
+                .style("font-size", `${fontSize}px`)
+                .text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
+            const titleBlock = wrapper
+                .append("div")
+                .attr("class", this.aggregatorTitleClass)
+                .attr("title", aggregatorInfo.name)
+                .style("text-align", "center")
+                .text(aggregatorInfo.name);
+            this.setTitleFontSize(titleBlock, innerRadius);
+            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.marginInPercent);
+        }
+    }
+    static formatValue(format, value) {
+        if (typeof value === "string")
+            return value;
+        return ValueFormatter.formatField(format, value);
+    }
+    static updateText(block, newAggregator, withoutAnimation) {
+        const aggregatorObject = block.getSvg().select(`.${this.aggregatorObjectClass}`);
+        const thisClass = this;
+        const valueBlock = block.getSvg().select(`.${this.aggregatorValueClass}`);
+        if (withoutAnimation) {
+            valueBlock.text(this.formatValue(newAggregator.format, newAggregator.value));
+            return;
+        }
+        valueBlock
+            .interrupt()
+            .transition()
+            .duration(block.transitionManager.durations.chartUpdate)
+            .tween("text", function () {
+            const newValue = typeof newAggregator.value === "string" ? parseFloat(newAggregator.value) : newAggregator.value;
+            const oldValue = Helper.parseFormattedToNumber(this.textContent, ",");
+            const precision = Helper.calcDigitsAfterDot(newValue);
+            const interpolateFunc = interpolateNumber(oldValue, newValue);
+            return (t) => {
+                this.textContent = thisClass.formatValue(newAggregator.format, parseFloat(interpolateFunc(t).toFixed(precision)));
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.marginInPercent);
+            };
+        });
+    }
+    static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
+        const aggregatorValue = block.getSvg().select(`.${this.aggregatorValueClass}`);
+        const sizeCoefficient = 0.25;
+        let fontSize = wrapperSize * sizeCoefficient;
+        aggregatorValue.style("font-size", `${fontSize}px`);
+        const margin = (pad / 100) * wrapperSize;
+        while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - margin * 2 && fontSize > 12) {
+            aggregatorValue.style("font-size", `${(fontSize -= 2)}px`);
+        }
+    }
+    static setTitleFontSize(aggregatorTitle, innerRadius) {
+        const sizeCoefficient = 0.15;
+        aggregatorTitle.style("font-size", `${Math.round(innerRadius * sizeCoefficient)}px`);
+        aggregatorTitle.style("max-height", `${sizeCoefficient * 100}%`);
+    }
+    static renderAggregatorObject(block, innerRadius, translate) {
+        return block
+            .getSvg()
+            .append("foreignObject")
+            .attr("class", this.aggregatorObjectClass)
+            .attr("transform-origin", "center")
+            .attr("width", innerRadius * 2)
+            .attr("height", innerRadius * 2)
+            .attr("transform", `translate(${translate.x - innerRadius}, ${translate.y - innerRadius})`)
+            .style("pointer-events", `none`);
+    }
+    static renderWrapper(aggregatorObject) {
+        return aggregatorObject
+            .append("xhtml:div")
+            .style("width", "100%")
+            .style("height", "100%")
+            .style("border-radius", "50%")
+            .style("display", "flex")
+            .style("flex-direction", "column")
+            .style("justify-content", "center")
+            .style("align-items", "center");
+    }
 }
 Aggregator.aggregatorValueClass = "aggregator-value";
 Aggregator.aggregatorTitleClass = "aggregator-name";

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

@@ -3,26 +3,13 @@ import { Block } from "../../block/block";
 import { ScalesWithSecondary } from "../scale/scale";
 import { Size } from "../../../config/config";
 export declare class Axis {
-	static axesClass: string;
-	static render(
-		block: Block,
-		scales: ScalesWithSecondary,
-		scaleModel: IScaleModel,
-		axisModel: IAxisModel,
-		blockSize: Size
-	): void;
-	static update(
-		block: Block,
-		scales: ScalesWithSecondary,
-		scalesOptions: IScaleModel,
-		axisModel: IAxisModel,
-		blockSize: Size,
-		keyDomainsEquality: boolean
-	): void;
-	static raiseKeyAxis(block: Block, axisOptions: AxisModelOptions): void;
-	private static findAxis;
-	private static renderAxis;
-	private static updateValueAxis;
-	private static updateKeyAxis;
-	private static handleLabelsHighlight;
+    static axesClass: string;
+    static render(block: Block, scales: ScalesWithSecondary, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
+    static update(block: Block, scales: ScalesWithSecondary, scalesOptions: IScaleModel, axisModel: IAxisModel, blockSize: Size, keyDomainsEquality: boolean): void;
+    static raiseKeyAxis(block: Block, axisOptions: AxisModelOptions): void;
+    private static findAxis;
+    private static renderAxis;
+    private static updateValueAxis;
+    private static updateKeyAxis;
+    private static handleLabelsHighlight;
 }

package/lib/engine/features/axis/axis.js

@@ -8,164 +8,155 @@ import { AxisLabelsEventManager } from "./axisLabelsEventManager";
 import { AXIS_VERTICAL_LABEL_PADDING } from "../../../model/margin/twoDim/twoDimMarginModel";
 const MINIMAL_STEP_SIZE_FOR_WRAPPING = 38;
 export class Axis {
-	static render(block, scales, scaleModel, axisModel, blockSize) {
-		var _a;
-		if (axisModel.value.visibility)
-			this.renderAxis(block, scales.value, scaleModel.value, axisModel.value, blockSize);
-		if ((_a = axisModel.valueSecondary) === null || _a === void 0 ? void 0 : _a.visibility)
-			this.renderAxis(
-				block,
-				scales.valueSecondary,
-				scaleModel.valueSecondary,
-				axisModel.valueSecondary,
-				blockSize
-			);
-		if (axisModel.key.visibility) this.renderAxis(block, scales.key, scaleModel.key, axisModel.key, blockSize);
-	}
-	static update(block, scales, scalesOptions, axisModel, blockSize, keyDomainsEquality) {
-		var _a;
-		if (axisModel.value.visibility)
-			this.updateValueAxis(block, scales.value, scalesOptions.value, axisModel.value, blockSize);
-		if ((_a = axisModel.valueSecondary) === null || _a === void 0 ? void 0 : _a.visibility)
-			this.updateValueAxis(
-				block,
-				scales.valueSecondary,
-				scalesOptions.valueSecondary,
-				axisModel.valueSecondary,
-				blockSize
-			);
-		if (axisModel.key.visibility)
-			this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
-	}
-	static raiseKeyAxis(block, axisOptions) {
-		const axisElement = this.findAxis(block, axisOptions.cssClass);
-		axisElement.raise();
-	}
-	static findAxis(block, axisCssClass) {
-		return block.getSvg().select(`g.${axisCssClass}`);
-	}
-	static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
-		const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale);
-		if (axisOptions.type === "value" && scaleOptions.type === "linear")
-			AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
-		else axisGenerator.tickFormat(axisOptions.labels.showTick);
-		const axisElement = block
-			.getSvg()
-			.append("g")
-			.attr("class", `${this.axesClass} ${axisOptions.cssClass} data-label`);
-		AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate);
-		if (!axisOptions.line.visible) axisElement.select(".domain").style("display", "none");
-		if (!axisOptions.labels.visible) {
-			AxisLabelHelper.hideLabels(axisElement);
-			return;
-		}
-		if (axisOptions.type === "key") {
-			if (
-				axisOptions.labels.position === "rotated" &&
-				(axisOptions.orient === "top" || axisOptions.orient === "bottom")
-			)
-				AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
-			if (
-				(axisOptions.orient === "left" || axisOptions.orient === "right") &&
-				Scale.getScaleStep(scale) >= MINIMAL_STEP_SIZE_FOR_WRAPPING
-			)
-				axisElement.selectAll(".tick text").call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
-			else AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
-			AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
-			AxisLabelsEventManager.setHoverEvents(block, axisElement);
-			block.filterEventManager.eventEmitter.subscribe("change", (selectedKeys) => {
-				this.handleLabelsHighlight(axisElement, selectedKeys);
-			});
-		}
-		if (axisOptions.type === "value") {
-			AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
-		}
-		if (axisOptions.labels.defaultTooltip) AxisLabelHelper.setTitles(axisElement, axisOptions);
-	}
-	static updateValueAxis(block, scaleValue, scaleOptions, axisOptions, blockSize) {
-		const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
-		AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
-		const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
-		AxisDomHelper.updateAxisElement(
-			axisGenerator,
-			axisElement,
-			axisOptions.translate,
-			block.transitionManager.durations.chartUpdate
-		).then(() => {
-			if (axisOptions.labels.defaultTooltip) AxisLabelHelper.setTitles(axisElement, axisOptions);
-			if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
-				AxisLabelHelper.cropLabels(block, scaleValue, scaleOptions, axisOptions, blockSize);
-			}
-		});
-	}
-	static updateKeyAxis(block, scaleKey, scaleOptions, axisOptions, blockSize, domainNotUpdated) {
-		const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleKey);
-		if (axisOptions.labels.position === "rotated") {
-			// Задание координат для перевернутых лейблов (если до этого они не были перевернуты)
-			if (axisOptions.orient === "bottom") axisGenerator.tickPadding(-4);
-			else if (axisOptions.orient === "top") axisGenerator.tickPadding(-6);
-		}
-		axisGenerator.tickFormat(axisOptions.labels.showTick);
-		const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
-		AxisLabelsEventManager.removeEvents(axisElement);
-		if (axisOptions.orient === "left" || axisOptions.orient === "right") {
-			axisElement.selectAll(".tick text").attr("y", null);
-			if (axisOptions.orient === "left")
-				axisGenerator.tickPadding(axisOptions.labels.maxSize + AXIS_VERTICAL_LABEL_PADDING);
-		}
-		// Если ключи оси не меняются, то обновление происходит без анимации
-		AxisDomHelper.updateAxisElement(
-			axisGenerator,
-			axisElement,
-			axisOptions.translate,
-			domainNotUpdated ? 0 : block.transitionManager.durations.chartUpdate
-		).then(() => {
-			if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
-				AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
-			}
-			AxisLabelsEventManager.setHoverEvents(block, axisElement);
-			if (axisOptions.labels.defaultTooltip) AxisLabelHelper.setTitles(axisElement, axisOptions);
-			this.handleLabelsHighlight(axisElement, block.filterEventManager.getSelectedKeys());
-		});
-		// Ведется отсчет нескольких кадров, чтобы получить уже 100%-отрендеренные лейблы оси.
-		let frame = 0;
-		const labelHandler = () => {
-			frame++;
-			if (frame < 10) requestAnimationFrame(labelHandler);
-			if (frame === 2) {
-				axisElement.selectAll(".tick").each(function (d) {
-					if (scaleKey.domain().findIndex((key) => key === d) === -1) {
-						select(this).style("opacity", 0);
-					} else {
-						select(this).style("opacity", 1);
-					}
-				});
-			}
-			if (axisOptions.orient === "left" || axisOptions.orient === "right") {
-				if (Scale.getScaleStep(scaleKey) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
-					axisElement.selectAll(".tick text").call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
-				else AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
-				AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
-			}
-			if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
-				if (axisOptions.labels.position === "rotated")
-					AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
-				if (axisOptions.labels.position === "straight")
-					// Обратное выравнивание лейблов, если они были перевернуты, но теперь могут отображаться прямо
-					AxisDomHelper.rotateElementsBack(axisElement);
-				AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
-			}
-		};
-		requestAnimationFrame(labelHandler);
-	}
-	static handleLabelsHighlight(axisElement, selectedKeys) {
-		const labels = axisElement.selectAll(".tick text");
-		if (selectedKeys.length === 0) labels.classed("mdt-charts-opacity-inactive", false);
-		else
-			labels.each(function (data) {
-				const isActive = selectedKeys.includes(data);
-				select(this).classed("mdt-charts-opacity-inactive", !isActive);
-			});
-	}
+    static render(block, scales, scaleModel, axisModel, blockSize) {
+        var _a;
+        if (axisModel.value.visibility)
+            this.renderAxis(block, scales.value, scaleModel.value, axisModel.value, blockSize);
+        if ((_a = axisModel.valueSecondary) === null || _a === void 0 ? void 0 : _a.visibility)
+            this.renderAxis(block, scales.valueSecondary, scaleModel.valueSecondary, axisModel.valueSecondary, blockSize);
+        if (axisModel.key.visibility)
+            this.renderAxis(block, scales.key, scaleModel.key, axisModel.key, blockSize);
+    }
+    static update(block, scales, scalesOptions, axisModel, blockSize, keyDomainsEquality) {
+        var _a;
+        if (axisModel.value.visibility)
+            this.updateValueAxis(block, scales.value, scalesOptions.value, axisModel.value, blockSize);
+        if ((_a = axisModel.valueSecondary) === null || _a === void 0 ? void 0 : _a.visibility)
+            this.updateValueAxis(block, scales.valueSecondary, scalesOptions.valueSecondary, axisModel.valueSecondary, blockSize);
+        if (axisModel.key.visibility)
+            this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
+    }
+    static raiseKeyAxis(block, axisOptions) {
+        const axisElement = this.findAxis(block, axisOptions.cssClass);
+        axisElement.raise();
+    }
+    static findAxis(block, axisCssClass) {
+        return block.getSvg().select(`g.${axisCssClass}`);
+    }
+    static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale);
+        if (axisOptions.type === "value" && scaleOptions.type === "linear")
+            AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
+        else
+            axisGenerator.tickFormat(axisOptions.labels.showTick);
+        const axisElement = block
+            .getSvg()
+            .append("g")
+            .attr("class", `${this.axesClass} ${axisOptions.cssClass} data-label`);
+        AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate);
+        if (!axisOptions.line.visible)
+            axisElement.select(".domain").style("display", "none");
+        if (!axisOptions.labels.visible) {
+            AxisLabelHelper.hideLabels(axisElement);
+            return;
+        }
+        if (axisOptions.type === "key") {
+            if (axisOptions.labels.position === "rotated" &&
+                (axisOptions.orient === "top" || axisOptions.orient === "bottom"))
+                AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
+            if ((axisOptions.orient === "left" || axisOptions.orient === "right") &&
+                Scale.getScaleStep(scale) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
+                axisElement
+                    .selectAll(".tick text")
+                    .call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
+            else
+                AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
+            AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
+            AxisLabelsEventManager.setHoverEvents(block, axisElement);
+            block.filterEventManager.eventEmitter.subscribe("change", (selectedKeys) => {
+                this.handleLabelsHighlight(axisElement, selectedKeys);
+            });
+        }
+        if (axisOptions.type === "value") {
+            AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
+        }
+        if (axisOptions.labels.defaultTooltip)
+            AxisLabelHelper.setTitles(axisElement, axisOptions);
+    }
+    static updateValueAxis(block, scaleValue, scaleOptions, axisOptions, blockSize) {
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
+        AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
+        const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
+        AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate).then(() => {
+            if (axisOptions.labels.defaultTooltip)
+                AxisLabelHelper.setTitles(axisElement, axisOptions);
+            if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
+                AxisLabelHelper.cropLabels(block, scaleValue, scaleOptions, axisOptions, blockSize);
+            }
+        });
+    }
+    static updateKeyAxis(block, scaleKey, scaleOptions, axisOptions, blockSize, domainNotUpdated) {
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleKey);
+        if (axisOptions.labels.position === "rotated") {
+            // Задание координат для перевернутых лейблов (если до этого они не были перевернуты)
+            if (axisOptions.orient === "bottom")
+                axisGenerator.tickPadding(-4);
+            else if (axisOptions.orient === "top")
+                axisGenerator.tickPadding(-6);
+        }
+        axisGenerator.tickFormat(axisOptions.labels.showTick);
+        const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
+        AxisLabelsEventManager.removeEvents(axisElement);
+        if (axisOptions.orient === "left" || axisOptions.orient === "right") {
+            axisElement.selectAll(".tick text").attr("y", null);
+            if (axisOptions.orient === "left")
+                axisGenerator.tickPadding(axisOptions.labels.maxSize + AXIS_VERTICAL_LABEL_PADDING);
+        }
+        // Если ключи оси не меняются, то обновление происходит без анимации
+        AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, domainNotUpdated ? 0 : block.transitionManager.durations.chartUpdate).then(() => {
+            if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
+                AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
+            }
+            AxisLabelsEventManager.setHoverEvents(block, axisElement);
+            if (axisOptions.labels.defaultTooltip)
+                AxisLabelHelper.setTitles(axisElement, axisOptions);
+            this.handleLabelsHighlight(axisElement, block.filterEventManager.getSelectedKeys());
+        });
+        // Ведется отсчет нескольких кадров, чтобы получить уже 100%-отрендеренные лейблы оси.
+        let frame = 0;
+        const labelHandler = () => {
+            frame++;
+            if (frame < 10)
+                requestAnimationFrame(labelHandler);
+            if (frame === 2) {
+                axisElement.selectAll(".tick").each(function (d) {
+                    if (scaleKey.domain().findIndex((key) => key === d) === -1) {
+                        select(this).style("opacity", 0);
+                    }
+                    else {
+                        select(this).style("opacity", 1);
+                    }
+                });
+            }
+            if (axisOptions.orient === "left" || axisOptions.orient === "right") {
+                if (Scale.getScaleStep(scaleKey) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
+                    axisElement
+                        .selectAll(".tick text")
+                        .call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
+                else
+                    AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
+                AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
+            }
+            if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
+                if (axisOptions.labels.position === "rotated")
+                    AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
+                if (axisOptions.labels.position === "straight")
+                    // Обратное выравнивание лейблов, если они были перевернуты, но теперь могут отображаться прямо
+                    AxisDomHelper.rotateElementsBack(axisElement);
+                AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
+            }
+        };
+        requestAnimationFrame(labelHandler);
+    }
+    static handleLabelsHighlight(axisElement, selectedKeys) {
+        const labels = axisElement.selectAll(".tick text");
+        if (selectedKeys.length === 0)
+            labels.classed("mdt-charts-opacity-inactive", false);
+        else
+            labels.each(function (data) {
+                const isActive = selectedKeys.includes(data);
+                select(this).classed("mdt-charts-opacity-inactive", !isActive);
+            });
+    }
 }
 Axis.axesClass = NamesHelper.getClassName("axis");

package/lib/engine/features/axis/axisDomHelper.d.ts

@@ -2,11 +2,6 @@ import { Selection, BaseType } from "d3-selection";
 import { Axis as IAxis } from "d3-axis";
 import { TranslateModel } from "../../../model/model";
 export declare class AxisDomHelper {
-	static updateAxisElement(
-		axisGenerator: IAxis<any>,
-		axisElement: Selection<SVGGElement, any, BaseType, any>,
-		translate: TranslateModel,
-		transitionDuration?: number
-	): Promise<string>;
-	static rotateElementsBack(axisElement: Selection<SVGGElement, unknown, HTMLElement, any>): void;
+    static updateAxisElement(axisGenerator: IAxis<any>, axisElement: Selection<SVGGElement, any, BaseType, any>, translate: TranslateModel, transitionDuration?: number): Promise<string>;
+    static rotateElementsBack(axisElement: Selection<SVGGElement, unknown, HTMLElement, any>): void;
 }