mdt-charts 1.10.3 → 1.11.0

package/lib/model/featuresModel/axisModel.js

@@ -3,32 +3,32 @@ import { AxisType, CLASSES } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
 export class AxisModel {
-    static getKeyAxis(charts, data, dataOptions, orient, axisConfig, labelConfig, margin, blockSize, tooltipSettings) {
+    static getKeyAxis(charts, data, dataOptions, orient, axisConfig, labelConfig, canvasModel, tooltipSettings) {
         return {
             type: 'key',
             orient: AxisModel.getAxisOrient(AxisType.Key, orient, axisConfig.position),
             translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Key, orient, axisConfig.position, margin, blockSize.width),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Key, orient, axisConfig.position, margin, blockSize.height)
+                translateX: AxisModel.getAxisTranslateX(AxisType.Key, orient, axisConfig.position, canvasModel),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Key, orient, 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(margin, blockSize, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length),
+                position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length),
                 visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orient),
                 defaultTooltip: tooltipSettings.position === 'fixed'
             },
             visibility: axisConfig.visibility
         };
     }
-    static getValueAxis(orient, axisConfig, labelConfig, margin, blockSize) {
+    static getValueAxis(orient, axisConfig, labelConfig, canvasModel) {
         return {
             type: 'value',
             orient: AxisModel.getAxisOrient(AxisType.Value, orient, axisConfig.position),
             translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, axisConfig.position, margin, blockSize.width),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, axisConfig.position, margin, blockSize.height)
+                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, axisConfig.position, canvasModel),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, axisConfig.position, canvasModel)
             },
             cssClass: 'value-axis',
             ticks: axisConfig.ticks,
@@ -41,12 +41,12 @@ export class AxisModel {
             visibility: axisConfig.visibility
         };
     }
-    static getAxisLength(chartOrientation, margin, blockSize) {
+    static getAxisLength(chartOrientation, canvasModel) {
         if (chartOrientation === 'horizontal') {
-            return blockSize.height - margin.top - margin.bottom;
+            return canvasModel.getChartBlockHeight();
         }
         else {
-            return blockSize.width - margin.left - margin.right;
+            return canvasModel.getChartBlockWidth();
         }
     }
     static getAxisOrient(axisType, chartOrientation, axisPosition) {
@@ -59,25 +59,25 @@ export class AxisModel {
             return axisType === AxisType.Key ? 'left' : 'top';
         return axisType === AxisType.Key ? 'right' : 'bottom';
     }
-    static getAxisTranslateX(axisType, chartOrientation, axisPosition, margin, blockWidth) {
+    static getAxisTranslateX(axisType, chartOrientation, axisPosition, canvasModel) {
         const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
         if (orient === 'top' || orient === 'left')
-            return margin.left;
+            return canvasModel.getMarginSide("left");
         else if (orient === 'bottom')
-            return margin.left;
-        return blockWidth - margin.right;
+            return canvasModel.getMarginSide("left");
+        return canvasModel.getBlockSize().width - canvasModel.getMarginSide("right");
     }
-    static getAxisTranslateY(axisType, chartOrientation, axisPosition, margin, blockHeight) {
+    static getAxisTranslateY(axisType, chartOrientation, axisPosition, canvasModel) {
         const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
         if (orient === 'top' || orient === 'left')
-            return margin.top;
+            return canvasModel.getMarginSide("top");
         else if (orient === 'bottom')
-            return blockHeight - margin.bottom;
-        return margin.top;
+            return canvasModel.getBlockSize().height - canvasModel.getMarginSide("bottom");
+        return canvasModel.getMarginSide("top");
     }
-    static getKeyAxisLabelPosition(margin, blockSize, scopedDataLength) {
+    static getKeyAxisLabelPosition(canvasModel, scopedDataLength) {
         const minBandSize = 50;
-        if ((blockSize.width - margin.left - margin.right) / scopedDataLength < minBandSize)
+        if (canvasModel.getChartBlockWidth() / scopedDataLength < minBandSize)
             return 'rotated';
         return 'straight';
     }

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

@@ -1,12 +1,13 @@
 import { ChartNotation, Size } from "../../../config/config";
-import { BlockMargin, ILegendModel, LegendBlockModel, LegendPosition, Orient } from "../../model";
+import { ILegendModel, LegendBlockModel, LegendPosition, Orient } from "../../model";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { LegendItemsDirection } from "./legendCanvasModel";
 /** If donut block has width less than this const, legend change postion from "right" to "bottom" */
 export declare const MIN_DONUT_BLOCK_SIZE = 260;
 export declare class LegendModel {
     static getLegendSize(chartNotation: ChartNotation, position: Orient, texts: string[], legendMaxWidth: number, blockSize: Size, legendBlockModel: LegendBlockModel): number;
-    static getBaseLegendBlockModel(notation: ChartNotation): LegendBlockModel;
-    static getLegendModel(chartNotation: ChartNotation, legendShow: boolean, blockSize: Size, margin: BlockMargin): ILegendModel;
+    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,5 +1,4 @@
 import { ModelHelper } from "../../modelHelper";
-import { TitleModel } from "../titleModel";
 import { LegendCanvasModel } from "./legendCanvasModel";
 /** If donut block has width less than this const, legend change postion from "right" to "bottom" */
 export const MIN_DONUT_BLOCK_SIZE = 260;
@@ -15,9 +14,8 @@ export class LegendModel {
             return size;
         }
     }
-    static getBaseLegendBlockModel(notation) {
+    static getBaseLegendBlockModel(notation, canvasModel) {
         const mt = 20, mb = 20, ml = 20, mr = 20;
-        const titleModelTemplate = TitleModel.getTitleModel();
         return {
             coordinate: {
                 left: {
@@ -32,25 +30,25 @@ export class LegendModel {
                 },
                 right: {
                     size: 0,
-                    margin: { top: titleModelTemplate.pad + titleModelTemplate.margin.top + titleModelTemplate.size, bottom: mb, left: 0, right: mr },
+                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 0, right: mr },
                     pad: 0
                 },
                 top: {
                     size: 0,
                     margin: { top: 20, bottom: 0, left: 20, right: 20 },
-                    pad: titleModelTemplate.pad + titleModelTemplate.margin.top + titleModelTemplate.size
+                    pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
             },
             standartTooltip: notation === 'polar' ? false : true
         };
     }
-    static getLegendModel(chartNotation, legendShow, blockSize, margin) {
+    static getLegendModel(chartNotation, legendShow, canvasModel) {
         let legendPosition = 'off';
         if (legendShow) {
             if (chartNotation === '2d' || chartNotation === 'interval')
                 legendPosition = 'top';
             else if (chartNotation === 'polar') {
-                legendPosition = blockSize.width - margin.left - margin.right < MIN_DONUT_BLOCK_SIZE ? 'bottom' : 'right';
+                legendPosition = canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE ? 'bottom' : 'right';
             }
         }
         return {

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

@@ -1,6 +1,13 @@
-import { OtherComponents } from "../model";
+import { OtherCommonComponents } from "../model";
 import { ElementsOptions } from "../../designer/designerConfig";
 import { ChartNotation } from "../../config/config";
+import { ModelInstance } from "../modelInstance/modelInstance";
+interface OtherComponentsModelDependencies {
+    elementsOptions: ElementsOptions;
+    title: string;
+    notation: ChartNotation;
+}
 export declare class OtherComponentsModel {
-    static getOtherComponentsModel(elementsOptions: ElementsOptions, notation: ChartNotation): OtherComponents;
+    static getOtherComponentsModel(dependencies: OtherComponentsModelDependencies, modelInstance: ModelInstance): OtherCommonComponents;
 }
+export {};

package/lib/model/featuresModel/otherComponents.js

@@ -2,11 +2,13 @@ import { LegendModel } from "./legendModel/legendModel";
 import { TitleModel } from "./titleModel";
 import { TooltipModel } from "./tooltipModel";
 export class OtherComponentsModel {
-    static getOtherComponentsModel(elementsOptions, notation) {
+    static getOtherComponentsModel(dependencies, modelInstance) {
+        const canvasModel = modelInstance.canvasModel;
+        canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.title));
         return {
-            legendBlock: LegendModel.getBaseLegendBlockModel(notation),
-            titleBlock: TitleModel.getTitleModel(),
-            tooltipBlock: TooltipModel.getTooltipModel(elementsOptions.tooltip)
+            legendBlock: LegendModel.getBaseLegendBlockModel(dependencies.notation, canvasModel),
+            titleBlock: canvasModel.titleCanvas.getModel(),
+            tooltipBlock: TooltipModel.getTooltipModel(dependencies.elementsOptions.tooltip)
         };
     }
 }

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

@@ -1,13 +1,14 @@
-import { BlockMargin, ScaleKeyModel, ScaleKeyType, ScaleValueModel, ScaleValueType } from "../model";
-import { AxisPosition, NumberDomain, IntervalChart, TwoDimensionalChart, TwoDimensionalOptions, Size, ChartOrientation, MdtChartsDataSource } from "../../config/config";
+import { ScaleKeyModel, ScaleKeyType, ScaleValueModel, ScaleValueType } from "../model";
+import { AxisPosition, NumberDomain, IntervalChart, TwoDimensionalChart, TwoDimensionalOptions, 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, margin: BlockMargin, blockSize: Size, charts: TwoDimensionalChart[], barCharts: TwoDimensionalChart[]): ScaleKeyModel;
-    static getScaleLinear(options: TwoDimensionalOptions, data: MdtChartsDataSource, margin: BlockMargin, blockSize: Size): ScaleValueModel;
-    static getRangePeek(scaleType: ScaleType, chartOrientation: string, margin: BlockMargin, blockSize: Size): number;
+    static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: TwoDimensionalChart[], barCharts: TwoDimensionalChart[]): ScaleKeyModel;
+    static getScaleLinear(options: TwoDimensionalOptions, 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: TwoDimensionalOptions): [number, number];
     static getScaleKeyType(charts: TwoDimensionalChart[]): ScaleKeyType;

package/lib/model/featuresModel/scaleModel.js

@@ -5,35 +5,35 @@ export var ScaleType;
     ScaleType[ScaleType["Value"] = 1] = "Value";
 })(ScaleType || (ScaleType = {}));
 export class ScaleModel {
-    static getScaleKey(allowableKeys, orient, margin, blockSize, charts, barCharts) {
+    static getScaleKey(allowableKeys, orient, canvasModel, charts, barCharts) {
         return {
             domain: allowableKeys,
             range: {
                 start: 0,
-                end: ScaleModel.getRangePeek(ScaleType.Key, orient, margin, blockSize)
+                end: ScaleModel.getRangePeek(ScaleType.Key, orient, canvasModel)
             },
             type: ScaleModel.getScaleKeyType(charts),
             elementsAmount: this.getElementsAmount(barCharts)
         };
     }
-    static getScaleLinear(options, data, margin, blockSize) {
+    static getScaleLinear(options, data, canvasModel) {
         return {
             domain: ScaleModel.getLinearDomain(options.axis.value.domain, data, options),
             range: {
                 start: 0,
-                end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, margin, blockSize)
+                end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
             },
             type: ScaleModel.getScaleValueType(options.charts)
         };
     }
-    static getRangePeek(scaleType, chartOrientation, margin, blockSize) {
+    static getRangePeek(scaleType, chartOrientation, canvasModel) {
         if (chartOrientation === 'vertical')
             return scaleType === ScaleType.Key
-                ? blockSize.width - margin.left - margin.right
-                : blockSize.height - margin.top - margin.bottom;
+                ? canvasModel.getChartBlockWidth()
+                : canvasModel.getChartBlockHeight();
         return scaleType === ScaleType.Key
-            ? blockSize.height - margin.top - margin.bottom
-            : blockSize.width - margin.left - margin.right;
+            ? canvasModel.getChartBlockHeight()
+            : canvasModel.getChartBlockWidth();
     }
     static getDateValueDomain(data, chart, keyAxisPosition, dataSource) {
         const minMax = ModelHelper.getMinAndMaxOfIntervalData(data, dataSource, chart);

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

@@ -1,4 +1,4 @@
 import { TitleBlockModel } from "../model";
 export declare class TitleModel {
-    static getTitleModel(): TitleBlockModel;
+    static getTitleModel(titleText: string): TitleBlockModel;
 }

package/lib/model/featuresModel/titleModel.js

@@ -1,13 +1,15 @@
 export class TitleModel {
-    static getTitleModel() {
+    static getTitleModel(titleText) {
+        const defaultPads = 20;
+        const pad = titleText ? defaultPads : 0;
         return {
             margin: {
                 bottom: 0,
-                left: 20,
-                right: 20,
-                top: 20
+                left: pad,
+                right: pad,
+                top: pad
             },
-            size: 20,
+            size: pad,
             pad: 0
         };
     }

package/lib/model/marginModel.d.ts

@@ -1,13 +1,13 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
 import { DesignerConfig } from "../designer/designerConfig";
-import { BlockMargin, DataScope, LegendBlockModel, OtherComponents, PolarOptionsModel } from "./model";
-import { Size } from "../config/config";
+import { DataScope, LegendBlockModel, OtherCommonComponents, PolarOptionsModel } from "./model";
+import { ModelInstance } from "./modelInstance/modelInstance";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
 export declare class MarginModel {
-    static getMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherComponents, data: MdtChartsDataSource): BlockMargin;
-    static recalcPolarMarginWithScopedData(margin: BlockMargin, blockSize: Size, designerConfig: DesignerConfig, config: MdtChartsConfig, legendBlockModel: LegendBlockModel, dataScope: DataScope, options: PolarOptionsModel): void;
-    static recalcMarginByVerticalAxisLabel(margin: BlockMargin, config: MdtChartsConfig, designerConfig: DesignerConfig, dataScope: DataScope): void;
+    static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
+    static recalcPolarMarginWithScopedData(modelInstance: ModelInstance, designerConfig: DesignerConfig, config: MdtChartsConfig, legendBlockModel: LegendBlockModel, dataScope: DataScope, options: PolarOptionsModel): void;
+    static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, config: MdtChartsConfig, designerConfig: DesignerConfig, dataScope: DataScope): void;
     private static getHorizontalMarginByAxisLabels;
     private static recalcVerticalMarginByAxisLabelHeight;
     private static recalcHorizontalMarginByAxisLabelWidth;

package/lib/model/marginModel.js

@@ -6,45 +6,46 @@ import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {
-    static getMargin(designerConfig, config, otherComponents, data) {
-        const margin = Object.assign({}, designerConfig.canvas.chartBlockMargin);
-        this.recalcMarginWithLegend(margin, config, designerConfig.canvas.legendBlock.maxWidth, otherComponents.legendBlock, data);
-        this.recalcMarginByTitle(margin, otherComponents.titleBlock);
+    static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
+        const canvasModel = modelInstance.canvasModel;
+        canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
+        this.recalcMarginWithLegend(modelInstance, config, designerConfig.canvas.legendBlock.maxWidth, otherComponents.legendBlock, data);
+        this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
         if (config.options.type === '2d' || config.options.type === 'interval') {
             const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, config.options.axis, data, config.options);
-            this.recalcVerticalMarginByAxisLabelHeight(labelSize, margin, config.options.orientation, config.options.axis);
+            this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, config.options.orientation, config.options.axis);
             // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
             // При этом все графики должны иметь: embeddedLabels = 'key'
             // И все графики должны быть типа bar. 
             const showingFlag = config.options.type === '2d'
                 ? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(config.options.charts, config.options.orientation)
                 : true;
-            this.recalcHorizontalMarginByAxisLabelWidth(labelSize, margin, config.options.orientation, config.options.axis, showingFlag);
+            this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, config.options.orientation, config.options.axis, showingFlag);
         }
-        return margin;
     }
-    static recalcPolarMarginWithScopedData(margin, blockSize, designerConfig, config, legendBlockModel, dataScope, options) {
-        let position = LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin).position;
+    static recalcPolarMarginWithScopedData(modelInstance, designerConfig, config, legendBlockModel, dataScope, options) {
+        const canvasModel = modelInstance.canvasModel;
+        let position = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
         if (position !== 'off') {
-            if (position === 'right' && blockSize.width - margin.left - margin.right < MIN_DONUT_BLOCK_SIZE)
+            if (position === 'right' && canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE)
                 position = 'bottom';
-            this.clearMarginByLegendBlockPosition(margin, legendBlockModel);
+            this.clearMarginByLegendBlockPosition(canvasModel, legendBlockModel);
             let allowableKeys = [...dataScope.allowableKeys];
             if (dataScope.hidedRecordsAmount !== 0 && position === 'bottom')
                 allowableKeys.push('1'); // Если есть спрятанные записи, то в массив добавляется объект, чтобы выделить место в легенде для индикатора переполнения
             const legendSize = LegendModel.getLegendSize(config.options.type, position, allowableKeys, designerConfig.canvas.legendBlock.maxWidth, config.canvas.size, legendBlockModel);
-            margin[position] += legendSize + legendBlockModel.coordinate[position].margin[position];
+            canvasModel.increaseMarginSide(position, legendSize + legendBlockModel.coordinate[position].margin[position]);
             legendBlockModel.coordinate[position].size = legendSize;
             options.legend.position = position;
         }
     }
-    static recalcMarginByVerticalAxisLabel(margin, config, designerConfig, dataScope) {
+    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(margin, config.canvas.size, dataScope.allowableKeys.length);
+            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length);
             const marginOrient = config.options.axis.key.position === 'end' ? 'bottom' : 'top';
             if (axisConfig === 'rotated')
-                margin[marginOrient] += (axisLabelSize.width - axisLabelSize.height);
+                modelInstance.canvasModel.setMarginSide(marginOrient, modelInstance.canvasModel.getMarginSide(marginOrient) + (axisLabelSize.width - axisLabelSize.height));
         }
     }
     static getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
@@ -58,35 +59,35 @@ export class MarginModel {
         }
         return AxisModel.getLabelSize(labelsMaxWidth, labelsTexts);
     }
-    static recalcVerticalMarginByAxisLabelHeight(labelSize, margin, orientation, axis) {
+    static recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, orientation, axis) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
         const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
         if ((keyAxisOrient === 'bottom' || keyAxisOrient === 'top')) {
             if (axis.key.visibility)
-                margin[keyAxisOrient] += labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING;
-        }
-        else if (axis.value.visibility) {
-            margin[valueAxisOrient] += labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING;
+                canvasModel.increaseMarginSide(keyAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
         }
+        else if (axis.value.visibility)
+            canvasModel.increaseMarginSide(valueAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
     }
-    static recalcHorizontalMarginByAxisLabelWidth(labelSize, margin, orientation, axis, isShow) {
+    static recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, orientation, axis, isShow) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
         const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
         if ((keyAxisOrient === 'left' || keyAxisOrient === 'right') && isShow && axis.key.visibility) {
-            margin[keyAxisOrient] += labelSize.width + AXIS_VERTICAL_LABEL_PADDING;
+            canvasModel.increaseMarginSide(keyAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
         else if ((valueAxisOrient === 'left' || valueAxisOrient === 'right') && axis.value.visibility) {
-            margin[valueAxisOrient] += labelSize.width + AXIS_VERTICAL_LABEL_PADDING;
+            canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
     }
-    static recalcMarginWithLegend(margin, config, legendMaxWidth, legendBlockModel, data) {
-        const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin).position;
+    static recalcMarginWithLegend(modelInstance, config, legendMaxWidth, legendBlockModel, data) {
+        const canvasModel = modelInstance.canvasModel;
+        const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
         if (legendPosition !== 'off') {
             const legendItemsContent = this.getLegendItemsContent(config.options, data);
-            const legendSize = LegendModel.getLegendSize(config.options.type, legendPosition, legendItemsContent, legendMaxWidth, config.canvas.size, legendBlockModel);
-            margin[legendPosition] += legendSize;
+            const legendSize = LegendModel.getLegendSize(config.options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
+            canvasModel.increaseMarginSide(legendPosition, legendSize);
             if (legendSize !== 0)
-                this.appendToGlobalMarginValuesLegendMargin(margin, legendPosition, legendBlockModel);
+                this.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }
@@ -105,22 +106,23 @@ export class MarginModel {
             return [options.chart.data.valueField1.name];
         }
     }
-    static appendToGlobalMarginValuesLegendMargin(margin, position, legendBlockModel) {
+    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
         const legendCoordinate = legendBlockModel.coordinate;
         if (position === 'left' || position === 'right')
-            margin[position] += legendCoordinate[position].margin.left + legendCoordinate[position].margin.right;
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
         else
-            margin[position] += legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom;
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
     }
-    static clearMarginByLegendBlockPosition(margin, legendBlockModel) {
+    static clearMarginByLegendBlockPosition(canvasModel, legendBlockModel) {
         const legendCoordinate = legendBlockModel.coordinate;
         ['left', 'right', 'top', 'bottom'].forEach((position) => {
-            margin[position] -= legendCoordinate[position].size === 0
+            const decreaseByValue = legendCoordinate[position].size === 0
                 ? 0
                 : legendCoordinate[position].size + legendCoordinate[position].margin[position];
+            canvasModel.descreaseMarginSide(position, decreaseByValue);
         });
     }
-    static recalcMarginByTitle(margin, titleBlockModel) {
-        margin.top += titleBlockModel.margin.top + titleBlockModel.size;
+    static recalcMarginByTitle(canvasModel, titleBlockModel) {
+        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size);
     }
 }

package/lib/model/model.d.ts

@@ -12,18 +12,17 @@ export declare type DataOptions = {
 };
 export interface Model {
     blockCanvas: BlockCanvas;
-    chartBlock: ChartBlock;
+    chartBlock: ChartBlockModel;
     options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
-    otherComponents: OtherComponents;
+    otherComponents: OtherCommonComponents;
     dataSettings: DataSettings;
-    chartSettings: ChartElementsSettings;
     transitions?: Transitions;
 }
 export interface BlockCanvas {
     size: Size;
     cssClass: string;
 }
-export interface ChartBlock {
+export interface ChartBlockModel {
     margin: BlockMargin;
 }
 export interface BlockMargin {
@@ -46,10 +45,12 @@ export interface TwoDimensionalOptionsModel extends OptionsModel {
     charts: TwoDimensionalChartModel[];
     additionalElements: AdditionalElementsOptions;
     orient: ChartOrientation;
+    chartSettings: TwoDimChartElementsSettings;
 }
 export interface PolarOptionsModel extends OptionsModel {
     type: "polar";
     charts: PolarChartModel[];
+    chartCanvas: DonutChartSettings;
 }
 export interface IntervalOptionsModel extends OptionsModel {
     type: "interval";
@@ -58,6 +59,7 @@ export interface IntervalOptionsModel extends OptionsModel {
     charts: IntervalChartModel[];
     additionalElements: AdditionalElementsOptions;
     orient: ChartOrientation;
+    chartSettings: TwoDimChartElementsSettings;
 }
 export interface ILegendModel {
     position: LegendPosition;
@@ -125,6 +127,23 @@ export interface GridLineFlag {
     key: boolean;
     value: boolean;
 }
+export interface TwoDimChartElementsSettings {
+    bar: BarChartSettings;
+}
+export interface BarChartSettings {
+    groupMaxDistance: number;
+    groupMinDistance: number;
+    barDistance: number;
+    maxBarWidth: number;
+    minBarWidth: number;
+}
+export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad"> {
+    aggregator: DonutChartAggreagorModel;
+}
+export interface DonutChartAggreagorModel {
+    margin: number;
+    text: string;
+}
 interface ChartModel {
     tooltip: TooltipModel;
     cssClasses: string[];
@@ -181,20 +200,7 @@ export interface DataScope {
 export interface DataFormat {
     formatters: Formatter;
 }
-export interface ChartElementsSettings {
-    bar: BarChartSettings;
-    donut: DonutChartSettings;
-}
-export interface BarChartSettings {
-    groupMaxDistance: number;
-    groupMinDistance: number;
-    barDistance: number;
-    maxBarWidth: number;
-    minBarWidth: number;
-}
-export interface DonutChartSettings extends DonutOptionsCanvas {
-}
-export interface OtherComponents {
+export interface OtherCommonComponents {
     legendBlock: LegendBlockModel;
     titleBlock: TitleBlockModel;
     tooltipBlock: TooltipSettings;