mdt-charts 1.12.0 → 1.12.4

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: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | IntervalOptions;
+    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions;
 }
 export interface ChartBlockCanvas {
     size: Size;
@@ -41,14 +42,14 @@ export interface MdtChartsTwoDimensionalOptions extends Options {
     type: '2d';
     axis: TwoDimensionalAxis;
     additionalElements: AdditionalElements;
-    charts: TwoDimensionalChart[];
+    charts: MdtChartsTwoDimensionalChart[];
     orientation: ChartOrientation;
 }
 export interface MdtChartsPolarOptions extends Options {
     type: 'polar';
     chart: PolarChart;
 }
-export interface IntervalOptions extends Options {
+export interface MdtChartsIntervalOptions extends Options {
     type: 'interval';
     axis: IntervalAxis;
     chart: IntervalChart;
@@ -67,10 +68,10 @@ export interface MdtChartsField {
     name: string;
     format: DataType;
 }
-export interface ValueField extends MdtChartsField {
+export interface MdtChartsValueField extends MdtChartsField {
     title: string;
 }
-export interface TwoDimValueField extends ValueField {
+export interface TwoDimValueField extends MdtChartsValueField {
     color?: string;
 }
 export interface TooltipOptions {
@@ -106,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;
@@ -119,7 +124,7 @@ interface ChartSettings {
 interface Tooltip {
     show: boolean;
 }
-export interface TwoDimensionalChart extends ChartSettings {
+export interface MdtChartsTwoDimensionalChart extends ChartSettings {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartData;
     embeddedLabels: EmbeddedLabelType;
@@ -129,7 +134,7 @@ export interface TwoDimensionalChart extends ChartSettings {
 export interface PolarChart extends ChartSettings {
     type: PolarChartType;
     data: PolarChartData;
-    aggregator: MdtChartsPolarChartAggregator;
+    aggregator?: MdtChartsDonutAggregator;
 }
 export interface IntervalChart extends ChartSettings {
     type: IntervalChartType;
@@ -143,14 +148,21 @@ interface MarkersOptions {
 }
 export declare type MdtChartsColorField = string;
 export interface PolarChartData {
-    valueField: ValueField;
+    valueField: MdtChartsValueField;
     colorField?: MdtChartsColorField;
 }
-export interface MdtChartsPolarChartAggregator {
-    text: string;
+export interface MdtChartsDonutAggregator {
+    content?: (model: MdtChartsAggregatorModel) => MdtChartsAggregatorContent;
+}
+export interface MdtChartsAggregatorModel {
+    data: MdtChartsDataRow[];
+}
+export interface MdtChartsAggregatorContent {
+    value: string | number;
+    title: string;
 }
 interface IntervalChartData {
-    valueField1: ValueField;
-    valueField2: ValueField;
+    valueField1: MdtChartsValueField;
+    valueField2: MdtChartsValueField;
 }
 export {};

package/lib/designer/designerConfig.d.ts

@@ -4,7 +4,6 @@ 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;
@@ -50,10 +49,9 @@ export interface DonutOptionsCanvas {
     thickness: MdtChartsDonutThicknessOptions;
 }
 export interface MdtChartsDonutThicknessOptions {
-    min: number;
-    max: number;
-    value: number;
-    unit: MdtChartsDonutThicknessUnit;
+    min: number | string;
+    max: number | string;
+    value?: number | string;
 }
 interface DataFormat {
     formatters: Formatter;

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

@@ -1,23 +1,25 @@
-import { MdtChartsDataRow } from '../../../config/config';
 import { DataType } from '../../../designer/designerConfig';
-import { DonutChartAggreagorModel, Field } from "../../../model/model";
+import { DonutAggregatorModel, Field } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Translate } from "../../polarNotation/donut/donut";
 export interface AggregatorInfo {
     name: string;
-    value: number;
+    value: number | string;
     format: DataType;
-    margin: number;
+    marginInPercent: number;
 }
 export declare class Aggregator {
     static readonly aggregatorValueClass = "aggregator-value";
-    private static readonly aggregatorNameClass;
+    private static readonly aggregatorTitleClass;
     private static readonly aggregatorObjectClass;
-    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;
+    static render(block: Block, valueField: Field, innerRadius: number, translate: Translate, fontSize: number, settings: DonutAggregatorModel): void;
+    static update(block: Block, valueField: Field, settings: DonutAggregatorModel): void;
+    private static buildConfig;
     private static renderText;
+    private static formatValue;
     private static updateText;
     private static reCalculateAggregatorFontSize;
+    private static setTitleFontSize;
     private static renderAggregatorObject;
     private static renderWrapper;
 }

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

@@ -1,76 +1,90 @@
-import { sum } from 'd3-array';
 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, settings) {
-        const aggregator = {
-            name: settings.text,
-            value: sum(data.map(d => d[valueField.name])),
-            format: valueField.format,
-            margin: settings.margin
-        };
-        this.renderText(block, innerRadius, aggregator, translate, fontSize);
+    static render(block, valueField, innerRadius, translate, fontSize, settings) {
+        const aggregator = this.buildConfig(valueField, settings);
+        this.renderText(block, innerRadius, aggregator, fontSize, translate);
+    }
+    static update(block, valueField, settings) {
+        const aggregator = this.buildConfig(valueField, settings);
+        this.updateText(block, aggregator, typeof aggregator.value === "string");
     }
-    static update(block, data, valueField, settings) {
-        const aggregator = {
-            name: 'Сумма',
-            value: sum(data.map(d => d[valueField.name])),
+    static buildConfig(valueField, settings) {
+        return {
+            name: settings.content.title,
+            value: settings.content.value,
             format: valueField.format,
-            margin: settings.margin
+            marginInPercent: settings.margin
         };
-        this.updateText(block, aggregator);
     }
-    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize) {
-        if (innerRadius > 50) {
+    static renderText(block, innerRadius, aggregatorInfo, fontSize, translate) {
+        if (innerRadius > 30) {
             const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
             const wrapper = this.renderWrapper(aggregatorObject);
             wrapper
                 .append('div')
                 .attr('class', this.aggregatorValueClass)
+                .attr('title', this.formatValue(aggregatorInfo.format, aggregatorInfo.value))
                 .style('text-align', 'center')
                 .style('font-size', `${fontSize}px`)
-                .text(ValueFormatter.formatField(aggregatorInfo.format, aggregatorInfo.value));
-            wrapper
+                .text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
+            const titleBlock = wrapper
                 .append('div')
-                .attr('class', this.aggregatorNameClass)
+                .attr('class', this.aggregatorTitleClass)
                 .attr('title', aggregatorInfo.name)
                 .style('text-align', 'center')
-                .style('font-size', '18px')
                 .text(aggregatorInfo.name);
-            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.margin);
+            this.setTitleFontSize(titleBlock, innerRadius);
+            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.marginInPercent);
         }
     }
-    static updateText(block, newAggregator) {
+    static formatValue(format, value) {
+        if (typeof value === "string")
+            return value;
+        return ValueFormatter.formatField(format, value);
+    }
+    static updateText(block, newAggregator, withoutAnimation) {
         const aggregatorObject = block.getSvg()
             .select(`.${this.aggregatorObjectClass}`);
         const thisClass = this;
-        block.getSvg()
-            .select(`.${this.aggregatorValueClass}`)
+        const valueBlock = block.getSvg()
+            .select(`.${this.aggregatorValueClass}`);
+        if (withoutAnimation) {
+            valueBlock.text(this.formatValue(newAggregator.format, newAggregator.value));
+            return;
+        }
+        valueBlock
             .interrupt()
             .transition()
             .duration(block.transitionManager.durations.chartUpdate)
             .tween("text", function () {
+            const newValue = typeof newAggregator.value === "string" ? parseFloat(newAggregator.value) : newAggregator.value;
             const oldValue = Helper.parseFormattedToNumber(this.textContent, ',');
-            const precision = Helper.calcDigitsAfterDot(newAggregator.value);
-            const interpolateFunc = interpolateNumber(oldValue, newAggregator.value);
+            const precision = Helper.calcDigitsAfterDot(newValue);
+            const interpolateFunc = interpolateNumber(oldValue, newValue);
             return t => {
-                this.textContent = ValueFormatter.formatField(newAggregator.format, (interpolateFunc(t)).toFixed(precision));
-                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.margin);
+                this.textContent = thisClass.formatValue(newAggregator.format, parseFloat((interpolateFunc(t)).toFixed(precision)));
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.marginInPercent);
             };
         });
     }
     static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
-        const aggreggatorValue = block.getSvg()
+        const aggregatorValue = block.getSvg()
             .select(`.${this.aggregatorValueClass}`);
-        let fontSize = parseInt(aggreggatorValue.style('font-size'));
-        while (aggreggatorValue.node().getBoundingClientRect().width > wrapperSize - pad * 2 && fontSize > 15) {
-            aggreggatorValue.style('font-size', `${fontSize -= 2}px`);
-        }
-        while (aggreggatorValue.node().getBoundingClientRect().width < wrapperSize - pad * 2 && fontSize < 60) {
-            aggreggatorValue.style('font-size', `${fontSize += 2}px`);
+        const sizeCoefficient = 0.25;
+        let fontSize = wrapperSize * sizeCoefficient;
+        aggregatorValue.style('font-size', `${fontSize}px`);
+        const margin = pad / 100 * wrapperSize;
+        while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - margin * 2 && fontSize > 12) {
+            aggregatorValue.style('font-size', `${fontSize -= 2}px`);
         }
     }
+    static setTitleFontSize(aggregatorTitle, innerRadius) {
+        const sizeCoefficient = 0.15;
+        aggregatorTitle.style('font-size', `${Math.round(innerRadius * sizeCoefficient)}px`);
+        aggregatorTitle.style('max-height', `${sizeCoefficient * 100}%`);
+    }
     static renderAggregatorObject(block, innerRadius, translate) {
         return block.getSvg()
             .append('foreignObject')
@@ -94,5 +108,5 @@ export class Aggregator {
     }
 }
 Aggregator.aggregatorValueClass = 'aggregator-value';
-Aggregator.aggregatorNameClass = 'aggregator-name';
+Aggregator.aggregatorTitleClass = 'aggregator-name';
 Aggregator.aggregatorObjectClass = 'aggregator-object';

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/polarNotation/donut/donut.js

@@ -11,7 +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);
+        Aggregator.render(block, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
         const donutBlock = block.getSvg()
             .append('g')
             .attr('class', this.donutBlockClass)

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

@@ -10,7 +10,6 @@ declare class PolarRecordOverflowAlertClass {
     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

@@ -1,6 +1,4 @@
-import { Legend } from "../../features/legend/legend";
 import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/recordOverflowAlertCore";
-import { DomHelper } from "../../helpers/domHelper";
 class PolarRecordOverflowAlertClass {
     constructor() {
         this.text = {
@@ -11,38 +9,32 @@ class PolarRecordOverflowAlertClass {
         };
     }
     render(block, options) {
-        RecordOverflowAlertCore.render(block, this.buildCoreOptions(block, options));
+        RecordOverflowAlertCore.render(block, this.buildCoreOptions(options));
     }
     update(block, options) {
-        RecordOverflowAlertCore.update(block, this.buildCoreOptions(block, options));
+        RecordOverflowAlertCore.update(block, this.buildCoreOptions(options));
     }
-    buildCoreOptions(block, options) {
+    buildCoreOptions(options) {
         return {
             hidedRecordsAmount: options.hidedRecordsAmount,
             text: this.text,
-            positionAttrs: this.getPositionAttrs(block, options)
+            positionAttrs: this.getPositionAttrs(options)
         };
     }
-    getPositionAttrs(block, options) {
+    getPositionAttrs(options) {
         const position = options.legendPosition === 'off' ? 'bottom' : options.legendPosition;
         if (position === 'right') {
             return {
-                bottom: '20px',
-                left: this.getLeftAttrForRightBlock(block) + 'px'
+                bottom: '0',
+                right: '0'
             };
         }
         if (position === 'bottom') {
             return {
-                bottom: '20px',
-                left: '20px'
+                bottom: '0',
+                left: '0'
             };
         }
     }
-    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

@@ -39,7 +39,7 @@ export class PolarManager {
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
             block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
-        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, options.chartCanvas.aggregator);
+        Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);
         Legend.update(block, data, model);
         PolarRecordOverflowAlert.update(block, {
             hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,

package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.d.ts

@@ -1,16 +1,16 @@
-import { TwoDimensionalChart, TwoDimensionalChartType } from "../../config/config";
+import { MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../config/config";
 import { ChartStyleConfig } from "../../designer/designerConfig";
 import { ChartStyle } from "../model";
 export declare class TwoDimensionalChartStyleModel {
     private charts;
     private chartStyleConfig;
     private service;
-    constructor(charts: TwoDimensionalChart[], chartStyleConfig: ChartStyleConfig);
-    getChartStyle(chart: TwoDimensionalChart, chartIndex: number): ChartStyle;
+    constructor(charts: MdtChartsTwoDimensionalChart[], chartStyleConfig: ChartStyleConfig);
+    getChartStyle(chart: MdtChartsTwoDimensionalChart, chartIndex: number): ChartStyle;
     private getChartsValueFieldsAmounts;
 }
 export declare class TwoDimensionalChartStyleService {
-    getChartColors(chart: TwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
+    getChartColors(chart: MdtChartsTwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
     getChartOpacity(chartsLength: number, chartType: TwoDimensionalChartType, chartsValueFieldAmount: number, isChartSegmented: boolean): number;
     private generateNewChartColors;
     private isMoreThanOneValueFieldOnCanvas;

package/lib/model/dataManagerModel/dataManagerModel.d.ts

@@ -2,6 +2,13 @@ import { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { LegendBlockModel } from "../model";
 import { ModelInstance } from "../modelInstance/modelInstance";
+export interface DataLegendParams {
+    amount: number;
+    size: {
+        width: number;
+        height: number;
+    };
+}
 export declare class DataManagerModel {
     private static service;
     static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
@@ -9,6 +16,7 @@ export declare class DataManagerModel {
     static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
     private static initDataScopeFor2D;
     private static initDataScopeForPolar;
+    private static getLegendDataParams;
     private static getMaximumPossibleScope;
     private static limitAllowableKeys;
     /**