mdt-charts 1.11.1 → 1.12.3

package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js

@@ -0,0 +1,40 @@
+import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/recordOverflowAlertCore";
+class PolarRecordOverflowAlertClass {
+    constructor() {
+        this.text = {
+            one: 'категория',
+            twoToFour: 'категории',
+            tenToTwenty: 'категорий',
+            other: 'категорий'
+        };
+    }
+    render(block, options) {
+        RecordOverflowAlertCore.render(block, this.buildCoreOptions(options));
+    }
+    update(block, options) {
+        RecordOverflowAlertCore.update(block, this.buildCoreOptions(options));
+    }
+    buildCoreOptions(options) {
+        return {
+            hidedRecordsAmount: options.hidedRecordsAmount,
+            text: this.text,
+            positionAttrs: this.getPositionAttrs(options)
+        };
+    }
+    getPositionAttrs(options) {
+        const position = options.legendPosition === 'off' ? 'bottom' : options.legendPosition;
+        if (position === 'right') {
+            return {
+                bottom: '0',
+                right: '0'
+            };
+        }
+        if (position === 'bottom') {
+            return {
+                bottom: '0',
+                left: '0'
+            };
+        }
+    }
+}
+export const PolarRecordOverflowAlert = new PolarRecordOverflowAlertClass();

package/lib/engine/polarNotation/polarManager.js

@@ -1,10 +1,10 @@
 import { Legend } from "../features/legend/legend";
-import { RecordOverflowAlert } from "../features/recordOverflowAlert/recordOverflowAlert";
 import { Title } from "../features/title/title";
 import { ElementHighlighter } from "../elementHighlighter/elementHighlighter";
 import { Tooltip } from "../features/tolltip/tooltip";
 import { Aggregator } from "../features/aggregator/aggregator";
 import { Donut } from "./donut/donut";
+import { PolarRecordOverflowAlert } from "./extenders/polarRecordOverflowAlert";
 export class PolarManager {
     static render(engine, model) {
         const options = model.options;
@@ -14,8 +14,11 @@ export class PolarManager {
         Legend.render(engine.block, engine.data, options, model);
         Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock);
         engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
-        if (model.dataSettings.scope.hidedRecordsAmount !== 0 && model.options.legend.position !== 'off')
-            RecordOverflowAlert.render(engine.block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
+        if (model.dataSettings.scope.hidedRecordsAmount !== 0)
+            PolarRecordOverflowAlert.render(engine.block, {
+                hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+                legendPosition: model.options.legend.position
+            });
         engine.block.getSvg()
             .on('click', (e) => {
             if (e.target === engine.block.getSvg().node())
@@ -36,10 +39,12 @@ export class PolarManager {
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
             block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
-        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, options.chartCanvas.aggregator);
+        Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);
         Legend.update(block, data, model);
-        if (model.options.legend.position !== 'off')
-            RecordOverflowAlert.update(block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
+        PolarRecordOverflowAlert.update(block, {
+            hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
+            legendPosition: model.options.legend.position
+        });
     }
     static updateColors(block, model) {
         Legend.updateColors(block, model.options);

package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.d.ts

@@ -0,0 +1,15 @@
+import { ChartOrientation } from "../../../config/config";
+import { Block } from "../../block/block";
+interface TwoDimRecordOverflowAlertOptions {
+    hidedRecordsAmount: number;
+    chartOrientation: ChartOrientation;
+}
+declare class TwoDimRecordOverflowAlertClass {
+    render(block: Block, options: TwoDimRecordOverflowAlertOptions): void;
+    update(block: Block, options: TwoDimRecordOverflowAlertOptions): void;
+    private buildCoreOptions;
+    private getText;
+    private getPositionAttrs;
+}
+export declare const TwoDimRecordOverflowAlert: TwoDimRecordOverflowAlertClass;
+export {};

package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js

@@ -0,0 +1,32 @@
+import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/recordOverflowAlertCore";
+class TwoDimRecordOverflowAlertClass {
+    render(block, options) {
+        RecordOverflowAlertCore.render(block, this.buildCoreOptions(options));
+    }
+    update(block, options) {
+        RecordOverflowAlertCore.update(block, this.buildCoreOptions(options));
+    }
+    buildCoreOptions(options) {
+        return {
+            hidedRecordsAmount: options.hidedRecordsAmount,
+            text: this.getText(options.chartOrientation),
+            positionAttrs: this.getPositionAttrs()
+        };
+    }
+    getText(chartOrientation) {
+        const isHorizontal = chartOrientation === 'horizontal';
+        return {
+            one: isHorizontal ? 'строка' : 'столбец',
+            twoToFour: isHorizontal ? 'строки' : 'столбца',
+            tenToTwenty: isHorizontal ? 'строк' : 'столбцов',
+            other: isHorizontal ? 'строк' : 'столбцов'
+        };
+    }
+    getPositionAttrs() {
+        return {
+            right: '17px',
+            top: '1rem'
+        };
+    }
+}
+export const TwoDimRecordOverflowAlert = new TwoDimRecordOverflowAlertClass();

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,6 +11,7 @@ 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) {
@@ -28,7 +28,10 @@ export class TwoDimensionalManager {
         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())
@@ -54,7 +57,10 @@ export class TwoDimensionalManager {
             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

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

package/lib/model/{dataManagerModel.d.ts → dataManagerModel/dataManagerModel.d.ts}

@@ -1,13 +1,24 @@
-import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
-import { DesignerConfig } from "../designer/designerConfig";
-import { DataScope, LegendBlockModel } from "./model";
-import { ModelInstance } from "./modelInstance/modelInstance";
+import { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
+import { DesignerConfig } from "../../designer/designerConfig";
+import { LegendBlockModel } from "../model";
+import { ModelInstance } from "../modelInstance/modelInstance";
+export interface DataLegendParams {
+    amount: number;
+    size: {
+        width: number;
+        height: number;
+    };
+}
 export declare class DataManagerModel {
+    private static service;
     static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
-    static getDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): DataScope;
+    static initDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): void;
     static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
-    private static getDataScopeFor2D;
-    private static getDataScopeForPolar;
+    private static initDataScopeFor2D;
+    private static initDataScopeForPolar;
+    private static getLegendDataParams;
+    private static getMaximumPossibleScope;
+    private static limitAllowableKeys;
     /**
      * Выводит количество элементов (преимущественно баров) в одной группе. Группа - один ключ
      * @param configOptions

package/lib/model/{dataManagerModel.js → dataManagerModel/dataManagerModel.js}

@@ -1,25 +1,27 @@
-import { AxisModel } from "./featuresModel/axisModel";
-import { LegendCanvasModel } from "./featuresModel/legendModel/legendCanvasModel";
-import { MIN_DONUT_BLOCK_SIZE } from "./featuresModel/legendModel/legendModel";
-import { ModelHelper } from "./modelHelper";
+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/polar/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 getDataScope(config, data, designerConfig, legendBlock, modelInstance) {
+    static initDataScope(config, data, designerConfig, legendBlock, modelInstance) {
         if (config.options.type === '2d' || config.options.type === 'interval') {
-            return this.getDataScopeFor2D(config.options, modelInstance, data, designerConfig);
+            this.initDataScopeFor2D(config.options, modelInstance, data, designerConfig);
         }
         else if (config.options.type === 'polar') {
-            return this.getDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
+            this.initDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
         }
     }
     static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
         return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
     }
-    static getDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
+    static initDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
         // Для interval всегда один элемент, так как там может быть только один столбик
         let itemsLength = 1;
         if (configOptions.type === '2d') {
@@ -34,45 +36,54 @@ export class DataManagerModel {
             const dataLength = uniqueKeys.length;
             const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions, itemsLength), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
             const allowableKeys = uniqueKeys.slice(0, limit);
-            return {
-                allowableKeys,
-                hidedRecordsAmount: dataLength - allowableKeys.length
-            };
+            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));
         }
-        return {
-            allowableKeys: this.getDataValuesByKeyField(data, configOptions.data.dataSource, configOptions.data.keyField.name),
-            hidedRecordsAmount: 0
-        };
     }
-    static getDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
-        const canvas = modelInstance.canvasModel;
-        const dataset = data[configOptions.data.dataSource];
+    static initDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
+        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) {
-            return {
-                allowableKeys: keys,
-                hidedRecordsAmount: 0
-            };
+            modelInstance.dataModel.initScope(this.getMaximumPossibleScope(keys, modelInstance.dataModel));
+            return;
+        }
+        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;
+            }
         }
-        let position;
-        if (canvas.getChartBlockWidth() >= MIN_DONUT_BLOCK_SIZE)
-            position = 'right';
-        else
-            position = 'bottom';
-        let maxItemsNumber;
+        //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') {
-            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvas.getChartBlockHeight());
+            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
         }
         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);
+            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);
         }
-        return {
-            allowableKeys: keys.slice(0, maxItemsNumber),
-            hidedRecordsAmount: keys.length - maxItemsNumber
-        };
+    }
+    static getMaximumPossibleScope(keys, dataModel) {
+        return this.service.getMaximumPossibleAmount(keys, dataModel.getMaxRecordsAmount());
+    }
+    static limitAllowableKeys(allowableKeys, hidedRecordsAmount, dataModel) {
+        return this.service.limitAllowableKeys(allowableKeys, hidedRecordsAmount, dataModel.getMaxRecordsAmount());
     }
     /**
      * Выводит количество элементов (преимущественно баров) в одной группе. Группа - один ключ
@@ -103,13 +114,7 @@ export class DataManagerModel {
         return data.filter(d => allowableKeys.findIndex(key => key === d[keyFieldName]) !== -1);
     }
     static setDataType(data, config) {
-        if (config.options.type === 'polar' || config.options.type === '2d') {
-            // Форматиривание для оси ключей пока не совсем верно установлено
-            // if(config.options.data.keyField.format === 'date') {
-            //     data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], config.options.data.keyField);
-            // }
-        }
-        else if (config.options.type === 'interval') {
+        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);
@@ -137,3 +142,4 @@ export class DataManagerModel {
         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/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

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