mdt-charts 1.28.1 → 1.29.0

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -8,229 +8,367 @@ import { Helper } from "../../helpers/helper";
 import { getStackedDataWithOwn } from "./stackedData/dataStacker";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
 export class Bar {
-    constructor() {
-        this.barItemClass = Bar.barItemClass;
-        this.barSegmentGroupClass = "bar-segment-group";
-        this.createBarPipeline = new Pipeline();
-        this.createSegmentGroupBarsPipeline = new Pipeline();
-        onBarChartInit(this.createBarPipeline, this.createSegmentGroupBarsPipeline);
-    }
-    static get() {
-        return new Bar();
-    }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts) {
-        if (chart.isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings);
-        else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings);
-    }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
-        let promises;
-        if (chart.isSegmented) {
-            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings);
-        }
-        else {
-            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings);
-        }
-        return promises;
-    }
-    updateColors(block, chart) {
-        chart.data.valueFields.forEach((_vf, index) => {
-            const bars = block.svg
-                .getChartGroup(chart.index)
-                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`);
-            DomHelper.setChartStyle(bars, chart.style, index, "fill");
-        });
-    }
-    getAllBarsForChart(block, chartCssClasses) {
-        return block.getSvg().selectAll(`rect.${this.barItemClass}${Helper.getCssClassesLine(chartCssClasses)}`);
-    }
-    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings) {
-        chart.data.valueFields.forEach((field, index) => {
-            let bars = block.svg
-                .getChartGroup(chart.index)
-                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`)
-                .data(data)
-                .enter()
-                .append("rect")
-                .attr("class", this.barItemClass)
-                .style("clip-path", `url(#${block.svg.getClipPathId()})`);
-            bars = this.createBarPipeline.execute(bars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
-            this.fillBarAttrs(bars, barAttrs);
-            DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
-            DomHelper.setChartStyle(bars, chart.style, index, "fill");
-            this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-            if (chart.embeddedLabels !== "none")
-                EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
-        });
-    }
-    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings) {
-        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map((field) => field.name));
-        let groups = block.svg
-            .getChartGroup(chart.index)
-            .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData);
-        if (groups.empty())
-            groups = groups.data(stackedData).enter().append("g").attr("class", this.barSegmentGroupClass);
-        let bars = groups
-            .selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data((d) => d)
-            .enter()
-            .append("rect")
-            .attr("class", this.barItemClass)
-            .style("clip-path", `url(#${block.svg.getClipPathId()})`);
-        bars = this.createBarPipeline.execute(bars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
-        this.fillBarAttrs(bars, barAttrs);
-        this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-        DomHelper.setCssClasses(groups, chart.cssClasses);
-        DomHelper.setCssClasses(bars, chart.cssClasses); // Для обозначения принадлежности бара к конкретному чарту
-        const thisClass = this;
-        groups.each(function (d, i) {
-            const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
-            DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
-            thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, { segmentIndex: i, chart });
-            thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
-        });
-    }
-    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
-        const promises = [];
-        chart.data.valueFields.forEach((valueField, index) => {
-            const indexesOfRemoved = [];
-            block.svg
-                .getChartGroup(chart.index)
-                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
-                .filter((d, i) => {
-                if (newData.findIndex((row) => row[keyField.name] === d[keyField.name]) === -1) {
-                    indexesOfRemoved.push(i); // Набор индексов для встроенных лейблов
-                    return true;
-                }
-                return false;
-            })
-                .transition()
-                .duration(block.transitionManager.durations.elementFadeOut)
-                .style("opacity", 0)
-                .remove();
-            const bars = block.svg
-                .getChartGroup(chart.index)
-                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
-                .filter((d) => newData.findIndex((row) => row[keyField.name] === d[keyField.name]) !== -1)
-                .style("opacity", 1)
-                .data(newData);
-            let newBars = bars
-                .enter()
-                .append("rect")
-                .attr("class", this.barItemClass)
-                .style("clip-path", `url(#${block.svg.getClipPathId()})`);
-            newBars = this.createBarPipeline.execute(newBars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
-            const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
-                bars.style("opacity", null);
-                this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-            });
-            this.fillBarAttrs(newBars, barAttrs);
-            promises.push(prom);
-            this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
-            DomHelper.setCssClasses(newBars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
-            DomHelper.setChartStyle(newBars, chart.style, index, "fill");
-            if (chart.embeddedLabels !== "none") {
-                EmbeddedLabels.removeUnused(block, chart.cssClasses, index, indexesOfRemoved);
-                EmbeddedLabels.update(block, bars, keyAxisOrient, barAttrs, margin, valueField, chart.embeddedLabels, blockSize, newData, index, chart.cssClasses);
-                if (!newBars.empty())
-                    EmbeddedLabels.render(block, newBars, barAttrs, valueField, chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
-                EmbeddedLabels.restoreRemoved(block, bars, barAttrs, valueField, chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses, keyField.name);
-            }
-        });
-        return promises;
-    }
-    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
-        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map((field) => field.name));
-        block.svg
-            .getChartGroup(chart.index)
-            .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .filter((d) => newData.findIndex((row) => row[keyField.name] === d.data[keyField.name]) === -1)
-            .transition()
-            .duration(block.transitionManager.durations.elementFadeOut)
-            .style("opacity", 0)
-            .remove();
-        const groups = block.svg
-            .getChartGroup(chart.index)
-            .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData);
-        const bars = groups
-            .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .filter((d) => newData.findIndex((row) => row[keyField.name] === d.data[keyField.name]) !== -1)
-            .style("opacity", 1)
-            .data((d) => d);
-        let newBars = bars
-            .enter()
-            .append("rect")
-            .attr("class", this.barItemClass)
-            .style("clip-path", `url(#${block.svg.getClipPathId()})`);
-        newBars = this.createBarPipeline.execute(newBars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
-        const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
-            this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-            bars.style("opacity", null);
-        });
-        this.fillBarAttrs(newBars, barAttrs);
-        this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
-        DomHelper.setCssClasses(newBars, chart.cssClasses);
-        const thisClass = this;
-        groups.each(function (d, i) {
-            const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
-            DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
-            thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, { segmentIndex: i, chart });
-            thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
-        });
-        return [prom];
-    }
-    fillBarAttrs(bars, barAttrs, transitionDuration = 0) {
-        return new Promise((resolve) => {
-            if (bars.size() === 0) {
-                resolve("");
-                return;
-            }
-            let barsHandler = bars;
-            if (transitionDuration > 0) {
-                barsHandler = barsHandler
-                    .interrupt()
-                    .transition()
-                    .duration(transitionDuration)
-                    .on("end", () => resolve(""));
-            }
-            barsHandler
-                .attr("x", (d) => barAttrs.x(d))
-                .attr("y", (d) => barAttrs.y(d))
-                .attr("height", (d) => barAttrs.height(d))
-                .attr("width", (d) => barAttrs.width(d));
-            if (transitionDuration <= 0)
-                resolve("");
-        });
-    }
-    setSegmentColor(segments, colorPalette, segmentedIndex) {
-        segments.style("fill", colorPalette[segmentedIndex % colorPalette.length]);
-    }
-    /**
-     * Устнановка координат для удобного обновления.
-     */
-    setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
-        bars.each(function () {
-            const width = DomHelper.getSelectionNumericAttr(select(this), "width");
-            const height = DomHelper.getSelectionNumericAttr(select(this), "height");
-            const orient = keyAxisOrient === "left" || keyAxisOrient === "right" ? "horizontal" : "vertical";
-            let scaleSize = 0.06 * (orient === "vertical" ? width : height);
-            scaleSize = scaleSize > barSettings.barDistance / 2 ? barSettings.barDistance / 2 : scaleSize;
-            this.attrs = {
-                x: DomHelper.getSelectionNumericAttr(select(this), "x"),
-                y: DomHelper.getSelectionNumericAttr(select(this), "y"),
-                width,
-                height,
-                orient,
-                scaleSize
-            };
-        });
-    }
+	constructor() {
+		this.barItemClass = Bar.barItemClass;
+		this.barSegmentGroupClass = "bar-segment-group";
+		this.createBarPipeline = new Pipeline();
+		this.createSegmentGroupBarsPipeline = new Pipeline();
+		onBarChartInit(this.createBarPipeline, this.createSegmentGroupBarsPipeline);
+	}
+	static get() {
+		return new Bar();
+	}
+	render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts) {
+		if (chart.isSegmented)
+			this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings);
+		else
+			this.renderGrouped(
+				block,
+				scales,
+				data,
+				keyField,
+				margin,
+				keyAxisOrient,
+				chart,
+				barsAmounts,
+				blockSize,
+				barSettings
+			);
+	}
+	update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
+		let promises;
+		if (chart.isSegmented) {
+			promises = this.updateSegmented(
+				block,
+				newData,
+				scales,
+				margin,
+				keyAxisOrient,
+				chart,
+				barsAmounts,
+				keyField,
+				barSettings
+			);
+		} else {
+			promises = this.updateGrouped(
+				block,
+				newData,
+				scales,
+				margin,
+				keyAxisOrient,
+				chart,
+				blockSize,
+				barsAmounts,
+				keyField,
+				barSettings
+			);
+		}
+		return promises;
+	}
+	updateColors(block, chart) {
+		chart.data.valueFields.forEach((_vf, index) => {
+			const bars = block.svg
+				.getChartGroup(chart.index)
+				.selectAll(
+					`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(
+						Helper.getCssClassesWithElementIndex(chart.cssClasses, index)
+					)}`
+				);
+			DomHelper.setChartStyle(bars, chart.style, index, "fill");
+		});
+	}
+	getAllBarsForChart(block, chartCssClasses) {
+		return block.getSvg().selectAll(`rect.${this.barItemClass}${Helper.getCssClassesLine(chartCssClasses)}`);
+	}
+	renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings) {
+		chart.data.valueFields.forEach((field, index) => {
+			let bars = block.svg
+				.getChartGroup(chart.index)
+				.selectAll(
+					`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(
+						Helper.getCssClassesWithElementIndex(chart.cssClasses, index)
+					)}`
+				)
+				.data(data)
+				.enter()
+				.append("rect")
+				.attr("class", this.barItemClass)
+				.style("clip-path", `url(#${block.svg.getClipPathId()})`);
+			bars = this.createBarPipeline.execute(bars, chart);
+			const barAttrs = BarHelper.getGroupedBarAttrs(
+				keyAxisOrient,
+				scales,
+				margin,
+				keyField.name,
+				field.name,
+				chart.barViewOptions.barIndexes[index],
+				sum(barsAmounts),
+				barSettings
+			);
+			this.fillBarAttrs(bars, barAttrs);
+			DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
+			DomHelper.setChartStyle(bars, chart.style, index, "fill");
+			this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+			if (chart.embeddedLabels !== "none")
+				EmbeddedLabels.render(
+					block,
+					bars,
+					barAttrs,
+					EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index),
+					chart.embeddedLabels,
+					keyAxisOrient,
+					blockSize,
+					margin,
+					index,
+					chart.cssClasses
+				);
+		});
+	}
+	renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings) {
+		const stackedData = getStackedDataWithOwn(
+			data,
+			chart.data.valueFields.map((field) => field.name)
+		);
+		let groups = block.svg
+			.getChartGroup(chart.index)
+			.selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.data(stackedData);
+		if (groups.empty())
+			groups = groups.data(stackedData).enter().append("g").attr("class", this.barSegmentGroupClass);
+		let bars = groups
+			.selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.data((d) => d)
+			.enter()
+			.append("rect")
+			.attr("class", this.barItemClass)
+			.style("clip-path", `url(#${block.svg.getClipPathId()})`);
+		bars = this.createBarPipeline.execute(bars, chart);
+		const barAttrs = BarHelper.getStackedBarAttr(
+			keyAxisOrient,
+			scales,
+			margin,
+			keyField.name,
+			chart.barViewOptions.barIndexes[0],
+			sum(barsAmounts),
+			barSettings
+		);
+		this.fillBarAttrs(bars, barAttrs);
+		this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+		DomHelper.setCssClasses(groups, chart.cssClasses);
+		DomHelper.setCssClasses(bars, chart.cssClasses); // Для обозначения принадлежности бара к конкретному чарту
+		const thisClass = this;
+		groups.each(function (d, i) {
+			const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
+			DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+			thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, {
+				segmentIndex: i,
+				chart
+			});
+			thisClass.setSegmentColor(
+				select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)),
+				chart.style.elementColors,
+				i
+			);
+		});
+	}
+	updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
+		const promises = [];
+		chart.data.valueFields.forEach((valueField, index) => {
+			const indexesOfRemoved = [];
+			block.svg
+				.getChartGroup(chart.index)
+				.selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
+				.filter((d, i) => {
+					if (newData.findIndex((row) => row[keyField.name] === d[keyField.name]) === -1) {
+						indexesOfRemoved.push(i); // Набор индексов для встроенных лейблов
+						return true;
+					}
+					return false;
+				})
+				.transition()
+				.duration(block.transitionManager.durations.elementFadeOut)
+				.style("opacity", 0)
+				.remove();
+			const bars = block.svg
+				.getChartGroup(chart.index)
+				.selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
+				.filter((d) => newData.findIndex((row) => row[keyField.name] === d[keyField.name]) !== -1)
+				.style("opacity", 1)
+				.data(newData);
+			let newBars = bars
+				.enter()
+				.append("rect")
+				.attr("class", this.barItemClass)
+				.style("clip-path", `url(#${block.svg.getClipPathId()})`);
+			newBars = this.createBarPipeline.execute(newBars, chart);
+			const barAttrs = BarHelper.getGroupedBarAttrs(
+				keyAxisOrient,
+				scales,
+				margin,
+				keyField.name,
+				valueField.name,
+				chart.barViewOptions.barIndexes[index],
+				sum(barsAmounts),
+				barSettings
+			);
+			const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
+				bars.style("opacity", null);
+				this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+			});
+			this.fillBarAttrs(newBars, barAttrs);
+			promises.push(prom);
+			this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
+			DomHelper.setCssClasses(newBars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
+			DomHelper.setChartStyle(newBars, chart.style, index, "fill");
+			if (chart.embeddedLabels !== "none") {
+				EmbeddedLabels.removeUnused(block, chart.cssClasses, index, indexesOfRemoved);
+				EmbeddedLabels.update(
+					block,
+					bars,
+					keyAxisOrient,
+					barAttrs,
+					margin,
+					valueField,
+					chart.embeddedLabels,
+					blockSize,
+					newData,
+					index,
+					chart.cssClasses
+				);
+				if (!newBars.empty())
+					EmbeddedLabels.render(
+						block,
+						newBars,
+						barAttrs,
+						valueField,
+						chart.embeddedLabels,
+						keyAxisOrient,
+						blockSize,
+						margin,
+						index,
+						chart.cssClasses
+					);
+				EmbeddedLabels.restoreRemoved(
+					block,
+					bars,
+					barAttrs,
+					valueField,
+					chart.embeddedLabels,
+					keyAxisOrient,
+					blockSize,
+					margin,
+					index,
+					chart.cssClasses,
+					keyField.name
+				);
+			}
+		});
+		return promises;
+	}
+	updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
+		const stackedData = getStackedDataWithOwn(
+			newData,
+			chart.data.valueFields.map((field) => field.name)
+		);
+		block.svg
+			.getChartGroup(chart.index)
+			.selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.filter((d) => newData.findIndex((row) => row[keyField.name] === d.data[keyField.name]) === -1)
+			.transition()
+			.duration(block.transitionManager.durations.elementFadeOut)
+			.style("opacity", 0)
+			.remove();
+		const groups = block.svg
+			.getChartGroup(chart.index)
+			.selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.data(stackedData);
+		const bars = groups
+			.selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.filter((d) => newData.findIndex((row) => row[keyField.name] === d.data[keyField.name]) !== -1)
+			.style("opacity", 1)
+			.data((d) => d);
+		let newBars = bars
+			.enter()
+			.append("rect")
+			.attr("class", this.barItemClass)
+			.style("clip-path", `url(#${block.svg.getClipPathId()})`);
+		newBars = this.createBarPipeline.execute(newBars, chart);
+		const barAttrs = BarHelper.getStackedBarAttr(
+			keyAxisOrient,
+			scales,
+			margin,
+			keyField.name,
+			chart.barViewOptions.barIndexes[0],
+			sum(barsAmounts),
+			barSettings
+		);
+		const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
+			this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+			bars.style("opacity", null);
+		});
+		this.fillBarAttrs(newBars, barAttrs);
+		this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
+		DomHelper.setCssClasses(newBars, chart.cssClasses);
+		const thisClass = this;
+		groups.each(function (d, i) {
+			const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
+			DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+			thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, {
+				segmentIndex: i,
+				chart
+			});
+			thisClass.setSegmentColor(
+				select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)),
+				chart.style.elementColors,
+				i
+			);
+		});
+		return [prom];
+	}
+	fillBarAttrs(bars, barAttrs, transitionDuration = 0) {
+		return new Promise((resolve) => {
+			if (bars.size() === 0) {
+				resolve("");
+				return;
+			}
+			let barsHandler = bars;
+			if (transitionDuration > 0) {
+				barsHandler = barsHandler
+					.interrupt()
+					.transition()
+					.duration(transitionDuration)
+					.on("end", () => resolve(""));
+			}
+			barsHandler
+				.attr("x", (d) => barAttrs.x(d))
+				.attr("y", (d) => barAttrs.y(d))
+				.attr("height", (d) => barAttrs.height(d))
+				.attr("width", (d) => barAttrs.width(d));
+			if (transitionDuration <= 0) resolve("");
+		});
+	}
+	setSegmentColor(segments, colorPalette, segmentedIndex) {
+		segments.style("fill", colorPalette[segmentedIndex % colorPalette.length]);
+	}
+	/**
+	 * Устнановка координат для удобного обновления.
+	 */
+	setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
+		bars.each(function () {
+			const width = DomHelper.getSelectionNumericAttr(select(this), "width");
+			const height = DomHelper.getSelectionNumericAttr(select(this), "height");
+			const orient = keyAxisOrient === "left" || keyAxisOrient === "right" ? "horizontal" : "vertical";
+			let scaleSize = 0.06 * (orient === "vertical" ? width : height);
+			scaleSize = scaleSize > barSettings.barDistance / 2 ? barSettings.barDistance / 2 : scaleSize;
+			this.attrs = {
+				x: DomHelper.getSelectionNumericAttr(select(this), "x"),
+				y: DomHelper.getSelectionNumericAttr(select(this), "y"),
+				width,
+				height,
+				orient,
+				scaleSize
+			};
+		});
+	}
 }
 Bar.barItemClass = "bar-item";