mdt-charts 1.12.8 → 1.12.12

package/lib/designer/designerConfig.d.ts

@@ -30,7 +30,7 @@ interface BlockMargin {
     right: number;
 }
 export interface LegendBlockCanvas {
-    maxWidth: number;
+    maxWidth: number | string;
 }
 interface ChartOptionsCanvas {
     bar: BarOptionsCanvas;

package/lib/engine/features/axis/axis.js

@@ -1,11 +1,11 @@
 import { Scale } from "../scale/scale";
-import { AXIS_VERTICAL_LABEL_PADDING } from "../../../model/marginModel";
 import { NamesHelper } from '../../helpers/namesHelper';
 import { AxisHelper } from './axisHelper';
 import { AxisLabelHelper } from './axisLabelDomHelper';
 import { AxisDomHelper } from './axisDomHelper';
 import { select } from 'd3-selection';
 import { AxisLabelsEventManager } from './axisLabelsEventManager';
+import { AXIS_VERTICAL_LABEL_PADDING } from '../../../model/margin/twoDim/twoDimMarginModel';
 const MINIMAL_STEP_SIZE_FOR_WRAPPING = 38;
 export class Axis {
     static render(block, scales, scaleModel, axisModel, blockSize) {

package/lib/engine/features/axis/axisLabelDomHelper.js

@@ -1,7 +1,7 @@
 import { select } from 'd3-selection';
-import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from "../../../model/marginModel";
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
+import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from '../../../model/margin/twoDim/twoDimMarginModel';
 export class AxisLabelHelper {
     static setTitles(axisElement) {
         axisElement.selectAll('.tick text')

package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js

@@ -1,5 +1,5 @@
 import * as chroma from "chroma-js";
-import { ModelHelper } from "../modelHelper";
+import { ModelHelper } from "../helpers/modelHelper";
 import { ChartStyleModelService } from "./chartStyleModel";
 export class TwoDimensionalChartStyleModel {
     constructor(charts, chartStyleConfig) {

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

@@ -11,8 +11,10 @@ export interface DataLegendParams {
 }
 export declare class DataManagerModel {
     private static service;
+    private static polarMarginCalculator;
     static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
     static initDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): void;
+    private static initScopedData;
     static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
     private static initDataScopeFor2D;
     private static initDataScopeForPolar;

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -1,9 +1,9 @@
 import { AxisModel } from "../featuresModel/axisModel";
 import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
-import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
-import { ModelHelper } from "../modelHelper";
+import { ModelHelper } from "../helpers/modelHelper";
 import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
 import { DataManagerModelService } from "./dataManagerModelService";
+import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
         const scopedData = this.getScopedData(data, allowableKeys, config);
@@ -17,6 +17,11 @@ export class DataManagerModel {
         else if (config.options.type === 'polar') {
             this.initDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
         }
+        this.initScopedData(data, modelInstance, config);
+    }
+    static initScopedData(data, modelInstance, config) {
+        const preparedData = DataManagerModel.getPreparedData(data, modelInstance.dataModel.getAllowableKeys(), config);
+        modelInstance.dataModel.repository.initScopedFullSource(preparedData);
     }
     static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
         return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
@@ -66,14 +71,13 @@ export class DataManagerModel {
         //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);
+        this.polarMarginCalculator.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);
+            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), 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);
@@ -143,3 +147,4 @@ export class DataManagerModel {
     }
 }
 DataManagerModel.service = new DataManagerModelService();
+DataManagerModel.polarMarginCalculator = new LegendPolarMarginCalculator();

package/lib/model/featuresModel/axisModel.js

@@ -1,4 +1,4 @@
-import { ModelHelper } from "../modelHelper";
+import { ModelHelper } from "../helpers/modelHelper";
 import { AxisType, CLASSES } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";

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

@@ -2,7 +2,6 @@ import { DataLegendParams } from "../../dataManagerModel/dataManagerModel";
 import { LegendPosition } from "../../model";
 export declare type LegendItemsDirection = 'row' | 'column';
 export declare class LegendCanvasModel {
-    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): DataLegendParams;
     private static getLegendWrapperEl;

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

@@ -1,30 +1,5 @@
 import { CLASSES } from "../../modelBuilder";
 export class LegendCanvasModel {
-    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("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);
-            textBlock.textContent = text;
-            itemWrapper.append(colorBlock, textBlock);
-            legendWrapper.append(itemWrapper);
-        });
-        document.body.append(legendWrapper);
-        const height = legendWrapper.offsetHeight;
-        legendWrapper.remove();
-        return height + 1;
-    }
     static getLegendItemWidth(text) {
         const itemWrapper = document.createElement('div');
         itemWrapper.style.opacity = '0';

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

@@ -1,11 +1,7 @@
-import { ChartNotation, Size } from "../../../config/config";
-import { ILegendModel, LegendBlockModel, Orient } from "../../model";
+import { LegendBlockModel } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { LegendItemsDirection } from "./legendCanvasModel";
 export declare class LegendModel {
-    static getLegendSize(chartNotation: ChartNotation, position: Orient, texts: string[], legendMaxWidth: number, blockSize: Size, legendBlockModel: LegendBlockModel): number;
-    static getBaseLegendBlockModel(notation: ChartNotation, canvasModel: CanvasModel): LegendBlockModel;
-    static getLegendModel(chartNotation: ChartNotation, legendShow: boolean, canvasModel: CanvasModel): ILegendModel;
+    static getBaseLegendBlockModel(canvasModel: CanvasModel): LegendBlockModel;
     static getLegendItemClass(itemsPosition: LegendItemsDirection): string;
-    private static getLegendWidth;
 }

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

@@ -1,20 +1,5 @@
-import { ModelHelper } from "../../modelHelper";
-import { PolarModel } from "../../notations/polar/polarModel";
-import { LegendCanvasModel } from "./legendCanvasModel";
 export class LegendModel {
-    static getLegendSize(chartNotation, position, texts, legendMaxWidth, blockSize, legendBlockModel) {
-        if (position === 'left' || position === 'right')
-            return this.getLegendWidth(texts, legendMaxWidth);
-        //TODO: rm duplicate
-        if (chartNotation === '2d' || chartNotation === 'interval') {
-            return LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
-        }
-        else if (chartNotation === 'polar') {
-            const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
-            return size;
-        }
-    }
-    static getBaseLegendBlockModel(notation, canvasModel) {
+    static getBaseLegendBlockModel(canvasModel) {
         const mt = 20, mb = 20, ml = 20, mr = 20;
         return {
             coordinate: {
@@ -25,12 +10,12 @@ export class LegendModel {
                 },
                 bottom: {
                     size: 0,
-                    margin: { top: 0, bottom: 20, left: 0, right: 0 },
+                    margin: { top: 5, bottom: 20, left: 0, right: 0 },
                     pad: 0
                 },
                 right: {
                     size: 0,
-                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 5, right: 0 },
+                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 10, right: 0 },
                     pad: 0
                 },
                 top: {
@@ -38,38 +23,10 @@ export class LegendModel {
                     margin: { top: 5, bottom: 10, left: 0, right: 0 },
                     pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
-            },
-            standartTooltip: notation === 'polar' ? false : true
-        };
-    }
-    static getLegendModel(chartNotation, legendShow, canvasModel) {
-        if (!legendShow)
-            return {
-                position: 'off'
-            };
-        let legendPosition = 'off';
-        if (chartNotation === '2d' || chartNotation === 'interval')
-            legendPosition = 'top';
-        else if (chartNotation === 'polar') {
-            legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
-        }
-        return {
-            position: legendPosition
+            }
         };
     }
     static getLegendItemClass(itemsPosition) {
         return itemsPosition === 'column' ? 'legend-item-row' : 'legend-item-inline';
     }
-    static getLegendWidth(texts, legendMaxWidth) {
-        let longestText = '';
-        let biggestScore = 0;
-        texts.forEach(text => {
-            if (ModelHelper.getStringScore(text) > biggestScore) {
-                longestText = text;
-                biggestScore = ModelHelper.getStringScore(text);
-            }
-        });
-        const maxWidth = LegendCanvasModel.getLegendItemWidth(longestText + '?'); // One letter reserve
-        return maxWidth > legendMaxWidth ? legendMaxWidth : maxWidth;
-    }
 }

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

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

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

@@ -1,30 +1,20 @@
-import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
-import { MarginModel } from "../../marginModel";
-import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polar/polarModel";
-import { LegendModel } from "./legendModel";
+import { getPxPercentUnitByValue } from "../../helpers/unitsFromConfigReader";
+import { MarginModel } from "../../margin/marginModel";
 export class LegendPolarMarginCalculator {
-    recalcMargin(modelInstance, options, legendMaxWidth, legendBlockModel, data) {
-        const canvasModel = modelInstance.canvasModel;
-        let legendPosition = LegendModel.getLegendModel(options.type, options.legend.show, modelInstance.canvasModel).position;
-        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        if (legendPosition === "off")
-            return;
-        let legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition);
-        if (legendPosition === "right" && canvasModel.getChartBlockWidth() - legendSize < MIN_DONUT_BLOCK_SIZE) {
-            legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, "bottom");
-            legendPosition = "bottom";
-            modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        }
-        if (legendSize !== 0) {
-            canvasModel.increaseMarginSide(legendPosition, legendSize);
-            MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
-        }
-        legendBlockModel.coordinate[legendPosition].size = legendSize;
-    }
     updateMargin(legendPosition, canvasModel, legendBlockModel, size) {
         canvasModel.legendCanvas.setPosition(legendPosition);
         this.updateMarginObj(legendBlockModel, legendPosition, size, canvasModel);
     }
+    getMaxLegendWidth(legendCanvas, blockWidth) {
+        const maxWidth = legendCanvas.maxWidth;
+        if (typeof maxWidth === "number")
+            return maxWidth;
+        const unit = getPxPercentUnitByValue(maxWidth);
+        const maxWidthNumber = parseInt(maxWidth);
+        if (unit === "px")
+            return maxWidthNumber;
+        return maxWidthNumber / 100 * blockWidth;
+    }
     updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
         if (legendSize !== 0) {
             canvasModel.increaseMarginSide(legendPosition, legendSize);
@@ -32,11 +22,4 @@ export class LegendPolarMarginCalculator {
         }
         legendBlockModel.coordinate[legendPosition].size = legendSize;
     }
-    getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition) {
-        const legendItemsContent = this.getLegendItemsContent(options, data);
-        return LegendModel.getLegendSize(options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
-    }
-    getLegendItemsContent(options, data) {
-        return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
-    }
 }

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

@@ -0,0 +1,7 @@
+import { LegendBlockModel } from "../../model";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare class TwoDimLegendModel {
+    recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel): void;
+    private getLegendSize;
+    private getLegendModel;
+}

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

@@ -0,0 +1,24 @@
+import { MarginModel } from "../../margin/marginModel";
+export class TwoDimLegendModel {
+    recalcMarginWith2DLegend(modelInstance, legendBlockModel) {
+        const canvasModel = modelInstance.canvasModel;
+        const legendPosition = this.getLegendModel().position;
+        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
+        if (legendPosition !== 'off') {
+            const legendSize = this.getLegendSize();
+            canvasModel.increaseMarginSide(legendPosition, legendSize);
+            if (legendSize !== 0)
+                MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
+            legendBlockModel.coordinate[legendPosition].size = legendSize;
+        }
+    }
+    getLegendSize() {
+        const heightOfLegendItemWithoutWordWrapping = 20;
+        return heightOfLegendItemWithoutWordWrapping;
+    }
+    getLegendModel() {
+        return {
+            position: "top"
+        };
+    }
+}

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

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

package/lib/model/featuresModel/otherComponents.js

@@ -6,7 +6,7 @@ export class OtherComponentsModel {
         const canvasModel = modelInstance.canvasModel;
         canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.title));
         return {
-            legendBlock: LegendModel.getBaseLegendBlockModel(dependencies.notation, canvasModel),
+            legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel),
             titleBlock: canvasModel.titleCanvas.getModel(),
             tooltipBlock: TooltipModel.getTooltipModel(dependencies.elementsOptions.tooltip)
         };

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

@@ -7,10 +7,10 @@ export declare enum ScaleType {
 }
 export declare class ScaleModel {
     static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
-    static getScaleLinear(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, canvasModel: CanvasModel): ScaleValueModel;
+    static getScaleLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel): ScaleValueModel;
     static getRangePeek(scaleType: ScaleType, chartOrientation: string, canvasModel: CanvasModel): number;
     static getDateValueDomain(data: MdtChartsDataSource, chart: IntervalChart, keyAxisPosition: AxisPosition, dataSource: string): [Date, Date];
-    static getLinearDomain(configDomain: NumberDomain, data: MdtChartsDataSource, configOptions: MdtChartsTwoDimensionalOptions): [number, number];
+    static getLinearDomain(configDomain: NumberDomain, dataRows: MdtChartsDataRow[], configOptions: MdtChartsTwoDimensionalOptions): [number, number];
     static getScaleKeyType(charts: MdtChartsTwoDimensionalChart[]): ScaleKeyType;
     static getScaleValueType(charts: MdtChartsTwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
     static getElementsAmount(barCharts: MdtChartsTwoDimensionalChart[]): number;

package/lib/model/featuresModel/scaleModel/scaleModel.js

@@ -1,4 +1,4 @@
-import { ModelHelper } from "../../modelHelper";
+import { ModelHelper } from "../../helpers/modelHelper";
 export var ScaleType;
 (function (ScaleType) {
     ScaleType[ScaleType["Key"] = 0] = "Key";
@@ -16,9 +16,9 @@ export class ScaleModel {
             elementsAmount: this.getElementsAmount(barCharts)
         };
     }
-    static getScaleLinear(options, data, canvasModel) {
+    static getScaleLinear(options, dataRows, canvasModel) {
         return {
-            domain: ScaleModel.getLinearDomain(options.axis.value.domain, data, options),
+            domain: ScaleModel.getLinearDomain(options.axis.value.domain, dataRows, options),
             range: {
                 start: 0,
                 end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
@@ -43,15 +43,15 @@ export class ScaleModel {
             return [domainPeekMin, domainPeekMax];
         return [domainPeekMax, domainPeekMin];
     }
-    static getLinearDomain(configDomain, data, configOptions) {
+    static getLinearDomain(configDomain, dataRows, configOptions) {
         let domainPeekMin;
         let domainPeekMax;
         if (configDomain.start === -1)
-            domainPeekMin = this.getScaleMinValue(configOptions.charts, data[configOptions.data.dataSource]);
+            domainPeekMin = this.getScaleMinValue(configOptions.charts, dataRows);
         else
             domainPeekMin = configDomain.start;
         if (configDomain.end === -1)
-            domainPeekMax = this.getScaleMaxValue(configOptions.charts, data[configOptions.data.dataSource]);
+            domainPeekMax = this.getScaleMaxValue(configOptions.charts, dataRows);
         else
             domainPeekMax = configDomain.end;
         if (configOptions.axis.key.position === 'start')

package/lib/model/helpers/modelHelper.d.ts

@@ -0,0 +1,7 @@
+import { MdtChartsDataSource, IntervalChart } from "../../config/config";
+export declare class ModelHelper {
+    static getSum(items: number[]): number;
+    static getMinAndMaxOfIntervalData(data: MdtChartsDataSource, dataSource: string, chart: IntervalChart): [Date, Date];
+    static getUniqueValues(values: string[]): string[];
+    static getStringScore(word: string): number;
+}

package/lib/model/helpers/modelHelper.js

@@ -0,0 +1,41 @@
+export class ModelHelper {
+    static getSum(items) {
+        return items.reduce((acc, item) => acc + item, 0);
+    }
+    static getMinAndMaxOfIntervalData(data, dataSource, chart) {
+        let min = data[dataSource][0][chart.data.valueField1.name];
+        let max = data[dataSource][0][chart.data.valueField1.name];
+        const chartData = data[dataSource];
+        const valueField1 = chart.data.valueField1.name;
+        const valueField2 = chart.data.valueField2.name;
+        chartData.forEach(dataRow => {
+            if (dataRow[valueField1] > max)
+                max = dataRow[valueField1];
+            if (dataRow[valueField1] < min)
+                min = dataRow[valueField1];
+            if (dataRow[valueField2] > max)
+                max = dataRow[valueField2];
+            if (dataRow[valueField2] < min)
+                min = dataRow[valueField2];
+        });
+        return [min, max];
+    }
+    static getUniqueValues(values) {
+        const uniqueValues = values.filter((keyValue, index, self) => self.indexOf(keyValue) === index);
+        return uniqueValues;
+    }
+    static getStringScore(word) {
+        // lower case letter width ~ 0.74 from upper case width.
+        // Number width == lower case letter width
+        let score = 0;
+        const upperLetterScore = 1;
+        const lowerLetterScore = 0.74;
+        for (let i = 0; i < word.length; i++) {
+            if (word[i].toUpperCase() === word[i] && parseFloat(word[i]).toString() !== word[i])
+                score += upperLetterScore;
+            else
+                score += lowerLetterScore;
+        }
+        return score;
+    }
+}

package/lib/model/helpers/unitsFromConfigReader.d.ts

@@ -0,0 +1,2 @@
+import { UnitsFromConfig } from "../model";
+export declare function getPxPercentUnitByValue(value: number | string): UnitsFromConfig;

package/lib/model/helpers/unitsFromConfigReader.js

@@ -0,0 +1,7 @@
+import { UnitsReader } from "./unitsReader";
+export function getPxPercentUnitByValue(value) {
+    const unitsReader = new UnitsReader();
+    const defaultUnit = "px";
+    const units = ["%", "px"];
+    return unitsReader.getUnitByValue(value, defaultUnit, units);
+}

package/lib/model/helpers/unitsReader.d.ts

@@ -0,0 +1,5 @@
+import { UnitsFromConfig } from "../model";
+export declare class UnitsReader {
+    getUnitByValue<T extends string = UnitsFromConfig>(value: string | number, defaultUnit: T, units: T[]): T;
+    private getLastUnitFromString;
+}

package/lib/model/helpers/unitsReader.js

@@ -0,0 +1,15 @@
+export class UnitsReader {
+    getUnitByValue(value, defaultUnit, units) {
+        if (typeof value !== "string")
+            return defaultUnit;
+        return this.getLastUnitFromString(value, units) || defaultUnit;
+    }
+    getLastUnitFromString(value, units) {
+        let resultUnit = null;
+        units.forEach(unit => {
+            if (value.endsWith(unit))
+                resultUnit = unit;
+        });
+        return resultUnit;
+    }
+}

package/lib/model/margin/marginModel.d.ts

@@ -0,0 +1,11 @@
+import { MdtChartsConfig, MdtChartsDataSource, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { DesignerConfig } from "../../designer/designerConfig";
+import { LegendBlockModel, Orient, OtherCommonComponents } from "../model";
+import { ModelInstance } from "../modelInstance/modelInstance";
+import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
+export declare class MarginModel {
+    static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
+    static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig): void;
+    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
+    private static recalcMarginByTitle;
+}

package/lib/model/margin/marginModel.js

@@ -0,0 +1,26 @@
+import { TwoDimMarginModel } from "./twoDim/twoDimMarginModel";
+export class MarginModel {
+    static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
+        const canvasModel = modelInstance.canvasModel;
+        canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
+        this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
+        if (config.options.type === '2d') {
+            const twoDimModel = new TwoDimMarginModel();
+            twoDimModel.recalcMargin(designerConfig, config.options, otherComponents, data, modelInstance);
+        }
+    }
+    static recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
+        const twoDimModel = new TwoDimMarginModel();
+        twoDimModel.recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig);
+    }
+    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
+        const legendCoordinate = legendBlockModel.coordinate;
+        if (position === 'left' || position === 'right')
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
+        else
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
+    }
+    static recalcMarginByTitle(canvasModel, titleBlockModel) {
+        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
+    }
+}

package/lib/model/margin/twoDim/twoDimMarginModel.d.ts

@@ -0,0 +1,14 @@
+import { MdtChartsDataSource, MdtChartsTwoDimensionalOptions } from "../../../config/config";
+import { DesignerConfig } from "../../../designer/designerConfig";
+import { OtherCommonComponents } from "../../model";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
+export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
+export declare class TwoDimMarginModel {
+    private twoDimLegendModel;
+    recalcMargin(designerConfig: DesignerConfig, options: MdtChartsTwoDimensionalOptions, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
+    recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig): void;
+    private getHorizontalMarginByAxisLabels;
+    private recalcVerticalMarginByAxisLabelHeight;
+    private recalcHorizontalMarginByAxisLabelWidth;
+}

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -0,0 +1,69 @@
+import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
+import { AxisModel } from "../../featuresModel/axisModel";
+import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendModel";
+import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
+import { AxisType } from "../../modelBuilder";
+import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
+export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
+export const AXIS_VERTICAL_LABEL_PADDING = 10;
+export class TwoDimMarginModel {
+    constructor() {
+        this.twoDimLegendModel = new TwoDimLegendModel();
+    }
+    recalcMargin(designerConfig, options, otherComponents, data, modelInstance) {
+        const canvasModel = modelInstance.canvasModel;
+        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock);
+        const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, options.axis, data, options);
+        this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, options.orientation, options.axis);
+        // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
+        // При этом все графики должны иметь: embeddedLabels = 'key'
+        // И все графики должны быть типа bar. 
+        const showingFlag = options.type === '2d'
+            ? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(options.charts, options.orientation)
+            : true;
+        this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, options.orientation, options.axis, showingFlag);
+    }
+    recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
+        if (options.orientation === 'vertical') {
+            const dataModel = modelInstance.dataModel;
+            const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataModel.getAllowableKeys());
+            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataModel.getAllowableKeys().length, options.axis.key);
+            const marginOrient = options.axis.key.position === 'end' ? 'bottom' : 'top';
+            if (axisConfig === 'rotated') {
+                modelInstance.canvasModel.decreaseMarginSide(marginOrient, axisLabelSize.height);
+                modelInstance.canvasModel.increaseMarginSide(marginOrient, axisLabelSize.width, keyAxisLabelVerticalLog);
+            }
+        }
+    }
+    getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
+        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, options.orientation, axis.key.position);
+        let labelsTexts;
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            labelsTexts = DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
+        }
+        else {
+            labelsTexts = ['0000'];
+        }
+        return AxisModel.getLabelSize(labelsMaxWidth, labelsTexts);
+    }
+    recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, orientation, axis) {
+        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
+        const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
+        if ((keyAxisOrient === 'bottom' || keyAxisOrient === 'top')) {
+            if (axis.key.visibility)
+                canvasModel.increaseMarginSide(keyAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING, keyAxisLabelVerticalLog);
+        }
+        else if (axis.value.visibility)
+            canvasModel.increaseMarginSide(valueAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
+    }
+    recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, orientation, axis, isShow) {
+        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
+        const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
+        if ((keyAxisOrient === 'left' || keyAxisOrient === 'right') && isShow && axis.key.visibility) {
+            canvasModel.increaseMarginSide(keyAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING, keyAxisLabelHorizontalLog);
+        }
+        else if ((valueAxisOrient === 'left' || valueAxisOrient === 'right') && axis.value.visibility) {
+            canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
+        }
+    }
+}

package/lib/model/marginModel.d.ts

@@ -6,13 +6,12 @@ import { CanvasModel } from "./modelInstance/canvasModel/canvasModel";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
 export declare class MarginModel {
+    private static twoDimLegendModel;
     static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
     static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, config: MdtChartsConfig, designerConfig: DesignerConfig, dataScope: DataScope): void;
+    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
     private static getHorizontalMarginByAxisLabels;
     private static recalcVerticalMarginByAxisLabelHeight;
     private static recalcHorizontalMarginByAxisLabelWidth;
-    private static recalcMarginWithLegend;
-    private static getLegendItemsContent;
-    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
     private static recalcMarginByTitle;
 }

package/lib/model/marginModel.js

@@ -1,18 +1,18 @@
 import { AxisModel } from "./featuresModel/axisModel";
 import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
-import { LegendModel } from "./featuresModel/legendModel/legendModel";
 import { AxisType } from "./modelBuilder";
 import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "./featuresModel/scaleModel/scaleAxisRecalcer";
+import { TwoDimLegendModel } from "./featuresModel/legendModel/twoDimLegendModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {
     static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
         canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
-        this.recalcMarginWithLegend(modelInstance, config, designerConfig.canvas.legendBlock.maxWidth, otherComponents.legendBlock, data);
         this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
-        if (config.options.type === '2d' || config.options.type === 'interval') {
+        if (config.options.type === '2d') {
+            this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock);
             const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, config.options.axis, data, config.options);
             this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, config.options.orientation, config.options.axis);
             // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
@@ -35,6 +35,13 @@ export class MarginModel {
             }
         }
     }
+    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
+        const legendCoordinate = legendBlockModel.coordinate;
+        if (position === 'left' || position === 'right')
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
+        else
+            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
+    }
     static getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, options.orientation, axis.key.position);
         let labelsTexts;
@@ -66,45 +73,8 @@ export class MarginModel {
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
     }
-    static recalcMarginWithLegend(modelInstance, config, legendMaxWidth, legendBlockModel, data) {
-        if (config.options.type === "polar") {
-            return;
-        }
-        const canvasModel = modelInstance.canvasModel;
-        const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
-        modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        if (legendPosition !== 'off') {
-            const legendItemsContent = this.getLegendItemsContent(config.options, data);
-            const legendSize = LegendModel.getLegendSize(config.options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
-            canvasModel.increaseMarginSide(legendPosition, legendSize);
-            if (legendSize !== 0)
-                this.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
-            legendBlockModel.coordinate[legendPosition].size = legendSize;
-        }
-    }
-    static getLegendItemsContent(options, data) {
-        if (options.type === '2d') {
-            let texts = [];
-            options.charts.forEach(chart => {
-                texts = texts.concat(chart.data.valueFields.map(field => field.title));
-            });
-            return texts;
-        }
-        else if (options.type === 'polar') {
-            return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
-        }
-        else if (options.type === 'interval') {
-            return [options.chart.data.valueField1.name];
-        }
-    }
-    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
-        const legendCoordinate = legendBlockModel.coordinate;
-        if (position === 'left' || position === 'right')
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
-        else
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
-    }
     static recalcMarginByTitle(canvasModel, titleBlockModel) {
         canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
     }
 }
+MarginModel.twoDimLegendModel = new TwoDimLegendModel();

package/lib/model/model.d.ts

@@ -9,6 +9,7 @@ export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
 export declare type DataOptions = {
     [option: string]: any;
 };
+export declare type UnitsFromConfig = "%" | "px";
 export interface Model<O = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel> {
     blockCanvas: BlockCanvas;
     chartBlock: ChartBlockModel;
@@ -148,7 +149,7 @@ export interface DonutAggregatorContent {
     value: string | number;
     title: string;
 }
-export declare type DonutThicknessUnit = "px" | "%";
+export declare type DonutThicknessUnit = UnitsFromConfig;
 export interface DonutThicknessOptions {
     min: number;
     max: number;
@@ -223,7 +224,6 @@ interface ComponentBlockModel {
 }
 export interface LegendBlockModel {
     coordinate: LegendCoordinate;
-    standartTooltip: boolean;
 }
 export interface LegendCoordinate {
     top: LegendCanvasCoordinate;

package/lib/model/modelBuilder.d.ts

@@ -13,4 +13,3 @@ export declare const CLASSES: {
 };
 export declare function assembleModel(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): Model;
 export declare function getPreparedData(model: Model, data: MdtChartsDataSource, config: MdtChartsConfig): MdtChartsDataSource;
-export declare function getUpdatedModel(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): Model;

package/lib/model/modelBuilder.js

@@ -1,4 +1,4 @@
-import { MarginModel } from './marginModel';
+import { MarginModel } from './margin/marginModel';
 import { TwoDimensionalModel } from './notations/twoDimensionalModel';
 import { PolarModel } from './notations/polar/polarModel';
 import { DataManagerModel } from './dataManagerModel/dataManagerModel';
@@ -30,16 +30,16 @@ function getChartBlockModel(modelInstance) {
         margin: modelInstance.canvasModel.getMargin()
     };
 }
-function getOptions(config, designerConfig, modelInstance, data) {
+function getOptions(config, designerConfig, modelInstance) {
     //TODO: migrate to polymorphism
     if (config.options.type === '2d') {
-        return TwoDimensionalModel.getOptions(config.options, designerConfig, data, modelInstance);
+        return TwoDimensionalModel.getOptions(config.options, designerConfig, modelInstance);
     }
     else if (config.options.type === 'polar') {
         return PolarModel.getOptions(config.options, designerConfig, modelInstance);
     }
     else if (config.options.type === 'interval') {
-        return IntervalModel.getOptions(config, designerConfig, modelInstance.canvasModel.getMargin(), modelInstance.dataModel.getScope(), data, modelInstance);
+        return IntervalModel.getOptions(config.options, designerConfig, modelInstance);
     }
 }
 function getDataSettings(dataScope, designerConfig) {
@@ -67,16 +67,14 @@ export function assembleModel(config, data, designerConfig) {
             dataSettings: null
         };
     resetFalsyValues(data, config.options.data.keyField.name);
-    const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, notation: config.options.type, title: config.options.title }, modelInstance);
+    const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, title: config.options.title }, modelInstance);
     MarginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
     DataManagerModel.initDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
-    const preparedData = DataManagerModel.getPreparedData(data, modelInstance.dataModel.getAllowableKeys(), config);
-    modelInstance.dataModel.repository.initScopedFullSource(preparedData);
     if (config.options.type === '2d' && config.options.axis.key.visibility)
-        MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, modelInstance.dataModel.getScope());
+        MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config.options, designerConfig);
     const blockCanvas = getBlockCanvas(config, modelInstance);
     const chartBlock = getChartBlockModel(modelInstance);
-    const options = getOptions(config, designerConfig, modelInstance, preparedData);
+    const options = getOptions(config, designerConfig, modelInstance);
     const dataSettings = getDataSettings(modelInstance.dataModel.getScope(), designerConfig);
     const transitions = getTransitions(designerConfig);
     modelInstance.canvasModel.roundMargin();
@@ -111,6 +109,3 @@ export function getPreparedData(model, data, config) {
     const preparedData = DataManagerModel.getPreparedData(data, model.dataSettings.scope.allowableKeys, config);
     return preparedData;
 }
-export function getUpdatedModel(config, data, designerConfig) {
-    return assembleModel(config, data, designerConfig);
-}

package/lib/model/notations/intervalModel.d.ts

@@ -1,9 +1,9 @@
-import { MdtChartsConfig, MdtChartsDataSource, MdtChartsIntervalOptions } from "../../config/config";
+import { MdtChartsIntervalOptions } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
-import { AdditionalElementsOptions, BlockMargin, DataScope, IntervalOptionsModel } from "../model";
+import { AdditionalElementsOptions, IntervalOptionsModel } from "../model";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class IntervalModel {
-    static getOptions(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): IntervalOptionsModel;
+    static getOptions(options: MdtChartsIntervalOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): IntervalOptionsModel;
     static getAdditionalElements(options: MdtChartsIntervalOptions): AdditionalElementsOptions;
     private static getChartsModel;
 }

package/lib/model/notations/intervalModel.js

@@ -5,9 +5,9 @@ import { AxisType } from "../modelBuilder";
 import { ScaleModel, ScaleType } from "../featuresModel/scaleModel/scaleModel";
 import { TwoDimensionalModel } from "./twoDimensionalModel";
 export class IntervalModel {
-    static getOptions(config, designerConfig, margin, dataScope, data, modelInstance) {
-        const options = config.options;
+    static getOptions(options, designerConfig, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
+        const dataModelRep = modelInstance.dataModel.repository;
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: options.title,
@@ -15,7 +15,7 @@ export class IntervalModel {
             orient: options.orientation,
             scale: {
                 key: {
-                    domain: dataScope.allowableKeys,
+                    domain: modelInstance.dataModel.getAllowableKeys(),
                     range: {
                         start: 0,
                         end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation, canvasModel)
@@ -24,7 +24,7 @@ export class IntervalModel {
                     elementsAmount: 1
                 },
                 value: {
-                    domain: ScaleModel.getDateValueDomain(data, options.chart, options.axis.key.position, options.data.dataSource),
+                    domain: ScaleModel.getDateValueDomain(dataModelRep.getScopedFullSource(), options.chart, options.axis.key.position, options.data.dataSource),
                     range: {
                         start: 0,
                         end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
@@ -43,8 +43,8 @@ export class IntervalModel {
                     cssClass: 'key-axis',
                     ticks: options.axis.key.ticks,
                     labels: {
-                        maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, data[options.data.dataSource].map(d => d[options.data.keyField.name])).width,
-                        position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name).length),
+                        maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataModelRep.getScopedRows().map(d => d[options.data.keyField.name])).width,
+                        position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(dataModelRep.getScopedFullSource(), options.data.dataSource, options.data.keyField.name).length),
                         visible: true,
                         defaultTooltip: designerConfig.elementsOptions.tooltip.position === 'fixed'
                     },

package/lib/model/notations/polar/donut/donutThicknessService.d.ts

@@ -4,6 +4,4 @@ export declare class DonutThicknessService {
     private defaultUnit;
     getUnit(settingsFromConfig: MdtChartsDonutThicknessOptions): DonutThicknessUnit;
     valueToNumber(value: string | number): number;
-    private getUnitByValue;
-    private getLastUnitFromString;
 }

package/lib/model/notations/polar/donut/donutThicknessService.js

@@ -1,12 +1,13 @@
+import { getPxPercentUnitByValue } from "../../../helpers/unitsFromConfigReader";
 export class DonutThicknessService {
     constructor() {
         this.defaultUnit = "px";
     }
     getUnit(settingsFromConfig) {
         if (settingsFromConfig.value)
-            return this.getUnitByValue(settingsFromConfig.value);
-        const minUnit = this.getUnitByValue(settingsFromConfig.min);
-        const maxUnit = this.getUnitByValue(settingsFromConfig.max);
+            return getPxPercentUnitByValue(settingsFromConfig.value);
+        const minUnit = getPxPercentUnitByValue(settingsFromConfig.min);
+        const maxUnit = getPxPercentUnitByValue(settingsFromConfig.max);
         return minUnit === maxUnit ? minUnit : this.defaultUnit;
     }
     valueToNumber(value) {
@@ -14,17 +15,4 @@ export class DonutThicknessService {
             return value;
         return parseInt(value);
     }
-    getUnitByValue(value) {
-        if (typeof value !== "string")
-            return this.defaultUnit;
-        return this.getLastUnitFromString(value);
-    }
-    getLastUnitFromString(value) {
-        let resultUnit = this.defaultUnit;
-        ["%", "px"].forEach(unit => {
-            if (value.endsWith(unit))
-                resultUnit = unit;
-        });
-        return resultUnit;
-    }
 }

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -1,9 +1,9 @@
-import { ChartOrientation, MdtChartsDataSource, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { ChartOrientation, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
 import { BarOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
 import { TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class TwoDimensionalModel {
-    static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig, data: MdtChartsDataSource, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
+    static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
     static getChartsEmbeddedLabelsFlag(charts: MdtChartsTwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
     /**
      * Сортирует список чартов в порядке: area - bar - line.

package/lib/model/notations/twoDimensionalModel.js

@@ -4,9 +4,10 @@ import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 export class TwoDimensionalModel {
-    static getOptions(options, designerConfig, data, modelInstance) {
+    static getOptions(options, designerConfig, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => ScaleModel.getScaleLinear(options, data, canvasModel));
+        const dataModelRep = modelInstance.dataModel.repository;
+        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => ScaleModel.getScaleLinear(options, dataModelRep.getScopedRows(), canvasModel));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
         return {
@@ -19,7 +20,7 @@ export class TwoDimensionalModel {
                 value: scaleValueInfo.scale
             },
             axis: {
-                key: AxisModel.getKeyAxis(options, data, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)),
+                key: AxisModel.getKeyAxis(options, dataModelRep.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)),
                 value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
             },
             type: options.type,

package/lib/style/charts-main.css

@@ -80,6 +80,8 @@
 }
 .legend-item-row > span {
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .legend-label {
@@ -201,7 +203,6 @@
     line-height: 1;
 }
 .aggregator-value {
-    margin-top: 0.5em;
     pointer-events: auto;
 }
 .aggregator-name {
@@ -221,7 +222,7 @@
 /* Record overflow */
 .record-overflow-alert {
     background-color: #FFFFFF;;
-    padding: 5px 10px 5px;
+    padding: 2px 8px;
     border: 1px solid #0F6698;
     box-sizing: border-box;
     border-radius: 100px;

package/lib/style/charts-main.less

@@ -80,6 +80,8 @@
 }
 .legend-item-row > span {
     display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .legend-label {
@@ -201,7 +203,6 @@
     line-height: 1;
 }
 .aggregator-value {
-    margin-top: 0.5em;
     pointer-events: auto;
 }
 .aggregator-name {
@@ -221,7 +222,7 @@
 /* Record overflow */
 .record-overflow-alert {
     background-color: #FFFFFF;;
-    padding: 5px 10px 5px;
+    padding: 2px 8px;
     border: 1px solid #0F6698;
     box-sizing: border-box;
     border-radius: 100px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.12.8",
+  "version": "1.12.12",
   "description": "",
   "main": "lib/main.js",
   "scripts": {