mdt-charts 1.28.1 → 1.29.0

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -17,147 +17,256 @@ import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels
 import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
 import { CanvasDotChart } from "./dot/dotChart";
 export class TwoDimensionalManager {
-    render(engine, model) {
-        const options = model.options;
-        const scales = Scale.getScalesWithSecondary(options.scale.key, options.scale.value, options.scale.valueSecondary, options.chartSettings.bar);
-        engine.block.scales = scales;
-        engine.block.svg.render(model.blockCanvas.size);
-        Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
-        GridLine.render(engine.block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
-        this.dotChart = new CanvasDotChart({
-            elementAccessors: {
-                getBlock: () => engine.block
-            },
-            canvas: {
-                keyAxisOrient: options.axis.key.orient
-            },
-            dataOptions: {
-                keyFieldName: options.data.keyField.name
-            },
-            bandOptions: {
-                settings: options.chartSettings.bar
-            }
-        });
-        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings, model.blockCanvas.size);
-        Axis.raiseKeyAxis(engine.block, options.axis.key);
-        engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
-        engine.block.filterEventManager.event2DUpdate(options);
-        Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
-        Legend.get().render(engine.block, engine.data, options, model);
-        Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock, scales);
-        if (model.dataSettings.scope.hidedRecordsAmount !== 0)
-            TwoDimRecordOverflowAlert.render(engine.block, {
-                hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
-                chartOrientation: options.orient
-            });
-        engine.block.getSvg().on("click", (e) => {
-            if (e.target === engine.block.getSvg().node())
-                this.clearSelection(engine.block.filterEventManager, model);
-        });
-        this.canvasValueLabels = new CanvasValueLabels({
-            elementAccessors: {
-                getBlock: () => engine.block
-            },
-            data: {
-                keyFieldName: options.data.keyField.name
-            },
-            canvas: {
-                keyAxisOrient: options.axis.key.orient,
-                valueLabels: options.valueLabels,
-                style: options.valueLabels.style
-            }
-        });
-        this.canvasValueLabels.render(scales, options.charts, engine.data, options.data);
-        if (options.defs) {
-            this.linearGradientDef = new LinearGradientDef();
-            this.linearGradientDef.render(engine.block.svg.ensureDefsRendered(), options.defs.gradients);
-        }
-    }
-    updateData(block, model, data) {
-        block.transitionManager.interruptTransitions();
-        block.filterEventManager.updateData(data[model.options.data.dataSource]);
-        Title.updateData(block, model.options.title);
-        TipBox.clearEvents(block);
-        Tooltip.hide(block);
-        const options = model.options;
-        ElementHighlighter.remove2DChartsFullHighlighting(block, options.charts);
-        const scales = Scale.getScalesWithSecondary(options.scale.key, options.scale.value, options.scale.valueSecondary, options.chartSettings.bar);
-        const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
-        block.scales = scales;
-        Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
-        GridLine.update(block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
-        const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, options.chartSettings);
-        Promise.all(promises).then(() => {
-            block.filterEventManager.event2DUpdate(options);
-            block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
-            Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
-        });
-        TwoDimRecordOverflowAlert.update(block, {
-            hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
-            chartOrientation: options.orient
-        });
-        if (this.canvasValueLabels)
-            this.canvasValueLabels.update(scales, options.charts, data, model.options.data);
-    }
-    updateColors(block, model) {
-        var _a;
-        Legend.get().updateColors(block, model.options);
-        (_a = this.linearGradientDef) === null || _a === void 0 ? void 0 : _a.updateColors(block.svg.ensureDefsRendered(), model.options.defs.gradients);
-        model.options.charts.forEach((chart) => {
-            if (chart.type === "bar")
-                Bar.get().updateColors(block, chart);
-            else if (chart.type === "line")
-                Line.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
-            else if (chart.type === "area")
-                Area.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
-        });
-    }
-    clearSelection(filterEventManager, model) {
-        filterEventManager.clearKeysFor2D(model.options);
-    }
-    renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings, blockSize) {
-        block.svg.renderChartClipPath(margin, blockSize);
-        block.svg.renderBarHatchPattern();
-        block.svg.renderChartsBlock();
-        charts.forEach((chart) => {
-            const chartScales = {
-                key: scales.key,
-                value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
-            };
-            if (chart.type === "bar")
-                Bar.get().render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, chartSettings.bar, BarHelper.getBarsInGroupAmount(charts));
-            else if (chart.type === "line")
-                Line.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
-            else if (chart.type === "area")
-                Area.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
-            else if (chart.type === "dot")
-                this.dotChart.render(chartScales, chart, data[dataOptions.dataSource], margin);
-        });
-        EmbeddedLabels.raiseGroups(block);
-    }
-    updateCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, blockSize, chartSettings) {
-        block.svg.updateChartClipPath(margin, blockSize);
-        let promises = [];
-        charts.forEach((chart) => {
-            const chartScales = {
-                key: scales.key,
-                value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
-            };
-            let proms;
-            if (chart.type === "bar") {
-                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, chartSettings.bar);
-            }
-            else if (chart.type === "line") {
-                proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
-            }
-            else if (chart.type === "area") {
-                proms = Area.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient);
-            }
-            else if (chart.type === "dot") {
-                proms = this.dotChart.update(chartScales, data[dataOptions.dataSource], margin);
-            }
-            promises.push(...proms);
-        });
-        return promises;
-    }
+	render(engine, model) {
+		const options = model.options;
+		const scales = Scale.getScalesWithSecondary(
+			options.scale.key,
+			options.scale.value,
+			options.scale.valueSecondary,
+			options.chartSettings.bar
+		);
+		engine.block.scales = scales;
+		engine.block.svg.render(model.blockCanvas.size);
+		Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
+		GridLine.render(
+			engine.block,
+			options.additionalElements.gridLine,
+			options.axis,
+			model.blockCanvas.size,
+			model.chartBlock.margin,
+			scales
+		);
+		this.dotChart = new CanvasDotChart({
+			elementAccessors: {
+				getBlock: () => engine.block
+			},
+			canvas: {
+				keyAxisOrient: options.axis.key.orient
+			},
+			dataOptions: {
+				keyFieldName: options.data.keyField.name
+			},
+			bandOptions: {
+				settings: options.chartSettings.bar
+			}
+		});
+		this.renderCharts(
+			engine.block,
+			options.charts,
+			scales,
+			engine.data,
+			options.data,
+			model.chartBlock.margin,
+			options.axis.key.orient,
+			options.chartSettings,
+			model.blockCanvas.size
+		);
+		Axis.raiseKeyAxis(engine.block, options.axis.key);
+		engine.block.filterEventManager.registerEventFor2D(
+			scales.key,
+			model.chartBlock.margin,
+			model.blockCanvas.size,
+			options
+		);
+		engine.block.filterEventManager.event2DUpdate(options);
+		Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
+		Legend.get().render(engine.block, engine.data, options, model);
+		Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock, scales);
+		if (model.dataSettings.scope.hidedRecordsAmount !== 0)
+			TwoDimRecordOverflowAlert.render(engine.block, {
+				hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+				chartOrientation: options.orient
+			});
+		engine.block.getSvg().on("click", (e) => {
+			if (e.target === engine.block.getSvg().node()) this.clearSelection(engine.block.filterEventManager, model);
+		});
+		this.canvasValueLabels = new CanvasValueLabels({
+			elementAccessors: {
+				getBlock: () => engine.block
+			},
+			data: {
+				keyFieldName: options.data.keyField.name
+			},
+			canvas: {
+				keyAxisOrient: options.axis.key.orient,
+				valueLabels: options.valueLabels,
+				style: options.valueLabels.style
+			}
+		});
+		this.canvasValueLabels.render(scales, options.charts, engine.data, options.data);
+		if (options.defs) {
+			this.linearGradientDef = new LinearGradientDef();
+			this.linearGradientDef.render(engine.block.svg.ensureDefsRendered(), options.defs.gradients);
+		}
+	}
+	updateData(block, model, data) {
+		block.transitionManager.interruptTransitions();
+		block.filterEventManager.updateData(data[model.options.data.dataSource]);
+		Title.updateData(block, model.options.title);
+		TipBox.clearEvents(block);
+		Tooltip.hide(block);
+		const options = model.options;
+		ElementHighlighter.remove2DChartsFullHighlighting(block, options.charts);
+		const scales = Scale.getScalesWithSecondary(
+			options.scale.key,
+			options.scale.value,
+			options.scale.valueSecondary,
+			options.chartSettings.bar
+		);
+		const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
+		block.scales = scales;
+		Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
+		GridLine.update(
+			block,
+			options.additionalElements.gridLine,
+			options.axis,
+			model.blockCanvas.size,
+			model.chartBlock.margin,
+			scales
+		);
+		const promises = this.updateCharts(
+			block,
+			options.charts,
+			scales,
+			data,
+			model.options.data,
+			model.chartBlock.margin,
+			options.axis.key.orient,
+			model.blockCanvas.size,
+			options.chartSettings
+		);
+		Promise.all(promises).then(() => {
+			block.filterEventManager.event2DUpdate(options);
+			block.filterEventManager.registerEventFor2D(
+				scales.key,
+				model.chartBlock.margin,
+				model.blockCanvas.size,
+				options
+			);
+			Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
+		});
+		TwoDimRecordOverflowAlert.update(block, {
+			hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+			chartOrientation: options.orient
+		});
+		if (this.canvasValueLabels)
+			this.canvasValueLabels.update(scales, options.charts, data, model.options.data, options.valueLabels);
+	}
+	updateColors(block, model) {
+		var _a;
+		Legend.get().updateColors(block, model.options);
+		(_a = this.linearGradientDef) === null || _a === void 0
+			? void 0
+			: _a.updateColors(block.svg.ensureDefsRendered(), model.options.defs.gradients);
+		model.options.charts.forEach((chart) => {
+			if (chart.type === "bar") Bar.get().updateColors(block, chart);
+			else if (chart.type === "line")
+				Line.get({
+					staticSettings: model.options.chartSettings.lineLike
+				}).updateColors(block, chart);
+			else if (chart.type === "area")
+				Area.get({
+					staticSettings: model.options.chartSettings.lineLike
+				}).updateColors(block, chart);
+		});
+	}
+	clearSelection(filterEventManager, model) {
+		filterEventManager.clearKeysFor2D(model.options);
+	}
+	renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings, blockSize) {
+		block.svg.renderChartClipPath(margin, blockSize);
+		block.svg.renderBarHatchPattern();
+		block.svg.renderChartsBlock();
+		charts.forEach((chart) => {
+			const chartScales = {
+				key: scales.key,
+				value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
+			};
+			if (chart.type === "bar")
+				Bar.get().render(
+					block,
+					chartScales,
+					data[dataOptions.dataSource],
+					dataOptions.keyField,
+					margin,
+					keyAxisOrient,
+					chart,
+					blockSize,
+					chartSettings.bar,
+					BarHelper.getBarsInGroupAmount(charts)
+				);
+			else if (chart.type === "line")
+				Line.get({ staticSettings: chartSettings.lineLike }).render(
+					block,
+					chartScales,
+					data[dataOptions.dataSource],
+					dataOptions.keyField,
+					margin,
+					keyAxisOrient,
+					chart
+				);
+			else if (chart.type === "area")
+				Area.get({ staticSettings: chartSettings.lineLike }).render(
+					block,
+					chartScales,
+					data[dataOptions.dataSource],
+					dataOptions.keyField,
+					margin,
+					keyAxisOrient,
+					chart
+				);
+			else if (chart.type === "dot")
+				this.dotChart.render(chartScales, chart, data[dataOptions.dataSource], margin);
+		});
+		EmbeddedLabels.raiseGroups(block);
+	}
+	updateCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, blockSize, chartSettings) {
+		block.svg.updateChartClipPath(margin, blockSize);
+		let promises = [];
+		charts.forEach((chart) => {
+			const chartScales = {
+				key: scales.key,
+				value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
+			};
+			let proms;
+			if (chart.type === "bar") {
+				proms = Bar.get().update(
+					block,
+					data[dataOptions.dataSource],
+					chartScales,
+					margin,
+					keyAxisOrient,
+					chart,
+					blockSize,
+					BarHelper.getBarsInGroupAmount(charts),
+					dataOptions.keyField,
+					chartSettings.bar
+				);
+			} else if (chart.type === "line") {
+				proms = Line.get({ staticSettings: chartSettings.lineLike }).update(
+					block,
+					chartScales,
+					data[dataOptions.dataSource],
+					dataOptions.keyField,
+					margin,
+					keyAxisOrient,
+					chart
+				);
+			} else if (chart.type === "area") {
+				proms = Area.get({ staticSettings: chartSettings.lineLike }).update(
+					block,
+					chartScales,
+					data[dataOptions.dataSource],
+					dataOptions.keyField,
+					margin,
+					chart,
+					keyAxisOrient
+				);
+			} else if (chart.type === "dot") {
+				proms = this.dotChart.update(chartScales, data[dataOptions.dataSource], margin);
+			}
+			promises.push(...proms);
+		});
+		return promises;
+	}
 }

package/lib/engine/valueFormatter.d.ts

@@ -1,6 +1,6 @@
 import { Formatter } from "../designer/designerConfig";
 export declare class ValueFormatter {
-    private static format;
-    static formatField(fieldFormat: string, value: any): string;
-    static setFormatFunction(formatFunction: Formatter): void;
+	private static format;
+	static formatField(fieldFormat: string, value: any): string;
+	static setFormatFunction(formatFunction: Formatter): void;
 }

package/lib/engine/valueFormatter.js

@@ -1,8 +1,8 @@
 export class ValueFormatter {
-    static formatField(fieldFormat, value) {
-        return this.format(value, { type: fieldFormat });
-    }
-    static setFormatFunction(formatFunction) {
-        this.format = formatFunction;
-    }
+	static formatField(fieldFormat, value) {
+		return this.format(value, { type: fieldFormat });
+	}
+	static setFormatFunction(formatFunction) {
+		this.format = formatFunction;
+	}
 }

package/lib/main.d.ts

@@ -2,83 +2,90 @@ import { MdtChartsConfig, MdtChartsDataSource, NewSize, Size } from "./config/co
 import { DesignerConfig } from "./designer/designerConfig";
 import { FilterCallback } from "./engine/filterManager/filterEventManager";
 export interface IChart {
-    /**
-     * Рендер графика
-     * @param parentElement родительский элемент для графика
-     */
-    render(parentElement: HTMLElement): void;
-    /**
-     * Удаление графика со страницы
-     */
-    destroy(): void;
-    /**
-     * Обновление графика для новых данных
-     * @param data Новые данные
-     */
-    updateData(data: MdtChartsDataSource): void;
-    /**
-     * Изменение размера блока с графиком
-     * @param newSize Новый размер
-     */
-    updateSize(newSize: Size): void;
-    /**
-     * Обновление цветов графиков на основе новых базовых цветов
-     * @param newColors Новые базовые цвета
-     */
-    updateColors(newColors: string[]): void;
-    /**
-     * Сброс выделения ключей
-     */
-    clearSelection(): void;
+	/**
+	 * Рендер графика
+	 * @param parentElement родительский элемент для графика
+	 */
+	render(parentElement: HTMLElement): void;
+	/**
+	 * Удаление графика со страницы
+	 */
+	destroy(): void;
+	/**
+	 * Обновление графика для новых данных
+	 * @param data Новые данные
+	 */
+	updateData(data: MdtChartsDataSource): void;
+	/**
+	 * Изменение размера блока с графиком
+	 * @param newSize Новый размер
+	 */
+	updateSize(newSize: Size): void;
+	/**
+	 * Обновление цветов графиков на основе новых базовых цветов
+	 * @param newColors Новые базовые цвета
+	 */
+	updateColors(newColors: string[]): void;
+	/**
+	 * Сброс выделения ключей
+	 */
+	clearSelection(): void;
 }
 export declare class Chart implements IChart {
-    static chartCounter: number;
-    private config;
-    private designerConfig;
-    private model;
-    private data;
-    private parentElement;
-    private isResizable;
-    private readonly id;
-    private engine;
-    private resizeHandler;
-    /**
-     * @param config Объект конфигуратора
-     * @param designerConfig Объект конфигуратора дизайнера
-     * @param data Данные
-     * @param isResizable Флаг подстройки размера блока графика под родительский элемент
-     * @param filterCallback Функция коллбэк, вызываемая во время клика на элемент графика. Предназначена для обеспечения кросс-фильтрации
-     * @param selectedIds Id выделенных записей
-     */
-    constructor(config: MdtChartsConfig, designerConfig: DesignerConfig, data: MdtChartsDataSource, isResizable?: boolean, filterCallback?: FilterCallback, selectedIds?: number[]);
-    /**
-     * Рендер графика
-     * @param parentElement родительский элемент для графика
-     */
-    render(parentElement: HTMLElement): void;
-    /**
-     * Удаление графика со страницы
-     */
-    destroy(): void;
-    /**
-     * Обновление графика для новых данных
-     * @param data Новые данные
-     */
-    updateData(data: MdtChartsDataSource): void;
-    /**
-     * Изменение размера блока с графиком
-     * @param newSize Новый размер
-     */
-    updateSize(newSize: Partial<NewSize>): void;
-    /**
-     * Обновление цветов графиков на основе новых базовых цветов
-     * @param newColors Новые базовые цвета
-     */
-    updateColors(newColors: string[]): void;
-    clearSelection(): void;
-    private registerResizeEvent;
-    private removeResizeEvent;
-    private resizeListener;
+	static chartCounter: number;
+	private config;
+	private designerConfig;
+	private model;
+	private data;
+	private parentElement;
+	private isResizable;
+	private readonly id;
+	private engine;
+	private resizeHandler;
+	/**
+	 * @param config Объект конфигуратора
+	 * @param designerConfig Объект конфигуратора дизайнера
+	 * @param data Данные
+	 * @param isResizable Флаг подстройки размера блока графика под родительский элемент
+	 * @param filterCallback Функция коллбэк, вызываемая во время клика на элемент графика. Предназначена для обеспечения кросс-фильтрации
+	 * @param selectedIds Id выделенных записей
+	 */
+	constructor(
+		config: MdtChartsConfig,
+		designerConfig: DesignerConfig,
+		data: MdtChartsDataSource,
+		isResizable?: boolean,
+		filterCallback?: FilterCallback,
+		selectedIds?: number[]
+	);
+	/**
+	 * Рендер графика
+	 * @param parentElement родительский элемент для графика
+	 */
+	render(parentElement: HTMLElement): void;
+	/**
+	 * Удаление графика со страницы
+	 */
+	destroy(): void;
+	/**
+	 * Обновление графика для новых данных
+	 * @param data Новые данные
+	 */
+	updateData(data: MdtChartsDataSource): void;
+	/**
+	 * Изменение размера блока с графиком
+	 * @param newSize Новый размер
+	 */
+	updateSize(newSize: Partial<NewSize>): void;
+	/**
+	 * Обновление цветов графиков на основе новых базовых цветов
+	 * @param newColors Новые базовые цвета
+	 */
+	updateColors(newColors: string[]): void;
+	clearSelection(): void;
+	private registerResizeEvent;
+	private removeResizeEvent;
+	private resizeListener;
 }
 export * from "./config/config";
 export * from "./designer/designerConfig";