mdt-charts 1.29.0 → 1.29.1

package/lib/engine/twoDimensionalNotation/dot/dotChart.js

@@ -7,139 +7,118 @@ import { BarHelper, DotChartSettingsStore } from "../bar/barHelper";
  * @alpha experimental feature. Need to refactor.
  */
 export class CanvasDotChart {
-	constructor(options) {
-		this.options = options;
-		this.dotChartItemClass = NamesHelper.getClassName("dot-chart-item");
-		this.renderedChart = undefined;
-	}
-	render(scales, chart, records, margin) {
-		if (this.renderedChart) return;
-		const valueFieldIndex = 0;
-		const elements = this.options.elementAccessors
-			.getBlock()
-			.svg.getChartGroup(chart.index)
-			.selectAll(
-				`.${this.dotChartItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(
-					Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex)
-				)}`
-			)
-			.data(records)
-			.enter()
-			.append("line")
-			.style("stroke-width", chart.dotViewOptions.shape.width)
-			.attr("class", this.dotChartItemClass);
-		const attrs = this.getAttrs(scales, chart, chart.data.valueFields[0], margin);
-		elements
-			.attr("x1", (d) => attrs.x1(d))
-			.attr("y1", (d) => attrs.y1(d))
-			.attr("x2", (d) => attrs.x2(d))
-			.attr("y2", (d) => attrs.y2(d));
-		DomHelper.setCssClasses(elements, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex));
-		DomHelper.setChartStyle(elements, chart.style, valueFieldIndex, "stroke");
-		this.renderedChart = chart;
-	}
-	update(scales, newRecords, margin) {
-		if (!this.renderedChart) return;
-		const valueFieldIndex = 0;
-		const elements = this.options.elementAccessors
-			.getBlock()
-			.svg.getChartGroup(this.renderedChart.index)
-			.selectAll(
-				`.${this.dotChartItemClass}${Helper.getCssClassesLine(
-					this.renderedChart.cssClasses
-				)}${Helper.getCssClassesLine(
-					Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex)
-				)}`
-			)
-			.data(newRecords);
-		elements.exit().remove();
-		const newElements = elements
-			.enter()
-			.append("line")
-			.style("stroke-width", this.renderedChart.dotViewOptions.shape.width)
-			.attr("class", this.dotChartItemClass);
-		const attrs = this.getAttrs(scales, this.renderedChart, this.renderedChart.data.valueFields[0], margin);
-		newElements
-			.attr("x1", (d) => attrs.x1(d))
-			.attr("y1", (d) => attrs.y1(d))
-			.attr("x2", (d) => attrs.x2(d))
-			.attr("y2", (d) => attrs.y2(d));
-		DomHelper.setCssClasses(
-			newElements,
-			Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex)
-		);
-		DomHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, "stroke");
-		return [
-			new Promise((resolve) => {
-				elements
-					.interrupt()
-					.transition()
-					.duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate)
-					.attr("x1", (d) => attrs.x1(d))
-					.attr("y1", (d) => attrs.y1(d))
-					.attr("x2", (d) => attrs.x2(d))
-					.attr("y2", (d) => attrs.y2(d))
-					.on("end", () => resolve());
-			})
-		];
-	}
-	getAttrs(scales, chart, field, margin) {
-		const attrs = {
-			x1: null,
-			y1: null,
-			x2: null,
-			y2: null
-		};
-		const settingsStore = new DotChartSettingsStore({
-			scaleBandWidth: Scale.getScaleBandWidth(scales.key)
-		});
-		// TODO: refactor
-		if (this.options.canvas.keyAxisOrient === "top" || this.options.canvas.keyAxisOrient === "bottom") {
-			const handleBase = (d) =>
-				scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
-				margin.left +
-				settingsStore.getBandItemPad();
-			attrs.x1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
-			attrs.x2 = (d) =>
-				chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
-		}
-		if (this.options.canvas.keyAxisOrient === "left" || this.options.canvas.keyAxisOrient === "right") {
-			const handleBase = (d) =>
-				scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
-				margin.top +
-				settingsStore.getBandItemPad();
-			attrs.y1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
-			attrs.y2 = (d) =>
-				chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
-		}
-		if (this.options.canvas.keyAxisOrient === "top") {
-			attrs.y1 = (d) =>
-				scales.value(Math.min(d[field.name], 0)) +
-				margin.top +
-				BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
-			attrs.y2 = (d) =>
-				scales.value(Math.min(d[field.name], 0)) +
-				margin.top +
-				BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
-		}
-		if (this.options.canvas.keyAxisOrient === "bottom") {
-			attrs.y1 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.top;
-			attrs.y2 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.top;
-		}
-		if (this.options.canvas.keyAxisOrient === "left") {
-			attrs.x1 = (d) =>
-				scales.value(Math.min(d[field.name], 0)) +
-				margin.left +
-				BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
-			attrs.x2 = (d) =>
-				scales.value(Math.min(d[field.name], 0)) +
-				margin.left +
-				BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
-		}
-		if (this.options.canvas.keyAxisOrient === "right") {
-			attrs.x1 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.left;
-			attrs.x2 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.left;
-		}
-		return attrs;
-	}
+    constructor(options) {
+        this.options = options;
+        this.dotChartItemClass = NamesHelper.getClassName("dot-chart-item");
+        this.renderedChart = undefined;
+    }
+    render(scales, chart, records, margin) {
+        if (this.renderedChart)
+            return;
+        const valueFieldIndex = 0;
+        const elements = this.options.elementAccessors
+            .getBlock()
+            .svg.getChartGroup(chart.index)
+            .selectAll(`.${this.dotChartItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex))}`)
+            .data(records)
+            .enter()
+            .append("line")
+            .style("stroke-width", chart.dotViewOptions.shape.width)
+            .attr("class", this.dotChartItemClass);
+        const attrs = this.getAttrs(scales, chart, chart.data.valueFields[0], margin);
+        elements
+            .attr("x1", (d) => attrs.x1(d))
+            .attr("y1", (d) => attrs.y1(d))
+            .attr("x2", (d) => attrs.x2(d))
+            .attr("y2", (d) => attrs.y2(d));
+        DomHelper.setCssClasses(elements, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex));
+        DomHelper.setChartStyle(elements, chart.style, valueFieldIndex, "stroke");
+        this.renderedChart = chart;
+    }
+    update(scales, newRecords, margin) {
+        if (!this.renderedChart)
+            return;
+        const valueFieldIndex = 0;
+        const elements = this.options.elementAccessors
+            .getBlock()
+            .svg.getChartGroup(this.renderedChart.index)
+            .selectAll(`.${this.dotChartItemClass}${Helper.getCssClassesLine(this.renderedChart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex))}`)
+            .data(newRecords);
+        elements.exit().remove();
+        const newElements = elements
+            .enter()
+            .append("line")
+            .style("stroke-width", this.renderedChart.dotViewOptions.shape.width)
+            .attr("class", this.dotChartItemClass);
+        const attrs = this.getAttrs(scales, this.renderedChart, this.renderedChart.data.valueFields[0], margin);
+        newElements
+            .attr("x1", (d) => attrs.x1(d))
+            .attr("y1", (d) => attrs.y1(d))
+            .attr("x2", (d) => attrs.x2(d))
+            .attr("y2", (d) => attrs.y2(d));
+        DomHelper.setCssClasses(newElements, Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex));
+        DomHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, "stroke");
+        return [
+            new Promise((resolve) => {
+                elements
+                    .interrupt()
+                    .transition()
+                    .duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate)
+                    .attr("x1", (d) => attrs.x1(d))
+                    .attr("y1", (d) => attrs.y1(d))
+                    .attr("x2", (d) => attrs.x2(d))
+                    .attr("y2", (d) => attrs.y2(d))
+                    .on("end", () => resolve());
+            })
+        ];
+    }
+    getAttrs(scales, chart, field, margin) {
+        const attrs = {
+            x1: null,
+            y1: null,
+            x2: null,
+            y2: null
+        };
+        const settingsStore = new DotChartSettingsStore({ scaleBandWidth: Scale.getScaleBandWidth(scales.key) });
+        // TODO: refactor
+        if (this.options.canvas.keyAxisOrient === "top" || this.options.canvas.keyAxisOrient === "bottom") {
+            const handleBase = (d) => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
+                margin.left +
+                settingsStore.getBandItemPad();
+            attrs.x1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
+            attrs.x2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+        }
+        if (this.options.canvas.keyAxisOrient === "left" || this.options.canvas.keyAxisOrient === "right") {
+            const handleBase = (d) => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
+                margin.top +
+                settingsStore.getBandItemPad();
+            attrs.y1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
+            attrs.y2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+        }
+        if (this.options.canvas.keyAxisOrient === "top") {
+            attrs.y1 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.top +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+            attrs.y2 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.top +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+        }
+        if (this.options.canvas.keyAxisOrient === "bottom") {
+            attrs.y1 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.top;
+            attrs.y2 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.top;
+        }
+        if (this.options.canvas.keyAxisOrient === "left") {
+            attrs.x1 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.left +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+            attrs.x2 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.left +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+        }
+        if (this.options.canvas.keyAxisOrient === "right") {
+            attrs.x1 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.left;
+            attrs.x2 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.left;
+        }
+        return attrs;
+    }
 }

package/lib/engine/twoDimensionalNotation/line/line.d.ts

@@ -6,44 +6,23 @@ import { Block } from "../../block/block";
 import { MdtChartsDataRow } from "../../../config/config";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
 interface LineChartOptions {
-	staticSettings: LineLikeChartSettings;
+    staticSettings: LineLikeChartSettings;
 }
 export declare class Line {
-	private options;
-	static readonly lineChartClass = "line";
-	readonly creatingPipeline: Pipeline<Selection<SVGPathElement, any, BaseType, any>, TwoDimensionalChartModel>;
-	private readonly lineChartClass;
-	static get(options: LineChartOptions): Line;
-	constructor(options: LineChartOptions);
-	render(
-		block: Block,
-		scales: Scales,
-		data: MdtChartsDataRow[],
-		keyField: Field,
-		margin: BlockMargin,
-		keyAxisOrient: Orient,
-		chart: TwoDimensionalChartModel
-	): void;
-	update(
-		block: Block,
-		scales: Scales,
-		newData: MdtChartsDataRow[],
-		keyField: Field,
-		margin: BlockMargin,
-		keyAxisOrient: Orient,
-		chart: TwoDimensionalChartModel
-	): Promise<any>[];
-	updateColors(block: Block, chart: TwoDimensionalChartModel): void;
-	private renderGrouped;
-	private renderSegmented;
-	private updateGrouped;
-	private updateSegmented;
-	static updateGroupedPath(
-		block: Block,
-		lineObject: Selection<BaseType, any, BaseType, any>,
-		lineGenerator: ILine<MdtChartsDataRow>,
-		newData: MdtChartsDataRow[]
-	): Promise<any>;
-	private createLineGeneratorFactory;
+    private options;
+    static readonly lineChartClass = "line";
+    readonly creatingPipeline: Pipeline<Selection<SVGPathElement, any, BaseType, any>, TwoDimensionalChartModel>;
+    private readonly lineChartClass;
+    static get(options: LineChartOptions): Line;
+    constructor(options: LineChartOptions);
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel): void;
+    update(block: Block, scales: Scales, newData: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel): Promise<any>[];
+    updateColors(block: Block, chart: TwoDimensionalChartModel): void;
+    private renderGrouped;
+    private renderSegmented;
+    private updateGrouped;
+    private updateSegmented;
+    static updateGroupedPath(block: Block, lineObject: Selection<BaseType, any, BaseType, any>, lineGenerator: ILine<MdtChartsDataRow>, newData: MdtChartsDataRow[]): Promise<any>;
+    private createLineGeneratorFactory;
 }
 export {};

package/lib/engine/twoDimensionalNotation/line/line.js

@@ -6,167 +6,137 @@ import { Helper } from "../../helpers/helper";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
 import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
 export class Line {
-	constructor(options) {
-		this.options = options;
-		this.creatingPipeline = new Pipeline();
-		this.lineChartClass = Line.lineChartClass; //TODO: remove after refactor
-		onLineChartInit(this.creatingPipeline);
-	}
-	static get(options) {
-		return new Line(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, keyAxisOrient, chart) {
-		let promises;
-		if (chart.isSegmented) {
-			promises = this.updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart);
-		} else {
-			promises = this.updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart);
-		}
-		return promises;
-	}
-	updateColors(block, chart) {
-		chart.data.valueFields.forEach((_vf, valueIndex) => {
-			const path = block.svg
-				.getChartGroup(chart.index)
-				.select(
-					`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`
-				);
-			DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
-			MarkDot.updateColors(block, chart, valueIndex);
-		});
-	}
-	renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-		const generatorFactory = new LineGeneratorFactory({
-			keyAxisOrient,
-			scales,
-			keyFieldName: keyField.name,
-			margin,
-			curve: this.options.staticSettings.shape.curve.type,
-			shouldRender: chart.lineLikeViewOptions.renderForKey
-		});
-		chart.data.valueFields.forEach((valueField, valueIndex) => {
-			const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
-			let path = block.svg
-				.getChartGroup(chart.index)
-				.append("path")
-				.attr("d", lineGenerator(data))
-				.attr("class", this.lineChartClass)
-				.style("fill", "none")
-				.style("clip-path", `url(#${block.svg.getClipPathId()})`)
-				.style("pointer-events", "none");
-			path = this.creatingPipeline.execute(path, chart);
-			DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-			DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
-			MarkDot.render(
-				block,
-				data,
-				keyAxisOrient,
-				scales,
-				margin,
-				keyField.name,
-				valueIndex,
-				valueField.name,
-				chart
-			);
-		});
-	}
-	renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-		let stackedData = getStackedData(data, 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.renderSegmented(stackedData, Line.lineChartClass);
-		lines = this.creatingPipeline.execute(lines, chart);
-		lineBuilder.setSegmentColor(lines, chart.style.elementColors);
-		lines.each(function (_, i) {
-			DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
-		});
-		stackedData.forEach((dataset, stackIndex) => {
-			MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, "1", chart);
-		});
-	}
-	updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
-		const promises = [];
-		const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-		chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
-			const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
-			const lineObject = block.svg
-				.getChartGroup(chart.index)
-				.select(
-					`.${this.lineChartClass}${Helper.getCssClassesLine(
-						chart.cssClasses
-					)}.chart-element-${valueFieldIndex}`
-				);
-			const prom = Line.updateGroupedPath(block, lineObject, lineGenerator, newData);
-			promises.push(prom);
-			MarkDot.update(
-				block,
-				newData,
-				keyAxisOrient,
-				scales,
-				margin,
-				keyField.name,
-				valueFieldIndex,
-				valueField.name,
-				chart
-			);
-		});
-		return promises;
-	}
-	updateSegmented(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, Line.lineChartClass);
-		const prom = lineBuilder.updateSegmentedPath(lines);
-		lines.each((dataset, index) => {
-			MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
-		});
-		return [prom];
-	}
-	static updateGroupedPath(block, lineObject, lineGenerator, newData) {
-		return new Promise((resolve) => {
-			if (lineObject.size() === 0) {
-				resolve("");
-				return;
-			}
-			let lineHandler = lineObject;
-			if (block.transitionManager.durations.chartUpdate > 0)
-				lineHandler = lineHandler
-					.interrupt()
-					.transition()
-					.duration(block.transitionManager.durations.chartUpdate)
-					.on("end", () => resolve(""));
-			lineHandler.attr("d", lineGenerator(newData));
-			if (block.transitionManager.durations.chartUpdate <= 0) resolve("");
-		});
-	}
-	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
-		});
-	}
+    constructor(options) {
+        this.options = options;
+        this.creatingPipeline = new Pipeline();
+        this.lineChartClass = Line.lineChartClass; //TODO: remove after refactor
+        onLineChartInit(this.creatingPipeline);
+    }
+    static get(options) {
+        return new Line(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, keyAxisOrient, chart) {
+        let promises;
+        if (chart.isSegmented) {
+            promises = this.updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart);
+        }
+        else {
+            promises = this.updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart);
+        }
+        return promises;
+    }
+    updateColors(block, chart) {
+        chart.data.valueFields.forEach((_vf, valueIndex) => {
+            const path = block.svg
+                .getChartGroup(chart.index)
+                .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+            DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
+            MarkDot.updateColors(block, chart, valueIndex);
+        });
+    }
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        const generatorFactory = new LineGeneratorFactory({
+            keyAxisOrient,
+            scales,
+            keyFieldName: keyField.name,
+            margin,
+            curve: this.options.staticSettings.shape.curve.type,
+            shouldRender: chart.lineLikeViewOptions.renderForKey
+        });
+        chart.data.valueFields.forEach((valueField, valueIndex) => {
+            const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
+            let path = block.svg
+                .getChartGroup(chart.index)
+                .append("path")
+                .attr("d", lineGenerator(data))
+                .attr("class", this.lineChartClass)
+                .style("fill", "none")
+                .style("clip-path", `url(#${block.svg.getClipPathId()})`)
+                .style("pointer-events", "none");
+            path = this.creatingPipeline.execute(path, chart);
+            DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+            DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
+            MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, valueField.name, chart);
+        });
+    }
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        let stackedData = getStackedData(data, 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.renderSegmented(stackedData, Line.lineChartClass);
+        lines = this.creatingPipeline.execute(lines, chart);
+        lineBuilder.setSegmentColor(lines, chart.style.elementColors);
+        lines.each(function (_, i) {
+            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+        });
+        stackedData.forEach((dataset, stackIndex) => {
+            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, "1", chart);
+        });
+    }
+    updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+        const promises = [];
+        const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
+            const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
+            const lineObject = block.svg
+                .getChartGroup(chart.index)
+                .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
+            const prom = Line.updateGroupedPath(block, lineObject, lineGenerator, newData);
+            promises.push(prom);
+            MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueFieldIndex, valueField.name, chart);
+        });
+        return promises;
+    }
+    updateSegmented(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, Line.lineChartClass);
+        const prom = lineBuilder.updateSegmentedPath(lines);
+        lines.each((dataset, index) => {
+            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
+        });
+        return [prom];
+    }
+    static updateGroupedPath(block, lineObject, lineGenerator, newData) {
+        return new Promise((resolve) => {
+            if (lineObject.size() === 0) {
+                resolve("");
+                return;
+            }
+            let lineHandler = lineObject;
+            if (block.transitionManager.durations.chartUpdate > 0)
+                lineHandler = lineHandler
+                    .interrupt()
+                    .transition()
+                    .duration(block.transitionManager.durations.chartUpdate)
+                    .on("end", () => resolve(""));
+            lineHandler.attr("d", lineGenerator(newData));
+            if (block.transitionManager.durations.chartUpdate <= 0)
+                resolve("");
+        });
+    }
+    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
+        });
+    }
 }
 Line.lineChartClass = "line";