mdt-charts 1.12.0 → 1.12.1

package/lib/config/config.d.ts

@@ -14,6 +14,7 @@ export declare type MdtChartsDataRow = {
 export interface MdtChartsDataSource {
     [source: string]: MdtChartsDataRow[];
 }
+export declare type AxisLabelPosition = "straight" | "rotated";
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
     options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | IntervalOptions;
@@ -106,6 +107,10 @@ export interface NumberDomain {
     end: number;
 }
 export interface DiscreteAxisOptions extends AxisOptions {
+    labels?: MdtChartsDiscreteAxisLabel;
+}
+export interface MdtChartsDiscreteAxisLabel {
+    position?: AxisLabelPosition;
 }
 export interface IntervalAxis {
     key: DiscreteAxisOptions;

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

@@ -3,12 +3,21 @@ import { MdtChartsDataSource } from "../../../config/config";
 import { IntervalOptionsModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { SelectionCondition } from "../../helpers/domHelper";
+export interface LegendContentRenderingOptions {
+    wrapperClasses: string[];
+    shouldCropLabels: boolean;
+    itemsOptions: {
+        wrapperClasses: string[];
+        markerClass: string;
+        labelClass: string;
+    };
+}
 export declare class Legend {
     static readonly objectClass = "legend-object";
     static readonly labelClass = "legend-label";
     static readonly itemClass = "legend-item";
     static readonly markerClass = "legend-circle";
-    private static readonly legendBlockClass;
+    static readonly legendBlockClass = "legend-block";
     static render(block: Block, data: MdtChartsDataSource, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, model: Model): void;
     static update(block: Block, data: MdtChartsDataSource, model: Model): void;
     static updateColors(block: Block, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel): void;

package/lib/engine/features/legend/legend.js

@@ -1,4 +1,3 @@
-import { select } from "d3-selection";
 import { ColorReader } from "../../colorReader/colorReader";
 import { SelectionCondition } from "../../helpers/domHelper";
 import { LegendDomHelper } from "./legendDomHelper";
@@ -41,8 +40,8 @@ export class Legend {
     static setContent(block, data, options, legendObject) {
         const items = LegendHelper.getLegendItemsContent(options, data);
         const colors = LegendHelper.getMarksColor(options, data[options.data.dataSource]);
-        const itemsDirection = LegendHelper.getLegendItemsDirection(options.type, options.legend.position);
-        const itemBlocks = this.renderContent(legendObject, items, colors, itemsDirection, options.legend.position);
+        const renderingOptions = LegendHelper.getContentRenderingOptions(options.type, options.legend.position);
+        const itemBlocks = this.renderContent(legendObject, items, colors, renderingOptions);
         if (options.type === 'polar') {
             LegendEventsManager.setListeners(block, options.data.keyField.name, itemBlocks, options.selectable);
         }
@@ -58,36 +57,25 @@ export class Legend {
         this.fillCoordinate(legendObject, legendCoordinate);
         return legendObject;
     }
-    static renderContent(legendObject, items, colorPalette, itemsDirection, position) {
-        const wrapper = legendObject.append('xhtml:div')
-            .attr('class', Legend.legendBlockClass);
-        wrapper
-            .style('height', '100%')
-            .style('display', 'flex');
-        if (itemsDirection === 'column') {
-            wrapper.style('flex-direction', 'column');
-            if (position === 'right')
-                wrapper.style('justify-content', 'center');
-        }
+    static renderContent(foreignObject, items, colorPalette, options) {
+        const wrapper = foreignObject.append('xhtml:div');
+        wrapper.classed(options.wrapperClasses.join(" "), true);
         const itemWrappers = wrapper
             .selectAll(`.${this.itemClass}`)
             .data(items)
             .enter()
             .append('div');
-        const thisClass = this;
-        itemWrappers.each(function (d, i) {
-            select(this).attr('class', `${thisClass.itemClass} ${LegendHelper.getItemClasses(itemsDirection, position, i)}`);
-        });
+        itemWrappers.classed(options.itemsOptions.wrapperClasses.join(" "), true);
         itemWrappers
             .append('span')
-            .attr('class', this.markerClass);
+            .classed(options.itemsOptions.markerClass, true);
         LegendDomHelper.setItemsColors(itemWrappers, colorPalette);
         itemWrappers
             .append('span')
-            .attr('class', LegendHelper.getLegendLabelClassByPosition(position))
+            .attr('class', options.itemsOptions.labelClass)
             .text(d => d);
-        if (itemsDirection === 'row')
-            LegendDomHelper.cropRowLabels(legendObject, itemWrappers);
+        if (options.shouldCropLabels)
+            LegendDomHelper.cropRowLabels(foreignObject, itemWrappers);
         return itemWrappers;
     }
     static getObject(block) {

package/lib/engine/features/legend/legendHelper.d.ts

@@ -1,6 +1,8 @@
 import { ChartNotation, MdtChartsDataRow, MdtChartsDataSource, Size } from "../../../config/config";
 import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
 import { IntervalOptionsModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { LegendContentRenderingOptions } from "./legend";
+import { LegendHelperService } from "./legendHelperService";
 export interface LegendCoordinate {
     x: number;
     y: number;
@@ -8,14 +10,11 @@ export interface LegendCoordinate {
     width: number;
 }
 export declare class LegendHelper {
+    static service: LegendHelperService;
     static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, data: MdtChartsDataSource): string[];
     static getMarksColor(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, dataRows?: MdtChartsDataRow[]): string[];
     static getMaxItemWidth(legendBlockWidth: string, marginsLeft: number[], itemsDirection: LegendItemsDirection): number;
-    static getItemClasses(itemsDirection: LegendItemsDirection, position: LegendPosition, index: number): string;
-    static getLegendItemClassByDirection(itemsDirection: LegendItemsDirection): string;
-    static getLegendItemsMarginClass(legendPosition: LegendPosition): string;
-    static getLegendLabelClassByPosition(position: LegendPosition): string;
-    static getLegendItemsDirection(chartNotation: ChartNotation, legendPosition: LegendPosition): LegendItemsDirection;
     static getSumOfItemsWidths(itemsWidth: number[], marginsLeft: number[]): number;
     static getLegendCoordinateByPosition(legendPosition: Orient, legendBlockModel: LegendBlockModel, blockSize: Size): LegendCoordinate;
+    static getContentRenderingOptions(chartNotation: ChartNotation, legendPosition: LegendPosition): LegendContentRenderingOptions;
 }

package/lib/engine/features/legend/legendHelper.js

@@ -1,5 +1,6 @@
 import { Helper } from '../../helpers/helper';
 import { Legend } from "./legend";
+import { LegendHelperService } from "./legendHelperService";
 export class LegendHelper {
     static getLegendItemsContent(options, data) {
         if (options.type === '2d') {
@@ -40,29 +41,6 @@ export class LegendHelper {
         }
         return parseFloat(legendBlockWidth);
     }
-    static getItemClasses(itemsDirection, position, index) {
-        let cssClasses = this.getLegendItemClassByDirection(itemsDirection);
-        if (itemsDirection === 'column' && index !== 0)
-            cssClasses += ` ${this.getLegendItemsMarginClass(position)}`;
-        return cssClasses;
-    }
-    static getLegendItemClassByDirection(itemsDirection) {
-        return itemsDirection === 'column' ? 'legend-item-row' : 'legend-item-inline';
-    }
-    static getLegendItemsMarginClass(legendPosition) {
-        return legendPosition === 'right' ? 'mt-15' : 'mt-10';
-    }
-    static getLegendLabelClassByPosition(position) {
-        if (position === 'top' || position === 'bottom')
-            return `${Legend.labelClass} ${Legend.labelClass + '-nowrap'}`;
-        return Legend.labelClass;
-    }
-    static getLegendItemsDirection(chartNotation, legendPosition) {
-        if (legendPosition === 'right' || legendPosition === 'left')
-            return 'column';
-        else
-            return chartNotation === 'polar' ? 'column' : 'row';
-    }
     static getSumOfItemsWidths(itemsWidth, marginsLeft) {
         let sumOfItemsWidth = Helper.getSumOfNumeric(itemsWidth);
         sumOfItemsWidth += Helper.getSumOfNumeric(marginsLeft);
@@ -96,4 +74,22 @@ export class LegendHelper {
             coordinate.y = blockSize.height - legendModel.size - legendModel.margin.bottom;
         return coordinate;
     }
+    static getContentRenderingOptions(chartNotation, legendPosition) {
+        const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
+        return {
+            wrapperClasses: [
+                Legend.legendBlockClass,
+                this.service.getWrapperClassByItemsDirection(itemsDirection),
+                this.service.getWrapperJustifyContentClass(itemsDirection, legendPosition),
+                this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
+            ],
+            shouldCropLabels: chartNotation === "2d",
+            itemsOptions: {
+                markerClass: Legend.markerClass,
+                labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, Legend.labelClass),
+                wrapperClasses: [Legend.itemClass, this.service.getItemClasses(itemsDirection)]
+            }
+        };
+    }
 }
+LegendHelper.service = new LegendHelperService();

package/lib/engine/features/legend/legendHelperService.d.ts

@@ -0,0 +1,12 @@
+import { ChartNotation } from "../../../config/config";
+import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
+import { LegendPosition } from "../../../model/model";
+export declare class LegendHelperService {
+    getWrapperClassByItemsDirection(itemsDirection: LegendItemsDirection): "legend-block-column" | "legend-block-row";
+    getWrapperJustifyContentClass(itemsDirection: LegendItemsDirection, legendPosition: LegendPosition): "" | "legend-block-centered";
+    getWrapperClassByWrappingItems(legendPosition: LegendPosition, chartNotation: ChartNotation): "legend-wrapper-with-wrap" | "legend-wrapper-without-wrap";
+    getLegendLabelClassByPosition(legendPosition: LegendPosition, chartNotation: ChartNotation, initialLabelClass: string): string;
+    getItemClasses(itemsDirection: LegendItemsDirection): string;
+    getLegendItemsDirection(legendPosition: LegendPosition): LegendItemsDirection;
+    private doesLegendInTopBy2d;
+}

package/lib/engine/features/legend/legendHelperService.js

@@ -0,0 +1,30 @@
+export class LegendHelperService {
+    getWrapperClassByItemsDirection(itemsDirection) {
+        return itemsDirection === "column" ? "legend-block-column" : "legend-block-row";
+    }
+    getWrapperJustifyContentClass(itemsDirection, legendPosition) {
+        return itemsDirection === "column" && legendPosition === "right" ? "legend-block-centered" : "";
+    }
+    getWrapperClassByWrappingItems(legendPosition, chartNotation) {
+        if (this.doesLegendInTopBy2d(legendPosition, chartNotation)) {
+            return "legend-wrapper-without-wrap";
+        }
+        return "legend-wrapper-with-wrap";
+    }
+    getLegendLabelClassByPosition(legendPosition, chartNotation, initialLabelClass) {
+        if (this.doesLegendInTopBy2d(legendPosition, chartNotation))
+            return `${initialLabelClass} ${initialLabelClass + '-nowrap'}`;
+        return initialLabelClass;
+    }
+    getItemClasses(itemsDirection) {
+        return itemsDirection === 'column' ? 'legend-item-row' : 'legend-item-inline';
+    }
+    getLegendItemsDirection(legendPosition) {
+        if (legendPosition === 'right' || legendPosition === 'left')
+            return 'column';
+        return "row";
+    }
+    doesLegendInTopBy2d(legendPosition, chartNotation) {
+        return legendPosition === 'top' && chartNotation === "2d";
+    }
+}

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

@@ -10,7 +10,6 @@ declare class PolarRecordOverflowAlertClass {
     update(block: Block, options: PolarRecordOverflowAlertOptions): void;
     private buildCoreOptions;
     private getPositionAttrs;
-    private getLeftAttrForRightBlock;
 }
 export declare const PolarRecordOverflowAlert: PolarRecordOverflowAlertClass;
 export {};

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

@@ -1,6 +1,4 @@
-import { Legend } from "../../features/legend/legend";
 import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/recordOverflowAlertCore";
-import { DomHelper } from "../../helpers/domHelper";
 class PolarRecordOverflowAlertClass {
     constructor() {
         this.text = {
@@ -11,38 +9,32 @@ class PolarRecordOverflowAlertClass {
         };
     }
     render(block, options) {
-        RecordOverflowAlertCore.render(block, this.buildCoreOptions(block, options));
+        RecordOverflowAlertCore.render(block, this.buildCoreOptions(options));
     }
     update(block, options) {
-        RecordOverflowAlertCore.update(block, this.buildCoreOptions(block, options));
+        RecordOverflowAlertCore.update(block, this.buildCoreOptions(options));
     }
-    buildCoreOptions(block, options) {
+    buildCoreOptions(options) {
         return {
             hidedRecordsAmount: options.hidedRecordsAmount,
             text: this.text,
-            positionAttrs: this.getPositionAttrs(block, options)
+            positionAttrs: this.getPositionAttrs(options)
         };
     }
-    getPositionAttrs(block, options) {
+    getPositionAttrs(options) {
         const position = options.legendPosition === 'off' ? 'bottom' : options.legendPosition;
         if (position === 'right') {
             return {
-                bottom: '20px',
-                left: this.getLeftAttrForRightBlock(block) + 'px'
+                bottom: '0',
+                right: '0'
             };
         }
         if (position === 'bottom') {
             return {
-                bottom: '20px',
-                left: '20px'
+                bottom: '0',
+                left: '0'
             };
         }
     }
-    getLeftAttrForRightBlock(block) {
-        const legendBlock = block.getSvg().select(`.${Legend.objectClass}`);
-        if (legendBlock.empty())
-            return 17;
-        return DomHelper.getSelectionNumericAttr(legendBlock, 'x');
-    }
 }
 export const PolarRecordOverflowAlert = new PolarRecordOverflowAlertClass();

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

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

package/lib/model/dataManagerModel/dataManagerModel.js

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

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

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

package/lib/model/featuresModel/axisModel.js

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

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

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

package/lib/model/featuresModel/axisModelService.js

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

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

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

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

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

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

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