mdt-charts 1.28.1 → 1.29.0

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

@@ -6,137 +6,167 @@ 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";

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

@@ -5,18 +5,21 @@ import { BaseType, Selection } from "d3-selection";
 import { Segment } from "../../../engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
 import { Line as ILine } from "d3-shape";
 interface LineBuilderOptions {
-    elementAccessors: {
-        getBlock: () => Block;
-    };
+	elementAccessors: {
+		getBlock: () => Block;
+	};
 }
 export declare class LineBuilder {
-    private readonly options;
-    private readonly chart;
-    private readonly lineGenerator;
-    constructor(options: LineBuilderOptions, chart: TwoDimensionalChartModel, lineGenerator: ILine<MdtChartsDataRow>);
-    renderSegmented(stakedData: Segment[][], lineClass: string): Selection<SVGPathElement, Segment[], SVGGElement, any>;
-    setSegmentColor(segments: Selection<SVGGElement, unknown, SVGGElement, unknown>, colorPalette: string[]): void;
-    updateSegmentedPath(linesObjects: Selection<BaseType, any, BaseType, any>): Promise<any>;
-    getAllLinesWithNewData(stakedData: Segment[][], lineClass: string): Selection<SVGPathElement, Segment[], SVGGElement, any>;
+	private readonly options;
+	private readonly chart;
+	private readonly lineGenerator;
+	constructor(options: LineBuilderOptions, chart: TwoDimensionalChartModel, lineGenerator: ILine<MdtChartsDataRow>);
+	renderSegmented(stakedData: Segment[][], lineClass: string): Selection<SVGPathElement, Segment[], SVGGElement, any>;
+	setSegmentColor(segments: Selection<SVGGElement, unknown, SVGGElement, unknown>, colorPalette: string[]): void;
+	updateSegmentedPath(linesObjects: Selection<BaseType, any, BaseType, any>): Promise<any>;
+	getAllLinesWithNewData(
+		stakedData: Segment[][],
+		lineClass: string
+	): Selection<SVGPathElement, Segment[], SVGGElement, any>;
 }
 export {};

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

@@ -1,51 +1,50 @@
 import { Helper } from "../../../engine/helpers/helper";
 export class LineBuilder {
-    constructor(options, chart, lineGenerator) {
-        this.options = options;
-        this.chart = chart;
-        this.lineGenerator = lineGenerator;
-    }
-    renderSegmented(stakedData, lineClass) {
-        const block = this.options.elementAccessors.getBlock();
-        return block.svg
-            .getChartGroup(this.chart.index)
-            .selectAll(`.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
-            .data(stakedData)
-            .enter()
-            .append("path")
-            .attr("d", (d) => this.lineGenerator(d))
-            .attr("class", lineClass)
-            .style("fill", "none")
-            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
-            .style("pointer-events", "none");
-    }
-    setSegmentColor(segments, colorPalette) {
-        segments.style("stroke", (d, i) => colorPalette[i % colorPalette.length]);
-    }
-    updateSegmentedPath(linesObjects) {
-        const block = this.options.elementAccessors.getBlock();
-        return new Promise((resolve) => {
-            if (linesObjects.size() === 0) {
-                resolve("");
-                return;
-            }
-            let linesHandler = linesObjects;
-            if (block.transitionManager.durations.chartUpdate > 0)
-                linesHandler = linesHandler
-                    .interrupt()
-                    .transition()
-                    .duration(block.transitionManager.durations.chartUpdate)
-                    .on("end", () => resolve(""));
-            linesHandler.attr("d", (d) => this.lineGenerator(d));
-            if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve("");
-        });
-    }
-    getAllLinesWithNewData(stakedData, lineClass) {
-        const block = this.options.elementAccessors.getBlock();
-        return block.svg
-            .getChartGroup(this.chart.index)
-            .selectAll(`path.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
-            .data(stakedData);
-    }
+	constructor(options, chart, lineGenerator) {
+		this.options = options;
+		this.chart = chart;
+		this.lineGenerator = lineGenerator;
+	}
+	renderSegmented(stakedData, lineClass) {
+		const block = this.options.elementAccessors.getBlock();
+		return block.svg
+			.getChartGroup(this.chart.index)
+			.selectAll(`.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
+			.data(stakedData)
+			.enter()
+			.append("path")
+			.attr("d", (d) => this.lineGenerator(d))
+			.attr("class", lineClass)
+			.style("fill", "none")
+			.style("clip-path", `url(#${block.svg.getClipPathId()})`)
+			.style("pointer-events", "none");
+	}
+	setSegmentColor(segments, colorPalette) {
+		segments.style("stroke", (d, i) => colorPalette[i % colorPalette.length]);
+	}
+	updateSegmentedPath(linesObjects) {
+		const block = this.options.elementAccessors.getBlock();
+		return new Promise((resolve) => {
+			if (linesObjects.size() === 0) {
+				resolve("");
+				return;
+			}
+			let linesHandler = linesObjects;
+			if (block.transitionManager.durations.chartUpdate > 0)
+				linesHandler = linesHandler
+					.interrupt()
+					.transition()
+					.duration(block.transitionManager.durations.chartUpdate)
+					.on("end", () => resolve(""));
+			linesHandler.attr("d", (d) => this.lineGenerator(d));
+			if (block.transitionManager.durations.chartUpdate <= 0) resolve("");
+		});
+	}
+	getAllLinesWithNewData(stakedData, lineClass) {
+		const block = this.options.elementAccessors.getBlock();
+		return block.svg
+			.getChartGroup(this.chart.index)
+			.selectAll(`path.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
+			.data(stakedData);
+	}
 }

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

@@ -2,11 +2,11 @@ import { MdtChartsDataRow } from "../../../config/config";
 import { LineLikeGeneratorMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorMiddleware";
 import { CoordinateGetter } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 interface LineGeneratorOptions {
-    middlewares: LineLikeGeneratorMiddleware[];
+	middlewares: LineLikeGeneratorMiddleware[];
 }
 export declare class LineGenerator {
-    private options;
-    constructor(options: LineGeneratorOptions);
-    get(xValue: CoordinateGetter, yValue: CoordinateGetter): import("d3-shape").Line<MdtChartsDataRow>;
+	private options;
+	constructor(options: LineGeneratorOptions);
+	get(xValue: CoordinateGetter, yValue: CoordinateGetter): import("d3-shape").Line<MdtChartsDataRow>;
 }
 export {};

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

@@ -1,11 +1,11 @@
 import { line } from "d3-shape";
 export class LineGenerator {
-    constructor(options) {
-        this.options = options;
-    }
-    get(xValue, yValue) {
-        const generator = line().x(xValue).y(yValue);
-        this.options.middlewares.forEach((middleware) => middleware.handle(generator));
-        return generator;
-    }
+	constructor(options) {
+		this.options = options;
+	}
+	get(xValue, yValue) {
+		const generator = line().x(xValue).y(yValue);
+		this.options.middlewares.forEach((middleware) => middleware.handle(generator));
+		return generator;
+	}
 }

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

@@ -6,11 +6,17 @@ import { BaseType, Selection } from "d3-selection";
 import { Segment } from "../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
 import { LineLikeGeneratorFactoryOptions } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 export declare class LineGeneratorFactory {
-    private options;
-    constructor(options: LineLikeGeneratorFactoryOptions);
-    getLineGenerator(valueFieldName: string): ILine<MdtChartsDataRow>;
-    getSegmentedLineGenerator(): ILine<MdtChartsDataRow>;
+	private options;
+	constructor(options: LineLikeGeneratorFactoryOptions);
+	getLineGenerator(valueFieldName: string): ILine<MdtChartsDataRow>;
+	getSegmentedLineGenerator(): ILine<MdtChartsDataRow>;
 }
-export declare function onLineChartInit(creatingPipeline: Pipeline<Selection<SVGElement, any, BaseType, any>, TwoDimensionalChartModel>): void;
-export declare function applyLineDash(lineSelection: Selection<SVGElement, any, BaseType, any>, dashSize: number, gapSize: number): Selection<SVGElement, any, BaseType, any>;
+export declare function onLineChartInit(
+	creatingPipeline: Pipeline<Selection<SVGElement, any, BaseType, any>, TwoDimensionalChartModel>
+): void;
+export declare function applyLineDash(
+	lineSelection: Selection<SVGElement, any, BaseType, any>,
+	dashSize: number,
+	gapSize: number
+): Selection<SVGElement, any, BaseType, any>;
 export declare function getStackedData(data: MdtChartsDataRow[], chart: TwoDimensionalChartModel): Segment[][];