mdt-charts 1.28.2 → 1.29.0

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

@@ -2,108 +2,119 @@ 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,13 +3,26 @@ 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,155 +8,164 @@ 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,6 +2,11 @@ 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;
 }