mdt-charts 1.29.0 → 1.29.1

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -11,262 +11,147 @@ import { Helper } from "../helpers/helper";
 import { Area } from "./area/area";
 import { Bar } from "./bar/bar";
 import { BarHelper } from "./bar/barHelper";
-import { TwoDimRecordOverflowAlert } from "./extenders/twoDimRecordOverflowAlert";
 import { Line } from "./line/line";
 import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels";
 import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
 import { CanvasDotChart } from "./dot/dotChart";
+import { RecordOverflowAlertCore } from "../features/recordOverflowAlert/recordOverflowAlertCore";
 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, 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;
-	}
+    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)
+            RecordOverflowAlertCore.render(engine.block, options.recordOverflowAlert);
+        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);
+        });
+        RecordOverflowAlertCore.update(block, options.recordOverflowAlert);
+        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, options) {
+        filterEventManager.clearKeysFor2D(model.options, 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

@@ -1,91 +1,88 @@
 import { MdtChartsConfig, MdtChartsDataSource, NewSize, Size } from "./config/config";
 import { DesignerConfig } from "./designer/designerConfig";
 import { FilterCallback } from "./engine/filterManager/filterEventManager";
+interface ChartClearSelectionPublicOptions {
+    /** @default true */
+    fireEvent?: boolean;
+}
 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(options?: ChartClearSelectionPublicOptions): 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(options?: ChartClearSelectionPublicOptions): void;
+    private registerResizeEvent;
+    private removeResizeEvent;
+    private resizeListener;
 }
 export * from "./config/config";
 export * from "./designer/designerConfig";