mdt-charts 1.29.0 → 1.30.0

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

@@ -8,278 +8,244 @@ 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,20 +3,12 @@ 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>;
 }