mdt-charts 1.11.0 → 1.12.2

package/lib/model/marginModel.js

@@ -1,8 +1,9 @@
 import { AxisModel } from "./featuresModel/axisModel";
-import { DataManagerModel } from "./dataManagerModel";
-import { LegendModel, MIN_DONUT_BLOCK_SIZE } from "./featuresModel/legendModel/legendModel";
+import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
+import { LegendModel } from "./featuresModel/legendModel/legendModel";
 import { AxisType } from "./modelBuilder";
 import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
+import { PolarModel } from "./notations/polarModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {
@@ -25,10 +26,9 @@ export class MarginModel {
     }
     static recalcPolarMarginWithScopedData(modelInstance, designerConfig, config, legendBlockModel, dataScope, options) {
         const canvasModel = modelInstance.canvasModel;
-        let position = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
+        let position = canvasModel.legendCanvas.getPosition();
         if (position !== 'off') {
-            if (position === 'right' && canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE)
-                position = 'bottom';
+            position = PolarModel.getLegendPositionByBlockSize(canvasModel); // reset position
             this.clearMarginByLegendBlockPosition(canvasModel, legendBlockModel);
             let allowableKeys = [...dataScope.allowableKeys];
             if (dataScope.hidedRecordsAmount !== 0 && position === 'bottom')
@@ -42,7 +42,7 @@ export class MarginModel {
     static recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, dataScope) {
         if ((config.options.type === '2d' || config.options.type === 'interval') && config.options.orientation === 'vertical') {
             const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataScope.allowableKeys);
-            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length);
+            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length, config.options.axis.key);
             const marginOrient = config.options.axis.key.position === 'end' ? 'bottom' : 'top';
             if (axisConfig === 'rotated')
                 modelInstance.canvasModel.setMarginSide(marginOrient, modelInstance.canvasModel.getMarginSide(marginOrient) + (axisLabelSize.width - axisLabelSize.height));
@@ -80,8 +80,12 @@ export class MarginModel {
         }
     }
     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);
@@ -123,6 +127,6 @@ export class MarginModel {
         });
     }
     static recalcMarginByTitle(canvasModel, titleBlockModel) {
-        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size);
+        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
     }
 }

package/lib/model/model.d.ts

@@ -1,10 +1,9 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
 export declare type ScaleKeyType = "band" | "point";
 export declare type ScaleValueType = "linear" | "datetime";
-export declare type AxisLabelPosition = "straight" | "rotated";
 export declare type LegendPosition = "off" | "top" | "bottom" | "left" | "right";
 export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
 export declare type DataOptions = {

package/lib/model/modelBuilder.js

@@ -1,7 +1,7 @@
 import { MarginModel } from './marginModel';
 import { TwoDimensionalModel } from './notations/twoDimensionalModel';
 import { PolarModel } from './notations/polarModel';
-import { DataManagerModel } from './dataManagerModel';
+import { DataManagerModel } from './dataManagerModel/dataManagerModel';
 import { IntervalModel } from './notations/intervalModel';
 import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
@@ -69,17 +69,17 @@ export function assembleModel(config, data, designerConfig) {
     resetFalsyValues(data, config.options.data.keyField.name);
     const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, notation: config.options.type, title: config.options.title }, modelInstance);
     MarginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
-    const dataScope = DataManagerModel.getDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
-    const preparedData = DataManagerModel.getPreparedData(data, dataScope.allowableKeys, config);
+    DataManagerModel.initDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
+    const preparedData = DataManagerModel.getPreparedData(data, modelInstance.dataModel.getAllowableKeys(), config);
     if (config.options.type === '2d' && config.options.axis.key.visibility)
-        MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, dataScope);
+        MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, modelInstance.dataModel.getScope());
     const blockCanvas = getBlockCanvas(config, modelInstance);
     const chartBlock = getChartBlockModel(modelInstance);
-    const options = getOptions(config, designerConfig, modelInstance, dataScope, preparedData);
-    const dataSettings = getDataSettings(dataScope, designerConfig);
+    const options = getOptions(config, designerConfig, modelInstance, modelInstance.dataModel.getScope(), preparedData);
+    const dataSettings = getDataSettings(modelInstance.dataModel.getScope(), designerConfig);
     const transitions = getTransitions(designerConfig);
-    if (options.type === 'polar')
-        MarginModel.recalcPolarMarginWithScopedData(modelInstance, designerConfig, config, otherComponents.legendBlock, dataScope, options);
+    // if (options.type === 'polar')
+    //     MarginModel.recalcPolarMarginWithScopedData(modelInstance, designerConfig, config, otherComponents.legendBlock, modelInstance.dataModel.getScope(), options);
     modelInstance.canvasModel.roundMargin();
     return {
         blockCanvas,

package/lib/model/modelInstance/canvasModel/canvasModel.d.ts

@@ -1,9 +1,11 @@
 import { Size } from "../../../config/config";
 import { BlockMargin } from "../../model";
+import { LegendCanvasModelInstance } from "./legendCanvasModel";
 import { TitleCanvasModel } from "./titleCanvas";
 declare type MarginSide = keyof BlockMargin;
 export declare class CanvasModel {
     titleCanvas: TitleCanvasModel;
+    legendCanvas: LegendCanvasModelInstance;
     private blockSize;
     private margin;
     constructor();

package/lib/model/modelInstance/canvasModel/canvasModel.js

@@ -1,7 +1,9 @@
+import { LegendCanvasModelInstance } from "./legendCanvasModel";
 import { TitleCanvasModel } from "./titleCanvas";
 export class CanvasModel {
     constructor() {
         this.titleCanvas = new TitleCanvasModel();
+        this.legendCanvas = new LegendCanvasModelInstance();
     }
     initMargin(margin) {
         this.margin = margin;

package/lib/model/modelInstance/canvasModel/legendCanvasModel.d.ts

@@ -0,0 +1,7 @@
+import { ILegendModel, LegendPosition } from "../../model";
+export declare class LegendCanvasModelInstance {
+    private position;
+    getModel(): ILegendModel;
+    getPosition(): LegendPosition;
+    setPosition(position: LegendPosition): void;
+}

package/lib/model/modelInstance/canvasModel/legendCanvasModel.js

@@ -0,0 +1,13 @@
+export class LegendCanvasModelInstance {
+    getModel() {
+        return {
+            position: this.position
+        };
+    }
+    getPosition() {
+        return this.position;
+    }
+    setPosition(position) {
+        this.position = position;
+    }
+}

package/lib/model/modelInstance/dataModel.d.ts

@@ -0,0 +1,11 @@
+import { DataScope } from "../model";
+export declare const DEFAULT_MAX_RECORDS_AMOUNT = 50;
+export declare class DataModelInstance {
+    private maxRecordsAmount;
+    private scope;
+    initMaxRecordsAmount(amount: number): void;
+    getMaxRecordsAmount(): number;
+    initScope(scope: DataScope): void;
+    getScope(): DataScope;
+    getAllowableKeys(): string[];
+}

package/lib/model/modelInstance/dataModel.js

@@ -0,0 +1,23 @@
+export const DEFAULT_MAX_RECORDS_AMOUNT = 50;
+export class DataModelInstance {
+    constructor() {
+        this.maxRecordsAmount = DEFAULT_MAX_RECORDS_AMOUNT;
+    }
+    initMaxRecordsAmount(amount) {
+        if (typeof amount === "number" && amount > 0) {
+            this.maxRecordsAmount = amount;
+        }
+    }
+    getMaxRecordsAmount() {
+        return this.maxRecordsAmount;
+    }
+    initScope(scope) {
+        this.scope = scope;
+    }
+    getScope() {
+        return this.scope;
+    }
+    getAllowableKeys() {
+        return this.getScope().allowableKeys;
+    }
+}

package/lib/model/modelInstance/modelInstance.d.ts

@@ -1,7 +1,10 @@
 import { MdtChartsConfig } from "../../main";
 import { CanvasModel } from "./canvasModel/canvasModel";
+import { DataModelInstance } from "./dataModel";
 export declare class ModelInstance {
     static create(config: MdtChartsConfig): ModelInstance;
+    private static initInitialParams;
     canvasModel: CanvasModel;
+    dataModel: DataModelInstance;
     constructor();
 }

package/lib/model/modelInstance/modelInstance.js

@@ -1,11 +1,17 @@
 import { CanvasModel } from "./canvasModel/canvasModel";
+import { DataModelInstance } from "./dataModel";
 export class ModelInstance {
     constructor() {
         this.canvasModel = new CanvasModel();
+        this.dataModel = new DataModelInstance();
     }
     static create(config) {
         const modelInstance = new ModelInstance();
-        modelInstance.canvasModel.initBlockSize(config.canvas.size);
+        this.initInitialParams(modelInstance, config);
         return modelInstance;
     }
+    static initInitialParams(modelInstance, config) {
+        modelInstance.canvasModel.initBlockSize(config.canvas.size);
+        modelInstance.dataModel.initMaxRecordsAmount(config.options.data.maxRecordsAmount);
+    }
 }

package/lib/model/notations/intervalModel.js

@@ -1,7 +1,6 @@
 import { AxisModel } from "../featuresModel/axisModel";
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
-import { DataManagerModel } from "../dataManagerModel";
-import { LegendModel } from "../featuresModel/legendModel/legendModel";
+import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { AxisType } from "../modelBuilder";
 import { ScaleModel, ScaleType } from "../featuresModel/scaleModel";
 import { TwoDimensionalModel } from "./twoDimensionalModel";
@@ -10,7 +9,7 @@ export class IntervalModel {
         const options = config.options;
         const canvasModel = modelInstance.canvasModel;
         return {
-            legend: LegendModel.getLegendModel(config.options.type, config.options.legend.show, canvasModel),
+            legend: canvasModel.legendCanvas.getModel(),
             title: options.title,
             selectable: !!options.selectable,
             orient: options.orientation,

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

@@ -1,9 +1,15 @@
-import { MdtChartsDataSource, PolarOptions } from "../../config/config";
+import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
-import { PolarOptionsModel } from "../model";
+import { PolarOptionsModel, LegendCoordinate } from "../model";
+import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
 import { ModelInstance } from "../modelInstance/modelInstance";
+/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
+export declare const MIN_DONUT_BLOCK_SIZE = 120;
 export declare class PolarModel {
-    static getOptions(options: PolarOptions, data: MdtChartsDataSource, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
+    static getOptions(options: MdtChartsPolarOptions, data: MdtChartsDataSource, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
+    static getLegendPositionByBlockSize(canvasModel: CanvasModel): "bottom" | "right";
+    static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth: number, legendWidth: number, legendCoordinate: LegendCoordinate): boolean;
+    static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight: number, legendCoordinate: LegendCoordinate): boolean;
     private static getDonutSettings;
     private static getChartsModel;
 }

package/lib/model/notations/polarModel.js

@@ -1,5 +1,6 @@
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
-import { LegendModel } from "../featuresModel/legendModel/legendModel";
+/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
+export const MIN_DONUT_BLOCK_SIZE = 120;
 export class PolarModel {
     static getOptions(options, data, designerConfig, modelInstance) {
         return {
@@ -8,11 +9,32 @@ export class PolarModel {
             title: options.title,
             data: Object.assign({}, options.data),
             charts: this.getChartsModel(options.chart, data[options.data.dataSource].length, designerConfig.chartStyle),
-            legend: LegendModel.getLegendModel(options.type, options.legend.show, modelInstance.canvasModel),
+            legend: modelInstance.canvasModel.legendCanvas.getModel(),
             tooltip: options.tooltip,
             chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart)
         };
     }
+    //TODO: type for returned value
+    static getLegendPositionByBlockSize(canvasModel) {
+        const widthCoefficientWhenLegendShouldInBottom = 1.5;
+        const avgLegendWidth = 100;
+        const blockWidth = canvasModel.getBlockSize().width;
+        const blockHeight = canvasModel.getBlockSize().height;
+        return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE + avgLegendWidth
+            && blockWidth * widthCoefficientWhenLegendShouldInBottom < blockHeight
+            ? 'bottom'
+            : 'right';
+    }
+    static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth, legendWidth, legendCoordinate) {
+        const rightLegendMargin = legendCoordinate.right.margin;
+        return chartBlockWidth - legendWidth - rightLegendMargin.left - rightLegendMargin.right >= MIN_DONUT_BLOCK_SIZE;
+    }
+    static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight, legendCoordinate) {
+        const minHeightForLegend = 30;
+        const bottomLegendMargin = legendCoordinate.bottom.margin;
+        const heightForLegend = chartBlockHeight - bottomLegendMargin.bottom - bottomLegendMargin.top - MIN_DONUT_BLOCK_SIZE;
+        return heightForLegend >= minHeightForLegend;
+    }
     static getDonutSettings(settings, chartOptions) {
         return {
             padAngle: settings.padAngle,

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

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

package/lib/model/notations/twoDimensionalModel.js

@@ -1,13 +1,12 @@
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensionalChartStyleModel";
 import { AxisModel } from "../featuresModel/axisModel";
-import { LegendModel } from "../featuresModel/legendModel/legendModel";
 import { ScaleModel } from "../featuresModel/scaleModel";
 export class TwoDimensionalModel {
     static getOptions(options, designerConfig, dataScope, data, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
         return {
-            legend: LegendModel.getLegendModel(options.type, options.legend.show, canvasModel),
+            legend: canvasModel.legendCanvas.getModel(),
             title: options.title,
             selectable: !!options.selectable,
             orient: options.orientation,
@@ -16,7 +15,7 @@ export class TwoDimensionalModel {
                 value: ScaleModel.getScaleLinear(options, data, canvasModel)
             },
             axis: {
-                key: AxisModel.getKeyAxis(options.charts, data, options.data, options.orientation, options.axis.key, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip),
+                key: AxisModel.getKeyAxis(options, data, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip),
                 value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
             },
             type: options.type,

package/lib/style/charts-main.css

@@ -41,28 +41,45 @@
 
 
 /*========================================================================== Legend */
+.legend-block {
+    display: flex;
+    height: 100%;
+}
+.legend-block-column {
+    flex-direction: column;
+}
+.legend-block-row {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.legend-block-centered {
+    justify-content: center;
+}
 .legend-item {
     cursor: default;
     transition: opacity 0.1s;
+    /* will-change: opacity;      */
+}
+.legend-block-column .legend-item:not(:first-of-type) {
+    margin-top: 15px;
 }
 .legend-item-inline {
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-.legend-item-inline:not(:first-of-type) {
+.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
     margin-left: 20px;
 }
+.legend-wrapper-with-wrap .legend-item-inline {
+    margin: 5px;
+}
 .legend-item-row {
     display: flex;
 }
 .legend-item-row > span {
     display: block;
 }
-.mt-15 {
-    margin-top: 15px;
-}
-.mt-10 {
-    margin-top: 10px;
-}
 
 .legend-label {
     font-size: 12px;

package/lib/style/charts-main.less

@@ -41,28 +41,45 @@
 
 
 /*========================================================================== Legend */
+.legend-block {
+    display: flex;
+    height: 100%;
+}
+.legend-block-column {
+    flex-direction: column;
+}
+.legend-block-row {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.legend-block-centered {
+    justify-content: center;
+}
 .legend-item {
     cursor: default;
     transition: opacity 0.1s;
+    /* will-change: opacity;      */
+}
+.legend-block-column .legend-item:not(:first-of-type) {
+    margin-top: 15px;
 }
 .legend-item-inline {
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-.legend-item-inline:not(:first-of-type) {
+.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
     margin-left: 20px;
 }
+.legend-wrapper-with-wrap .legend-item-inline {
+    margin: 5px;
+}
 .legend-item-row {
     display: flex;
 }
 .legend-item-row > span {
     display: block;
 }
-.mt-15 {
-    margin-top: 15px;
-}
-.mt-10 {
-    margin-top: 10px;
-}
 
 .legend-label {
     font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.11.0",
+  "version": "1.12.2",
   "description": "",
   "main": "lib/main.js",
   "scripts": {
@@ -8,7 +8,7 @@
     "build": "npx webpack --mode production",
     "watch": "npx webpack --mode development --watch",
     "test": "jest",
-    "build-lib": "npx tsc -p ."
+    "build-lib": "npx tsc -p tsconfig.production.json"
   },
   "homepage": "https://github.com/VishulaKnow/charts",
   "author": "",

package/tsconfig.production.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "outDir": "./lib/",
+        "noImplicitAny": true,
+        "target": "es6",
+        "lib": ["ES2017", "DOM"],
+        "jsx": "react",
+        "allowJs": true,
+        "types": [
+            "jest"
+        ],
+        "declaration": true
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/__tests__/*",
+        "src/playground/*",
+        "**/*Example.ts"
+    ]
+}

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

@@ -1,14 +0,0 @@
-import { ChartOrientation } from "../../../config/config";
-import { Block } from "../../block/block";
-declare type AlertBlockPosition = 'top' | 'bottom' | 'right' | 'left';
-export declare class RecordOverflowAlert {
-    private static readonly blockClass;
-    static render(block: Block, hidedRecordsAmount: number, position: AlertBlockPosition, chartOrientation?: ChartOrientation): void;
-    static update(block: Block, hidedRecordsAmount: number, position: AlertBlockPosition, chartOrientation?: ChartOrientation): void;
-    private static setAlertPosition;
-    private static getAlertText;
-    private static getWordTextEndingByAmount;
-    private static getBlockPositionAttrs;
-    private static getLeftAttrForRightBlock;
-}
-export {};

package/lib/engine/features/recordOverflowAlert/recordOverflowAlert.js

@@ -1,97 +0,0 @@
-import { DomHelper } from '../../helpers/domHelper';
-import { Legend } from '../legend/legend';
-export class RecordOverflowAlert {
-    static render(block, hidedRecordsAmount, position, chartOrientation = null) {
-        const alertBlock = block.getWrapper()
-            .append('div')
-            .attr('class', this.blockClass)
-            .text(this.getAlertText(hidedRecordsAmount, chartOrientation));
-        const attrs = this.getBlockPositionAttrs(position, block);
-        this.setAlertPosition(alertBlock, attrs);
-    }
-    static update(block, hidedRecordsAmount, position, chartOrientation = null) {
-        let alertBlock = block.getWrapper()
-            .select(`div.${this.blockClass}`);
-        if (alertBlock.empty()) {
-            if (hidedRecordsAmount === 0)
-                return;
-            else
-                this.render(block, hidedRecordsAmount, position, chartOrientation);
-        }
-        else {
-            if (hidedRecordsAmount === 0)
-                alertBlock.remove();
-            else
-                alertBlock.text(this.getAlertText(hidedRecordsAmount, chartOrientation));
-        }
-    }
-    static setAlertPosition(alertBlock, attrs) {
-        alertBlock
-            .style('position', 'absolute')
-            .style('left', attrs.left)
-            .style('right', attrs.right)
-            .style('top', attrs.top)
-            .style('bottom', attrs.bottom);
-    }
-    static getAlertText(hidedRecordsAmount, chartOrientation) {
-        return `+ ${hidedRecordsAmount} ${this.getWordTextEndingByAmount(hidedRecordsAmount, chartOrientation)}`;
-    }
-    static getWordTextEndingByAmount(hidedRecordsAmount, chartOrientation) {
-        const lastDigit = hidedRecordsAmount % 10;
-        if (chartOrientation === 'vertical') {
-            if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
-                return 'столбцов';
-            if (lastDigit === 1)
-                return 'столбец';
-            if (lastDigit >= 2 && lastDigit <= 4)
-                return 'столбца';
-            return 'столбцов';
-        }
-        else if (chartOrientation === 'horizontal') {
-            if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
-                return 'строк';
-            if (lastDigit === 1)
-                return 'строка';
-            if (lastDigit >= 2 && lastDigit <= 4)
-                return 'строки';
-            return 'строк';
-        }
-        else {
-            if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
-                return 'категорий';
-            if (lastDigit === 1)
-                return 'категория';
-            if (lastDigit >= 2 && lastDigit <= 4)
-                return 'категории';
-            return 'категорий';
-        }
-    }
-    static getBlockPositionAttrs(position, block) {
-        const attrs = {
-            bottom: null,
-            top: null,
-            right: null,
-            left: null
-        };
-        if (position === 'top') {
-            attrs.right = '17px';
-            attrs.top = '1rem';
-        }
-        if (position === 'right') {
-            attrs.bottom = '20px';
-            attrs.left = this.getLeftAttrForRightBlock(block) + 'px';
-        }
-        if (position === 'bottom') {
-            attrs.left = '20px';
-            attrs.bottom = '20px';
-        }
-        return attrs;
-    }
-    static getLeftAttrForRightBlock(block) {
-        const legendBlock = block.getSvg().select(`.${Legend.objectClass}`);
-        if (legendBlock.empty())
-            return null;
-        return DomHelper.getSelectionNumericAttr(legendBlock, 'x');
-    }
-}
-RecordOverflowAlert.blockClass = 'record-overflow-alert';