mdt-charts 1.9.11 → 1.10.3

package/lib/engine/valueFormatter.d.ts

@@ -0,0 +1,6 @@
+import { Formatter } from '../designer/designerConfig';
+export declare class ValueFormatter {
+    private static format;
+    static formatField(fieldFormat: string, value: any): string;
+    static setFormatFunction(formatFunction: Formatter): void;
+}

package/lib/engine/valueFormatter.js

@@ -0,0 +1,8 @@
+export class ValueFormatter {
+    static formatField(fieldFormat, value) {
+        return this.format(value, { type: fieldFormat });
+    }
+    static setFormatFunction(formatFunction) {
+        this.format = formatFunction;
+    }
+}

package/lib/main.d.ts

@@ -0,0 +1,79 @@
+import { MdtChartsConfig, MdtChartsDataSource, NewSize, Size } from "./config/config";
+import { DesignerConfig } from "./designer/designerConfig";
+import { FilterCallback } from "./engine/filterManager/filterEventManager";
+export interface IChart {
+    /**
+     * Рендер графика
+     * @param parentElement родительский элемент для графика
+     */
+    render(parentElement: HTMLElement): void;
+    /**
+     * Удаление графика со страницы
+     */
+    destroy(): void;
+    /**
+     * Обновление графика для новых данных
+     * @param data Новые данные
+     */
+    updateData(data: MdtChartsDataSource): void;
+    /**
+     * Изменение размера блока с графиком
+     * @param newSize Новый размер
+     */
+    updateSize(newSize: Size): void;
+    /**
+     * Обновление цветов графиков на основе новых базовых цветов
+     * @param newColors Новые базовые цвета
+     */
+    updateColors(newColors: string[]): void;
+}
+export declare class Chart implements IChart {
+    static chartCounter: number;
+    private config;
+    private designerConfig;
+    private model;
+    private data;
+    private parentElement;
+    private isResizable;
+    private engine;
+    private resizeHandler;
+    /**
+     * @param config Объект конфигуратора
+     * @param designerConfig Объект конфигуратора дизайнера
+     * @param data Данные
+     * @param isResizable Флаг подстройки размера блока графика под родительский элемент
+     * @param filterCallback Функция коллбэк, вызываемая во время клика на элемент графика. Предназначена для обеспечения кросс-фильтрации
+     * @param selectedIds Id выделенных записей
+     */
+    constructor(config: MdtChartsConfig, designerConfig: DesignerConfig, data: MdtChartsDataSource, isResizable?: boolean, filterCallback?: FilterCallback, selectedIds?: number[]);
+    /**
+     * Рендер графика
+     * @param parentElement родительский элемент для графика
+     */
+    render(parentElement: HTMLElement): void;
+    /**
+     * Удаление графика со страницы
+     */
+    destroy(): void;
+    /**
+     * Обновление графика для новых данных
+     * @param data Новые данные
+     */
+    updateData(data: MdtChartsDataSource): void;
+    /**
+     * Изменение размера блока с графиком
+     * @param newSize Новый размер
+     */
+    updateSize(newSize: Partial<NewSize>): void;
+    /**
+     * Обновление цветов графиков на основе новых базовых цветов
+     * @param newColors Новые базовые цвета
+     */
+    updateColors(newColors: string[]): void;
+    private registerResizeEvent;
+    private removeResizeEvent;
+    private resizeListener;
+}
+export * from "./config/config";
+export * from "./designer/designerConfig";
+export { FilterCallback } from "./engine/filterManager/filterEventManager";

package/lib/main.js

@@ -0,0 +1,88 @@
+import Engine from "./engine/engine";
+import { assembleModel, getPreparedData } from "./model/modelBuilder";
+import { PublicOptionsService } from "./optionsServices/publicOptionsService";
+export class Chart {
+    /**
+     * @param config Объект конфигуратора
+     * @param designerConfig Объект конфигуратора дизайнера
+     * @param data Данные
+     * @param isResizable Флаг подстройки размера блока графика под родительский элемент
+     * @param filterCallback Функция коллбэк, вызываемая во время клика на элемент графика. Предназначена для обеспечения кросс-фильтрации
+     * @param selectedIds Id выделенных записей
+     */
+    constructor(config, designerConfig, data, isResizable = false, filterCallback = null, selectedIds = []) {
+        this.resizeHandler = this.resizeListener.bind(this);
+        Chart.chartCounter++;
+        this.config = config;
+        this.designerConfig = designerConfig;
+        this.data = data;
+        this.isResizable = isResizable;
+        this.model = assembleModel(this.config, this.data, this.designerConfig);
+        this.engine = new Engine(Chart.chartCounter, filterCallback, selectedIds);
+    }
+    /**
+     * Рендер графика
+     * @param parentElement родительский элемент для графика
+     */
+    render(parentElement) {
+        this.parentElement = parentElement;
+        this.engine.render(this.model, getPreparedData(this.model, this.data, this.config), this.parentElement);
+        if (this.isResizable)
+            this.registerResizeEvent();
+    }
+    /**
+     * Удаление графика со страницы
+     */
+    destroy() {
+        this.engine.destroy();
+        if (this.isResizable)
+            this.removeResizeEvent();
+    }
+    /**
+     * Обновление графика для новых данных
+     * @param data Новые данные
+     */
+    updateData(data) {
+        this.model = assembleModel(this.config, data, this.designerConfig);
+        this.data = data;
+        this.engine.updateData(this.model, getPreparedData(this.model, this.data, this.config));
+    }
+    /**
+     * Изменение размера блока с графиком
+     * @param newSize Новый размер
+     */
+    updateSize(newSize) {
+        if (!PublicOptionsService.validateSize(newSize))
+            return;
+        if (newSize.height)
+            this.config.canvas.size.height = newSize.height;
+        if (newSize.width)
+            this.config.canvas.size.width = newSize.width;
+        this.model = assembleModel(this.config, this.data, this.designerConfig);
+        this.engine.updateFullBlock(this.model, getPreparedData(this.model, this.data, this.config));
+    }
+    /**
+     * Обновление цветов графиков на основе новых базовых цветов
+     * @param newColors Новые базовые цвета
+     */
+    updateColors(newColors) {
+        this.designerConfig.chartStyle.baseColors = [...newColors];
+        this.model = assembleModel(this.config, this.data, this.designerConfig);
+        this.engine.updateColors(this.model);
+    }
+    registerResizeEvent() {
+        window.addEventListener('resize', this.resizeHandler);
+    }
+    removeResizeEvent() {
+        window.removeEventListener('resize', this.resizeHandler);
+    }
+    resizeListener() {
+        this.updateSize({
+            height: null,
+            width: this.parentElement.offsetWidth
+        });
+    }
+}
+Chart.chartCounter = 0;
+export * from "./config/config";
+export * from "./designer/designerConfig";

package/lib/model/chartStyleModel.d.ts

@@ -0,0 +1,16 @@
+import { TwoDimensionalChartType } from "../config/config";
+import { ChartStyleConfig } from "../designer/designerConfig";
+import { ChartStyle } from "./model";
+export declare class ChartStyleModel {
+    private static safeColorsAmount;
+    private static standartColors;
+    static getCssClasses(chartIndex: number): string[];
+    static get2DChartStyle(chartsAmount: number, chartType: TwoDimensionalChartType, chartsFieldsAmounts: number[], chartIndex: number, isSegmented: boolean, styleConfig: ChartStyleConfig): ChartStyle;
+    static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
+    private static getChartColors;
+    private static getChartOpacity;
+    private static getColorSet;
+    private static checkAndGet;
+    private static getStartIndex;
+    private static resetColor;
+}

package/lib/model/chartStyleModel.js

@@ -0,0 +1,67 @@
+import * as chroma from "chroma-js";
+import { ModelHelper } from "./modelHelper";
+export class ChartStyleModel {
+    static getCssClasses(chartIndex) {
+        const cssClasses = [`chart-${chartIndex}`];
+        return cssClasses;
+    }
+    static get2DChartStyle(chartsAmount, chartType, chartsFieldsAmounts, chartIndex, isSegmented, styleConfig) {
+        const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
+        const baseColors = this.checkAndGet(styleConfig.baseColors);
+        const palette = this.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
+        return {
+            elementColors: this.getChartColors(palette, chartsFieldsAmounts[chartIndex], startIndex, chartType),
+            opacity: this.getChartOpacity(chartsAmount, chartType, chartsFieldsAmounts[chartIndex], isSegmented)
+        };
+    }
+    static getChartStyle(elementsAmount, styleConfig) {
+        const baseColors = this.checkAndGet(styleConfig.baseColors);
+        return {
+            elementColors: this.getColorSet(baseColors, elementsAmount),
+            opacity: 1
+        };
+    }
+    static getChartColors(palette, elementsAmount, startIndex, chartType) {
+        const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
+        if (chartType !== 'line')
+            return selectedColors;
+        for (let i = 0; i < selectedColors.length; i++) {
+            selectedColors[i] = chroma.mix(selectedColors[i], 'white', 0.2).saturate(3).hex();
+        }
+        return selectedColors;
+    }
+    static getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isSegmented) {
+        if (chartType === 'area' && (chartsLength > 1 || chartsValueFieldAmount > 1) && !isSegmented)
+            return 0.5; // combined area with other charts has 0.5 opacity
+        return 1;
+    }
+    static getColorSet(baseColors, elementsAmount) {
+        return chroma.scale(baseColors)
+            .mode('rgb')
+            .domain([0, 0.55, 0.75, 1])
+            .colors(elementsAmount <= 1 ? 2 : elementsAmount);
+    }
+    static checkAndGet(baseColors) {
+        if (baseColors.length === 0 || baseColors.filter(color => color === 'rgba(0, 0, 0, 0)' || !color).length > 0) {
+            return this.standartColors;
+        }
+        return baseColors;
+    }
+    static getStartIndex(chartIndex, chartsFieldsAmounts) {
+        let startIndex = 0;
+        for (let i = 0; i < chartIndex; i++) {
+            startIndex += chartsFieldsAmounts[i];
+        }
+        return startIndex;
+    }
+    static resetColor(index, baseColor) {
+        let color = chroma(baseColor)
+            .luminance(0.5)
+            .saturate(1.5 + Math.floor(index / this.safeColorsAmount) * 0.5);
+        color = chroma(color)
+            .set('hsv.h', chroma(color).get('hsv.h') + Math.floor(index / this.safeColorsAmount) * 4);
+        return color.hex();
+    }
+}
+ChartStyleModel.safeColorsAmount = 8;
+ChartStyleModel.standartColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];

package/lib/model/configsValidator/configValidator.d.ts

@@ -0,0 +1,5 @@
+import { Size } from "../../config/config";
+export declare class ConfigValidatorClass {
+    validateCanvasSize(size: Size): boolean;
+}
+export declare const ConfigValidator: ConfigValidatorClass;

package/lib/model/configsValidator/configValidator.js

@@ -0,0 +1,7 @@
+export class ConfigValidatorClass {
+    validateCanvasSize(size) {
+        const validateSide = (side) => typeof side === "number" && side >= 0;
+        return validateSide(size.width) && validateSide(size.height);
+    }
+}
+export const ConfigValidator = new ConfigValidatorClass();

package/lib/model/dataManagerModel.d.ts

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

package/lib/model/dataManagerModel.js

@@ -0,0 +1,137 @@
+import { AxisModel } from "./featuresModel/axisModel";
+import { LegendCanvasModel } from "./featuresModel/legendModel/legendCanvasModel";
+import { MIN_DONUT_BLOCK_SIZE } from "./featuresModel/legendModel/legendModel";
+import { ModelHelper } from "./modelHelper";
+export class DataManagerModel {
+    static getPreparedData(data, allowableKeys, config) {
+        const scopedData = this.getScopedData(data, allowableKeys, config);
+        this.setDataType(scopedData, config);
+        return scopedData;
+    }
+    static getDataScope(config, margin, data, designerConfig, legendBlock) {
+        if (config.options.type === '2d' || config.options.type === 'interval') {
+            return this.getDataScopeFor2D(config.options, config.canvas.size, margin, data, designerConfig);
+        }
+        else if (config.options.type === 'polar') {
+            return this.getDataScopeForPolar(config.options, config.canvas.size, margin, data, legendBlock, designerConfig.canvas.legendBlock);
+        }
+    }
+    static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
+        return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
+    }
+    static getDataScopeFor2D(configOptions, blockSize, margin, data, designerConfig) {
+        // Для interval всегда один элемент, так как там может быть только один столбик
+        let itemsLength = 1;
+        if (configOptions.type === '2d') {
+            itemsLength = (configOptions.charts)
+                .filter((chart) => chart.type === 'bar').length;
+            if (itemsLength === 0)
+                itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
+        }
+        if (itemsLength !== 0) {
+            const axisLength = AxisModel.getAxisLength(configOptions.orientation, margin, blockSize);
+            const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
+            const dataLength = uniqueKeys.length;
+            const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions, itemsLength), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
+            const allowableKeys = uniqueKeys.slice(0, limit);
+            return {
+                allowableKeys,
+                hidedRecordsAmount: dataLength - allowableKeys.length
+            };
+        }
+        return {
+            allowableKeys: this.getDataValuesByKeyField(data, configOptions.data.dataSource, configOptions.data.keyField.name),
+            hidedRecordsAmount: 0
+        };
+    }
+    static getDataScopeForPolar(configOptions, blockSize, margin, data, legendBlock, legendCanvas) {
+        const dataset = data[configOptions.data.dataSource];
+        const keyFieldName = configOptions.data.keyField.name;
+        const keys = dataset.map(dataRow => dataRow[keyFieldName]);
+        if (!configOptions.legend.show) {
+            return {
+                allowableKeys: keys,
+                hidedRecordsAmount: 0
+            };
+        }
+        let position;
+        if (blockSize.width - margin.left - margin.right >= MIN_DONUT_BLOCK_SIZE)
+            position = 'right';
+        else
+            position = 'bottom';
+        let maxItemsNumber;
+        if (position === 'right') {
+            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, blockSize.height - margin.top - margin.bottom);
+        }
+        else {
+            let marginBottom = margin.bottom - (legendBlock.coordinate.bottom.size === 0 ? legendBlock.coordinate.bottom.size : legendBlock.coordinate.bottom.size - legendBlock.coordinate.bottom.margin.bottom);
+            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, blockSize.width - margin.left - margin.right, blockSize.height - margin.top - marginBottom - legendBlock.coordinate.bottom.margin.bottom - MIN_DONUT_BLOCK_SIZE);
+        }
+        return {
+            allowableKeys: keys.slice(0, maxItemsNumber),
+            hidedRecordsAmount: keys.length - maxItemsNumber
+        };
+    }
+    /**
+     * Выводит количество элементов (преимущественно баров) в одной группе. Группа - один ключ
+     * @param configOptions
+     * @param chartsLength
+     */
+    static getElementsInGroupAmount(configOptions, chartsLength) {
+        if (configOptions.type === '2d')
+            return this.getBarChartsInGroupAmount(configOptions.charts);
+        return chartsLength;
+    }
+    static getBarChartsInGroupAmount(charts) {
+        let barsAmount = 0;
+        charts.forEach(chart => {
+            if (chart.type === 'bar' && chart.isSegmented)
+                barsAmount += 1; // в сегментированном баре все valueFields находятся внутри одного бара, поэтому бар всегда один.
+            else if (chart.type === 'bar')
+                barsAmount += chart.data.valueFields.length;
+        });
+        return barsAmount;
+    }
+    static getScopedData(data, allowableKeys, config) {
+        const newData = {};
+        newData[config.options.data.dataSource] = this.getScopedChartData(data[config.options.data.dataSource], allowableKeys, config.options.data.keyField.name);
+        return newData;
+    }
+    static getScopedChartData(data, allowableKeys, keyFieldName) {
+        return data.filter(d => allowableKeys.findIndex(key => key === d[keyFieldName]) !== -1);
+    }
+    static setDataType(data, config) {
+        if (config.options.type === 'polar' || config.options.type === '2d') {
+            // Форматиривание для оси ключей пока не совсем верно установлено
+            // if(config.options.data.keyField.format === 'date') {
+            //     data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], config.options.data.keyField);
+            // }
+        }
+        else if (config.options.type === 'interval') {
+            const chart = config.options.chart;
+            if (chart.data.valueField1.format === 'date') {
+                data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], chart.data.valueField1);
+            }
+            if (chart.data.valueField2.format === 'date') {
+                data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], chart.data.valueField2);
+            }
+        }
+    }
+    static getTypedData(data, field) {
+        if (field.format === 'date')
+            data.forEach(d => {
+                d[field.name] = new Date(d[field.name]);
+            });
+        return data;
+    }
+    static getDataLimitByItemSize(elementsInGroupAmount, dataLength, axisLength, barOptions) {
+        let sumSize = dataLength * (elementsInGroupAmount * barOptions.minBarWidth + (elementsInGroupAmount - 1) * barOptions.barDistance + barOptions.groupMinDistance);
+        while (dataLength !== 0 && axisLength < sumSize) {
+            dataLength--;
+            // find whole space for bars in group + distance between bars + group distance
+            sumSize = dataLength * (elementsInGroupAmount * barOptions.minBarWidth + (elementsInGroupAmount - 1)
+                * barOptions.barDistance + barOptions.groupMinDistance);
+        }
+        return dataLength;
+    }
+}

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

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

package/lib/model/featuresModel/axisModel.js

@@ -0,0 +1,111 @@
+import { ModelHelper } from "../modelHelper";
+import { AxisType, CLASSES } from "../modelBuilder";
+import { DataManagerModel } from "../dataManagerModel";
+import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
+export class AxisModel {
+    static getKeyAxis(charts, data, dataOptions, orient, axisConfig, labelConfig, margin, blockSize, tooltipSettings) {
+        return {
+            type: 'key',
+            orient: AxisModel.getAxisOrient(AxisType.Key, orient, axisConfig.position),
+            translate: {
+                translateX: AxisModel.getAxisTranslateX(AxisType.Key, orient, axisConfig.position, margin, blockSize.width),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Key, orient, axisConfig.position, margin, blockSize.height)
+            },
+            cssClass: 'key-axis',
+            ticks: axisConfig.ticks,
+            labels: {
+                maxSize: AxisModel.getLabelSize(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
+                position: AxisModel.getKeyAxisLabelPosition(margin, blockSize, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length),
+                visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orient),
+                defaultTooltip: tooltipSettings.position === 'fixed'
+            },
+            visibility: axisConfig.visibility
+        };
+    }
+    static getValueAxis(orient, axisConfig, labelConfig, margin, blockSize) {
+        return {
+            type: 'value',
+            orient: AxisModel.getAxisOrient(AxisType.Value, orient, axisConfig.position),
+            translate: {
+                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, axisConfig.position, margin, blockSize.width),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, axisConfig.position, margin, blockSize.height)
+            },
+            cssClass: 'value-axis',
+            ticks: axisConfig.ticks,
+            labels: {
+                maxSize: labelConfig.maxSize.main,
+                position: 'straight',
+                visible: true,
+                defaultTooltip: true
+            },
+            visibility: axisConfig.visibility
+        };
+    }
+    static getAxisLength(chartOrientation, margin, blockSize) {
+        if (chartOrientation === 'horizontal') {
+            return blockSize.height - margin.top - margin.bottom;
+        }
+        else {
+            return blockSize.width - margin.left - margin.right;
+        }
+    }
+    static getAxisOrient(axisType, chartOrientation, axisPosition) {
+        if (chartOrientation === 'vertical') {
+            if (axisPosition === 'start')
+                return axisType === AxisType.Key ? 'top' : 'left';
+            return axisType === AxisType.Key ? 'bottom' : 'right';
+        }
+        if (axisPosition === 'start')
+            return axisType === AxisType.Key ? 'left' : 'top';
+        return axisType === AxisType.Key ? 'right' : 'bottom';
+    }
+    static getAxisTranslateX(axisType, chartOrientation, axisPosition, margin, blockWidth) {
+        const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
+        if (orient === 'top' || orient === 'left')
+            return margin.left;
+        else if (orient === 'bottom')
+            return margin.left;
+        return blockWidth - margin.right;
+    }
+    static getAxisTranslateY(axisType, chartOrientation, axisPosition, margin, blockHeight) {
+        const orient = AxisModel.getAxisOrient(axisType, chartOrientation, axisPosition);
+        if (orient === 'top' || orient === 'left')
+            return margin.top;
+        else if (orient === 'bottom')
+            return blockHeight - margin.bottom;
+        return margin.top;
+    }
+    static getKeyAxisLabelPosition(margin, blockSize, scopedDataLength) {
+        const minBandSize = 50;
+        if ((blockSize.width - margin.left - margin.right) / scopedDataLength < minBandSize)
+            return 'rotated';
+        return 'straight';
+    }
+    static getLabelSize(labelMaxWidth, labelTexts) {
+        const labelSize = {
+            width: 0,
+            height: 0
+        };
+        const textBlock = document.createElement('span');
+        textBlock.style.opacity = '0';
+        textBlock.style.position = 'absolute';
+        textBlock.style.whiteSpace = 'nowrap';
+        textBlock.classList.add(CLASSES.dataLabel);
+        let maxLabel = '';
+        let biggestScore = 0;
+        let maxWidth = 0;
+        labelTexts.forEach((text) => {
+            if (ModelHelper.getStringScore(text) > biggestScore) {
+                maxLabel = text;
+                biggestScore = ModelHelper.getStringScore(text);
+            }
+        });
+        textBlock.textContent = maxLabel === '0000' ? maxLabel : maxLabel + 'D';
+        document.body.append(textBlock);
+        maxWidth = Math.ceil(textBlock.getBoundingClientRect().width);
+        labelSize.height = textBlock.getBoundingClientRect().height;
+        labelSize.width = maxWidth > labelMaxWidth ? labelMaxWidth : maxWidth;
+        textBlock.remove();
+        return labelSize;
+    }
+}

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

@@ -0,0 +1,7 @@
+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 getLegendItemWidth(text: string): number;
+    static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): number;
+}