mdt-charts 1.29.0 → 1.29.1

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

@@ -8,367 +8,229 @@ 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";