mdt-charts 1.28.1 → 1.29.0

package/lib/engine/twoDimensionalNotation/area/area.js

@@ -8,244 +8,278 @@ import { getStackedData, LineGeneratorFactory } from "../../../engine/twoDimensi
 import { Line } from "../../../engine/twoDimensionalNotation/line/line";
 import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
 export class Area {
-    constructor(options) {
-        this.options = options;
-    }
-    static get(options) {
-        return new Area(options);
-    }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        if (chart.isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart);
-        else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart);
-    }
-    update(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        let promises;
-        if (chart.isSegmented) {
-            promises = this.updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient);
-        }
-        else {
-            promises = this.updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient);
-        }
-        return promises;
-    }
-    updateColors(block, chart) {
-        chart.data.valueFields.forEach((_vf, valueIndex) => {
-            const chartGroup = block.svg.getChartGroup(chart.index);
-            const areaPath = chartGroup.select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            this.setChartFillStyle(chart, areaPath, valueIndex);
-            if (chart.areaViewOptions.borderLine.on) {
-                const borderLinePath = chartGroup.select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-                DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, "stroke");
-            }
-            MarkDot.updateColors(block, chart, valueIndex);
-        });
-    }
-    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        chart.data.valueFields.forEach((field, valueIndex) => {
-            this.renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex);
-            if (lineGeneratorFactory)
-                this.renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex);
-            MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
-        });
-    }
-    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        this.renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart);
-        if (lineGeneratorFactory)
-            this.renderBorderLineSegmented(lineGeneratorFactory, block, data, chart);
-    }
-    updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        const promises = [];
-        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        chart.data.valueFields.forEach((field, valueIndex) => {
-            const chartGroup = block.svg.getChartGroup(chart.index);
-            const areaProm = this.updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
-            promises.push(areaProm);
-            if (lineGeneratorFactory) {
-                const lineProm = this.updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
-                promises.push(lineProm);
-            }
-            MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
-        });
-        return promises;
-    }
-    updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        return [
-            this.updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient),
-            this.updateBorderLineSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart)
-        ];
-    }
-    updateGroupedPath(block, areaObject, areaGenerator, newData) {
-        return new Promise((resolve) => {
-            if (areaObject.size() === 0) {
-                resolve("");
-                return;
-            }
-            let areaHandler = areaObject;
-            if (block.transitionManager.durations.chartUpdate > 0)
-                areaHandler = areaHandler
-                    .interrupt()
-                    .transition()
-                    .duration(block.transitionManager.durations.chartUpdate)
-                    .on("end", () => resolve(""));
-            areaHandler.attr("d", areaGenerator(newData));
-            if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve("");
-        });
-    }
-    updateSegmentedPath(block, areasObjects, areaGenerator) {
-        return new Promise((resolve) => {
-            if (areasObjects.size() === 0) {
-                resolve("");
-                return;
-            }
-            let areaHandler = areasObjects;
-            if (block.transitionManager.durations.chartUpdate > 0)
-                areaHandler = areaHandler
-                    .interrupt()
-                    .transition()
-                    .duration(block.transitionManager.durations.chartUpdate)
-                    .on("end", () => resolve(""));
-            areaHandler.attr("d", (d) => areaGenerator(d));
-            if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve("");
-        });
-    }
-    setChartFillStyle(chart, path, valueIndex) {
-        if (chart.areaViewOptions.fill.type === "gradient") {
-            path.style("fill", `url(#${chart.areaViewOptions.fill.ids[valueIndex]})`);
-        }
-        else
-            DomHelper.setChartStyle(path, chart.style, valueIndex, "fill");
-    }
-    createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
-        return new AreaGeneratorFactory({
-            keyAxisOrient,
-            scales,
-            keyFieldName: keyField.name,
-            margin,
-            shouldRender: chart.lineLikeViewOptions.renderForKey,
-            curve: this.options.staticSettings.shape.curve.type
-        });
-    }
-    createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
-        return new LineGeneratorFactory({
-            keyAxisOrient,
-            scales,
-            keyFieldName: keyField.name,
-            margin,
-            shouldRender: chart.lineLikeViewOptions.renderForKey,
-            curve: this.options.staticSettings.shape.curve.type
-        });
-    }
-    renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex) {
-        const area = areaGeneratorFactory.getAreaGenerator(field.name);
-        const path = block.svg
-            .getChartGroup(chart.index)
-            .append("path")
-            .attr("d", area(data))
-            .attr("class", Area.areaChartClass)
-            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
-            .style("pointer-events", "none");
-        DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-        this.setChartFillStyle(chart, path, valueIndex);
-    }
-    renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex) {
-        const lineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
-        const linePath = block.svg
-            .getChartGroup(chart.index)
-            .append("path")
-            .attr("d", lineGenerator(data))
-            .attr("class", `${Area.areaBorderLineClass}`)
-            .style("fill", "none")
-            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
-            .style("pointer-events", "none");
-        DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-        DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, "stroke");
-    }
-    renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map((field) => field.name));
-        const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
-        const areas = block.svg
-            .getChartGroup(chart.index)
-            .selectAll(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData)
-            .enter()
-            .append("path")
-            .attr("d", (d) => areaGenerator(d))
-            .attr("class", Area.areaChartClass)
-            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
-            .style("pointer-events", "none");
-        const thisClass = this;
-        areas.each(function (_, i) {
-            thisClass.setChartFillStyle(chart, select(this), i);
-            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
-        });
-        stackedData.forEach((dataset, index) => {
-            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
-        });
-    }
-    renderBorderLineSegmented(generatorFactory, block, data, chart) {
-        let stackedData = getStackedData(data, chart);
-        const lineGenerator = generatorFactory.getSegmentedLineGenerator();
-        const lineBuilder = new LineBuilder({
-            elementAccessors: { getBlock: () => block }
-        }, chart, lineGenerator);
-        let lines = lineBuilder.renderSegmented(stackedData, Area.areaBorderLineClass);
-        lineBuilder.setSegmentColor(lines, chart.style.elementColors);
-        lines.each(function (_, i) {
-            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
-        });
-    }
-    updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map((field) => field.name));
-        const generatorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
-        const areas = this.getAllAreasWithNewData(stackedData, block, chart, Area.areaChartClass);
-        const prom = this.updateSegmentedPath(block, areas, areaGenerator);
-        areas.each(function (dataset, index) {
-            // '1' - атрибут, показывающий координаты согласно полю значения
-            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
-        });
-        return prom;
-    }
-    updateBorderLineSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
-        let stackedData = getStackedData(newData, chart);
-        const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const lineGenerator = generatorFactory.getSegmentedLineGenerator();
-        const lineBuilder = new LineBuilder({
-            elementAccessors: { getBlock: () => block }
-        }, chart, lineGenerator);
-        let lines = lineBuilder.getAllLinesWithNewData(stackedData, Area.areaBorderLineClass);
-        let prom = lineBuilder.updateSegmentedPath(lines);
-        return prom;
-    }
-    updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
-        const areaGenerator = areaGeneratorFactory.getAreaGenerator(field.name);
-        const areaObject = chartGroup.select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-        return this.updateGroupedPath(block, areaObject, areaGenerator, newData);
-    }
-    updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
-        const borderLineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
-        const borderLineObject = chartGroup.select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-        return Line.updateGroupedPath(block, borderLineObject, borderLineGenerator, newData);
-    }
-    getAllAreasWithNewData(stackedData, block, chart, lineClass) {
-        return block.svg
-            .getChartGroup(chart.index)
-            .selectAll(`path.${lineClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData);
-    }
-    getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
-        return (chart.areaViewOptions.borderLine.on &&
-            this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField));
-    }
+	constructor(options) {
+		this.options = options;
+	}
+	static get(options) {
+		return new Area(options);
+	}
+	render(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+		if (chart.isSegmented) this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart);
+		else this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart);
+	}
+	update(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+		let promises;
+		if (chart.isSegmented) {
+			promises = this.updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient);
+		} else {
+			promises = this.updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient);
+		}
+		return promises;
+	}
+	updateColors(block, chart) {
+		chart.data.valueFields.forEach((_vf, valueIndex) => {
+			const chartGroup = block.svg.getChartGroup(chart.index);
+			const areaPath = chartGroup.select(
+				`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`
+			);
+			this.setChartFillStyle(chart, areaPath, valueIndex);
+			if (chart.areaViewOptions.borderLine.on) {
+				const borderLinePath = chartGroup.select(
+					`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(
+						chart.cssClasses
+					)}.chart-element-${valueIndex}`
+				);
+				DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, "stroke");
+			}
+			MarkDot.updateColors(block, chart, valueIndex);
+		});
+	}
+	renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+		const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		chart.data.valueFields.forEach((field, valueIndex) => {
+			this.renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex);
+			if (lineGeneratorFactory)
+				this.renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex);
+			MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
+		});
+	}
+	renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+		const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		this.renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart);
+		if (lineGeneratorFactory) this.renderBorderLineSegmented(lineGeneratorFactory, block, data, chart);
+	}
+	updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+		const promises = [];
+		const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		chart.data.valueFields.forEach((field, valueIndex) => {
+			const chartGroup = block.svg.getChartGroup(chart.index);
+			const areaProm = this.updateArea(
+				areaGeneratorFactory,
+				chartGroup,
+				block,
+				field,
+				chart,
+				newData,
+				valueIndex
+			);
+			promises.push(areaProm);
+			if (lineGeneratorFactory) {
+				const lineProm = this.updateBorderLine(
+					lineGeneratorFactory,
+					chartGroup,
+					block,
+					field,
+					chart,
+					newData,
+					valueIndex
+				);
+				promises.push(lineProm);
+			}
+			MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
+		});
+		return promises;
+	}
+	updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+		return [
+			this.updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient),
+			this.updateBorderLineSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart)
+		];
+	}
+	updateGroupedPath(block, areaObject, areaGenerator, newData) {
+		return new Promise((resolve) => {
+			if (areaObject.size() === 0) {
+				resolve("");
+				return;
+			}
+			let areaHandler = areaObject;
+			if (block.transitionManager.durations.chartUpdate > 0)
+				areaHandler = areaHandler
+					.interrupt()
+					.transition()
+					.duration(block.transitionManager.durations.chartUpdate)
+					.on("end", () => resolve(""));
+			areaHandler.attr("d", areaGenerator(newData));
+			if (block.transitionManager.durations.chartUpdate <= 0) resolve("");
+		});
+	}
+	updateSegmentedPath(block, areasObjects, areaGenerator) {
+		return new Promise((resolve) => {
+			if (areasObjects.size() === 0) {
+				resolve("");
+				return;
+			}
+			let areaHandler = areasObjects;
+			if (block.transitionManager.durations.chartUpdate > 0)
+				areaHandler = areaHandler
+					.interrupt()
+					.transition()
+					.duration(block.transitionManager.durations.chartUpdate)
+					.on("end", () => resolve(""));
+			areaHandler.attr("d", (d) => areaGenerator(d));
+			if (block.transitionManager.durations.chartUpdate <= 0) resolve("");
+		});
+	}
+	setChartFillStyle(chart, path, valueIndex) {
+		if (chart.areaViewOptions.fill.type === "gradient") {
+			path.style("fill", `url(#${chart.areaViewOptions.fill.ids[valueIndex]})`);
+		} else DomHelper.setChartStyle(path, chart.style, valueIndex, "fill");
+	}
+	createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+		return new AreaGeneratorFactory({
+			keyAxisOrient,
+			scales,
+			keyFieldName: keyField.name,
+			margin,
+			shouldRender: chart.lineLikeViewOptions.renderForKey,
+			curve: this.options.staticSettings.shape.curve.type
+		});
+	}
+	createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+		return new LineGeneratorFactory({
+			keyAxisOrient,
+			scales,
+			keyFieldName: keyField.name,
+			margin,
+			shouldRender: chart.lineLikeViewOptions.renderForKey,
+			curve: this.options.staticSettings.shape.curve.type
+		});
+	}
+	renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex) {
+		const area = areaGeneratorFactory.getAreaGenerator(field.name);
+		const path = block.svg
+			.getChartGroup(chart.index)
+			.append("path")
+			.attr("d", area(data))
+			.attr("class", Area.areaChartClass)
+			.style("clip-path", `url(#${block.svg.getClipPathId()})`)
+			.style("pointer-events", "none");
+		DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+		this.setChartFillStyle(chart, path, valueIndex);
+	}
+	renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex) {
+		const lineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
+		const linePath = block.svg
+			.getChartGroup(chart.index)
+			.append("path")
+			.attr("d", lineGenerator(data))
+			.attr("class", `${Area.areaBorderLineClass}`)
+			.style("fill", "none")
+			.style("clip-path", `url(#${block.svg.getClipPathId()})`)
+			.style("pointer-events", "none");
+		DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+		DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, "stroke");
+	}
+	renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart) {
+		const stackedData = getStackedDataWithOwn(
+			data,
+			chart.data.valueFields.map((field) => field.name)
+		);
+		const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
+		const areas = block.svg
+			.getChartGroup(chart.index)
+			.selectAll(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.data(stackedData)
+			.enter()
+			.append("path")
+			.attr("d", (d) => areaGenerator(d))
+			.attr("class", Area.areaChartClass)
+			.style("clip-path", `url(#${block.svg.getClipPathId()})`)
+			.style("pointer-events", "none");
+		const thisClass = this;
+		areas.each(function (_, i) {
+			thisClass.setChartFillStyle(chart, select(this), i);
+			DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+		});
+		stackedData.forEach((dataset, index) => {
+			MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
+		});
+	}
+	renderBorderLineSegmented(generatorFactory, block, data, chart) {
+		let stackedData = getStackedData(data, chart);
+		const lineGenerator = generatorFactory.getSegmentedLineGenerator();
+		const lineBuilder = new LineBuilder(
+			{
+				elementAccessors: { getBlock: () => block }
+			},
+			chart,
+			lineGenerator
+		);
+		let lines = lineBuilder.renderSegmented(stackedData, Area.areaBorderLineClass);
+		lineBuilder.setSegmentColor(lines, chart.style.elementColors);
+		lines.each(function (_, i) {
+			DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+		});
+	}
+	updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+		const stackedData = getStackedDataWithOwn(
+			newData,
+			chart.data.valueFields.map((field) => field.name)
+		);
+		const generatorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
+		const areas = this.getAllAreasWithNewData(stackedData, block, chart, Area.areaChartClass);
+		const prom = this.updateSegmentedPath(block, areas, areaGenerator);
+		areas.each(function (dataset, index) {
+			// '1' - атрибут, показывающий координаты согласно полю значения
+			MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
+		});
+		return prom;
+	}
+	updateBorderLineSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+		let stackedData = getStackedData(newData, chart);
+		const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+		const lineGenerator = generatorFactory.getSegmentedLineGenerator();
+		const lineBuilder = new LineBuilder(
+			{
+				elementAccessors: { getBlock: () => block }
+			},
+			chart,
+			lineGenerator
+		);
+		let lines = lineBuilder.getAllLinesWithNewData(stackedData, Area.areaBorderLineClass);
+		let prom = lineBuilder.updateSegmentedPath(lines);
+		return prom;
+	}
+	updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
+		const areaGenerator = areaGeneratorFactory.getAreaGenerator(field.name);
+		const areaObject = chartGroup.select(
+			`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`
+		);
+		return this.updateGroupedPath(block, areaObject, areaGenerator, newData);
+	}
+	updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
+		const borderLineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
+		const borderLineObject = chartGroup.select(
+			`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`
+		);
+		return Line.updateGroupedPath(block, borderLineObject, borderLineGenerator, newData);
+	}
+	getAllAreasWithNewData(stackedData, block, chart, lineClass) {
+		return block.svg
+			.getChartGroup(chart.index)
+			.selectAll(`path.${lineClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+			.data(stackedData);
+	}
+	getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+		return (
+			chart.areaViewOptions.borderLine.on &&
+			this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField)
+		);
+	}
 }
 Area.areaChartClass = "area";
 Area.areaBorderLineClass = "area-border-line";

package/lib/engine/twoDimensionalNotation/area/areaGenerator.d.ts

@@ -3,12 +3,20 @@ import { LineLikeGeneratorMiddleware } from "../lineLike/generatorMiddleware/lin
 import { MdtChartsDataRow } from "../../../config/config";
 import { CoordinateGetter } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 interface AreaGeneratorOptions {
-    middlewares: LineLikeGeneratorMiddleware[];
+	middlewares: LineLikeGeneratorMiddleware[];
 }
 export declare class AreaGenerator {
-    private readonly options;
-    constructor(options: AreaGeneratorOptions);
-    getVertical(xValue: CoordinateGetter, y0Value: CoordinateGetter, y1Value: CoordinateGetter): IArea<MdtChartsDataRow>;
-    getHorizontal(x0Value: CoordinateGetter, x1Value: CoordinateGetter, yValue: CoordinateGetter): IArea<MdtChartsDataRow>;
+	private readonly options;
+	constructor(options: AreaGeneratorOptions);
+	getVertical(
+		xValue: CoordinateGetter,
+		y0Value: CoordinateGetter,
+		y1Value: CoordinateGetter
+	): IArea<MdtChartsDataRow>;
+	getHorizontal(
+		x0Value: CoordinateGetter,
+		x1Value: CoordinateGetter,
+		yValue: CoordinateGetter
+	): IArea<MdtChartsDataRow>;
 }
 export {};

package/lib/engine/twoDimensionalNotation/area/areaGenerator.js

@@ -1,16 +1,16 @@
 import { area } from "d3-shape";
 export class AreaGenerator {
-    constructor(options) {
-        this.options = options;
-    }
-    getVertical(xValue, y0Value, y1Value) {
-        const generator = area().x(xValue).y0(y0Value).y1(y1Value);
-        this.options.middlewares.forEach((middleware) => middleware.handle(generator));
-        return generator;
-    }
-    getHorizontal(x0Value, x1Value, yValue) {
-        const generator = area().x0(x0Value).x1(x1Value).y(yValue);
-        this.options.middlewares.forEach((middleware) => middleware.handle(generator));
-        return generator;
-    }
+	constructor(options) {
+		this.options = options;
+	}
+	getVertical(xValue, y0Value, y1Value) {
+		const generator = area().x(xValue).y0(y0Value).y1(y1Value);
+		this.options.middlewares.forEach((middleware) => middleware.handle(generator));
+		return generator;
+	}
+	getHorizontal(x0Value, x1Value, yValue) {
+		const generator = area().x0(x0Value).x1(x1Value).y(yValue);
+		this.options.middlewares.forEach((middleware) => middleware.handle(generator));
+		return generator;
+	}
 }

package/lib/engine/twoDimensionalNotation/area/areaHelper.d.ts

@@ -2,8 +2,8 @@ import { Area as IArea } from "d3-shape";
 import { MdtChartsDataRow } from "../../../config/config";
 import { LineLikeGeneratorFactoryOptions } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 export declare class AreaGeneratorFactory {
-    private readonly options;
-    constructor(options: LineLikeGeneratorFactoryOptions);
-    getAreaGenerator(valueFieldName: string): IArea<MdtChartsDataRow>;
-    getSegmentedAreaGenerator(): IArea<MdtChartsDataRow>;
+	private readonly options;
+	constructor(options: LineLikeGeneratorFactoryOptions);
+	getAreaGenerator(valueFieldName: string): IArea<MdtChartsDataRow>;
+	getSegmentedAreaGenerator(): IArea<MdtChartsDataRow>;
 }