mdt-charts 1.10.3 → 1.12.1

package/lib/config/config.d.ts

@@ -14,9 +14,10 @@ export declare type MdtChartsDataRow = {
 export interface MdtChartsDataSource {
     [source: string]: MdtChartsDataRow[];
 }
+export declare type AxisLabelPosition = "straight" | "rotated";
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
-    options: PolarOptions | TwoDimensionalOptions | IntervalOptions;
+    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | IntervalOptions;
 }
 export interface ChartBlockCanvas {
     size: Size;
@@ -33,18 +34,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 +62,7 @@ export interface Legend {
 export interface DataOptions {
     dataSource: string;
     keyField: MdtChartsField;
+    maxRecordsAmount?: number;
 }
 export interface MdtChartsField {
     name: string;
@@ -69,6 +71,9 @@ export interface MdtChartsField {
 export interface ValueField extends MdtChartsField {
     title: string;
 }
+export interface TwoDimValueField extends ValueField {
+    color?: string;
+}
 export interface TooltipOptions {
     html: TooltipHtml;
 }
@@ -102,6 +107,10 @@ export interface NumberDomain {
     end: number;
 }
 export interface DiscreteAxisOptions extends AxisOptions {
+    labels?: MdtChartsDiscreteAxisLabel;
+}
+export interface MdtChartsDiscreteAxisLabel {
+    position?: AxisLabelPosition;
 }
 export interface IntervalAxis {
     key: DiscreteAxisOptions;
@@ -125,13 +134,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 +151,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/legend/legend.d.ts

@@ -3,12 +3,21 @@ import { MdtChartsDataSource } from "../../../config/config";
 import { IntervalOptionsModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { SelectionCondition } from "../../helpers/domHelper";
+export interface LegendContentRenderingOptions {
+    wrapperClasses: string[];
+    shouldCropLabels: boolean;
+    itemsOptions: {
+        wrapperClasses: string[];
+        markerClass: string;
+        labelClass: string;
+    };
+}
 export declare class Legend {
     static readonly objectClass = "legend-object";
     static readonly labelClass = "legend-label";
     static readonly itemClass = "legend-item";
     static readonly markerClass = "legend-circle";
-    private static readonly legendBlockClass;
+    static readonly legendBlockClass = "legend-block";
     static render(block: Block, data: MdtChartsDataSource, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, model: Model): void;
     static update(block: Block, data: MdtChartsDataSource, model: Model): void;
     static updateColors(block: Block, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel): void;

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

@@ -1,4 +1,3 @@
-import { select } from "d3-selection";
 import { ColorReader } from "../../colorReader/colorReader";
 import { SelectionCondition } from "../../helpers/domHelper";
 import { LegendDomHelper } from "./legendDomHelper";
@@ -41,8 +40,8 @@ export class Legend {
     static setContent(block, data, options, legendObject) {
         const items = LegendHelper.getLegendItemsContent(options, data);
         const colors = LegendHelper.getMarksColor(options, data[options.data.dataSource]);
-        const itemsDirection = LegendHelper.getLegendItemsDirection(options.type, options.legend.position);
-        const itemBlocks = this.renderContent(legendObject, items, colors, itemsDirection, options.legend.position);
+        const renderingOptions = LegendHelper.getContentRenderingOptions(options.type, options.legend.position);
+        const itemBlocks = this.renderContent(legendObject, items, colors, renderingOptions);
         if (options.type === 'polar') {
             LegendEventsManager.setListeners(block, options.data.keyField.name, itemBlocks, options.selectable);
         }
@@ -58,36 +57,25 @@ export class Legend {
         this.fillCoordinate(legendObject, legendCoordinate);
         return legendObject;
     }
-    static renderContent(legendObject, items, colorPalette, itemsDirection, position) {
-        const wrapper = legendObject.append('xhtml:div')
-            .attr('class', Legend.legendBlockClass);
-        wrapper
-            .style('height', '100%')
-            .style('display', 'flex');
-        if (itemsDirection === 'column') {
-            wrapper.style('flex-direction', 'column');
-            if (position === 'right')
-                wrapper.style('justify-content', 'center');
-        }
+    static renderContent(foreignObject, items, colorPalette, options) {
+        const wrapper = foreignObject.append('xhtml:div');
+        wrapper.classed(options.wrapperClasses.join(" "), true);
         const itemWrappers = wrapper
             .selectAll(`.${this.itemClass}`)
             .data(items)
             .enter()
             .append('div');
-        const thisClass = this;
-        itemWrappers.each(function (d, i) {
-            select(this).attr('class', `${thisClass.itemClass} ${LegendHelper.getItemClasses(itemsDirection, position, i)}`);
-        });
+        itemWrappers.classed(options.itemsOptions.wrapperClasses.join(" "), true);
         itemWrappers
             .append('span')
-            .attr('class', this.markerClass);
+            .classed(options.itemsOptions.markerClass, true);
         LegendDomHelper.setItemsColors(itemWrappers, colorPalette);
         itemWrappers
             .append('span')
-            .attr('class', LegendHelper.getLegendLabelClassByPosition(position))
+            .attr('class', options.itemsOptions.labelClass)
             .text(d => d);
-        if (itemsDirection === 'row')
-            LegendDomHelper.cropRowLabels(legendObject, itemWrappers);
+        if (options.shouldCropLabels)
+            LegendDomHelper.cropRowLabels(foreignObject, itemWrappers);
         return itemWrappers;
     }
     static getObject(block) {

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

@@ -1,6 +1,8 @@
 import { ChartNotation, MdtChartsDataRow, MdtChartsDataSource, Size } from "../../../config/config";
 import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
 import { IntervalOptionsModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { LegendContentRenderingOptions } from "./legend";
+import { LegendHelperService } from "./legendHelperService";
 export interface LegendCoordinate {
     x: number;
     y: number;
@@ -8,14 +10,11 @@ export interface LegendCoordinate {
     width: number;
 }
 export declare class LegendHelper {
+    static service: LegendHelperService;
     static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, data: MdtChartsDataSource): string[];
     static getMarksColor(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, dataRows?: MdtChartsDataRow[]): string[];
     static getMaxItemWidth(legendBlockWidth: string, marginsLeft: number[], itemsDirection: LegendItemsDirection): number;
-    static getItemClasses(itemsDirection: LegendItemsDirection, position: LegendPosition, index: number): string;
-    static getLegendItemClassByDirection(itemsDirection: LegendItemsDirection): string;
-    static getLegendItemsMarginClass(legendPosition: LegendPosition): string;
-    static getLegendLabelClassByPosition(position: LegendPosition): string;
-    static getLegendItemsDirection(chartNotation: ChartNotation, legendPosition: LegendPosition): LegendItemsDirection;
     static getSumOfItemsWidths(itemsWidth: number[], marginsLeft: number[]): number;
     static getLegendCoordinateByPosition(legendPosition: Orient, legendBlockModel: LegendBlockModel, blockSize: Size): LegendCoordinate;
+    static getContentRenderingOptions(chartNotation: ChartNotation, legendPosition: LegendPosition): LegendContentRenderingOptions;
 }

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

@@ -1,5 +1,6 @@
 import { Helper } from '../../helpers/helper';
 import { Legend } from "./legend";
+import { LegendHelperService } from "./legendHelperService";
 export class LegendHelper {
     static getLegendItemsContent(options, data) {
         if (options.type === '2d') {
@@ -40,29 +41,6 @@ export class LegendHelper {
         }
         return parseFloat(legendBlockWidth);
     }
-    static getItemClasses(itemsDirection, position, index) {
-        let cssClasses = this.getLegendItemClassByDirection(itemsDirection);
-        if (itemsDirection === 'column' && index !== 0)
-            cssClasses += ` ${this.getLegendItemsMarginClass(position)}`;
-        return cssClasses;
-    }
-    static getLegendItemClassByDirection(itemsDirection) {
-        return itemsDirection === 'column' ? 'legend-item-row' : 'legend-item-inline';
-    }
-    static getLegendItemsMarginClass(legendPosition) {
-        return legendPosition === 'right' ? 'mt-15' : 'mt-10';
-    }
-    static getLegendLabelClassByPosition(position) {
-        if (position === 'top' || position === 'bottom')
-            return `${Legend.labelClass} ${Legend.labelClass + '-nowrap'}`;
-        return Legend.labelClass;
-    }
-    static getLegendItemsDirection(chartNotation, legendPosition) {
-        if (legendPosition === 'right' || legendPosition === 'left')
-            return 'column';
-        else
-            return chartNotation === 'polar' ? 'column' : 'row';
-    }
     static getSumOfItemsWidths(itemsWidth, marginsLeft) {
         let sumOfItemsWidth = Helper.getSumOfNumeric(itemsWidth);
         sumOfItemsWidth += Helper.getSumOfNumeric(marginsLeft);
@@ -96,4 +74,22 @@ export class LegendHelper {
             coordinate.y = blockSize.height - legendModel.size - legendModel.margin.bottom;
         return coordinate;
     }
+    static getContentRenderingOptions(chartNotation, legendPosition) {
+        const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
+        return {
+            wrapperClasses: [
+                Legend.legendBlockClass,
+                this.service.getWrapperClassByItemsDirection(itemsDirection),
+                this.service.getWrapperJustifyContentClass(itemsDirection, legendPosition),
+                this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
+            ],
+            shouldCropLabels: chartNotation === "2d",
+            itemsOptions: {
+                markerClass: Legend.markerClass,
+                labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, Legend.labelClass),
+                wrapperClasses: [Legend.itemClass, this.service.getItemClasses(itemsDirection)]
+            }
+        };
+    }
 }
+LegendHelper.service = new LegendHelperService();

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

@@ -0,0 +1,12 @@
+import { ChartNotation } from "../../../config/config";
+import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
+import { LegendPosition } from "../../../model/model";
+export declare class LegendHelperService {
+    getWrapperClassByItemsDirection(itemsDirection: LegendItemsDirection): "legend-block-column" | "legend-block-row";
+    getWrapperJustifyContentClass(itemsDirection: LegendItemsDirection, legendPosition: LegendPosition): "" | "legend-block-centered";
+    getWrapperClassByWrappingItems(legendPosition: LegendPosition, chartNotation: ChartNotation): "legend-wrapper-with-wrap" | "legend-wrapper-without-wrap";
+    getLegendLabelClassByPosition(legendPosition: LegendPosition, chartNotation: ChartNotation, initialLabelClass: string): string;
+    getItemClasses(itemsDirection: LegendItemsDirection): string;
+    getLegendItemsDirection(legendPosition: LegendPosition): LegendItemsDirection;
+    private doesLegendInTopBy2d;
+}

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

@@ -0,0 +1,30 @@
+export class LegendHelperService {
+    getWrapperClassByItemsDirection(itemsDirection) {
+        return itemsDirection === "column" ? "legend-block-column" : "legend-block-row";
+    }
+    getWrapperJustifyContentClass(itemsDirection, legendPosition) {
+        return itemsDirection === "column" && legendPosition === "right" ? "legend-block-centered" : "";
+    }
+    getWrapperClassByWrappingItems(legendPosition, chartNotation) {
+        if (this.doesLegendInTopBy2d(legendPosition, chartNotation)) {
+            return "legend-wrapper-without-wrap";
+        }
+        return "legend-wrapper-with-wrap";
+    }
+    getLegendLabelClassByPosition(legendPosition, chartNotation, initialLabelClass) {
+        if (this.doesLegendInTopBy2d(legendPosition, chartNotation))
+            return `${initialLabelClass} ${initialLabelClass + '-nowrap'}`;
+        return initialLabelClass;
+    }
+    getItemClasses(itemsDirection) {
+        return itemsDirection === 'column' ? 'legend-item-row' : 'legend-item-inline';
+    }
+    getLegendItemsDirection(legendPosition) {
+        if (legendPosition === 'right' || legendPosition === 'left')
+            return 'column';
+        return "row";
+    }
+    doesLegendInTopBy2d(legendPosition, chartNotation) {
+        return legendPosition === 'top' && chartNotation === "2d";
+    }
+}

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
+        };
+    }
 }