mdt-charts 1.28.1 → 1.29.0

package/lib/engine/features/legend/legend.js

@@ -6,98 +6,123 @@ import { LegendEventsManager } from "./legendEventsManager";
 import { LegendHelper } from "./legendHelper";
 import { LegendMarkerCreator } from "./legendMarkerCreator";
 export class Legend {
-    constructor() {
-        this.markerCreator = new LegendMarkerCreator();
-    }
-    static get() {
-        return new Legend();
-    }
-    render(block, data, options, model) {
-        if (options.legend.position !== "off") {
-            const legendObject = this.renderObject(block, options.legend.position, model.otherComponents.legendBlock, model.blockCanvas.size);
-            this.setContent(block, data, options, legendObject, model.otherComponents.legendBlock);
-        }
-    }
-    update(block, data, model) {
-        if (model.options.legend.position !== "off") {
-            const legendObject = this.getObject(block);
-            const legendCoordinate = LegendHelper.getLegendCoordinateByPosition(model.options.legend.position, model.otherComponents.legendBlock, model.blockCanvas.size);
-            this.fillCoordinate(legendObject, legendCoordinate);
-            this.removeContent(legendObject);
-            this.setContent(block, data, model.options, legendObject, model.otherComponents.legendBlock);
-        }
-    }
-    updateColors(block, options) {
-        if (options.type === "polar" && ColorReader.isNeedReadFromData(options.charts[0]))
-            return;
-        const legendObject = this.getObject(block);
-        const colors = LegendHelper.getMarksColor(options);
-        const itemWrappers = legendObject.selectAll(`.${Legend.itemClass}`);
-        const markerCreator = this.markerCreator;
-        itemWrappers.each(function (d, i) {
-            const selection = select(this);
-            markerCreator.updateColorForItem(selection, Object.assign(Object.assign({}, d), { color: colors[i % colors.length] }));
-        });
-    }
-    static getItemsByKeys(block, keys, condition = SelectionCondition.Include) {
-        return block
-            .getSvg()
-            .selectAll(`.${this.itemClass}`)
-            .filter((d) => {
-            const index = keys.findIndex((k) => k === d.textContent);
-            return condition === SelectionCondition.Include ? index !== -1 : index === -1;
-        });
-    }
-    setContent(block, data, options, legendObject, legendBlockModel) {
-        const items = LegendHelper.getLegendItemsContent(options, data);
-        const colors = LegendHelper.getMarksColor(options, data[options.data.dataSource]);
-        const renderingOptions = LegendHelper.getContentRenderingOptions(options.type, options.legend.position, legendBlockModel);
-        const itemBlocks = this.renderContent(legendObject, items, colors, renderingOptions);
-        if (options.type === "polar") {
-            LegendEventsManager.setListeners(block, options.data.keyField.name, itemBlocks, options.selectable);
-        }
-        else {
-            LegendDomHelper.setItemsTitles(itemBlocks);
-        }
-    }
-    renderObject(block, legendPosition, legendBlockModel, blockSize) {
-        const legendObject = block.getSvg().append("foreignObject").attr("class", Legend.objectClass);
-        const legendCoordinate = LegendHelper.getLegendCoordinateByPosition(legendPosition, legendBlockModel, blockSize);
-        this.fillCoordinate(legendObject, legendCoordinate);
-        return legendObject;
-    }
-    renderContent(foreignObject, items, colorPalette, options) {
-        const wrapper = foreignObject.append("xhtml:div");
-        wrapper.classed(options.wrapperClasses.join(" "), true);
-        const itemWrappers = wrapper.selectAll(`.${Legend.itemClass}`).data(items).enter().append("div");
-        itemWrappers.classed(options.itemsOptions.wrapperClasses.join(" "), true);
-        const markerCreator = this.markerCreator;
-        itemWrappers.each(function (d, i) {
-            const selection = select(this);
-            const markers = markerCreator.create(selection, Object.assign(Object.assign({}, d), { color: colorPalette[i % colorPalette.length] }));
-            markers.classed(options.itemsOptions.markerClass, true);
-        });
-        itemWrappers
-            .append("span")
-            .attr("class", options.itemsOptions.labelClass)
-            .text((d) => d.textContent);
-        if (options.shouldCropLabels)
-            LegendDomHelper.decreaseRowLabels(foreignObject, itemWrappers, options.blockModel.static);
-        return itemWrappers;
-    }
-    getObject(block) {
-        return block.getSvg().select(`foreignObject.${Legend.objectClass}`);
-    }
-    removeContent(legendObject) {
-        legendObject.select(`.${Legend.legendBlockClass}`).remove();
-    }
-    fillCoordinate(legendBlock, coordinate) {
-        legendBlock
-            .attr("x", coordinate.x)
-            .attr("y", coordinate.y)
-            .attr("width", coordinate.width)
-            .attr("height", coordinate.height);
-    }
+	constructor() {
+		this.markerCreator = new LegendMarkerCreator();
+	}
+	static get() {
+		return new Legend();
+	}
+	render(block, data, options, model) {
+		if (options.legend.position !== "off") {
+			const legendObject = this.renderObject(
+				block,
+				options.legend.position,
+				model.otherComponents.legendBlock,
+				model.blockCanvas.size
+			);
+			this.setContent(block, data, options, legendObject, model.otherComponents.legendBlock);
+		}
+	}
+	update(block, data, model) {
+		if (model.options.legend.position !== "off") {
+			const legendObject = this.getObject(block);
+			const legendCoordinate = LegendHelper.getLegendCoordinateByPosition(
+				model.options.legend.position,
+				model.otherComponents.legendBlock,
+				model.blockCanvas.size
+			);
+			this.fillCoordinate(legendObject, legendCoordinate);
+			this.removeContent(legendObject);
+			this.setContent(block, data, model.options, legendObject, model.otherComponents.legendBlock);
+		}
+	}
+	updateColors(block, options) {
+		if (options.type === "polar" && ColorReader.isNeedReadFromData(options.charts[0])) return;
+		const legendObject = this.getObject(block);
+		const colors = LegendHelper.getMarksColor(options);
+		const itemWrappers = legendObject.selectAll(`.${Legend.itemClass}`);
+		const markerCreator = this.markerCreator;
+		itemWrappers.each(function (d, i) {
+			const selection = select(this);
+			markerCreator.updateColorForItem(
+				selection,
+				Object.assign(Object.assign({}, d), {
+					color: colors[i % colors.length]
+				})
+			);
+		});
+	}
+	static getItemsByKeys(block, keys, condition = SelectionCondition.Include) {
+		return block
+			.getSvg()
+			.selectAll(`.${this.itemClass}`)
+			.filter((d) => {
+				const index = keys.findIndex((k) => k === d.textContent);
+				return condition === SelectionCondition.Include ? index !== -1 : index === -1;
+			});
+	}
+	setContent(block, data, options, legendObject, legendBlockModel) {
+		const items = LegendHelper.getLegendItemsContent(options, data);
+		const colors = LegendHelper.getMarksColor(options, data[options.data.dataSource]);
+		const renderingOptions = LegendHelper.getContentRenderingOptions(
+			options.type,
+			options.legend.position,
+			legendBlockModel
+		);
+		const itemBlocks = this.renderContent(legendObject, items, colors, renderingOptions);
+		if (options.type === "polar") {
+			LegendEventsManager.setListeners(block, options.data.keyField.name, itemBlocks, options.selectable);
+		} else {
+			LegendDomHelper.setItemsTitles(itemBlocks);
+		}
+	}
+	renderObject(block, legendPosition, legendBlockModel, blockSize) {
+		const legendObject = block.getSvg().append("foreignObject").attr("class", Legend.objectClass);
+		const legendCoordinate = LegendHelper.getLegendCoordinateByPosition(
+			legendPosition,
+			legendBlockModel,
+			blockSize
+		);
+		this.fillCoordinate(legendObject, legendCoordinate);
+		return legendObject;
+	}
+	renderContent(foreignObject, items, colorPalette, options) {
+		const wrapper = foreignObject.append("xhtml:div");
+		wrapper.classed(options.wrapperClasses.join(" "), true);
+		const itemWrappers = wrapper.selectAll(`.${Legend.itemClass}`).data(items).enter().append("div");
+		itemWrappers.classed(options.itemsOptions.wrapperClasses.join(" "), true);
+		const markerCreator = this.markerCreator;
+		itemWrappers.each(function (d, i) {
+			const selection = select(this);
+			const markers = markerCreator.create(
+				selection,
+				Object.assign(Object.assign({}, d), {
+					color: colorPalette[i % colorPalette.length]
+				})
+			);
+			markers.classed(options.itemsOptions.markerClass, true);
+		});
+		itemWrappers
+			.append("span")
+			.attr("class", options.itemsOptions.labelClass)
+			.text((d) => d.textContent);
+		if (options.shouldCropLabels)
+			LegendDomHelper.decreaseRowLabels(foreignObject, itemWrappers, options.blockModel.static);
+		return itemWrappers;
+	}
+	getObject(block) {
+		return block.getSvg().select(`foreignObject.${Legend.objectClass}`);
+	}
+	removeContent(legendObject) {
+		legendObject.select(`.${Legend.legendBlockClass}`).remove();
+	}
+	fillCoordinate(legendBlock, coordinate) {
+		legendBlock
+			.attr("x", coordinate.x)
+			.attr("y", coordinate.y)
+			.attr("width", coordinate.width)
+			.attr("height", coordinate.height);
+	}
 }
 Legend.objectClass = "legend-object";
 Legend.labelClass = "legend-label";

package/lib/engine/features/legend/legendDomHelper.d.ts

@@ -3,10 +3,17 @@ import { ChartLegendEngineModel } from "./legendHelper";
 import { StaticLegendBlockCanvas } from "../../../designer/designerConfig";
 export declare type LegendItemSelection = Selection<HTMLDivElement, ChartLegendEngineModel, BaseType, unknown>;
 export declare class LegendDomHelper {
-    static setItemsTitles(items: LegendItemSelection): void;
-    static decreaseRowLabels(legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>, items: LegendItemSelection, staticLegend: StaticLegendBlockCanvas): void;
-    /** @deprecated */
-    static cropRowLabels(legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>, items: LegendItemSelection): void;
-    private static getItemsRightMargins;
-    private static getItemsWidth;
+	static setItemsTitles(items: LegendItemSelection): void;
+	static decreaseRowLabels(
+		legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>,
+		items: LegendItemSelection,
+		staticLegend: StaticLegendBlockCanvas
+	): void;
+	/** @deprecated */
+	static cropRowLabels(
+		legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>,
+		items: LegendItemSelection
+	): void;
+	private static getItemsRightMargins;
+	private static getItemsWidth;
 }

package/lib/engine/features/legend/legendDomHelper.js

@@ -4,66 +4,67 @@ import { Legend } from "./legend";
 import { LegendHelper } from "./legendHelper";
 import { getNewLegendItemWidths } from "./legendWidthCalculator";
 export class LegendDomHelper {
-    static setItemsTitles(items) {
-        items.attr("title", (d) => d.textContent);
-    }
-    static decreaseRowLabels(legendBlock, items, staticLegend) {
-        let itemsRightMargins = this.getItemsRightMargins(items);
-        const itemConfig = [];
-        items.nodes().forEach((node, i) => {
-            itemConfig.push({
-                width: node.getBoundingClientRect().width,
-                marginLeft: 0,
-                marginRight: itemsRightMargins[i]
-            });
-        });
-        const newWidths = getNewLegendItemWidths({
-            items: itemConfig,
-            wrapper: {
-                maxRowsAmount: staticLegend.maxLinesAmount,
-                width: legendBlock.node().getBoundingClientRect().width
-            }
-        });
-        items.nodes().forEach((node, i) => {
-            node.style.width = `${newWidths[i]}px`;
-        });
-    }
-    /** @deprecated */
-    static cropRowLabels(legendBlock, items) {
-        const maxWidth = legendBlock.node().getBoundingClientRect().width;
-        let itemsLeftMargins = this.getItemsRightMargins(items);
-        let itemsWidth = this.getItemsWidth(items);
-        let sumOfItemsWidth = LegendHelper.getSumOfItemsWidths(itemsWidth, itemsLeftMargins);
-        const maxItemWidth = LegendHelper.getMaxItemWidth(legendBlock.attr("width"), itemsLeftMargins, "row");
-        let index = 0;
-        let loopFlag = true; // if at least one label has no text, loop ends
-        while (sumOfItemsWidth > maxWidth && loopFlag) {
-            items.nodes().forEach((node) => {
-                const textBlock = node.querySelector(`.${Legend.labelClass}`);
-                if (node.getBoundingClientRect().width > maxItemWidth && textBlock.textContent) {
-                    let labelText = index > 0
-                        ? textBlock.textContent.substr(0, textBlock.textContent.length - 3)
-                        : textBlock.textContent;
-                    labelText = labelText.substr(0, labelText.length - 1);
-                    textBlock.textContent = labelText + "...";
-                    itemsLeftMargins = this.getItemsRightMargins(items);
-                    itemsWidth = this.getItemsWidth(items);
-                    sumOfItemsWidth = LegendHelper.getSumOfItemsWidths(itemsWidth, itemsLeftMargins);
-                    if (labelText.length === 0) {
-                        textBlock.textContent = "";
-                        loopFlag = false;
-                    }
-                }
-            });
-            index++;
-        }
-    }
-    static getItemsRightMargins(items) {
-        return items
-            .nodes()
-            .map((node) => Helper.getPXValueFromString(DomHelper.getCssPropertyValue(node, "margin-right")));
-    }
-    static getItemsWidth(items) {
-        return items.nodes().map((node) => node.getBoundingClientRect().width);
-    }
+	static setItemsTitles(items) {
+		items.attr("title", (d) => d.textContent);
+	}
+	static decreaseRowLabels(legendBlock, items, staticLegend) {
+		let itemsRightMargins = this.getItemsRightMargins(items);
+		const itemConfig = [];
+		items.nodes().forEach((node, i) => {
+			itemConfig.push({
+				width: node.getBoundingClientRect().width,
+				marginLeft: 0,
+				marginRight: itemsRightMargins[i]
+			});
+		});
+		const newWidths = getNewLegendItemWidths({
+			items: itemConfig,
+			wrapper: {
+				maxRowsAmount: staticLegend.maxLinesAmount,
+				width: legendBlock.node().getBoundingClientRect().width
+			}
+		});
+		items.nodes().forEach((node, i) => {
+			node.style.width = `${newWidths[i]}px`;
+		});
+	}
+	/** @deprecated */
+	static cropRowLabels(legendBlock, items) {
+		const maxWidth = legendBlock.node().getBoundingClientRect().width;
+		let itemsLeftMargins = this.getItemsRightMargins(items);
+		let itemsWidth = this.getItemsWidth(items);
+		let sumOfItemsWidth = LegendHelper.getSumOfItemsWidths(itemsWidth, itemsLeftMargins);
+		const maxItemWidth = LegendHelper.getMaxItemWidth(legendBlock.attr("width"), itemsLeftMargins, "row");
+		let index = 0;
+		let loopFlag = true; // if at least one label has no text, loop ends
+		while (sumOfItemsWidth > maxWidth && loopFlag) {
+			items.nodes().forEach((node) => {
+				const textBlock = node.querySelector(`.${Legend.labelClass}`);
+				if (node.getBoundingClientRect().width > maxItemWidth && textBlock.textContent) {
+					let labelText =
+						index > 0
+							? textBlock.textContent.substr(0, textBlock.textContent.length - 3)
+							: textBlock.textContent;
+					labelText = labelText.substr(0, labelText.length - 1);
+					textBlock.textContent = labelText + "...";
+					itemsLeftMargins = this.getItemsRightMargins(items);
+					itemsWidth = this.getItemsWidth(items);
+					sumOfItemsWidth = LegendHelper.getSumOfItemsWidths(itemsWidth, itemsLeftMargins);
+					if (labelText.length === 0) {
+						textBlock.textContent = "";
+						loopFlag = false;
+					}
+				}
+			});
+			index++;
+		}
+	}
+	static getItemsRightMargins(items) {
+		return items
+			.nodes()
+			.map((node) => Helper.getPXValueFromString(DomHelper.getCssPropertyValue(node, "margin-right")));
+	}
+	static getItemsWidth(items) {
+		return items.nodes().map((node) => node.getBoundingClientRect().width);
+	}
 }

package/lib/engine/features/legend/legendEventsManager.d.ts

@@ -1,12 +1,17 @@
 import { Block } from "../../block/block";
 import { LegendItemSelection } from "./legendDomHelper";
 export declare class LegendEventsManager {
-    /**
-     * @param block
-     * @param keyFieldName
-     * @param legendItems айтемы легенды полара, которые привязаны к ключам
-     */
-    static setListeners(block: Block, keyFieldName: string, legendItems: LegendItemSelection, selectable: boolean): void;
-    private static setHoverListeners;
-    private static setClickListeners;
+	/**
+	 * @param block
+	 * @param keyFieldName
+	 * @param legendItems айтемы легенды полара, которые привязаны к ключам
+	 */
+	static setListeners(
+		block: Block,
+		keyFieldName: string,
+		legendItems: LegendItemSelection,
+		selectable: boolean
+	): void;
+	private static setHoverListeners;
+	private static setClickListeners;
 }

package/lib/engine/features/legend/legendEventsManager.js

@@ -2,51 +2,52 @@ import { pointer, select } from "d3-selection";
 import { ElementHighlighter } from "../../elementHighlighter/elementHighlighter";
 import { Donut } from "../../polarNotation/donut/donut";
 export class LegendEventsManager {
-    /**
-     * @param block
-     * @param keyFieldName
-     * @param legendItems айтемы легенды полара, которые привязаны к ключам
-     */
-    static setListeners(block, keyFieldName, legendItems, selectable) {
-        this.setHoverListeners(block, keyFieldName, legendItems);
-        if (selectable)
-            this.setClickListeners(block, keyFieldName, legendItems);
-    }
-    static setHoverListeners(block, keyFieldName, legendItems) {
-        const arcItems = Donut.getAllArcGroups(block);
-        legendItems.on("mousemove", function (e, keyValue) {
-            arcItems
-                .filter((row) => row.data[keyFieldName] === keyValue.textContent)
-                .dispatch("mousemove", {
-                bubbles: false,
-                cancelable: true,
-                detail: {
-                    pointer: pointer(e, block.getWrapper().node()),
-                    ignoreTranslate: true
-                }
-            });
-        });
-        legendItems.on("mouseover", function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent).dispatch("mouseover");
-            ElementHighlighter.toggleActivityStyle(select(this), true);
-        });
-        legendItems.on("mouseleave", function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent).dispatch("mouseleave");
-            if (!block.filterEventManager.isSelected(keyValue.textContent) &&
-                block.filterEventManager.getSelectedKeys().length > 0)
-                ElementHighlighter.toggleActivityStyle(select(this), false);
-        });
-    }
-    static setClickListeners(block, keyFieldName, legendItems) {
-        const arcItems = Donut.getAllArcGroups(block);
-        legendItems.on("click", (e, keyValue) => {
-            arcItems
-                .filter((row) => row.data[keyFieldName] === keyValue.textContent)
-                .dispatch("click", {
-                bubbles: false,
-                cancelable: true,
-                detail: { multySelect: e.ctrlKey || e.metaKey }
-            });
-        });
-    }
+	/**
+	 * @param block
+	 * @param keyFieldName
+	 * @param legendItems айтемы легенды полара, которые привязаны к ключам
+	 */
+	static setListeners(block, keyFieldName, legendItems, selectable) {
+		this.setHoverListeners(block, keyFieldName, legendItems);
+		if (selectable) this.setClickListeners(block, keyFieldName, legendItems);
+	}
+	static setHoverListeners(block, keyFieldName, legendItems) {
+		const arcItems = Donut.getAllArcGroups(block);
+		legendItems.on("mousemove", function (e, keyValue) {
+			arcItems
+				.filter((row) => row.data[keyFieldName] === keyValue.textContent)
+				.dispatch("mousemove", {
+					bubbles: false,
+					cancelable: true,
+					detail: {
+						pointer: pointer(e, block.getWrapper().node()),
+						ignoreTranslate: true
+					}
+				});
+		});
+		legendItems.on("mouseover", function (e, keyValue) {
+			arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent).dispatch("mouseover");
+			ElementHighlighter.toggleActivityStyle(select(this), true);
+		});
+		legendItems.on("mouseleave", function (e, keyValue) {
+			arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent).dispatch("mouseleave");
+			if (
+				!block.filterEventManager.isSelected(keyValue.textContent) &&
+				block.filterEventManager.getSelectedKeys().length > 0
+			)
+				ElementHighlighter.toggleActivityStyle(select(this), false);
+		});
+	}
+	static setClickListeners(block, keyFieldName, legendItems) {
+		const arcItems = Donut.getAllArcGroups(block);
+		legendItems.on("click", (e, keyValue) => {
+			arcItems
+				.filter((row) => row.data[keyFieldName] === keyValue.textContent)
+				.dispatch("click", {
+					bubbles: false,
+					cancelable: true,
+					detail: { multySelect: e.ctrlKey || e.metaKey }
+				});
+		});
+	}
 }

package/lib/engine/features/legend/legendHelper.d.ts

@@ -1,24 +1,49 @@
 import { ChartNotation, MdtChartsDataRow, MdtChartsDataSource, Size } from "../../../config/config";
 import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
-import { ChartLegendModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import {
+	ChartLegendModel,
+	LegendBlockModel,
+	LegendPosition,
+	Orient,
+	PolarOptionsModel,
+	TwoDimensionalOptionsModel
+} from "../../../model/model";
 import { LegendContentRenderingOptions } from "./legend";
 import { LegendHelperService } from "./legendHelperService";
 export interface LegendCoordinate {
-    x: number;
-    y: number;
-    height: number;
-    width: number;
+	x: number;
+	y: number;
+	height: number;
+	width: number;
 }
 export interface ChartLegendEngineModel extends ChartLegendModel {
-    textContent: string;
+	textContent: string;
 }
 export declare class LegendHelper {
-    static service: LegendHelperService;
-    static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel, data: MdtChartsDataSource): ChartLegendEngineModel[];
-    static getMarksColor(options: TwoDimensionalOptionsModel | PolarOptionsModel, dataRows?: MdtChartsDataRow[]): string[];
-    static getMaxItemWidth(legendBlockWidth: string, marginsLeft: number[], itemsDirection: LegendItemsDirection): number;
-    static getSumOfItemsWidths(itemsWidth: number[], marginsLeft: number[]): number;
-    static getLegendCoordinateByPosition(legendPosition: Orient, legendBlockModel: LegendBlockModel, blockSize: Size): LegendCoordinate;
-    static getContentRenderingOptions(chartNotation: ChartNotation, legendPosition: LegendPosition, legendBlockModel: LegendBlockModel): LegendContentRenderingOptions;
-    private static getLegendClassByChartNotation;
+	static service: LegendHelperService;
+	static getLegendItemsContent(
+		options: TwoDimensionalOptionsModel | PolarOptionsModel,
+		data: MdtChartsDataSource
+	): ChartLegendEngineModel[];
+	static getMarksColor(
+		options: TwoDimensionalOptionsModel | PolarOptionsModel,
+		dataRows?: MdtChartsDataRow[]
+	): string[];
+	static getMaxItemWidth(
+		legendBlockWidth: string,
+		marginsLeft: number[],
+		itemsDirection: LegendItemsDirection
+	): number;
+	static getSumOfItemsWidths(itemsWidth: number[], marginsLeft: number[]): number;
+	static getLegendCoordinateByPosition(
+		legendPosition: Orient,
+		legendBlockModel: LegendBlockModel,
+		blockSize: Size
+	): LegendCoordinate;
+	static getContentRenderingOptions(
+		chartNotation: ChartNotation,
+		legendPosition: LegendPosition,
+		legendBlockModel: LegendBlockModel
+	): LegendContentRenderingOptions;
+	private static getLegendClassByChartNotation;
 }