mdt-charts 1.29.0 → 1.29.1

package/lib/engine/polarNotation/donut/DonutHelper.js

@@ -2,75 +2,74 @@ import { merge } from "d3-array";
 import { arc, pie } from "d3-shape";
 const MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS = 400;
 export class DonutHelper {
-	static getThickness(donutSettings, blockSize, margin) {
-		const thicknessOpts = donutSettings.thickness;
-		const chartBlockSize = this.getChartBlockSize(blockSize, margin);
-		if (thicknessOpts.value)
-			return this.getThicknessByUnit(chartBlockSize, thicknessOpts.value, thicknessOpts.unit);
-		if (Math.min(chartBlockSize.width, chartBlockSize.height) > MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS)
-			return this.getThicknessByUnit(chartBlockSize, thicknessOpts.max, thicknessOpts.unit);
-		return this.getThicknessByUnit(chartBlockSize, thicknessOpts.min, thicknessOpts.unit);
-	}
-	static getArcCentroid(blockSize, margin, dataItem, donutThickness) {
-		const arc = this.getArcGeneratorObject(blockSize, margin, donutThickness);
-		return arc.centroid(dataItem);
-	}
-	static getArcGeneratorObject(blockSize, margin, donutThickness) {
-		const outerRadius = this.getOuterRadius(margin, blockSize);
-		const arc = this.getArcGenerator(outerRadius, outerRadius - donutThickness);
-		return arc;
-	}
-	static getOuterRadius(margin, blockSize) {
-		return (
-			Math.min(blockSize.width - margin.left - margin.right, blockSize.height - margin.top - margin.bottom) / 2
-		);
-	}
-	static getInnerRadius(outerRadius, thickness) {
-		return outerRadius - thickness;
-	}
-	static getTranslate(margin, blockSize) {
-		return {
-			x: (blockSize.width - margin.left - margin.right) / 2 + margin.left,
-			y: (blockSize.height - margin.top - margin.bottom) / 2 + margin.top
-		};
-	}
-	static getArcGenerator(outerRadius, innerRadius) {
-		return arc().innerRadius(innerRadius).outerRadius(outerRadius);
-	}
-	static getPieGenerator(valueField, padAngle) {
-		return pie()
-			.padAngle(padAngle)
-			.sort(null)
-			.value((d) => d[valueField]);
-	}
-	static mergeDataWithZeros(firstDataset, secondDataset, keyField, colorField) {
-		const secondSet = new Set();
-		secondDataset.forEach((dataRow) => {
-			secondSet.add(dataRow[keyField]);
-		});
-		const onlyNew = firstDataset
-			.filter((d) => !secondSet.has(d[keyField]))
-			.map((d, index, array) => {
-				const data = {
-					keyField: array[index][keyField],
-					valueField: 0,
-					[colorField]: array[index][colorField]
-					//TODO: добавить цвет из ColorReader'а
-				};
-				return data;
-			});
-		const sortedMerge = merge([secondDataset, onlyNew]);
-		return sortedMerge;
-	}
-	static getThicknessByUnit(chartBlockSize, valueInPx, unit) {
-		if (unit === "px") return valueInPx;
-		const minSideSize = Math.min(chartBlockSize.width, chartBlockSize.height);
-		return (minSideSize / 2) * (valueInPx / 100);
-	}
-	static getChartBlockSize(blockSize, margin) {
-		return {
-			height: blockSize.height - margin.top - margin.bottom,
-			width: blockSize.width - margin.left - margin.right
-		};
-	}
+    static getThickness(donutSettings, blockSize, margin) {
+        const thicknessOpts = donutSettings.thickness;
+        const chartBlockSize = this.getChartBlockSize(blockSize, margin);
+        if (thicknessOpts.value)
+            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.value, thicknessOpts.unit);
+        if (Math.min(chartBlockSize.width, chartBlockSize.height) > MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS)
+            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.max, thicknessOpts.unit);
+        return this.getThicknessByUnit(chartBlockSize, thicknessOpts.min, thicknessOpts.unit);
+    }
+    static getArcCentroid(blockSize, margin, dataItem, donutThickness) {
+        const arc = this.getArcGeneratorObject(blockSize, margin, donutThickness);
+        return arc.centroid(dataItem);
+    }
+    static getArcGeneratorObject(blockSize, margin, donutThickness) {
+        const outerRadius = this.getOuterRadius(margin, blockSize);
+        const arc = this.getArcGenerator(outerRadius, outerRadius - donutThickness);
+        return arc;
+    }
+    static getOuterRadius(margin, blockSize) {
+        return (Math.min(blockSize.width - margin.left - margin.right, blockSize.height - margin.top - margin.bottom) / 2);
+    }
+    static getInnerRadius(outerRadius, thickness) {
+        return outerRadius - thickness;
+    }
+    static getTranslate(margin, blockSize) {
+        return {
+            x: (blockSize.width - margin.left - margin.right) / 2 + margin.left,
+            y: (blockSize.height - margin.top - margin.bottom) / 2 + margin.top
+        };
+    }
+    static getArcGenerator(outerRadius, innerRadius) {
+        return arc().innerRadius(innerRadius).outerRadius(outerRadius);
+    }
+    static getPieGenerator(valueField, padAngle) {
+        return pie()
+            .padAngle(padAngle)
+            .sort(null)
+            .value((d) => d[valueField]);
+    }
+    static mergeDataWithZeros(firstDataset, secondDataset, keyField, colorField) {
+        const secondSet = new Set();
+        secondDataset.forEach((dataRow) => {
+            secondSet.add(dataRow[keyField]);
+        });
+        const onlyNew = firstDataset
+            .filter((d) => !secondSet.has(d[keyField]))
+            .map((d, index, array) => {
+            const data = {
+                keyField: array[index][keyField],
+                valueField: 0,
+                [colorField]: array[index][colorField]
+                //TODO: добавить цвет из ColorReader'а
+            };
+            return data;
+        });
+        const sortedMerge = merge([secondDataset, onlyNew]);
+        return sortedMerge;
+    }
+    static getThicknessByUnit(chartBlockSize, valueInPx, unit) {
+        if (unit === "px")
+            return valueInPx;
+        const minSideSize = Math.min(chartBlockSize.width, chartBlockSize.height);
+        return (minSideSize / 2) * (valueInPx / 100);
+    }
+    static getChartBlockSize(blockSize, margin) {
+        return {
+            height: blockSize.height - margin.top - margin.bottom,
+            width: blockSize.width - margin.left - margin.right
+        };
+    }
 }

package/lib/engine/polarNotation/donut/donut.d.ts

@@ -4,44 +4,29 @@ import { BlockMargin, DonutChartSettings, PolarChartModel } from "../../../model
 import { Block } from "../../block/block";
 import { MdtChartsDataRow, Size } from "../../../config/config";
 export interface Translate {
-	x: number;
-	y: number;
+    x: number;
+    y: number;
 }
 export declare class Donut {
-	static readonly donutBlockClass = "donut-block";
-	static readonly arcPathClass = "arc-path";
-	static readonly arcItemClass = "arc";
-	static readonly arcHighlightedClass = "arc-highlighted";
-	static readonly arcClonesGroupClass = "arc-clones";
-	static readonly arcShadowsGroupClass = "arc-shadow-clones";
-	static readonly arcCloneClass = "arc-clone";
-	static readonly arcShadowClass = "arc-shadow-clone";
-	static render(
-		block: Block,
-		data: MdtChartsDataRow[],
-		margin: BlockMargin,
-		chart: PolarChartModel,
-		blockSize: Size,
-		settings: DonutChartSettings
-	): void;
-	static update(
-		block: Block,
-		data: MdtChartsDataRow[],
-		margin: BlockMargin,
-		chart: PolarChartModel,
-		blockSize: Size,
-		donutSettings: DonutChartSettings,
-		keyField: string
-	): Promise<any>;
-	static updateColors(block: Block, chart: PolarChartModel): void;
-	static getAllArcGroups(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
-	static getAllArcClones(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
-	static getAllArcShadows(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
-	private static renderNewArcItems;
-	private static setElementsColor;
-	/**
-	 * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
-	 */
-	private static renderClonesG;
-	private static raiseClonesG;
+    static readonly donutBlockClass = "donut-block";
+    static readonly arcPathClass = "arc-path";
+    static readonly arcItemClass = "arc";
+    static readonly arcHighlightedClass = "arc-highlighted";
+    static readonly arcClonesGroupClass = "arc-clones";
+    static readonly arcShadowsGroupClass = "arc-shadow-clones";
+    static readonly arcCloneClass = "arc-clone";
+    static readonly arcShadowClass = "arc-shadow-clone";
+    static render(block: Block, data: MdtChartsDataRow[], margin: BlockMargin, chart: PolarChartModel, blockSize: Size, settings: DonutChartSettings): void;
+    static update(block: Block, data: MdtChartsDataRow[], margin: BlockMargin, chart: PolarChartModel, blockSize: Size, donutSettings: DonutChartSettings, keyField: string): Promise<any>;
+    static updateColors(block: Block, chart: PolarChartModel): void;
+    static getAllArcGroups(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
+    static getAllArcClones(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
+    static getAllArcShadows(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
+    private static renderNewArcItems;
+    private static setElementsColor;
+    /**
+     * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
+     */
+    private static renderClonesG;
+    private static raiseClonesG;
 }

package/lib/engine/polarNotation/donut/donut.js

@@ -4,115 +4,105 @@ import { DonutHelper } from "./DonutHelper";
 import { DomHelper } from "../../helpers/domHelper";
 import { ColorReader } from "../../colorReader/colorReader";
 export class Donut {
-	static render(block, data, margin, chart, blockSize, settings) {
-		const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
-		const thickness = DonutHelper.getThickness(settings, blockSize, margin);
-		const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
-		const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
-		const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
-		const translateAttr = DonutHelper.getTranslate(margin, blockSize);
-		Aggregator.render(block, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
-		const donutBlock = block
-			.getSvg()
-			.append("g")
-			.attr("class", this.donutBlockClass)
-			.attr("x", translateAttr.x)
-			.attr("y", translateAttr.y)
-			.attr("transform", `translate(${translateAttr.x}, ${translateAttr.y})`);
-		this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart);
-		this.renderClonesG(donutBlock);
-	}
-	static update(block, data, margin, chart, blockSize, donutSettings, keyField) {
-		const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
-		const thickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
-		const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
-		const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
-		const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, donutSettings.padAngle);
-		const oldData = block
-			.getSvg()
-			.selectAll(`.${this.donutBlockClass}`)
-			.selectAll("path")
-			.data()
-			.map((d) => d.data);
-		const dataNewZeroRows = DonutHelper.mergeDataWithZeros(
-			data,
-			oldData,
-			keyField,
-			ColorReader.getChartColorField(chart)
-		);
-		const dataExtraZeroRows = DonutHelper.mergeDataWithZeros(
-			oldData,
-			data,
-			keyField,
-			ColorReader.getChartColorField(chart)
-		);
-		const donutBlock = block.getSvg().select(`.${this.donutBlockClass}`);
-		this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, dataNewZeroRows, chart);
-		const path = this.getAllArcGroups(block).data(pieGenerator(dataExtraZeroRows)).select("path");
-		const items = this.getAllArcGroups(block).data(pieGenerator(data));
-		this.setElementsColor(this.getAllArcGroups(block), chart);
-		return new Promise((resolve) => {
-			this.raiseClonesG(block);
-			path.interrupt()
-				.transition()
-				.duration(block.transitionManager.durations.chartUpdate)
-				.on("end", () => {
-					items.exit().remove();
-					resolve("updated");
-				})
-				.attrTween("d", function (d) {
-					const interpolateFunc = interpolate(this._currentData, d);
-					return (t) => {
-						this._currentData = interpolateFunc(t); // _current - старые данные до обновления, задаются во время рендера
-						return arcGenerator(this._currentData);
-					};
-				});
-		});
-	}
-	static updateColors(block, chart) {
-		this.setElementsColor(this.getAllArcGroups(block), chart);
-	}
-	static getAllArcGroups(block) {
-		return block.getSvg().selectAll(`.${this.arcItemClass}`);
-	}
-	static getAllArcClones(block) {
-		return block.getSvg().selectAll(`.${Donut.arcCloneClass}`);
-	}
-	static getAllArcShadows(block) {
-		return block.getSvg().selectAll(`.${this.arcShadowClass}`);
-	}
-	static renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart) {
-		const items = donutBlock
-			.selectAll(`.${this.arcItemClass}`)
-			.data(pieGenerator(data))
-			.enter()
-			.append("g")
-			.attr("class", this.arcItemClass);
-		const arcs = items
-			.append("path")
-			.attr("d", arcGenerator)
-			.attr("class", this.arcPathClass)
-			.each(function (d) {
-				this._currentData = d;
-			}); // _currentData используется для получения текущих данных внутри функции обновления.
-		DomHelper.setCssClasses(arcs, chart.cssClasses);
-		this.setElementsColor(items, chart);
-	}
-	static setElementsColor(arcItems, chart) {
-		arcItems.select("path").style("fill", ({ data }, i) => ColorReader.getColorForArc(data, chart, i));
-	}
-	/**
-	 * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
-	 */
-	static renderClonesG(donutBlock) {
-		const clonesShadowsG = donutBlock.append("g").attr("class", this.arcShadowsGroupClass).raise();
-		const clonesG = donutBlock.append("g").attr("class", this.arcClonesGroupClass).raise();
-		// ElementHighlighter.setShadowFilter(clonesG);
-	}
-	static raiseClonesG(block) {
-		block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcShadowsGroupClass}`).raise();
-		block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcClonesGroupClass}`).raise();
-	}
+    static render(block, data, margin, chart, blockSize, settings) {
+        const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
+        const thickness = DonutHelper.getThickness(settings, blockSize, margin);
+        const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
+        const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
+        const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
+        const translateAttr = DonutHelper.getTranslate(margin, blockSize);
+        Aggregator.render(block, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
+        const donutBlock = block
+            .getSvg()
+            .append("g")
+            .attr("class", this.donutBlockClass)
+            .attr("x", translateAttr.x)
+            .attr("y", translateAttr.y)
+            .attr("transform", `translate(${translateAttr.x}, ${translateAttr.y})`);
+        this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart);
+        this.renderClonesG(donutBlock);
+    }
+    static update(block, data, margin, chart, blockSize, donutSettings, keyField) {
+        const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
+        const thickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
+        const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
+        const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, donutSettings.padAngle);
+        const oldData = block
+            .getSvg()
+            .selectAll(`.${this.donutBlockClass}`)
+            .selectAll("path")
+            .data()
+            .map((d) => d.data);
+        const dataNewZeroRows = DonutHelper.mergeDataWithZeros(data, oldData, keyField, ColorReader.getChartColorField(chart));
+        const dataExtraZeroRows = DonutHelper.mergeDataWithZeros(oldData, data, keyField, ColorReader.getChartColorField(chart));
+        const donutBlock = block.getSvg().select(`.${this.donutBlockClass}`);
+        this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, dataNewZeroRows, chart);
+        const path = this.getAllArcGroups(block).data(pieGenerator(dataExtraZeroRows)).select("path");
+        const items = this.getAllArcGroups(block).data(pieGenerator(data));
+        this.setElementsColor(this.getAllArcGroups(block), chart);
+        return new Promise((resolve) => {
+            this.raiseClonesG(block);
+            path.interrupt()
+                .transition()
+                .duration(block.transitionManager.durations.chartUpdate)
+                .on("end", () => {
+                items.exit().remove();
+                resolve("updated");
+            })
+                .attrTween("d", function (d) {
+                const interpolateFunc = interpolate(this._currentData, d);
+                return (t) => {
+                    this._currentData = interpolateFunc(t); // _current - старые данные до обновления, задаются во время рендера
+                    return arcGenerator(this._currentData);
+                };
+            });
+        });
+    }
+    static updateColors(block, chart) {
+        this.setElementsColor(this.getAllArcGroups(block), chart);
+    }
+    static getAllArcGroups(block) {
+        return block.getSvg().selectAll(`.${this.arcItemClass}`);
+    }
+    static getAllArcClones(block) {
+        return block.getSvg().selectAll(`.${Donut.arcCloneClass}`);
+    }
+    static getAllArcShadows(block) {
+        return block.getSvg().selectAll(`.${this.arcShadowClass}`);
+    }
+    static renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart) {
+        const items = donutBlock
+            .selectAll(`.${this.arcItemClass}`)
+            .data(pieGenerator(data))
+            .enter()
+            .append("g")
+            .attr("class", this.arcItemClass);
+        const arcs = items
+            .append("path")
+            .attr("d", arcGenerator)
+            .attr("class", this.arcPathClass)
+            .each(function (d) {
+            this._currentData = d;
+        }); // _currentData используется для получения текущих данных внутри функции обновления.
+        DomHelper.setCssClasses(arcs, chart.cssClasses);
+        this.setElementsColor(items, chart);
+    }
+    static setElementsColor(arcItems, chart) {
+        arcItems.select("path").style("fill", ({ data }, i) => ColorReader.getColorForArc(data, chart, i));
+    }
+    /**
+     * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
+     */
+    static renderClonesG(donutBlock) {
+        const clonesShadowsG = donutBlock.append("g").attr("class", this.arcShadowsGroupClass).raise();
+        const clonesG = donutBlock.append("g").attr("class", this.arcClonesGroupClass).raise();
+        // ElementHighlighter.setShadowFilter(clonesG);
+    }
+    static raiseClonesG(block) {
+        block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcShadowsGroupClass}`).raise();
+        block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcClonesGroupClass}`).raise();
+    }
 }
 Donut.donutBlockClass = "donut-block";
 Donut.arcPathClass = "arc-path";

package/lib/engine/polarNotation/polarManager.d.ts

@@ -3,11 +3,11 @@ import { Block } from "../block/block";
 import { Engine } from "../engine";
 import { MdtChartsDataSource } from "../../config/config";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
-import { FilterEventManager } from "../filterManager/filterEventManager";
+import { ChartClearSelectionOptions, FilterEventManager } from "../filterManager/filterEventManager";
 export declare class PolarManager implements ChartContentManager {
-	render(engine: Engine, model: Model<PolarOptionsModel>): void;
-	updateData(block: Block, model: Model<PolarOptionsModel>, data: MdtChartsDataSource): void;
-	updateColors(block: Block, model: Model<PolarOptionsModel>): void;
-	clearSelection(filterEventManager: FilterEventManager, model: Model<PolarOptionsModel>): void;
-	private renderCharts;
+    render(engine: Engine, model: Model<PolarOptionsModel>): void;
+    updateData(block: Block, model: Model<PolarOptionsModel>, data: MdtChartsDataSource): void;
+    updateColors(block: Block, model: Model<PolarOptionsModel>): void;
+    clearSelection(filterEventManager: FilterEventManager, model: Model<PolarOptionsModel>, options?: ChartClearSelectionOptions): void;
+    private renderCharts;
 }

package/lib/engine/polarNotation/polarManager.js

@@ -4,72 +4,52 @@ import { ElementHighlighter } from "../elementHighlighter/elementHighlighter";
 import { Tooltip } from "../features/tolltip/tooltip";
 import { Aggregator } from "../features/aggregator/aggregator";
 import { Donut } from "./donut/donut";
-import { PolarRecordOverflowAlert } from "./extenders/polarRecordOverflowAlert";
+import { RecordOverflowAlertCore } from "../features/recordOverflowAlert/recordOverflowAlertCore";
 export class PolarManager {
-	render(engine, model) {
-		const options = model.options;
-		engine.block.svg.render(model.blockCanvas.size);
-		this.renderCharts(
-			engine.block,
-			options.charts,
-			engine.data,
-			options.data.dataSource,
-			model.chartBlock.margin,
-			model.blockCanvas.size,
-			options.chartCanvas
-		);
-		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);
-		engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
-		if (model.dataSettings.scope.hidedRecordsAmount !== 0)
-			PolarRecordOverflowAlert.render(engine.block, {
-				hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
-				legendPosition: model.options.legend.position
-			});
-		engine.block.getSvg().on("click", (e) => {
-			if (e.target === engine.block.getSvg().node()) this.clearSelection(engine.block.filterEventManager, model);
-		});
-	}
-	updateData(block, model, data) {
-		block.transitionManager.interruptTransitions();
-		block.removeMouseEvents();
-		block.filterEventManager.updateData(data[model.options.data.dataSource]);
-		Title.updateData(block, model.options.title);
-		ElementHighlighter.removeDonutArcClones(block);
-		ElementHighlighter.removeFilter(Donut.getAllArcGroups(block));
-		ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
-		Tooltip.hide(block);
-		const options = model.options;
-		Donut.update(
-			block,
-			data[options.data.dataSource],
-			model.chartBlock.margin,
-			options.charts[0],
-			model.blockCanvas.size,
-			options.chartCanvas,
-			options.data.keyField.name
-		).then(() => {
-			Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
-			block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
-		});
-		Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);
-		Legend.get().update(block, data, model);
-		PolarRecordOverflowAlert.update(block, {
-			hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
-			legendPosition: model.options.legend.position
-		});
-	}
-	updateColors(block, model) {
-		Legend.get().updateColors(block, model.options);
-		Donut.updateColors(block, model.options.charts[0]);
-	}
-	clearSelection(filterEventManager, model) {
-		filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, model.options);
-	}
-	renderCharts(block, charts, data, dataSource, margin, blockSize, donutSettings) {
-		charts.forEach((chart) => {
-			if (chart.type === "donut") Donut.render(block, data[dataSource], margin, chart, blockSize, donutSettings);
-		});
-	}
+    render(engine, model) {
+        const options = model.options;
+        engine.block.svg.render(model.blockCanvas.size);
+        this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, options.chartCanvas);
+        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);
+        engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
+        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);
+        });
+    }
+    updateData(block, model, data) {
+        block.transitionManager.interruptTransitions();
+        block.removeMouseEvents();
+        block.filterEventManager.updateData(data[model.options.data.dataSource]);
+        Title.updateData(block, model.options.title);
+        ElementHighlighter.removeDonutArcClones(block);
+        ElementHighlighter.removeFilter(Donut.getAllArcGroups(block));
+        ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
+        Tooltip.hide(block);
+        const options = model.options;
+        Donut.update(block, data[options.data.dataSource], model.chartBlock.margin, options.charts[0], model.blockCanvas.size, options.chartCanvas, options.data.keyField.name).then(() => {
+            Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
+            block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
+        });
+        Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);
+        Legend.get().update(block, data, model);
+        RecordOverflowAlertCore.update(block, options.recordOverflowAlert);
+    }
+    updateColors(block, model) {
+        Legend.get().updateColors(block, model.options);
+        Donut.updateColors(block, model.options.charts[0]);
+    }
+    clearSelection(filterEventManager, model, options) {
+        filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, model.options, options);
+    }
+    renderCharts(block, charts, data, dataSource, margin, blockSize, donutSettings) {
+        charts.forEach((chart) => {
+            if (chart.type === "donut")
+                Donut.render(block, data[dataSource], margin, chart, blockSize, donutSettings);
+        });
+    }
 }

package/lib/engine/transitionManager.d.ts

@@ -1,18 +1,19 @@
 import { Transitions } from "../designer/designerConfig";
 import { Block } from "./block/block";
-interface Durations extends Transitions {}
+interface Durations extends Transitions {
+}
 export declare class TransitionManager {
-	/**
-	 * Анимации обновления в ms.
-	 */
-	durations: Durations;
-	private block;
-	/**
-	 * Классы "подвижных" элементов
-	 */
-	private transitionableElemClasses;
-	constructor(block: Block, transitionsDurations?: Transitions);
-	interruptTransitions(): void;
-	private setDurations;
+    /**
+     * Анимации обновления в ms.
+     */
+    durations: Durations;
+    private block;
+    /**
+     * Классы "подвижных" элементов
+     */
+    private transitionableElemClasses;
+    constructor(block: Block, transitionsDurations?: Transitions);
+    interruptTransitions(): void;
+    private setDurations;
 }
 export {};