mdt-charts 1.10.2 → 1.12.0

package/lib/config/config.d.ts

@@ -16,7 +16,7 @@ export interface MdtChartsDataSource {
 }
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
-    options: PolarOptions | TwoDimensionalOptions | IntervalOptions;
+    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | IntervalOptions;
 }
 export interface ChartBlockCanvas {
     size: Size;
@@ -33,18 +33,18 @@ export interface NewSize {
 interface Options {
     legend: Legend;
     data: DataOptions;
-    title: string;
+    title?: string;
     selectable: boolean;
     tooltip?: TooltipOptions;
 }
-export interface TwoDimensionalOptions extends Options {
+export interface MdtChartsTwoDimensionalOptions extends Options {
     type: '2d';
     axis: TwoDimensionalAxis;
     additionalElements: AdditionalElements;
     charts: TwoDimensionalChart[];
     orientation: ChartOrientation;
 }
-export interface PolarOptions extends Options {
+export interface MdtChartsPolarOptions extends Options {
     type: 'polar';
     chart: PolarChart;
 }
@@ -61,6 +61,7 @@ export interface Legend {
 export interface DataOptions {
     dataSource: string;
     keyField: MdtChartsField;
+    maxRecordsAmount?: number;
 }
 export interface MdtChartsField {
     name: string;
@@ -69,6 +70,9 @@ export interface MdtChartsField {
 export interface ValueField extends MdtChartsField {
     title: string;
 }
+export interface TwoDimValueField extends ValueField {
+    color?: string;
+}
 export interface TooltipOptions {
     html: TooltipHtml;
 }
@@ -125,13 +129,14 @@ export interface TwoDimensionalChart extends ChartSettings {
 export interface PolarChart extends ChartSettings {
     type: PolarChartType;
     data: PolarChartData;
+    aggregator: MdtChartsPolarChartAggregator;
 }
 export interface IntervalChart extends ChartSettings {
     type: IntervalChartType;
     data: IntervalChartData;
 }
 export interface TwoDimensionalChartData {
-    valueFields: ValueField[];
+    valueFields: TwoDimValueField[];
 }
 interface MarkersOptions {
     show: boolean;
@@ -141,6 +146,9 @@ export interface PolarChartData {
     valueField: ValueField;
     colorField?: MdtChartsColorField;
 }
+export interface MdtChartsPolarChartAggregator {
+    text: string;
+}
 interface IntervalChartData {
     valueField1: ValueField;
     valueField2: ValueField;

package/lib/designer/designerConfig.d.ts

@@ -4,6 +4,7 @@ export declare type DataTypeOptions = {
 };
 export declare type Formatter = (value: any, options?: any) => string;
 export declare type TooltipPosition = 'followCursor' | 'fixed';
+export declare type MdtChartsDonutThicknessUnit = "px" | "%";
 export interface DesignerConfig {
     canvas: Canvas;
     dataFormat: DataFormat;
@@ -45,9 +46,14 @@ export interface BarOptionsCanvas {
 }
 export interface DonutOptionsCanvas {
     padAngle: number;
-    minThickness: number;
-    maxThickness: number;
     aggregatorPad: number;
+    thickness: MdtChartsDonutThicknessOptions;
+}
+export interface MdtChartsDonutThicknessOptions {
+    min: number;
+    max: number;
+    value: number;
+    unit: MdtChartsDonutThicknessUnit;
 }
 interface DataFormat {
     formatters: Formatter;

package/lib/engine/features/aggregator/aggregator.d.ts

@@ -1,19 +1,20 @@
 import { MdtChartsDataRow } from '../../../config/config';
 import { DataType } from '../../../designer/designerConfig';
-import { Field } from "../../../model/model";
+import { DonutChartAggreagorModel, Field } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Translate } from "../../polarNotation/donut/donut";
 export interface AggregatorInfo {
     name: string;
     value: number;
     format: DataType;
+    margin: number;
 }
 export declare class Aggregator {
     static readonly aggregatorValueClass = "aggregator-value";
     private static readonly aggregatorNameClass;
     private static readonly aggregatorObjectClass;
-    static render(block: Block, data: MdtChartsDataRow[], valueField: Field, innerRadius: number, translate: Translate, fontSize: number, pad: number): void;
-    static update(block: Block, data: MdtChartsDataRow[], valueField: Field, pad: number): void;
+    static render(block: Block, data: MdtChartsDataRow[], valueField: Field, innerRadius: number, translate: Translate, fontSize: number, settings: DonutChartAggreagorModel): void;
+    static update(block: Block, data: MdtChartsDataRow[], valueField: Field, settings: DonutChartAggreagorModel): void;
     private static renderText;
     private static updateText;
     private static reCalculateAggregatorFontSize;

package/lib/engine/features/aggregator/aggregator.js

@@ -3,23 +3,25 @@ import { interpolateNumber } from 'd3-interpolate';
 import { Helper } from '../../helpers/helper';
 import { ValueFormatter } from '../../valueFormatter';
 export class Aggregator {
-    static render(block, data, valueField, innerRadius, translate, fontSize, pad) {
+    static render(block, data, valueField, innerRadius, translate, fontSize, settings) {
         const aggregator = {
-            name: 'Сумма',
+            name: settings.text,
             value: sum(data.map(d => d[valueField.name])),
-            format: valueField.format
+            format: valueField.format,
+            margin: settings.margin
         };
-        this.renderText(block, innerRadius, aggregator, translate, fontSize, pad);
+        this.renderText(block, innerRadius, aggregator, translate, fontSize);
     }
-    static update(block, data, valueField, pad) {
+    static update(block, data, valueField, settings) {
         const aggregator = {
             name: 'Сумма',
             value: sum(data.map(d => d[valueField.name])),
-            format: valueField.format
+            format: valueField.format,
+            margin: settings.margin
         };
-        this.updateText(block, aggregator, pad);
+        this.updateText(block, aggregator);
     }
-    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize, pad) {
+    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize) {
         if (innerRadius > 50) {
             const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
             const wrapper = this.renderWrapper(aggregatorObject);
@@ -32,13 +34,14 @@ export class Aggregator {
             wrapper
                 .append('div')
                 .attr('class', this.aggregatorNameClass)
+                .attr('title', aggregatorInfo.name)
                 .style('text-align', 'center')
                 .style('font-size', '18px')
                 .text(aggregatorInfo.name);
-            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, pad);
+            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.margin);
         }
     }
-    static updateText(block, newAggregator, pad) {
+    static updateText(block, newAggregator) {
         const aggregatorObject = block.getSvg()
             .select(`.${this.aggregatorObjectClass}`);
         const thisClass = this;
@@ -53,7 +56,7 @@ export class Aggregator {
             const interpolateFunc = interpolateNumber(oldValue, newAggregator.value);
             return t => {
                 this.textContent = ValueFormatter.formatField(newAggregator.format, (interpolateFunc(t)).toFixed(precision));
-                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, pad);
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.margin);
             };
         });
     }

package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.d.ts

@@ -0,0 +1,28 @@
+import { Block } from "../../block/block";
+export interface RecordOverflowAlertOptions {
+    hidedRecordsAmount: number;
+    text: RecordOverflowAlertText;
+    positionAttrs: AlertBlockPositionAttrs;
+}
+export interface RecordOverflowAlertText {
+    one: string;
+    twoToFour: string;
+    tenToTwenty: string;
+    other: string;
+}
+export interface AlertBlockPositionAttrs {
+    top?: string;
+    bottom?: string;
+    right?: string;
+    left?: string;
+}
+declare class RecordOverflowAlertCoreClass {
+    private readonly blockClass;
+    render(block: Block, options: RecordOverflowAlertOptions): void;
+    update(block: Block, options: RecordOverflowAlertOptions): void;
+    private getAlertText;
+    private getWordTextEndingByAmount;
+    private setAlertPosition;
+}
+export declare const RecordOverflowAlertCore: RecordOverflowAlertCoreClass;
+export {};

package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.js

@@ -0,0 +1,50 @@
+class RecordOverflowAlertCoreClass {
+    constructor() {
+        this.blockClass = 'record-overflow-alert';
+    }
+    render(block, options) {
+        const alertBlock = block.getWrapper()
+            .append('div')
+            .attr('class', this.blockClass)
+            .text(this.getAlertText(options));
+        this.setAlertPosition(alertBlock, options.positionAttrs);
+    }
+    update(block, options) {
+        let alertBlock = block.getWrapper()
+            .select(`div.${this.blockClass}`);
+        if (alertBlock.empty()) {
+            if (options.hidedRecordsAmount === 0)
+                return;
+            else
+                this.render(block, options);
+        }
+        else {
+            if (options.hidedRecordsAmount === 0)
+                alertBlock.remove();
+            else
+                alertBlock.text(this.getAlertText(options));
+        }
+    }
+    getAlertText(options) {
+        return `+ ${options.hidedRecordsAmount} ${this.getWordTextEndingByAmount(options.hidedRecordsAmount, options.text)}`;
+    }
+    getWordTextEndingByAmount(hidedRecordsAmount, text) {
+        const lastDigit = hidedRecordsAmount % 10;
+        if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
+            return text.tenToTwenty;
+        if (lastDigit === 1)
+            return text.one;
+        if (lastDigit >= 2 && lastDigit <= 4)
+            return text.twoToFour;
+        return text.other;
+    }
+    setAlertPosition(alertBlock, attrs) {
+        alertBlock
+            .style('position', 'absolute')
+            .style('left', attrs.left)
+            .style('right', attrs.right)
+            .style('top', attrs.top)
+            .style('bottom', attrs.bottom);
+    }
+}
+export const RecordOverflowAlertCore = new RecordOverflowAlertCoreClass();

package/lib/engine/features/title/title.js

@@ -1,6 +1,8 @@
 import { DomHelper } from '../../helpers/domHelper';
 export class Title {
     static render(block, text, titleBlockModel, blockSize) {
+        if (!text)
+            return;
         const titleBlock = block.getSvg()
             .append('text')
             .attr('class', 'chart-title');

package/lib/engine/features/tolltip/tooltip.js

@@ -19,7 +19,7 @@ export class Tooltip {
                 this.renderTooltipFor2DCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
             }
             else if (model.options.type === 'polar') {
-                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.chartSettings.donut, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
+                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
             }
             else if (model.options.type === 'interval') {
                 this.renderTooltipForIntervalCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);

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

@@ -1,6 +1,6 @@
 import { AxisScale } from "d3-axis";
 import { MdtChartsDataRow, Size } from "../../config/config";
-import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel, DonutChartSettings } from "../../model/model";
+import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
 export declare type FilterCallback = (rows: MdtChartsDataRow[]) => void;
 export interface SelectDetails {
@@ -19,12 +19,12 @@ export declare class FilterEventManager {
     updateData(newDataset: MdtChartsDataRow[]): void;
     isSelected(keyValue: string): boolean;
     clearKeysFor2D(options: TwoDimensionalOptionsModel): void;
-    clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel, donutSettings: DonutChartSettings): void;
+    clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
     private setKey;
     private addId;
     private removeId;
     private processKey;
-    setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel, donutSettings: DonutChartSettings): void;
+    setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
     event2DUpdate(options: TwoDimensionalOptionsModel): void;
     registerEventFor2D(scaleKey: AxisScale<any>, margin: BlockMargin, blockSize: Size, options: TwoDimensionalOptionsModel): void;
     private registerEventToDonut;

package/lib/engine/filterManager/filterEventManager.js

@@ -29,11 +29,11 @@ export class FilterEventManager {
             this.callback([]);
         SelectHighlighter.clear2D(this.block, options);
     }
-    clearKeysForPolar(margin, blockSize, options, donutSettings) {
+    clearKeysForPolar(margin, blockSize, options) {
         this.selectedKeys = [];
         if (this.callback)
             this.callback([]);
-        SelectHighlighter.clearPolar(margin, blockSize, this.block, options, Donut.getAllArcGroups(this.block), donutSettings);
+        SelectHighlighter.clearPolar(margin, blockSize, this.block, options, Donut.getAllArcGroups(this.block), options.chartCanvas);
     }
     setKey(key) {
         this.selectedKeys = [key];
@@ -66,9 +66,9 @@ export class FilterEventManager {
             }
         }
     }
-    setListenerPolar(margin, blockSize, options, donutSettings) {
+    setListenerPolar(margin, blockSize, options) {
         if (this.filterable) {
-            this.registerEventToDonut(margin, blockSize, options, donutSettings);
+            this.registerEventToDonut(margin, blockSize, options, options.chartCanvas);
             const selectedElems = Donut.getAllArcGroups(this.block).filter(d => this.selectedKeys.findIndex(sid => sid === d.data[options.data.keyField.name]) !== -1);
             this.selectedKeys = [];
             selectedElems.dispatch('click', { bubbles: false, cancelable: true, detail: { multySelect: true } });

package/lib/engine/intervalNotation/intervalManager.js

@@ -1,7 +1,6 @@
 import { Axis } from "../features/axis/axis";
 import { GridLine } from "../features/gridLine/gridLine";
 import { Legend } from "../features/legend/legend";
-import { RecordOverflowAlert } from "../features/recordOverflowAlert/recordOverflowAlert";
 import { Scale } from "../features/scale/scale";
 import { Title } from "../features/title/title";
 import { Tooltip } from "../features/tolltip/tooltip";
@@ -10,15 +9,13 @@ export class IntervalManager {
     static render(block, model, data) {
         const options = model.options;
         block.renderSvg(model.blockCanvas.size);
-        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         Axis.render(block, scales, options.scale, options.axis, model.blockCanvas.size);
         GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
-        this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, model.chartSettings);
+        this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings);
         Title.render(block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(block, data, options, model);
         Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
-        if (model.dataSettings.scope.hidedRecordsAmount !== 0)
-            RecordOverflowAlert.render(block, model.dataSettings.scope.hidedRecordsAmount, 'top', options.orient);
     }
     static renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings) {
         block.renderChartsBlock();

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

@@ -12,4 +12,6 @@ export declare class DonutHelper {
     static getArcGenerator(outerRadius: number, innerRadius: number): Arc<any, PieArcDatum<MdtChartsDataRow>>;
     static getPieGenerator(valueField: string, padAngle: number): Pie<any, MdtChartsDataRow>;
     static mergeDataWithZeros(firstDataset: MdtChartsDataRow[], secondDataset: MdtChartsDataRow[], keyField: string, colorField: MdtChartsColorField): MdtChartsDataRow[];
+    private static getThicknessByUnit;
+    private static getChartBlockSize;
 }

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

@@ -1,10 +1,15 @@
 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) {
-        if (Math.min(blockSize.width - margin.left - margin.right, blockSize.height - margin.bottom - margin.top) > 400)
-            return donutSettings.maxThickness;
-        return donutSettings.minThickness;
+        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);
@@ -57,4 +62,16 @@ export class DonutHelper {
         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.js

@@ -11,6 +11,7 @@ export class Donut {
         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, data, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
         const donutBlock = block.getSvg()
             .append('g')
             .attr('class', this.donutBlockClass)
@@ -19,7 +20,6 @@ export class Donut {
             .attr('transform', `translate(${translateAttr.x}, ${translateAttr.y})`);
         this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart);
         this.renderClonesG(donutBlock);
-        Aggregator.render(block, data, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregatorPad);
     }
     static update(block, data, margin, chart, blockSize, donutSettings, keyField) {
         const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);

package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.d.ts

@@ -0,0 +1,16 @@
+import { LegendPosition } from "../../../model/model";
+import { Block } from "../../block/block";
+interface PolarRecordOverflowAlertOptions {
+    hidedRecordsAmount: number;
+    legendPosition: LegendPosition;
+}
+declare class PolarRecordOverflowAlertClass {
+    private readonly text;
+    render(block: Block, options: PolarRecordOverflowAlertOptions): void;
+    update(block: Block, options: PolarRecordOverflowAlertOptions): void;
+    private buildCoreOptions;
+    private getPositionAttrs;
+    private getLeftAttrForRightBlock;
+}
+export declare const PolarRecordOverflowAlert: PolarRecordOverflowAlertClass;
+export {};

package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js

@@ -0,0 +1,48 @@
+import { Legend } from "../../features/legend/legend";
+import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/recordOverflowAlertCore";
+import { DomHelper } from "../../helpers/domHelper";
+class PolarRecordOverflowAlertClass {
+    constructor() {
+        this.text = {
+            one: 'категория',
+            twoToFour: 'категории',
+            tenToTwenty: 'категорий',
+            other: 'категорий'
+        };
+    }
+    render(block, options) {
+        RecordOverflowAlertCore.render(block, this.buildCoreOptions(block, options));
+    }
+    update(block, options) {
+        RecordOverflowAlertCore.update(block, this.buildCoreOptions(block, options));
+    }
+    buildCoreOptions(block, options) {
+        return {
+            hidedRecordsAmount: options.hidedRecordsAmount,
+            text: this.text,
+            positionAttrs: this.getPositionAttrs(block, options)
+        };
+    }
+    getPositionAttrs(block, options) {
+        const position = options.legendPosition === 'off' ? 'bottom' : options.legendPosition;
+        if (position === 'right') {
+            return {
+                bottom: '20px',
+                left: this.getLeftAttrForRightBlock(block) + 'px'
+            };
+        }
+        if (position === 'bottom') {
+            return {
+                bottom: '20px',
+                left: '20px'
+            };
+        }
+    }
+    getLeftAttrForRightBlock(block) {
+        const legendBlock = block.getSvg().select(`.${Legend.objectClass}`);
+        if (legendBlock.empty())
+            return 17;
+        return DomHelper.getSelectionNumericAttr(legendBlock, 'x');
+    }
+}
+export const PolarRecordOverflowAlert = new PolarRecordOverflowAlertClass();

package/lib/engine/polarNotation/polarManager.js

@@ -1,26 +1,28 @@
 import { Legend } from "../features/legend/legend";
-import { RecordOverflowAlert } from "../features/recordOverflowAlert/recordOverflowAlert";
 import { Title } from "../features/title/title";
 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";
 export class PolarManager {
     static render(engine, model) {
         const options = model.options;
         engine.block.renderSvg(model.blockCanvas.size);
-        this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, model.chartSettings.donut);
+        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.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, model.chartSettings.donut);
-        if (model.dataSettings.scope.hidedRecordsAmount !== 0 && model.options.legend.position !== 'off')
-            RecordOverflowAlert.render(engine.block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
+        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())
-                engine.block.filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+                engine.block.filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
     }
     static update(block, model, data) {
@@ -32,15 +34,17 @@ export class PolarManager {
         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, model.chartSettings.donut, options.data.keyField.name)
+        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, model.chartSettings.donut);
+            block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
-        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, model.chartSettings.donut.aggregatorPad);
+        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, options.chartCanvas.aggregator);
         Legend.update(block, data, model);
-        if (model.options.legend.position !== 'off')
-            RecordOverflowAlert.update(block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
+        PolarRecordOverflowAlert.update(block, {
+            hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+            legendPosition: model.options.legend.position
+        });
     }
     static updateColors(block, model) {
         Legend.updateColors(block, model.options);

package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.d.ts

@@ -0,0 +1,15 @@
+import { ChartOrientation } from "../../../config/config";
+import { Block } from "../../block/block";
+interface TwoDimRecordOverflowAlertOptions {
+    hidedRecordsAmount: number;
+    chartOrientation: ChartOrientation;
+}
+declare class TwoDimRecordOverflowAlertClass {
+    render(block: Block, options: TwoDimRecordOverflowAlertOptions): void;
+    update(block: Block, options: TwoDimRecordOverflowAlertOptions): void;
+    private buildCoreOptions;
+    private getText;
+    private getPositionAttrs;
+}
+export declare const TwoDimRecordOverflowAlert: TwoDimRecordOverflowAlertClass;
+export {};

package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js

@@ -0,0 +1,32 @@
+import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/recordOverflowAlertCore";
+class TwoDimRecordOverflowAlertClass {
+    render(block, options) {
+        RecordOverflowAlertCore.render(block, this.buildCoreOptions(options));
+    }
+    update(block, options) {
+        RecordOverflowAlertCore.update(block, this.buildCoreOptions(options));
+    }
+    buildCoreOptions(options) {
+        return {
+            hidedRecordsAmount: options.hidedRecordsAmount,
+            text: this.getText(options.chartOrientation),
+            positionAttrs: this.getPositionAttrs()
+        };
+    }
+    getText(chartOrientation) {
+        const isHorizontal = chartOrientation === 'horizontal';
+        return {
+            one: isHorizontal ? 'строка' : 'столбец',
+            twoToFour: isHorizontal ? 'строки' : 'столбца',
+            tenToTwenty: isHorizontal ? 'строк' : 'столбцов',
+            other: isHorizontal ? 'строк' : 'столбцов'
+        };
+    }
+    getPositionAttrs() {
+        return {
+            right: '17px',
+            top: '1rem'
+        };
+    }
+}
+export const TwoDimRecordOverflowAlert = new TwoDimRecordOverflowAlertClass();