mdt-charts 1.28.1 → 1.29.0

package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.js

@@ -1,47 +1,51 @@
 export class ValueLabelsCollisionHelper {
-    static calculateValueLabelsVisibility(elements) {
-        const sortedLabels = elements.sort((label1, label2) => label1.boundingClientRect.x - label2.boundingClientRect.x);
-        const activeLabels = [];
-        const labelsVisibility = new Map();
-        elements.forEach((label) => {
-            labelsVisibility.set(label.index, { index: label.index, isVisible: true });
-        });
-        sortedLabels.forEach((currentLabel) => {
-            for (let i = activeLabels.length - 1; i >= 0; i--) {
-                const activeLabel = activeLabels[i];
-                if (activeLabel.boundingClientRect.x + activeLabel.boundingClientRect.width <
-                    currentLabel.boundingClientRect.x) {
-                    activeLabels.splice(i, 1);
-                }
-            }
-            for (const activeLabel of activeLabels) {
-                if (this.isOverlapping(currentLabel.boundingClientRect, activeLabel.boundingClientRect)) {
-                    if (currentLabel.boundingClientRect.x > activeLabel.boundingClientRect.x) {
-                        labelsVisibility.get(currentLabel.index).isVisible = false;
-                        break;
-                    }
-                    else if (currentLabel.boundingClientRect.x === activeLabel.boundingClientRect.x) {
-                        if (currentLabel.boundingClientRect.y > activeLabel.boundingClientRect.y) {
-                            labelsVisibility.get(currentLabel.index).isVisible = false;
-                            break;
-                        }
-                        else
-                            labelsVisibility.get(activeLabel.index).isVisible = false;
-                    }
-                    else
-                        labelsVisibility.get(activeLabel.index).isVisible = false;
-                }
-            }
-            if (labelsVisibility.get(currentLabel.index).isVisible) {
-                activeLabels.push(currentLabel);
-            }
-        });
-        return labelsVisibility;
-    }
-    static isOverlapping(rect1, rect2) {
-        return !(rect1.x + rect1.width < rect2.x ||
-            rect1.x > rect2.x + rect2.width ||
-            rect1.y + rect1.height < rect2.y ||
-            rect1.y > rect2.y + rect2.height);
-    }
+	static calculateValueLabelsVisibility(elements) {
+		const sortedLabels = elements.sort(
+			(label1, label2) => label1.boundingClientRect.x - label2.boundingClientRect.x
+		);
+		const activeLabels = [];
+		const labelsVisibility = new Map();
+		elements.forEach((label) => {
+			labelsVisibility.set(label.index, {
+				index: label.index,
+				isVisible: true
+			});
+		});
+		sortedLabels.forEach((currentLabel) => {
+			for (let i = activeLabels.length - 1; i >= 0; i--) {
+				const activeLabel = activeLabels[i];
+				if (
+					activeLabel.boundingClientRect.x + activeLabel.boundingClientRect.width <
+					currentLabel.boundingClientRect.x
+				) {
+					activeLabels.splice(i, 1);
+				}
+			}
+			for (const activeLabel of activeLabels) {
+				if (this.isOverlapping(currentLabel.boundingClientRect, activeLabel.boundingClientRect)) {
+					if (currentLabel.boundingClientRect.x > activeLabel.boundingClientRect.x) {
+						labelsVisibility.get(currentLabel.index).isVisible = false;
+						break;
+					} else if (currentLabel.boundingClientRect.x === activeLabel.boundingClientRect.x) {
+						if (currentLabel.boundingClientRect.y > activeLabel.boundingClientRect.y) {
+							labelsVisibility.get(currentLabel.index).isVisible = false;
+							break;
+						} else labelsVisibility.get(activeLabel.index).isVisible = false;
+					} else labelsVisibility.get(activeLabel.index).isVisible = false;
+				}
+			}
+			if (labelsVisibility.get(currentLabel.index).isVisible) {
+				activeLabels.push(currentLabel);
+			}
+		});
+		return labelsVisibility;
+	}
+	static isOverlapping(rect1, rect2) {
+		return !(
+			rect1.x + rect1.width < rect2.x ||
+			rect1.x > rect2.x + rect2.width ||
+			rect1.y + rect1.height < rect2.y ||
+			rect1.y > rect2.y + rect2.height
+		);
+	}
 }

package/lib/engine/filterManager/filterEventManager.d.ts

@@ -5,35 +5,46 @@ import { Block } from "../block/block";
 import { EventEmitter } from "../../model/EventEmitter";
 export declare type FilterCallback = (rows: MdtChartsDataRow[]) => void;
 export interface SelectDetails {
-    multySelect: boolean;
-    keyValue?: string;
+	multySelect: boolean;
+	keyValue?: string;
 }
 interface FilterEventMap {
-    change: string[];
+	change: string[];
 }
 export declare class FilterEventManager {
-    private callback;
-    private fullDataset;
-    private filterable;
-    private block;
-    private selectedKeys;
-    eventEmitter: EventEmitter<FilterEventMap>;
-    constructor(callback: FilterCallback, fullDataset: MdtChartsDataRow[], filtrable: boolean, keyFieldName: string, selectedIds?: number[]);
-    setBlock(block: Block): void;
-    getSelectedKeys(): string[];
-    updateData(newDataset: MdtChartsDataRow[]): void;
-    isSelected(keyValue: string): boolean;
-    clearKeysFor2D(options: TwoDimensionalOptionsModel): void;
-    clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
-    private setKey;
-    private addId;
-    private removeId;
-    private processKey;
-    setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
-    event2DUpdate(options: TwoDimensionalOptionsModel): void;
-    registerEventFor2D(scaleKey: AxisScale<any>, margin: BlockMargin, blockSize: Size, options: TwoDimensionalOptionsModel): void;
-    private registerEventToDonut;
-    private getMultyParamByEvent;
-    private getMultySelectParam;
+	private callback;
+	private fullDataset;
+	private filterable;
+	private block;
+	private selectedKeys;
+	eventEmitter: EventEmitter<FilterEventMap>;
+	constructor(
+		callback: FilterCallback,
+		fullDataset: MdtChartsDataRow[],
+		filtrable: boolean,
+		keyFieldName: string,
+		selectedIds?: number[]
+	);
+	setBlock(block: Block): void;
+	getSelectedKeys(): string[];
+	updateData(newDataset: MdtChartsDataRow[]): void;
+	isSelected(keyValue: string): boolean;
+	clearKeysFor2D(options: TwoDimensionalOptionsModel): void;
+	clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
+	private setKey;
+	private addId;
+	private removeId;
+	private processKey;
+	setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
+	event2DUpdate(options: TwoDimensionalOptionsModel): void;
+	registerEventFor2D(
+		scaleKey: AxisScale<any>,
+		margin: BlockMargin,
+		blockSize: Size,
+		options: TwoDimensionalOptionsModel
+	): void;
+	private registerEventToDonut;
+	private getMultyParamByEvent;
+	private getMultySelectParam;
 }
 export {};

package/lib/engine/filterManager/filterEventManager.js

@@ -6,133 +6,178 @@ import { Helper } from "../helpers/helper";
 import { Donut } from "../polarNotation/donut/donut";
 import { EventEmitter } from "../../model/EventEmitter";
 export class FilterEventManager {
-    constructor(callback, fullDataset, filtrable, keyFieldName, selectedIds = []) {
-        this.callback = callback;
-        this.fullDataset = fullDataset;
-        this.selectedKeys = Helper.getKeysByIds(selectedIds, keyFieldName, fullDataset);
-        this.filterable = filtrable;
-        this.eventEmitter = new EventEmitter();
-    }
-    setBlock(block) {
-        this.block = block;
-    }
-    getSelectedKeys() {
-        return this.selectedKeys;
-    }
-    updateData(newDataset) {
-        this.fullDataset = newDataset;
-    }
-    isSelected(keyValue) {
-        return this.selectedKeys.findIndex((key) => key === keyValue) !== -1;
-    }
-    clearKeysFor2D(options) {
-        this.selectedKeys = [];
-        if (this.callback)
-            this.callback([]);
-        this.eventEmitter.emit("change", this.selectedKeys);
-        SelectHighlighter.clear2D(this.block, options);
-    }
-    clearKeysForPolar(margin, blockSize, options) {
-        this.selectedKeys = [];
-        if (this.callback)
-            this.callback([]);
-        this.eventEmitter.emit("change", this.selectedKeys);
-        SelectHighlighter.clearPolar(margin, blockSize, this.block, options, Donut.getAllArcGroups(this.block), options.chartCanvas);
-    }
-    setKey(key) {
-        this.selectedKeys = [key];
-    }
-    addId(key) {
-        this.selectedKeys.push(key);
-    }
-    removeId(key) {
-        this.selectedKeys.splice(this.selectedKeys.findIndex((k) => k === key), 1);
-    }
-    processKey(multySelect, keyValue) {
-        if (multySelect) {
-            if (this.getSelectedKeys().findIndex((key) => key === keyValue) === -1) {
-                this.addId(keyValue);
-                return true;
-            }
-            else {
-                this.removeId(keyValue);
-                return false;
-            }
-        }
-        else {
-            if (this.getSelectedKeys()[0] === keyValue && this.getSelectedKeys().length === 1) {
-                this.removeId(keyValue);
-                return false;
-            }
-            else {
-                this.setKey(keyValue);
-                return true;
-            }
-        }
-    }
-    setListenerPolar(margin, blockSize, options) {
-        if (this.filterable) {
-            this.registerEventToDonut(margin, blockSize, options, options.chartCanvas);
-            const selectedElems = Donut.getAllArcGroups(this.block).filter((d) => this.selectedKeys.findIndex((sid) => sid === d.data[options.data.keyField.name]) !== -1);
-            this.selectedKeys = [];
-            selectedElems.dispatch("click", { bubbles: false, cancelable: true, detail: { multySelect: true } });
-        }
-    }
-    event2DUpdate(options) {
-        if (this.filterable) {
-            const removedKeys = [];
-            this.selectedKeys.forEach((key) => {
-                if (this.fullDataset.findIndex((row) => row[options.data.keyField.name] === key) === -1)
-                    removedKeys.push(key);
-            });
-            removedKeys.forEach((rKey) => this.selectedKeys.splice(this.selectedKeys.findIndex((sKey) => sKey === rKey), 1));
-            if (removedKeys.length > 0)
-                this.eventEmitter.emit("change", this.selectedKeys);
-            this.selectedKeys.forEach((key) => {
-                SelectHighlighter.click2DHandler(true, true, key, this.selectedKeys, this.block, options);
-            });
-        }
-    }
-    registerEventFor2D(scaleKey, margin, blockSize, options) {
-        if (this.filterable) {
-            const tipBox = TipBox.renderOrGet(this.block, margin, blockSize);
-            const thisClass = this;
-            tipBox.on("click", function (e) {
-                const multySelect = thisClass.getMultySelectParam(e);
-                const keyValue = e.detail.keyValue ||
-                    TipBoxHelper.getKeyValueByPointer(pointer(e, this), options.orient, margin, blockSize, scaleKey, options.scale.key.type);
-                const appended = thisClass.processKey(multySelect, keyValue);
-                SelectHighlighter.click2DHandler(multySelect, appended, keyValue, thisClass.selectedKeys, thisClass.block, options);
-                if (thisClass.callback) {
-                    thisClass.callback(Helper.getRowsByKeys(thisClass.selectedKeys, options.data.keyField.name, thisClass.fullDataset));
-                }
-                thisClass.eventEmitter.emit("change", thisClass.selectedKeys);
-            });
-        }
-    }
-    registerEventToDonut(margin, blockSize, options, donutSettings) {
-        const arcItems = Donut.getAllArcGroups(this.block);
-        const thisClass = this;
-        arcItems.on("click", function (e, dataRow) {
-            const multySelect = thisClass.getMultySelectParam(e);
-            const keyValue = dataRow.data[options.data.keyField.name];
-            const appended = thisClass.processKey(multySelect, keyValue);
-            SelectHighlighter.clickPolarHandler(multySelect, appended, select(this), thisClass.getSelectedKeys(), margin, blockSize, thisClass.block, options, arcItems, donutSettings);
-            if (thisClass.callback) {
-                thisClass.callback(Helper.getRowsByKeys(thisClass.selectedKeys, options.data.keyField.name, thisClass.fullDataset));
-            }
-            thisClass.eventEmitter.emit("change", thisClass.selectedKeys);
-        });
-    }
-    getMultyParamByEvent(e) {
-        return e.ctrlKey || e.metaKey;
-    }
-    getMultySelectParam(e) {
-        const isMultyButtonToggle = this.getMultyParamByEvent(e);
-        return isMultyButtonToggle === undefined
-            ? e.detail.multySelect === undefined
-                ? false
-                : e.detail.multySelect
-            : isMultyButtonToggle;
-    }
+	constructor(callback, fullDataset, filtrable, keyFieldName, selectedIds = []) {
+		this.callback = callback;
+		this.fullDataset = fullDataset;
+		this.selectedKeys = Helper.getKeysByIds(selectedIds, keyFieldName, fullDataset);
+		this.filterable = filtrable;
+		this.eventEmitter = new EventEmitter();
+	}
+	setBlock(block) {
+		this.block = block;
+	}
+	getSelectedKeys() {
+		return this.selectedKeys;
+	}
+	updateData(newDataset) {
+		this.fullDataset = newDataset;
+	}
+	isSelected(keyValue) {
+		return this.selectedKeys.findIndex((key) => key === keyValue) !== -1;
+	}
+	clearKeysFor2D(options) {
+		this.selectedKeys = [];
+		if (this.callback) this.callback([]);
+		this.eventEmitter.emit("change", this.selectedKeys);
+		SelectHighlighter.clear2D(this.block, options);
+	}
+	clearKeysForPolar(margin, blockSize, options) {
+		this.selectedKeys = [];
+		if (this.callback) this.callback([]);
+		this.eventEmitter.emit("change", this.selectedKeys);
+		SelectHighlighter.clearPolar(
+			margin,
+			blockSize,
+			this.block,
+			options,
+			Donut.getAllArcGroups(this.block),
+			options.chartCanvas
+		);
+	}
+	setKey(key) {
+		this.selectedKeys = [key];
+	}
+	addId(key) {
+		this.selectedKeys.push(key);
+	}
+	removeId(key) {
+		this.selectedKeys.splice(
+			this.selectedKeys.findIndex((k) => k === key),
+			1
+		);
+	}
+	processKey(multySelect, keyValue) {
+		if (multySelect) {
+			if (this.getSelectedKeys().findIndex((key) => key === keyValue) === -1) {
+				this.addId(keyValue);
+				return true;
+			} else {
+				this.removeId(keyValue);
+				return false;
+			}
+		} else {
+			if (this.getSelectedKeys()[0] === keyValue && this.getSelectedKeys().length === 1) {
+				this.removeId(keyValue);
+				return false;
+			} else {
+				this.setKey(keyValue);
+				return true;
+			}
+		}
+	}
+	setListenerPolar(margin, blockSize, options) {
+		if (this.filterable) {
+			this.registerEventToDonut(margin, blockSize, options, options.chartCanvas);
+			const selectedElems = Donut.getAllArcGroups(this.block).filter(
+				(d) => this.selectedKeys.findIndex((sid) => sid === d.data[options.data.keyField.name]) !== -1
+			);
+			this.selectedKeys = [];
+			selectedElems.dispatch("click", {
+				bubbles: false,
+				cancelable: true,
+				detail: { multySelect: true }
+			});
+		}
+	}
+	event2DUpdate(options) {
+		if (this.filterable) {
+			const removedKeys = [];
+			this.selectedKeys.forEach((key) => {
+				if (this.fullDataset.findIndex((row) => row[options.data.keyField.name] === key) === -1)
+					removedKeys.push(key);
+			});
+			removedKeys.forEach((rKey) =>
+				this.selectedKeys.splice(
+					this.selectedKeys.findIndex((sKey) => sKey === rKey),
+					1
+				)
+			);
+			if (removedKeys.length > 0) this.eventEmitter.emit("change", this.selectedKeys);
+			this.selectedKeys.forEach((key) => {
+				SelectHighlighter.click2DHandler(true, true, key, this.selectedKeys, this.block, options);
+			});
+		}
+	}
+	registerEventFor2D(scaleKey, margin, blockSize, options) {
+		if (this.filterable) {
+			const tipBox = TipBox.renderOrGet(this.block, margin, blockSize);
+			const thisClass = this;
+			tipBox.on("click", function (e) {
+				const multySelect = thisClass.getMultySelectParam(e);
+				const keyValue =
+					e.detail.keyValue ||
+					TipBoxHelper.getKeyValueByPointer(
+						pointer(e, this),
+						options.orient,
+						margin,
+						blockSize,
+						scaleKey,
+						options.scale.key.type
+					);
+				const appended = thisClass.processKey(multySelect, keyValue);
+				SelectHighlighter.click2DHandler(
+					multySelect,
+					appended,
+					keyValue,
+					thisClass.selectedKeys,
+					thisClass.block,
+					options
+				);
+				if (thisClass.callback) {
+					thisClass.callback(
+						Helper.getRowsByKeys(thisClass.selectedKeys, options.data.keyField.name, thisClass.fullDataset)
+					);
+				}
+				thisClass.eventEmitter.emit("change", thisClass.selectedKeys);
+			});
+		}
+	}
+	registerEventToDonut(margin, blockSize, options, donutSettings) {
+		const arcItems = Donut.getAllArcGroups(this.block);
+		const thisClass = this;
+		arcItems.on("click", function (e, dataRow) {
+			const multySelect = thisClass.getMultySelectParam(e);
+			const keyValue = dataRow.data[options.data.keyField.name];
+			const appended = thisClass.processKey(multySelect, keyValue);
+			SelectHighlighter.clickPolarHandler(
+				multySelect,
+				appended,
+				select(this),
+				thisClass.getSelectedKeys(),
+				margin,
+				blockSize,
+				thisClass.block,
+				options,
+				arcItems,
+				donutSettings
+			);
+			if (thisClass.callback) {
+				thisClass.callback(
+					Helper.getRowsByKeys(thisClass.selectedKeys, options.data.keyField.name, thisClass.fullDataset)
+				);
+			}
+			thisClass.eventEmitter.emit("change", thisClass.selectedKeys);
+		});
+	}
+	getMultyParamByEvent(e) {
+		return e.ctrlKey || e.metaKey;
+	}
+	getMultySelectParam(e) {
+		const isMultyButtonToggle = this.getMultyParamByEvent(e);
+		return isMultyButtonToggle === undefined
+			? e.detail.multySelect === undefined
+				? false
+				: e.detail.multySelect
+			: isMultyButtonToggle;
+	}
 }

package/lib/engine/helpers/domHelper.d.ts

@@ -4,27 +4,52 @@ import { ChartStyle, TwoDimensionalChartModel } from "../../model/model";
 import { Block } from "../block/block";
 declare type StyleColorType = "fill" | "stroke";
 export declare enum SelectionCondition {
-    Include = 0,
-    Exclude = 1
+	Include = 0,
+	Exclude = 1
 }
 export declare class DomHelper {
-    static setCssClasses(elem: Selection<BaseType, unknown, any, unknown>, cssClasses: string[]): void;
-    static get2DChartElements(block: Block, chart: TwoDimensionalChartModel): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
-    static getCssPropertyValue(node: Element, propertyName: string): string;
-    static getSelectionNumericAttr(selection: Selection<BaseType, unknown, BaseType, unknown>, attrName: string): number;
-    static setChartStyle(elements: Selection<BaseType, unknown, BaseType, unknown>, chartStyle: ChartStyle, fieldIndex: number, styleType: StyleColorType): void;
-    static setChartElementColor(elements: Selection<BaseType, unknown, BaseType, unknown>, colorPalette: string[], fieldIndex: number, styleType: StyleColorType): void;
-    static cropSvgLabels(labelBlocks: Selection<SVGGraphicsElement, unknown, BaseType, unknown>, maxWidth: number): void;
-    /**
-     * Возвращает выборку элементов, ключи которых содержатся или НЕ содержатся в переданном массиве
-     * @param initialSelection Изначальная выборка
-     * @param dataWrapped Содержаться ли данные в обертке .data
-     * @param keyFieldName название поля ключей
-     * @param keyValues значения ключей
-     * @param condition включать или исключать элменты по ключам
-     * @returns Выборка по ключам
-     */
-    static getChartElementsByKeys<T extends BaseType>(initialSelection: Selection<T, MdtChartsDataRow, BaseType, unknown>, dataWrapped: boolean, keyFieldName: string, keyValues: string[], condition?: SelectionCondition): Selection<T, any, BaseType, unknown>;
-    private static setChartOpacity;
+	static setCssClasses(elem: Selection<BaseType, unknown, any, unknown>, cssClasses: string[]): void;
+	static get2DChartElements(
+		block: Block,
+		chart: TwoDimensionalChartModel
+	): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
+	static getCssPropertyValue(node: Element, propertyName: string): string;
+	static getSelectionNumericAttr(
+		selection: Selection<BaseType, unknown, BaseType, unknown>,
+		attrName: string
+	): number;
+	static setChartStyle(
+		elements: Selection<BaseType, unknown, BaseType, unknown>,
+		chartStyle: ChartStyle,
+		fieldIndex: number,
+		styleType: StyleColorType
+	): void;
+	static setChartElementColor(
+		elements: Selection<BaseType, unknown, BaseType, unknown>,
+		colorPalette: string[],
+		fieldIndex: number,
+		styleType: StyleColorType
+	): void;
+	static cropSvgLabels(
+		labelBlocks: Selection<SVGGraphicsElement, unknown, BaseType, unknown>,
+		maxWidth: number
+	): void;
+	/**
+	 * Возвращает выборку элементов, ключи которых содержатся или НЕ содержатся в переданном массиве
+	 * @param initialSelection Изначальная выборка
+	 * @param dataWrapped Содержаться ли данные в обертке .data
+	 * @param keyFieldName название поля ключей
+	 * @param keyValues значения ключей
+	 * @param condition включать или исключать элменты по ключам
+	 * @returns Выборка по ключам
+	 */
+	static getChartElementsByKeys<T extends BaseType>(
+		initialSelection: Selection<T, MdtChartsDataRow, BaseType, unknown>,
+		dataWrapped: boolean,
+		keyFieldName: string,
+		keyValues: string[],
+		condition?: SelectionCondition
+	): Selection<T, any, BaseType, unknown>;
+	private static setChartOpacity;
 }
 export {};