mdt-charts 1.12.0 → 1.12.4

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -1,7 +1,8 @@
 import { AxisModel } from "../featuresModel/axisModel";
 import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
+import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
 import { ModelHelper } from "../modelHelper";
-import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polarModel";
+import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
 import { DataManagerModelService } from "./dataManagerModelService";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
@@ -44,28 +45,40 @@ export class DataManagerModel {
         }
     }
     static initDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
-        const canvas = modelInstance.canvasModel;
-        const dataset = data[configOptions.data.dataSource];
+        const canvasModel = modelInstance.canvasModel;
         const keyFieldName = configOptions.data.keyField.name;
-        const keys = dataset.map(dataRow => dataRow[keyFieldName]);
+        const keys = data[configOptions.data.dataSource].map(dataRow => dataRow[keyFieldName]);
         if (!configOptions.legend.show) {
             modelInstance.dataModel.initScope(this.getMaximumPossibleScope(keys, modelInstance.dataModel));
             return;
         }
-        const position = PolarModel.getLegendPositionByBlockSize(modelInstance.canvasModel);
-        let maxItemsNumber;
-        if (position === 'right') {
-            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvas.getChartBlockHeight());
-        }
-        else {
-            const margin = canvas.getMargin();
-            const marginBottomWithoutLegendBlock = margin.bottom - (legendBlock.coordinate.bottom.size === 0 ? legendBlock.coordinate.bottom.size : legendBlock.coordinate.bottom.size - legendBlock.coordinate.bottom.margin.bottom);
-            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, canvas.getChartBlockWidth(), canvas.getBlockSize().height - margin.top - marginBottomWithoutLegendBlock - legendBlock.coordinate.bottom.margin.bottom - MIN_DONUT_BLOCK_SIZE);
+        let position = PolarModel.getLegendPositionByBlockSize(modelInstance.canvasModel);
+        let { amount: maxItemsNumber, size } = this.getLegendDataParams(position, keys, legendCanvas, canvasModel, legendBlock);
+        if (position === "right" && !PolarModel.doesChartBlockHasEnoughWidthForContainsLegend(canvasModel.getChartBlockWidth(), size.width, legendBlock.coordinate)) {
+            const doesFreeSpaceExist = PolarModel.doesChartBlockHasEnoughHeightForContainsLegend(canvasModel.getChartBlockHeight(), legendBlock.coordinate);
+            if (doesFreeSpaceExist) {
+                const newParams = this.getLegendDataParams("bottom", keys, legendCanvas, canvasModel, legendBlock);
+                position = "bottom";
+                maxItemsNumber = newParams.amount;
+                size = newParams.size;
+            }
         }
+        //TODO: global refactor of method
         const allowableKeys = keys.slice(0, maxItemsNumber);
         const hidedRecordsAmount = keys.length - maxItemsNumber;
+        const marginCalculator = new LegendPolarMarginCalculator();
+        marginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" ? size.height : size.width);
         modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
     }
+    //TODO: position type
+    static getLegendDataParams(position, keys, legendCanvas, canvasModel, legendBlock) {
+        if (position === 'right') {
+            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
+        }
+        else {
+            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
+        }
+    }
     static getMaximumPossibleScope(keys, dataModel) {
         return this.service.getMaximumPossibleAmount(keys, dataModel.getMaxRecordsAmount());
     }

package/lib/model/featuresModel/axisModel.d.ts

@@ -1,5 +1,5 @@
-import { AxisPosition, ChartOrientation, DataOptions, MdtChartsDataSource, DiscreteAxisOptions, NumberAxisOptions, TwoDimensionalChart } from "../../config/config";
-import { AxisLabelPosition, AxisModelOptions, Orient } from "../model";
+import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions } from "../../config/config";
+import { AxisModelOptions, Orient } from "../model";
 import { AxisType } from "../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
 import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
@@ -8,12 +8,13 @@ export interface LabelSize {
     height: number;
 }
 export declare class AxisModel {
-    static getKeyAxis(charts: TwoDimensionalChart[], data: MdtChartsDataSource, dataOptions: DataOptions, orient: ChartOrientation, axisConfig: DiscreteAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings): AxisModelOptions;
+    private static service;
+    static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings): AxisModelOptions;
     static getValueAxis(orient: ChartOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
     static getAxisLength(chartOrientation: ChartOrientation, canvasModel: CanvasModel): number;
     static getAxisOrient(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition): Orient;
     static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
     static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
-    static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number): AxisLabelPosition;
+    static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number, axisConfig?: DiscreteAxisOptions): AxisLabelPosition;
     static getLabelSize(labelMaxWidth: number, labelTexts: any[]): LabelSize;
 }

package/lib/model/featuresModel/axisModel.js

@@ -2,21 +2,24 @@ import { ModelHelper } from "../modelHelper";
 import { AxisType, CLASSES } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
+import { AxisModelService } from "./axisModelService";
 export class AxisModel {
-    static getKeyAxis(charts, data, dataOptions, orient, axisConfig, labelConfig, canvasModel, tooltipSettings) {
+    static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings) {
+        const { charts, orientation, data: dataOptions } = options;
+        const axisConfig = options.axis.key;
         return {
             type: 'key',
-            orient: AxisModel.getAxisOrient(AxisType.Key, orient, axisConfig.position),
+            orient: AxisModel.getAxisOrient(AxisType.Key, orientation, axisConfig.position),
             translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Key, orient, axisConfig.position, canvasModel),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Key, orient, axisConfig.position, canvasModel)
+                translateX: AxisModel.getAxisTranslateX(AxisType.Key, orientation, axisConfig.position, canvasModel),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Key, orientation, axisConfig.position, canvasModel)
             },
             cssClass: 'key-axis',
             ticks: axisConfig.ticks,
             labels: {
                 maxSize: AxisModel.getLabelSize(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
-                position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length),
-                visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orient),
+                position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length, axisConfig),
+                visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
                 defaultTooltip: tooltipSettings.position === 'fixed'
             },
             visibility: axisConfig.visibility
@@ -75,11 +78,9 @@ export class AxisModel {
             return canvasModel.getBlockSize().height - canvasModel.getMarginSide("bottom");
         return canvasModel.getMarginSide("top");
     }
-    static getKeyAxisLabelPosition(canvasModel, scopedDataLength) {
-        const minBandSize = 50;
-        if (canvasModel.getChartBlockWidth() / scopedDataLength < minBandSize)
-            return 'rotated';
-        return 'straight';
+    static getKeyAxisLabelPosition(canvasModel, scopedDataLength, axisConfig) {
+        var _a;
+        return this.service.getKeyAxisLabelPosition(canvasModel.getChartBlockWidth(), scopedDataLength, (_a = axisConfig === null || axisConfig === void 0 ? void 0 : axisConfig.labels) === null || _a === void 0 ? void 0 : _a.position);
     }
     static getLabelSize(labelMaxWidth, labelTexts) {
         const labelSize = {
@@ -109,3 +110,4 @@ export class AxisModel {
         return labelSize;
     }
 }
+AxisModel.service = new AxisModelService();

package/lib/model/featuresModel/axisModelService.d.ts

@@ -0,0 +1,4 @@
+import { AxisLabelPosition } from "../../config/config";
+export declare class AxisModelService {
+    getKeyAxisLabelPosition(chartBlockWidth: number, scopedDataLength: number, positionFromConfig?: AxisLabelPosition): AxisLabelPosition;
+}

package/lib/model/featuresModel/axisModelService.js

@@ -0,0 +1,11 @@
+export class AxisModelService {
+    getKeyAxisLabelPosition(chartBlockWidth, scopedDataLength, positionFromConfig) {
+        if (positionFromConfig === "rotated" || positionFromConfig === "straight") {
+            return positionFromConfig;
+        }
+        const minBandSize = 50;
+        if (chartBlockWidth / scopedDataLength < minBandSize)
+            return 'rotated';
+        return 'straight';
+    }
+}

package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts

@@ -1,7 +1,9 @@
+import { DataLegendParams } from "../../dataManagerModel/dataManagerModel";
 import { LegendPosition } from "../../model";
 export declare type LegendItemsDirection = 'row' | 'column';
 export declare class LegendCanvasModel {
-    static getLegendHeight(texts: string[], blockWidth: number, marginLeft: number, marginRight: number, itemsPosition: LegendItemsDirection, legendPosition: LegendPosition): number;
+    static getLegendHeight(texts: string[], chartBlockWidth: number, itemsDirection: LegendItemsDirection, legendPosition: LegendPosition): number;
     static getLegendItemWidth(text: string): number;
-    static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): number;
+    static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
+    private static getLegendWrapperEl;
 }

package/lib/model/featuresModel/legendModel/legendCanvasModel.js

@@ -1,22 +1,18 @@
 import { CLASSES } from "../../modelBuilder";
-import { LegendModel } from "./legendModel";
 export class LegendCanvasModel {
-    static getLegendHeight(texts, blockWidth, marginLeft, marginRight, itemsPosition, legendPosition) {
-        const legendWrapper = document.createElement('div');
-        legendWrapper.style.opacity = '0';
-        legendWrapper.style.display = 'flex';
-        if (itemsPosition === 'column')
-            legendWrapper.style.flexDirection = 'column';
-        legendWrapper.style.position = 'absolute';
-        legendWrapper.style.width = blockWidth - marginLeft - marginRight + 'px';
+    static getLegendHeight(texts, chartBlockWidth, itemsDirection, legendPosition) {
+        const legendWrapper = this.getLegendWrapperEl(chartBlockWidth, itemsDirection);
         texts.forEach(text => {
             const itemWrapper = document.createElement('div');
             const colorBlock = document.createElement('span');
             const textBlock = document.createElement('span');
-            itemWrapper.classList.add(LegendModel.getLegendItemClass(itemsPosition));
-            if (itemsPosition === 'column') {
-                itemWrapper.style.whiteSpace = 'nowrap';
-                itemWrapper.classList.add(LegendModel.getMarginClass(legendPosition));
+            itemWrapper.classList.add("legend-item");
+            if (legendPosition === 'bottom') {
+                itemWrapper.classList.add('legend-item-inline');
+                textBlock.classList.add('legend-label-nowrap');
+            }
+            else {
+                itemWrapper.classList.add('legend-item-row');
             }
             colorBlock.classList.add(CLASSES.legendColor);
             textBlock.classList.add(CLASSES.legendLabel);
@@ -27,7 +23,7 @@ export class LegendCanvasModel {
         document.body.append(legendWrapper);
         const height = legendWrapper.offsetHeight;
         legendWrapper.remove();
-        return height;
+        return height + 1;
     }
     static getLegendItemWidth(text) {
         const itemWrapper = document.createElement('div');
@@ -48,39 +44,56 @@ export class LegendCanvasModel {
         return sumWidth;
     }
     static findElementsAmountByLegendSize(texts, position, legendBlockWidth, legendBlockHeight) {
-        const legendWrapper = document.createElement('div');
-        legendWrapper.style.opacity = '0';
-        legendWrapper.style.display = 'flex';
-        legendWrapper.style.flexDirection = 'column';
-        legendWrapper.style.position = 'absolute';
-        legendWrapper.style.width = legendBlockWidth + 'px';
+        const legendWrapper = this.getLegendWrapperEl(legendBlockWidth, position === "right" ? "column" : "row");
         document.body.append(legendWrapper);
         let amount = 0;
         for (let i = 0; i < texts.length; i++) {
             const itemWrapper = document.createElement('div');
             const colorBlock = document.createElement('span');
             const textBlock = document.createElement('span');
-            itemWrapper.classList.add('legend-item-row');
-            if (position === 'bottom')
-                textBlock.classList.add('legend-label-nowrap', 'mt-10');
-            else
-                itemWrapper.classList.add('mt-15');
+            itemWrapper.classList.add("legend-item");
+            if (position === 'bottom') {
+                itemWrapper.classList.add('legend-item-inline');
+                textBlock.classList.add('legend-label-nowrap');
+            }
+            else {
+                itemWrapper.classList.add('legend-item-row');
+            }
             colorBlock.classList.add(CLASSES.legendColor);
             textBlock.classList.add(CLASSES.legendLabel);
             textBlock.textContent = texts[i];
             itemWrapper.append(colorBlock, textBlock);
             legendWrapper.append(itemWrapper);
+            amount++;
             if (legendWrapper.offsetHeight > legendBlockHeight) {
                 itemWrapper.remove();
                 if (legendBlockHeight - legendWrapper.offsetHeight >= 15 && position !== 'bottom')
-                    amount = i;
+                    amount = amount; //TODO: remove
                 else
-                    amount = i - 1;
+                    amount -= 1;
                 break;
             }
-            amount++;
         }
+        const size = {
+            width: legendWrapper.offsetWidth,
+            height: legendWrapper.offsetHeight
+        };
         legendWrapper.remove();
-        return amount < 0 ? 0 : amount;
+        return {
+            amount: amount < 0 ? 0 : amount,
+            size
+        };
+    }
+    static getLegendWrapperEl(legendBlockWidth, itemsDirection) {
+        const legendWrapper = document.createElement('div');
+        legendWrapper.style.opacity = '0';
+        legendWrapper.style.position = 'absolute';
+        legendWrapper.style.display = "flex";
+        if (itemsDirection === "column")
+            legendWrapper.classList.add("legend-block-column");
+        else
+            legendWrapper.classList.add("legend-block-row", "legend-wrapper-with-wrap");
+        legendWrapper.style.maxWidth = legendBlockWidth + 'px';
+        return legendWrapper;
     }
 }

package/lib/model/featuresModel/legendModel/legendModel.d.ts

@@ -1,5 +1,5 @@
 import { ChartNotation, Size } from "../../../config/config";
-import { ILegendModel, LegendBlockModel, LegendPosition, Orient } from "../../model";
+import { ILegendModel, LegendBlockModel, Orient } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { LegendItemsDirection } from "./legendCanvasModel";
 export declare class LegendModel {
@@ -7,6 +7,5 @@ export declare class LegendModel {
     static getBaseLegendBlockModel(notation: ChartNotation, canvasModel: CanvasModel): LegendBlockModel;
     static getLegendModel(chartNotation: ChartNotation, legendShow: boolean, canvasModel: CanvasModel): ILegendModel;
     static getLegendItemClass(itemsPosition: LegendItemsDirection): string;
-    static getMarginClass(legendPosition: LegendPosition): string;
     private static getLegendWidth;
 }

package/lib/model/featuresModel/legendModel/legendModel.js

@@ -1,15 +1,16 @@
 import { ModelHelper } from "../../modelHelper";
-import { PolarModel } from "../../notations/polarModel";
+import { PolarModel } from "../../notations/polar/polarModel";
 import { LegendCanvasModel } from "./legendCanvasModel";
 export class LegendModel {
     static getLegendSize(chartNotation, position, texts, legendMaxWidth, blockSize, legendBlockModel) {
         if (position === 'left' || position === 'right')
             return this.getLegendWidth(texts, legendMaxWidth);
+        //TODO: rm duplicate
         if (chartNotation === '2d' || chartNotation === 'interval') {
-            return LegendCanvasModel.getLegendHeight(texts, blockSize.width, legendBlockModel.coordinate[position].margin.left, legendBlockModel.coordinate[position].margin.right, 'row', position);
+            return LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
         }
         else if (chartNotation === 'polar') {
-            const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width, legendBlockModel.coordinate[position].margin.left, legendBlockModel.coordinate[position].margin.right, 'column', position);
+            const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
             return size;
         }
     }
@@ -24,17 +25,17 @@ export class LegendModel {
                 },
                 bottom: {
                     size: 0,
-                    margin: { top: 0, bottom: 20, left: 20, right: 20 },
+                    margin: { top: 0, bottom: 20, left: 0, right: 0 },
                     pad: 0
                 },
                 right: {
                     size: 0,
-                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 0, right: mr },
+                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 5, right: 0 },
                     pad: 0
                 },
                 top: {
                     size: 0,
-                    margin: { top: 20, bottom: 0, left: 20, right: 20 },
+                    margin: { top: 5, bottom: 10, left: 0, right: 0 },
                     pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
             },
@@ -42,13 +43,15 @@ export class LegendModel {
         };
     }
     static getLegendModel(chartNotation, legendShow, canvasModel) {
+        if (!legendShow)
+            return {
+                position: 'off'
+            };
         let legendPosition = 'off';
-        if (legendShow) {
-            if (chartNotation === '2d' || chartNotation === 'interval')
-                legendPosition = 'top';
-            else if (chartNotation === 'polar') {
-                legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
-            }
+        if (chartNotation === '2d' || chartNotation === 'interval')
+            legendPosition = 'top';
+        else if (chartNotation === 'polar') {
+            legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
         }
         return {
             position: legendPosition
@@ -57,9 +60,6 @@ export class LegendModel {
     static getLegendItemClass(itemsPosition) {
         return itemsPosition === 'column' ? 'legend-item-row' : 'legend-item-inline';
     }
-    static getMarginClass(legendPosition) {
-        return legendPosition === 'right' ? 'mt-15' : 'mt-10';
-    }
     static getLegendWidth(texts, legendMaxWidth) {
         let longestText = '';
         let biggestScore = 0;

package/lib/model/featuresModel/legendModel/polarMarginCalculator.d.ts

@@ -0,0 +1,11 @@
+import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../../config/config";
+import { LegendBlockModel } from "../../model";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare class LegendPolarMarginCalculator {
+    recalcMargin(modelInstance: ModelInstance, options: MdtChartsPolarOptions, legendMaxWidth: number, legendBlockModel: LegendBlockModel, data: MdtChartsDataSource): void;
+    updateMargin(legendPosition: "right" | "bottom", canvasModel: CanvasModel, legendBlockModel: LegendBlockModel, size: number): void;
+    private updateMarginObj;
+    private getLegendSize;
+    private getLegendItemsContent;
+}

package/lib/model/featuresModel/legendModel/polarMarginCalculator.js

@@ -0,0 +1,42 @@
+import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
+import { MarginModel } from "../../marginModel";
+import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polar/polarModel";
+import { LegendModel } from "./legendModel";
+export class LegendPolarMarginCalculator {
+    recalcMargin(modelInstance, options, legendMaxWidth, legendBlockModel, data) {
+        const canvasModel = modelInstance.canvasModel;
+        let legendPosition = LegendModel.getLegendModel(options.type, options.legend.show, modelInstance.canvasModel).position;
+        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
+        if (legendPosition === "off")
+            return;
+        let legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition);
+        if (legendPosition === "right" && canvasModel.getChartBlockWidth() - legendSize < MIN_DONUT_BLOCK_SIZE) {
+            legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, "bottom");
+            legendPosition = "bottom";
+            modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
+        }
+        if (legendSize !== 0) {
+            canvasModel.increaseMarginSide(legendPosition, legendSize);
+            MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
+        }
+        legendBlockModel.coordinate[legendPosition].size = legendSize;
+    }
+    updateMargin(legendPosition, canvasModel, legendBlockModel, size) {
+        canvasModel.legendCanvas.setPosition(legendPosition);
+        this.updateMarginObj(legendBlockModel, legendPosition, size, canvasModel);
+    }
+    updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
+        if (legendSize !== 0) {
+            canvasModel.increaseMarginSide(legendPosition, legendSize);
+            MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
+        }
+        legendBlockModel.coordinate[legendPosition].size = legendSize;
+    }
+    getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition) {
+        const legendItemsContent = this.getLegendItemsContent(options, data);
+        return LegendModel.getLegendSize(options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
+    }
+    getLegendItemsContent(options, data) {
+        return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
+    }
+}

package/lib/model/featuresModel/scaleModel.d.ts

@@ -1,18 +1,18 @@
 import { ScaleKeyModel, ScaleKeyType, ScaleValueModel, ScaleValueType } from "../model";
-import { AxisPosition, NumberDomain, IntervalChart, TwoDimensionalChart, MdtChartsTwoDimensionalOptions, ChartOrientation, MdtChartsDataSource } from "../../config/config";
+import { AxisPosition, NumberDomain, IntervalChart, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions, ChartOrientation, MdtChartsDataSource } from "../../config/config";
 import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
 export declare enum ScaleType {
     Key = 0,
     Value = 1
 }
 export declare class ScaleModel {
-    static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: TwoDimensionalChart[], barCharts: TwoDimensionalChart[]): ScaleKeyModel;
+    static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
     static getScaleLinear(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, canvasModel: CanvasModel): ScaleValueModel;
     static getRangePeek(scaleType: ScaleType, chartOrientation: string, canvasModel: CanvasModel): number;
     static getDateValueDomain(data: MdtChartsDataSource, chart: IntervalChart, keyAxisPosition: AxisPosition, dataSource: string): [Date, Date];
     static getLinearDomain(configDomain: NumberDomain, data: MdtChartsDataSource, configOptions: MdtChartsTwoDimensionalOptions): [number, number];
-    static getScaleKeyType(charts: TwoDimensionalChart[]): ScaleKeyType;
-    static getScaleValueType(charts: TwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
-    static getElementsAmount(barCharts: TwoDimensionalChart[]): number;
-    static getScaleMaxValue(charts: TwoDimensionalChart[], dataSource: string, data: MdtChartsDataSource): number;
+    static getScaleKeyType(charts: MdtChartsTwoDimensionalChart[]): ScaleKeyType;
+    static getScaleValueType(charts: MdtChartsTwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
+    static getElementsAmount(barCharts: MdtChartsTwoDimensionalChart[]): number;
+    static getScaleMaxValue(charts: MdtChartsTwoDimensionalChart[], dataSource: string, data: MdtChartsDataSource): number;
 }

package/lib/model/featuresModel/titleModel.js

@@ -4,10 +4,10 @@ export class TitleModel {
         const pad = titleText ? defaultPads : 0;
         return {
             margin: {
-                bottom: 0,
-                left: pad,
-                right: pad,
-                top: pad
+                bottom: 5,
+                left: 0,
+                right: 0,
+                top: 0
             },
             size: pad,
             pad: 0

package/lib/model/marginModel.d.ts

@@ -1,7 +1,8 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
 import { DesignerConfig } from "../designer/designerConfig";
-import { DataScope, LegendBlockModel, OtherCommonComponents, PolarOptionsModel } from "./model";
+import { DataScope, LegendBlockModel, Orient, OtherCommonComponents, PolarOptionsModel } from "./model";
 import { ModelInstance } from "./modelInstance/modelInstance";
+import { CanvasModel } from "./modelInstance/canvasModel/canvasModel";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
 export declare class MarginModel {
@@ -13,7 +14,7 @@ export declare class MarginModel {
     private static recalcHorizontalMarginByAxisLabelWidth;
     private static recalcMarginWithLegend;
     private static getLegendItemsContent;
-    private static appendToGlobalMarginValuesLegendMargin;
+    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
     private static clearMarginByLegendBlockPosition;
     private static recalcMarginByTitle;
 }

package/lib/model/marginModel.js

@@ -3,7 +3,7 @@ import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
 import { LegendModel } from "./featuresModel/legendModel/legendModel";
 import { AxisType } from "./modelBuilder";
 import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
-import { PolarModel } from "./notations/polarModel";
+import { PolarModel } from "./notations/polar/polarModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {
@@ -42,7 +42,7 @@ export class MarginModel {
     static recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, dataScope) {
         if ((config.options.type === '2d' || config.options.type === 'interval') && config.options.orientation === 'vertical') {
             const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataScope.allowableKeys);
-            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length);
+            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length, config.options.axis.key);
             const marginOrient = config.options.axis.key.position === 'end' ? 'bottom' : 'top';
             if (axisConfig === 'rotated')
                 modelInstance.canvasModel.setMarginSide(marginOrient, modelInstance.canvasModel.getMarginSide(marginOrient) + (axisLabelSize.width - axisLabelSize.height));
@@ -80,6 +80,9 @@ export class MarginModel {
         }
     }
     static recalcMarginWithLegend(modelInstance, config, legendMaxWidth, legendBlockModel, data) {
+        if (config.options.type === "polar") {
+            return;
+        }
         const canvasModel = modelInstance.canvasModel;
         const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
         modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
@@ -124,6 +127,6 @@ export class MarginModel {
         });
     }
     static recalcMarginByTitle(canvasModel, titleBlockModel) {
-        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size);
+        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
     }
 }

package/lib/model/model.d.ts

@@ -1,19 +1,18 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
 export declare type ScaleKeyType = "band" | "point";
 export declare type ScaleValueType = "linear" | "datetime";
-export declare type AxisLabelPosition = "straight" | "rotated";
 export declare type LegendPosition = "off" | "top" | "bottom" | "left" | "right";
 export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
 export declare type DataOptions = {
     [option: string]: any;
 };
-export interface Model {
+export interface Model<O = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel> {
     blockCanvas: BlockCanvas;
     chartBlock: ChartBlockModel;
-    options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
+    options: O;
     otherComponents: OtherCommonComponents;
     dataSettings: DataSettings;
     transitions?: Transitions;
@@ -137,12 +136,24 @@ export interface BarChartSettings {
     maxBarWidth: number;
     minBarWidth: number;
 }
-export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad"> {
-    aggregator: DonutChartAggreagorModel;
+export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
+    aggregator: DonutAggregatorModel;
+    thickness: DonutThicknessOptions;
 }
-export interface DonutChartAggreagorModel {
+export interface DonutAggregatorModel {
     margin: number;
-    text: string;
+    content: DonutAggregatorContent;
+}
+export interface DonutAggregatorContent {
+    value: string | number;
+    title: string;
+}
+export declare type DonutThicknessUnit = "px" | "%";
+export interface DonutThicknessOptions {
+    min: number;
+    max: number;
+    value: number;
+    unit: DonutThicknessUnit;
 }
 interface ChartModel {
     tooltip: TooltipModel;