mdt-charts 1.10.2 → 1.12.0

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -3,7 +3,6 @@ import { Axis } from "../features/axis/axis";
 import { EmbeddedLabels } from "../features/embeddedLabels/embeddedLabels";
 import { GridLine } from "../features/gridLine/gridLine";
 import { Legend } from "../features/legend/legend";
-import { RecordOverflowAlert } from "../features/recordOverflowAlert/recordOverflowAlert";
 import { Scale } from "../features/scale/scale";
 import { TipBox } from "../features/tipBox/tipBox";
 import { Title } from "../features/title/title";
@@ -12,23 +11,27 @@ import { Helper } from "../helpers/helper";
 import { Area } from "./area/area";
 import { Bar } from "./bar/bar";
 import { BarHelper } from "./bar/barHelper";
+import { TwoDimRecordOverflowAlert } from "./extenders/twoDimRecordOverflowAlert";
 import { Line } from "./line/line";
 export class TwoDimensionalManager {
     static render(engine, model) {
         const options = model.options;
-        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         engine.block.scales = scales;
         engine.block.renderSvg(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
         GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
-        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, model.chartSettings.bar, model.blockCanvas.size);
+        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings.bar, model.blockCanvas.size);
         engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
         engine.block.filterEventManager.event2DUpdate(options);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(engine.block, engine.data, options, model);
         Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock, scales);
         if (model.dataSettings.scope.hidedRecordsAmount !== 0)
-            RecordOverflowAlert.render(engine.block, model.dataSettings.scope.hidedRecordsAmount, 'top', options.orient);
+            TwoDimRecordOverflowAlert.render(engine.block, {
+                hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+                chartOrientation: options.orient
+            });
         engine.block.getSvg()
             .on('click', (e) => {
             if (e.target === engine.block.getSvg().node())
@@ -42,19 +45,22 @@ export class TwoDimensionalManager {
         Tooltip.hide(block);
         const options = model.options;
         ElementHighlighter.remove2DChartsFullHighlighting(block, options.charts);
-        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
         GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
-        const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, model.chartSettings.bar);
+        const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, options.chartSettings.bar);
         Promise.all(promises)
             .then(() => {
             block.filterEventManager.event2DUpdate(options);
             block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
         });
-        RecordOverflowAlert.update(block, model.dataSettings.scope.hidedRecordsAmount, 'top', options.orient);
+        TwoDimRecordOverflowAlert.update(block, {
+            hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+            chartOrientation: options.orient
+        });
     }
     static updateColors(block, model) {
         Legend.updateColors(block, model.options);

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

@@ -0,0 +1,19 @@
+import { TwoDimensionalChart, 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;
+    private getChartsValueFieldsAmounts;
+}
+export declare class TwoDimensionalChartStyleService {
+    getChartColors(chart: TwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
+    getChartOpacity(chartsLength: number, chartType: TwoDimensionalChartType, chartsValueFieldAmount: number, isChartSegmented: boolean): number;
+    private generateNewChartColors;
+    private isMoreThanOneValueFieldOnCanvas;
+    private makeColorsBrighter;
+    private getStartIndex;
+}

package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js

@@ -0,0 +1,61 @@
+import * as chroma from "chroma-js";
+import { ModelHelper } from "../modelHelper";
+import { ChartStyleModelService } from "./chartStyleModel";
+export class TwoDimensionalChartStyleModel {
+    constructor(charts, chartStyleConfig) {
+        this.charts = charts;
+        this.chartStyleConfig = chartStyleConfig;
+        this.service = new TwoDimensionalChartStyleService();
+    }
+    getChartStyle(chart, chartIndex) {
+        const fieldsAmounts = this.getChartsValueFieldsAmounts();
+        return {
+            elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
+            opacity: this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented)
+        };
+    }
+    getChartsValueFieldsAmounts() {
+        return this.charts.map(chart => chart.data.valueFields.length);
+    }
+}
+export class TwoDimensionalChartStyleService {
+    getChartColors(chart, styleConfig, chartsFieldsAmounts, chartIndex) {
+        const generatedColors = this.generateNewChartColors(chart.type, styleConfig, chartsFieldsAmounts, chartIndex);
+        chart.data.valueFields.forEach((field, fieldIndex) => {
+            if (field.color)
+                generatedColors[fieldIndex] = field.color;
+        });
+        return generatedColors;
+    }
+    getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isChartSegmented) {
+        if (chartType === 'area' && this.isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) && !isChartSegmented)
+            return 0.5; // combined area with other charts has 0.5 opacity
+        return 1;
+    }
+    generateNewChartColors(chartType, styleConfig, chartsFieldsAmounts, chartIndex) {
+        const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
+        const baseColors = ChartStyleModelService.checkAndGet(styleConfig.baseColors);
+        const palette = ChartStyleModelService.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
+        const elementsAmount = chartsFieldsAmounts[chartIndex];
+        const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
+        if (chartType !== 'line')
+            return selectedColors;
+        this.makeColorsBrighter(selectedColors);
+        return selectedColors;
+    }
+    isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) {
+        return (chartsLength > 1 || chartsValueFieldAmount > 1);
+    }
+    makeColorsBrighter(initialColors) {
+        for (let i = 0; i < initialColors.length; i++) {
+            initialColors[i] = chroma.mix(initialColors[i], 'white', 0.2).saturate(3).hex();
+        }
+    }
+    getStartIndex(chartIndex, chartsFieldsAmounts) {
+        let startIndex = 0;
+        for (let i = 0; i < chartIndex; i++) {
+            startIndex += chartsFieldsAmounts[i];
+        }
+        return startIndex;
+    }
+}

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

@@ -0,0 +1,9 @@
+import { ChartStyleConfig } from "../../designer/designerConfig";
+import { ChartStyle } from "../model";
+export declare class ChartStyleModelService {
+    private static standartColors;
+    static getCssClasses(chartIndex: number): string[];
+    static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
+    static getColorSet(baseColors: string[], elementsAmount: number): string[];
+    static checkAndGet(baseColors: string[]): string[];
+}

package/lib/model/chartStyleModel/chartStyleModel.js

@@ -0,0 +1,27 @@
+import * as chroma from "chroma-js";
+export class ChartStyleModelService {
+    static getCssClasses(chartIndex) {
+        const cssClasses = [`chart-${chartIndex}`];
+        return cssClasses;
+    }
+    static getChartStyle(elementsAmount, styleConfig) {
+        const baseColors = this.checkAndGet(styleConfig.baseColors);
+        return {
+            elementColors: this.getColorSet(baseColors, elementsAmount),
+            opacity: 1
+        };
+    }
+    static getColorSet(baseColors, elementsAmount) {
+        return chroma.scale(baseColors)
+            .mode('rgb')
+            .domain([0, 0.55, 0.75, 1])
+            .colors(elementsAmount <= 1 ? 2 : elementsAmount);
+    }
+    static checkAndGet(baseColors) {
+        if (baseColors.length === 0 || baseColors.filter(color => color === 'rgba(0, 0, 0, 0)' || !color).length > 0) {
+            return this.standartColors;
+        }
+        return baseColors;
+    }
+}
+ChartStyleModelService.standartColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];

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

@@ -0,0 +1,26 @@
+import { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
+import { DesignerConfig } from "../../designer/designerConfig";
+import { LegendBlockModel } from "../model";
+import { ModelInstance } from "../modelInstance/modelInstance";
+export declare class DataManagerModel {
+    private static service;
+    static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
+    static initDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): void;
+    static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
+    private static initDataScopeFor2D;
+    private static initDataScopeForPolar;
+    private static getMaximumPossibleScope;
+    private static limitAllowableKeys;
+    /**
+     * Выводит количество элементов (преимущественно баров) в одной группе. Группа - один ключ
+     * @param configOptions
+     * @param chartsLength
+     */
+    private static getElementsInGroupAmount;
+    private static getBarChartsInGroupAmount;
+    private static getScopedData;
+    private static getScopedChartData;
+    private static setDataType;
+    private static getTypedData;
+    private static getDataLimitByItemSize;
+}

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -0,0 +1,132 @@
+import { AxisModel } from "../featuresModel/axisModel";
+import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
+import { ModelHelper } from "../modelHelper";
+import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polarModel";
+import { DataManagerModelService } from "./dataManagerModelService";
+export class DataManagerModel {
+    static getPreparedData(data, allowableKeys, config) {
+        const scopedData = this.getScopedData(data, allowableKeys, config);
+        this.setDataType(scopedData, config);
+        return scopedData;
+    }
+    static initDataScope(config, data, designerConfig, legendBlock, modelInstance) {
+        if (config.options.type === '2d' || config.options.type === 'interval') {
+            this.initDataScopeFor2D(config.options, modelInstance, data, designerConfig);
+        }
+        else if (config.options.type === 'polar') {
+            this.initDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
+        }
+    }
+    static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
+        return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
+    }
+    static initDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
+        // Для interval всегда один элемент, так как там может быть только один столбик
+        let itemsLength = 1;
+        if (configOptions.type === '2d') {
+            itemsLength = (configOptions.charts)
+                .filter((chart) => chart.type === 'bar').length;
+            if (itemsLength === 0)
+                itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
+        }
+        if (itemsLength !== 0) {
+            const axisLength = AxisModel.getAxisLength(configOptions.orientation, modelInstance.canvasModel);
+            const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
+            const dataLength = uniqueKeys.length;
+            const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions, itemsLength), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
+            const allowableKeys = uniqueKeys.slice(0, limit);
+            const hidedRecordsAmount = dataLength - allowableKeys.length;
+            modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
+        }
+        else {
+            const allKeys = this.getDataValuesByKeyField(data, configOptions.data.dataSource, configOptions.data.keyField.name);
+            modelInstance.dataModel.initScope(this.getMaximumPossibleScope(allKeys, modelInstance.dataModel));
+        }
+    }
+    static initDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
+        const canvas = modelInstance.canvasModel;
+        const dataset = data[configOptions.data.dataSource];
+        const keyFieldName = configOptions.data.keyField.name;
+        const keys = dataset.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);
+        }
+        const allowableKeys = keys.slice(0, maxItemsNumber);
+        const hidedRecordsAmount = keys.length - maxItemsNumber;
+        modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
+    }
+    static getMaximumPossibleScope(keys, dataModel) {
+        return this.service.getMaximumPossibleAmount(keys, dataModel.getMaxRecordsAmount());
+    }
+    static limitAllowableKeys(allowableKeys, hidedRecordsAmount, dataModel) {
+        return this.service.limitAllowableKeys(allowableKeys, hidedRecordsAmount, dataModel.getMaxRecordsAmount());
+    }
+    /**
+     * Выводит количество элементов (преимущественно баров) в одной группе. Группа - один ключ
+     * @param configOptions
+     * @param chartsLength
+     */
+    static getElementsInGroupAmount(configOptions, chartsLength) {
+        if (configOptions.type === '2d')
+            return this.getBarChartsInGroupAmount(configOptions.charts);
+        return chartsLength;
+    }
+    static getBarChartsInGroupAmount(charts) {
+        let barsAmount = 0;
+        charts.forEach(chart => {
+            if (chart.type === 'bar' && chart.isSegmented)
+                barsAmount += 1; // в сегментированном баре все valueFields находятся внутри одного бара, поэтому бар всегда один.
+            else if (chart.type === 'bar')
+                barsAmount += chart.data.valueFields.length;
+        });
+        return barsAmount;
+    }
+    static getScopedData(data, allowableKeys, config) {
+        const newData = {};
+        newData[config.options.data.dataSource] = this.getScopedChartData(data[config.options.data.dataSource], allowableKeys, config.options.data.keyField.name);
+        return newData;
+    }
+    static getScopedChartData(data, allowableKeys, keyFieldName) {
+        return data.filter(d => allowableKeys.findIndex(key => key === d[keyFieldName]) !== -1);
+    }
+    static setDataType(data, config) {
+        if (config.options.type === 'interval') {
+            const chart = config.options.chart;
+            if (chart.data.valueField1.format === 'date') {
+                data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], chart.data.valueField1);
+            }
+            if (chart.data.valueField2.format === 'date') {
+                data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], chart.data.valueField2);
+            }
+        }
+    }
+    static getTypedData(data, field) {
+        if (field.format === 'date')
+            data.forEach(d => {
+                d[field.name] = new Date(d[field.name]);
+            });
+        return data;
+    }
+    static getDataLimitByItemSize(elementsInGroupAmount, dataLength, axisLength, barOptions) {
+        let sumSize = dataLength * (elementsInGroupAmount * barOptions.minBarWidth + (elementsInGroupAmount - 1) * barOptions.barDistance + barOptions.groupMinDistance);
+        while (dataLength !== 0 && axisLength < sumSize) {
+            dataLength--;
+            // find whole space for bars in group + distance between bars + group distance
+            sumSize = dataLength * (elementsInGroupAmount * barOptions.minBarWidth + (elementsInGroupAmount - 1)
+                * barOptions.barDistance + barOptions.groupMinDistance);
+        }
+        return dataLength;
+    }
+}
+DataManagerModel.service = new DataManagerModelService();

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

@@ -0,0 +1,5 @@
+import { DataScope } from "../model";
+export declare class DataManagerModelService {
+    getMaximumPossibleAmount(keys: string[], maxPossibleAmount: number): DataScope;
+    limitAllowableKeys(allowableKeys: string[], hidedRecordsAmount: number, globalRecordsMaxAmount: number): DataScope;
+}

package/lib/model/dataManagerModel/dataManagerModelService.js

@@ -0,0 +1,28 @@
+export class DataManagerModelService {
+    getMaximumPossibleAmount(keys, maxPossibleAmount) {
+        if (maxPossibleAmount >= keys.length) {
+            return {
+                allowableKeys: keys,
+                hidedRecordsAmount: 0
+            };
+        }
+        else {
+            return {
+                allowableKeys: keys.slice(0, maxPossibleAmount),
+                hidedRecordsAmount: keys.length - maxPossibleAmount
+            };
+        }
+    }
+    limitAllowableKeys(allowableKeys, hidedRecordsAmount, globalRecordsMaxAmount) {
+        if (allowableKeys.length <= globalRecordsMaxAmount) {
+            return {
+                allowableKeys,
+                hidedRecordsAmount
+            };
+        }
+        return {
+            allowableKeys: allowableKeys.slice(0, globalRecordsMaxAmount),
+            hidedRecordsAmount: hidedRecordsAmount + allowableKeys.length - globalRecordsMaxAmount
+        };
+    }
+}

package/lib/model/dataManagerModel.d.ts

@@ -1,9 +1,10 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
 import { DesignerConfig } from "../designer/designerConfig";
-import { BlockMargin, DataScope, LegendBlockModel } from "./model";
+import { DataScope, LegendBlockModel } from "./model";
+import { ModelInstance } from "./modelInstance/modelInstance";
 export declare class DataManagerModel {
     static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
-    static getDataScope(config: MdtChartsConfig, margin: BlockMargin, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel): DataScope;
+    static getDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): DataScope;
     static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
     private static getDataScopeFor2D;
     private static getDataScopeForPolar;

package/lib/model/dataManagerModel.js

@@ -8,18 +8,18 @@ export class DataManagerModel {
         this.setDataType(scopedData, config);
         return scopedData;
     }
-    static getDataScope(config, margin, data, designerConfig, legendBlock) {
+    static getDataScope(config, data, designerConfig, legendBlock, modelInstance) {
         if (config.options.type === '2d' || config.options.type === 'interval') {
-            return this.getDataScopeFor2D(config.options, config.canvas.size, margin, data, designerConfig);
+            return this.getDataScopeFor2D(config.options, modelInstance, data, designerConfig);
         }
         else if (config.options.type === 'polar') {
-            return this.getDataScopeForPolar(config.options, config.canvas.size, margin, data, legendBlock, designerConfig.canvas.legendBlock);
+            return this.getDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
         }
     }
     static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
         return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
     }
-    static getDataScopeFor2D(configOptions, blockSize, margin, data, designerConfig) {
+    static getDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
         // Для interval всегда один элемент, так как там может быть только один столбик
         let itemsLength = 1;
         if (configOptions.type === '2d') {
@@ -29,7 +29,7 @@ export class DataManagerModel {
                 itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
         }
         if (itemsLength !== 0) {
-            const axisLength = AxisModel.getAxisLength(configOptions.orientation, margin, blockSize);
+            const axisLength = AxisModel.getAxisLength(configOptions.orientation, modelInstance.canvasModel);
             const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
             const dataLength = uniqueKeys.length;
             const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions, itemsLength), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
@@ -44,7 +44,8 @@ export class DataManagerModel {
             hidedRecordsAmount: 0
         };
     }
-    static getDataScopeForPolar(configOptions, blockSize, margin, data, legendBlock, legendCanvas) {
+    static getDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
+        const canvas = modelInstance.canvasModel;
         const dataset = data[configOptions.data.dataSource];
         const keyFieldName = configOptions.data.keyField.name;
         const keys = dataset.map(dataRow => dataRow[keyFieldName]);
@@ -55,17 +56,18 @@ export class DataManagerModel {
             };
         }
         let position;
-        if (blockSize.width - margin.left - margin.right >= MIN_DONUT_BLOCK_SIZE)
+        if (canvas.getChartBlockWidth() >= MIN_DONUT_BLOCK_SIZE)
             position = 'right';
         else
             position = 'bottom';
         let maxItemsNumber;
         if (position === 'right') {
-            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, blockSize.height - margin.top - margin.bottom);
+            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvas.getChartBlockHeight());
         }
         else {
-            let marginBottom = 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, blockSize.width - margin.left - margin.right, blockSize.height - margin.top - marginBottom - legendBlock.coordinate.bottom.margin.bottom - MIN_DONUT_BLOCK_SIZE);
+            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);
         }
         return {
             allowableKeys: keys.slice(0, maxItemsNumber),

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

@@ -1,18 +1,19 @@
-import { AxisPosition, ChartOrientation, DataOptions, MdtChartsDataSource, DiscreteAxisOptions, NumberAxisOptions, Size, TwoDimensionalChart } from "../../config/config";
-import { AxisLabelPosition, AxisModelOptions, BlockMargin, Orient } from "../model";
+import { AxisPosition, ChartOrientation, DataOptions, MdtChartsDataSource, DiscreteAxisOptions, NumberAxisOptions, TwoDimensionalChart } from "../../config/config";
+import { AxisLabelPosition, AxisModelOptions, Orient } from "../model";
 import { AxisType } from "../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
+import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
 export interface LabelSize {
     width: number;
     height: number;
 }
 export declare class AxisModel {
-    static getKeyAxis(charts: TwoDimensionalChart[], data: MdtChartsDataSource, dataOptions: DataOptions, orient: ChartOrientation, axisConfig: DiscreteAxisOptions, labelConfig: AxisLabelCanvas, margin: BlockMargin, blockSize: Size, tooltipSettings: TooltipSettings): AxisModelOptions;
-    static getValueAxis(orient: ChartOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, margin: BlockMargin, blockSize: Size): AxisModelOptions;
-    static getAxisLength(chartOrientation: ChartOrientation, margin: BlockMargin, blockSize: Size): number;
+    static getKeyAxis(charts: TwoDimensionalChart[], data: MdtChartsDataSource, dataOptions: DataOptions, orient: ChartOrientation, axisConfig: DiscreteAxisOptions, 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, margin: BlockMargin, blockWidth: number): number;
-    static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, margin: BlockMargin, blockHeight: number): number;
-    static getKeyAxisLabelPosition(margin: BlockMargin, blockSize: Size, scopedDataLength: number): AxisLabelPosition;
+    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 getLabelSize(labelMaxWidth: number, labelTexts: any[]): LabelSize;
 }

package/lib/model/featuresModel/axisModel.js

@@ -1,34 +1,34 @@
 import { ModelHelper } from "../modelHelper";
 import { AxisType, CLASSES } from "../modelBuilder";
-import { DataManagerModel } from "../dataManagerModel";
+import { DataManagerModel } from "../dataManagerModel/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,11 @@
 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;