mdt-charts 1.9.11 → 1.10.3

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

@@ -0,0 +1,97 @@
+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';

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

@@ -0,0 +1,16 @@
+import { AxisScale } from 'd3-axis';
+import { BarChartSettings, ScaleKeyModel, ScaleValueModel } from '../../../model/model';
+export interface Scales {
+    key: AxisScale<any>;
+    value: AxisScale<any>;
+}
+export declare class Scale {
+    static getScales(scaleKey: ScaleKeyModel, scaleValue: ScaleValueModel, bandSettings: BarChartSettings): Scales;
+    static getScaleBandWidth(scale: AxisScale<any>): number;
+    static getScaleStep(scale: AxisScale<any>): number;
+    static getScaledValue(scale: AxisScale<any>, value: any): number;
+    private static getScaleBand;
+    private static getScaleLinear;
+    private static getScalePoint;
+    private static getScaleTime;
+}

package/lib/engine/features/scale/scale.js

@@ -0,0 +1,74 @@
+import { scaleBand, scaleLinear, scalePoint, scaleTime } from 'd3-scale';
+export class Scale {
+    static getScales(scaleKey, scaleValue, bandSettings) {
+        const scales = {
+            key: null,
+            value: null
+        };
+        if (scaleKey.type === 'band')
+            scales.key = this.getScaleBand(scaleKey.domain, scaleKey.range, bandSettings, scaleKey.elementsAmount);
+        else if (scaleKey.type === 'point')
+            scales.key = this.getScalePoint(scaleKey.domain, scaleKey.range);
+        if (scaleValue.type === 'linear')
+            scales.value = this.getScaleLinear(scaleValue.domain, scaleValue.range);
+        else if (scaleValue.type === 'datetime')
+            scales.value = this.getScaleTime(scaleValue.domain, scaleValue.range);
+        return scales;
+    }
+    static getScaleBandWidth(scale) {
+        if (scale.bandwidth && scale.bandwidth() !== 0) {
+            return scale.bandwidth();
+        }
+        else if (scale.step) {
+            return scale.step();
+        }
+    }
+    static getScaleStep(scale) {
+        if (scale.step) {
+            return scale.step();
+        }
+    }
+    static getScaledValue(scale, value) {
+        if (scale.bandwidth && scale.bandwidth() !== 0) {
+            return scale(value) + this.getScaleBandWidth(scale) / 2;
+        }
+        return scale(value);
+    }
+    static getScaleBand(domain, range, bandSettings, elementsInGroupAmount) {
+        const scale = scaleBand()
+            .domain(domain)
+            .range([range.start, range.end]);
+        const bandSize = scale.bandwidth();
+        if (bandSettings.groupMinDistance < bandSize) {
+            scale.paddingInner(bandSettings.groupMinDistance / bandSize);
+            scale.paddingOuter(bandSettings.groupMinDistance / bandSize / 2);
+        }
+        // Padding inner = 10. If bandwidth more than needed, paddingInner is increased to number less than 35 
+        let paddingInner = bandSettings.groupMinDistance;
+        while (scale.bandwidth() > bandSettings.maxBarWidth * elementsInGroupAmount + bandSettings.barDistance * (elementsInGroupAmount - 1) && paddingInner < bandSettings.groupMaxDistance) {
+            scale.paddingInner(++paddingInner / bandSize);
+        }
+        // if bandwidth more than all bars widths in group + distance between it + distance between groups
+        let paddingOuter = 1;
+        while (scale.step() > bandSettings.maxBarWidth * elementsInGroupAmount + bandSettings.groupMaxDistance + bandSettings.barDistance * (elementsInGroupAmount - 1)) {
+            scale.paddingOuter(++paddingOuter / bandSize);
+        }
+        return scale;
+    }
+    static getScaleLinear(domain, range) {
+        return scaleLinear()
+            .domain(domain)
+            .range([range.start, range.end]);
+    }
+    static getScalePoint(domain, range) {
+        return scalePoint()
+            .domain(domain)
+            .range([range.start, range.end]);
+    }
+    static getScaleTime(domain, range) {
+        return scaleTime()
+            .domain(domain)
+            .range([range.start, range.end])
+            .nice();
+    }
+}

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

@@ -0,0 +1,11 @@
+import { Selection } from 'd3-selection';
+import { Block } from "../../block/block";
+import { BlockMargin } from '../../../model/model';
+import { Size } from "../../../config/config";
+export declare class TipBox {
+    static readonly tipBoxClass = "tipbox";
+    static renderOrGet(block: Block, margin: BlockMargin, blockSize: Size): Selection<SVGRectElement, unknown, HTMLElement, any>;
+    static get(block: Block): Selection<SVGRectElement, unknown, HTMLElement, any>;
+    static clearEvents(block: Block): void;
+    private static renderBlock;
+}

package/lib/engine/features/tipBox/tipBox.js

@@ -0,0 +1,32 @@
+import { TipBoxHelper } from './tipBoxHelper';
+export class TipBox {
+    static renderOrGet(block, margin, blockSize) {
+        const attributes = TipBoxHelper.getAttributes(margin, blockSize);
+        return this.renderBlock(block, attributes);
+    }
+    static get(block) {
+        return block.getSvg().select(`.${this.tipBoxClass}`);
+    }
+    static clearEvents(block) {
+        block.getSvg()
+            .select(`.${this.tipBoxClass}`)
+            .on('mousemove', null)
+            .on('mouseleave', null)
+            .on('click', null);
+    }
+    static renderBlock(block, attributes) {
+        let tipBox = block.getSvg()
+            .select(`rect.${this.tipBoxClass}`);
+        if (tipBox.empty())
+            tipBox = block.getSvg()
+                .append('rect')
+                .attr('class', this.tipBoxClass)
+                .attr('x', attributes.x)
+                .attr('y', attributes.y)
+                .attr('width', attributes.width)
+                .attr('height', attributes.height)
+                .style('opacity', 0);
+        return tipBox;
+    }
+}
+TipBox.tipBoxClass = 'tipbox';

package/lib/engine/features/tipBox/tipBoxHelper.d.ts

@@ -0,0 +1,16 @@
+import { AxisScale } from "d3-axis";
+import { ChartOrientation, Size } from "../../../config/config";
+import { BlockMargin, ScaleKeyType } from "../../../model/model";
+export interface TipBoxAttributes {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class TipBoxHelper {
+    static getKeyValueByPointer(pointer: [number, number], chartOrient: ChartOrientation, margin: BlockMargin, blockSize: Size, scaleKey: AxisScale<any>, scaleKeyType: ScaleKeyType): string;
+    static getAttributes(margin: BlockMargin, blockSize: Size): TipBoxAttributes;
+    private static getKeyIndex;
+    private static getKeyIndexOfPoint;
+    private static getKeyIndexOfBand;
+}

package/lib/engine/features/tipBox/tipBoxHelper.js

@@ -0,0 +1,48 @@
+import { Scale } from "../scale/scale";
+export class TipBoxHelper {
+    static getKeyValueByPointer(pointer, chartOrient, margin, blockSize, scaleKey, scaleKeyType) {
+        const index = TipBoxHelper.getKeyIndex(pointer, chartOrient, margin, blockSize, scaleKey, scaleKeyType);
+        let keyValue = scaleKey.domain()[index];
+        if (index >= scaleKey.domain().length)
+            keyValue = scaleKey.domain()[scaleKey.domain().length - 1];
+        return keyValue;
+    }
+    static getAttributes(margin, blockSize) {
+        const pad = 5;
+        return {
+            x: margin.left - pad,
+            y: margin.top - pad,
+            width: blockSize.width - margin.left - margin.right + pad * 2,
+            height: blockSize.height - margin.top - margin.bottom + pad * 2,
+        };
+    }
+    static getKeyIndex(pointer, chartOrient, margin, blockSize, scaleKey, scaleKeyType) {
+        const pointerAxisType = chartOrient === 'vertical' ? 0 : 1; // 0 - координата поинтера по оси x, 1 - по оси y
+        const marginByOrient = chartOrient === 'vertical' ? margin.left : margin.top;
+        const scaleStep = Scale.getScaleStep(scaleKey);
+        if (scaleKeyType === 'point') {
+            return this.getKeyIndexOfPoint(pointer, scaleStep, marginByOrient, pointerAxisType);
+        }
+        else {
+            return this.getKeyIndexOfBand(pointer, scaleStep, marginByOrient, pointerAxisType, blockSize, margin, chartOrient, scaleKey);
+        }
+    }
+    static getKeyIndexOfPoint(pointer, scaleStep, marginByOrient, pointerAxisType) {
+        const point = pointer[pointerAxisType] - marginByOrient + scaleStep / 2;
+        if (point < 0)
+            return 0;
+        return Math.floor(point / scaleStep);
+    }
+    static getKeyIndexOfBand(pointer, scaleStep, marginByOrient, pointerAxisType, blockSize, margin, chartOrient, scaleKey) {
+        const chartBlockSizeByDir = chartOrient === 'vertical'
+            ? blockSize.width - margin.left - margin.right
+            : blockSize.height - margin.top - margin.bottom;
+        const outerPadding = chartBlockSizeByDir - scaleStep * scaleKey.domain().length;
+        if (pointer[pointerAxisType] - marginByOrient - 1 < outerPadding / 2)
+            return 0; // Самый первый элемент
+        if (pointer[pointerAxisType] - marginByOrient - 1 + outerPadding / 2 > chartBlockSizeByDir)
+            return scaleKey.domain().length - 1; // последний индекс
+        const point = pointer[pointerAxisType] - outerPadding / 2 - marginByOrient - 1;
+        return Math.floor(point / scaleStep);
+    }
+}

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

@@ -0,0 +1,9 @@
+import { Size } from '../../../config/config';
+import { TitleBlockModel } from "../../../model/model";
+import { Block } from "../../block/block";
+export declare class Title {
+    static render(block: Block, text: string, titleBlockModel: TitleBlockModel, blockSize: Size): void;
+    private static fillTitleBlockAttributes;
+    private static getTitleAttributes;
+    private static setTitleTooltip;
+}

package/lib/engine/features/title/title.js

@@ -0,0 +1,35 @@
+import { DomHelper } from '../../helpers/domHelper';
+export class Title {
+    static render(block, text, titleBlockModel, blockSize) {
+        const titleBlock = block.getSvg()
+            .append('text')
+            .attr('class', 'chart-title');
+        const titleCoordinate = this.getTitleAttributes(blockSize, titleBlockModel);
+        this.fillTitleBlockAttributes(titleBlock, titleCoordinate, text);
+        this.setTitleTooltip(titleBlock, text);
+    }
+    static fillTitleBlockAttributes(titleBlock, attributes, text) {
+        titleBlock
+            .attr('x', attributes.x)
+            .attr('y', attributes.y)
+            .attr('dominant-baseline', attributes.dominantBaseline)
+            .text(text);
+        DomHelper.cropSvgLabels(titleBlock, attributes.maxWidth);
+    }
+    static getTitleAttributes(blockSize, titleBlockModel) {
+        const coordinate = {
+            x: 0,
+            y: 0,
+            maxWidth: 0,
+            dominantBaseline: "hanging"
+        };
+        coordinate.x = titleBlockModel.margin.left;
+        coordinate.y = titleBlockModel.margin.top;
+        coordinate.maxWidth = blockSize.width - titleBlockModel.margin.left - titleBlockModel.margin.right;
+        return coordinate;
+    }
+    static setTitleTooltip(titleBlock, text) {
+        titleBlock.append('title')
+            .text(text);
+    }
+}

package/lib/engine/features/tolltip/newTooltip/newTooltip.d.ts

@@ -0,0 +1,16 @@
+import { Selection } from 'd3-selection';
+export interface TooltipCoordinate {
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+}
+export declare class NewTooltip {
+    static tooltipBlockClass: string;
+    private elSelection;
+    getEl(): Selection<HTMLElement, unknown, HTMLElement, any>;
+    findInWrapper(wrapper: Selection<HTMLElement, unknown, HTMLElement, any>): Selection<HTMLElement, unknown, HTMLElement, any>;
+    render(wrapper: Selection<HTMLElement, unknown, HTMLElement, any>): Selection<HTMLElement, unknown, HTMLElement, any>;
+    appendContent(content: HTMLElement): void;
+    setCoordinate(coordinate: TooltipCoordinate): void;
+}

package/lib/engine/features/tolltip/newTooltip/newTooltip.js

@@ -0,0 +1,26 @@
+export class NewTooltip {
+    getEl() {
+        return this.elSelection;
+    }
+    findInWrapper(wrapper) {
+        this.elSelection = wrapper.select(`.${NewTooltip.tooltipBlockClass}`);
+        return this.elSelection;
+    }
+    render(wrapper) {
+        this.elSelection = wrapper
+            .append('div')
+            .attr('class', NewTooltip.tooltipBlockClass);
+        return this.elSelection;
+    }
+    appendContent(content) {
+        this.elSelection.node().appendChild(content);
+    }
+    setCoordinate(coordinate) {
+        this.elSelection
+            .style('right', coordinate.right)
+            .style('bottom', coordinate.bottom)
+            .style('left', coordinate.left)
+            .style('top', coordinate.top);
+    }
+}
+NewTooltip.tooltipBlockClass = 'tooltip-block';

package/lib/engine/features/tolltip/newTooltip/newTooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/engine/features/tolltip/newTooltip/newTooltip.test.js

@@ -0,0 +1,186 @@
+import { NewTooltipServiceClass } from "./newTooltipService";
+const ignoredValue = 0;
+const ignoredBigvalue = 1000000;
+describe('newTooltipService', () => {
+    const getIgnoredSize = (big) => {
+        return {
+            height: big ? ignoredBigvalue : ignoredValue,
+            width: big ? ignoredBigvalue : ignoredValue
+        };
+    };
+    const getSizeWithOne = (key, value) => {
+        const size = getIgnoredSize();
+        size[key] = value;
+        return size;
+    };
+    const getPosWithOne = (key, value) => {
+        const coordinate = {
+            left: ignoredValue,
+            top: ignoredValue
+        };
+        coordinate[key] = value;
+        return coordinate;
+    };
+    const getBoundingWithOne = (key, value) => {
+        const blockBounding = {
+            left: ignoredValue,
+            bottom: ignoredValue,
+            height: ignoredValue,
+            top: ignoredValue,
+            width: ignoredValue
+        };
+        blockBounding[key] = value;
+        return blockBounding;
+    };
+    const service = new NewTooltipServiceClass();
+    describe('getTooltipByWindow with parentBlock', () => {
+        test('should return left point equal to `-(left of parent block)` if left of tooltip is less', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("left", -50);
+            const windowSize = getIgnoredSize(true);
+            const blockBounding = getBoundingWithOne("left", 10);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.left).toBe(-blockBounding.left);
+        });
+        test('should return left point equal to left of preCoordinate if left of tooltip is less', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("left", 20);
+            const windowSize = getIgnoredSize(true);
+            const blockBounding = getBoundingWithOne("left", 10);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.left).toBe(preCoordinate.left);
+        });
+        test('should return left point equal to `(window width - tooltip width)` if right of tooltip is bigger', () => {
+            const tooltipBounding = getSizeWithOne("width", 50);
+            const preCoordinate = getPosWithOne("left", 20);
+            const windowSize = getSizeWithOne("width", 90);
+            const blockBounding = getBoundingWithOne("left", 30);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.left).toBe(-8); // 50 + 20 + 30 > 90 => 90 - 30 - 50 - scrollPad(18)
+        });
+        test('should return left point equal to left of preCoordinate if right of tooltip is less than window width', () => {
+            const tooltipBounding = getSizeWithOne("width", 50);
+            const preCoordinate = getPosWithOne("left", 20);
+            const windowSize = getSizeWithOne("width", 200);
+            const blockBounding = getBoundingWithOne("left", 30);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.left).toBe(preCoordinate.left); // 50 + 20 + 30 < 200
+        });
+        test('should return top point equal to `-(top of parent block)` if top of tooltip is less', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("top", -40);
+            const windowSize = getIgnoredSize(true);
+            const blockBounding = getBoundingWithOne("top", -20);
+            let res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(-blockBounding.top);
+            blockBounding.top = -60;
+            res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(-blockBounding.top); // 60 by blockBounding = 0 by window
+            blockBounding.top = -100;
+            preCoordinate.top = 20;
+            res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(-blockBounding.top);
+            blockBounding.top = -10;
+            preCoordinate.top = 5;
+            res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(-blockBounding.top);
+        });
+        test('should return top point equal top of preCoordinate if top of tooltip is bigger', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("top", 20);
+            const windowSize = getIgnoredSize(true);
+            const blockBounding = getBoundingWithOne("top", 100);
+            let res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(preCoordinate.top);
+            preCoordinate.top = -99;
+            res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(preCoordinate.top);
+        });
+        test('should return top point equal to `(winHeight - tooltipHeight)` if bottom of tooltip is bigger than window height', () => {
+            const tooltipBounding = getSizeWithOne("height", 50);
+            const preCoordinate = getPosWithOne("top", 90);
+            const windowSize = getSizeWithOne("height", 200);
+            const blockBounding = {
+                left: ignoredValue,
+                bottom: 210,
+                height: 110,
+                top: 100,
+                width: ignoredValue
+            };
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(50); // 110 - 50 - (210 - 200)
+        });
+        test('should return top point equal to top of preCoordinate if bottom of tooltip is less than height of window', () => {
+            const tooltipBounding = getSizeWithOne("height", 50);
+            const preCoordinate = getPosWithOne("top", 90);
+            const windowSize = getSizeWithOne("height", 300);
+            const blockBounding = {
+                left: ignoredValue,
+                bottom: 210,
+                height: 110,
+                top: 100,
+                width: ignoredValue
+            };
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, blockBounding);
+            expect(res.top).toBe(preCoordinate.top); // 90 + 50 + 100 < 300
+        });
+    });
+    describe('getTooltipByWindow without parentBlock', () => {
+        test('should return left point equal to 0 if left of tooltip is less', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("left", -50);
+            const windowSize = getIgnoredSize(true);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.left === 0).toBe(true); // negative zero jest not matching with simple zero
+        });
+        test('should return left point equal to left of preCoordinate if left of tooltip is bigger than 0', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("left", 20);
+            const windowSize = getIgnoredSize(true);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.left).toBe(preCoordinate.left);
+        });
+        test('should return left point equal to `(window width - tooltip width)` if right of tooltip is bigger', () => {
+            const tooltipBounding = getSizeWithOne("width", 50);
+            const preCoordinate = getPosWithOne("left", 60);
+            const windowSize = getSizeWithOne("width", 100);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.left).toBe(32); // 60 + 50 > 100 => 100 - 50 - scrollPad(18)
+        });
+        test('should return left point equal to left of preCoordinate if right of tooltip is less than window width', () => {
+            const tooltipBounding = getSizeWithOne("width", 50);
+            const preCoordinate = getPosWithOne("left", 20);
+            const windowSize = getSizeWithOne("width", 200);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.left).toBe(preCoordinate.left); // 50 + 20 < 200
+        });
+        test('should return top point equal to 0 if top of tooltip is less than 0', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("top", -40);
+            const windowSize = getIgnoredSize(true);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.top === 0).toBe(true);
+        });
+        test('should return top point equal top of preCoordinate if top of tooltip is bigger than 0', () => {
+            const tooltipBounding = getIgnoredSize();
+            const preCoordinate = getPosWithOne("top", 20);
+            const windowSize = getIgnoredSize(true);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.top).toBe(preCoordinate.top);
+        });
+        test('should return top point equal to `(winHeight - tooltipHeight)` if bottom of tooltip is bigger than window height', () => {
+            const tooltipBounding = getSizeWithOne("height", 50);
+            const preCoordinate = getPosWithOne("top", 90);
+            const windowSize = getSizeWithOne("height", 100);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.top).toBe(50); // 90 + 50 > 100 => 100 - 50
+        });
+        test('should return top point equal to top of preCoordinate if bottom of tooltip is less than height of window', () => {
+            const tooltipBounding = getSizeWithOne("height", 50);
+            const preCoordinate = getPosWithOne("top", 90);
+            const windowSize = getSizeWithOne("height", 300);
+            const res = service.getTooltipByWindow(tooltipBounding, preCoordinate, windowSize);
+            expect(res.top).toBe(preCoordinate.top); // 90 + 50 < 300
+        });
+    });
+});

package/lib/engine/features/tolltip/newTooltip/newTooltipService.d.ts

@@ -0,0 +1,17 @@
+export interface TooltipPreCoordinate {
+    top: number;
+    left: number;
+}
+export interface Sizable {
+    width: number;
+    height: number;
+}
+export interface ElBounding extends Sizable {
+    left: number;
+    top: number;
+    bottom: number;
+}
+export declare class NewTooltipServiceClass {
+    getTooltipByWindow(tooltipBounding: Sizable, preCoordinate: TooltipPreCoordinate, windowSize: Sizable, parentBounding?: ElBounding): TooltipPreCoordinate;
+}
+export declare const TooltipService: NewTooltipServiceClass;

package/lib/engine/features/tolltip/newTooltip/newTooltipService.js

@@ -0,0 +1,26 @@
+export class NewTooltipServiceClass {
+    getTooltipByWindow(tooltipBounding, preCoordinate, windowSize, parentBounding) {
+        const scrollPad = 18;
+        const coordinate = {
+            top: preCoordinate.top,
+            left: preCoordinate.left
+        };
+        const blockBounding = parentBounding !== null && parentBounding !== void 0 ? parentBounding : {
+            top: 0,
+            left: 0,
+            height: windowSize.height,
+            width: windowSize.width,
+            bottom: windowSize.height
+        };
+        if (preCoordinate.left < 0 && Math.abs(preCoordinate.left) > blockBounding.left)
+            coordinate.left = -blockBounding.left;
+        if (blockBounding.left + preCoordinate.left + tooltipBounding.width > windowSize.width - scrollPad)
+            coordinate.left = windowSize.width - blockBounding.left - tooltipBounding.width - scrollPad;
+        if (preCoordinate.top + blockBounding.top < 0 && -preCoordinate.top > blockBounding.top)
+            coordinate.top = -blockBounding.top;
+        if (blockBounding.top + preCoordinate.top + tooltipBounding.height > windowSize.height)
+            coordinate.top = blockBounding.height - tooltipBounding.height - (blockBounding.bottom - windowSize.height);
+        return coordinate;
+    }
+}
+export const TooltipService = new NewTooltipServiceClass();

package/lib/engine/features/tolltip/tooltip.d.ts

@@ -0,0 +1,19 @@
+import { Model } from "../../../model/model";
+import { Block } from "../../block/block";
+import { MdtChartsDataSource } from "../../../config/config";
+import { Scales } from '../scale/scale';
+import { TooltipSettings } from '../../../designer/designerConfig';
+export declare class Tooltip {
+    static readonly tooltipBlockClass: string;
+    static readonly tooltipLineClass = "tooltip-line";
+    static readonly tooltipWrapperClass = "tooltip-wrapper";
+    static readonly tooltipContentClass = "tooltip-content";
+    static readonly tooltipArrowClass = "tooltip-arrow";
+    static render(block: Block, model: Model, data: MdtChartsDataSource, tooltipOptions: TooltipSettings, scales?: Scales): void;
+    static hide(block: Block): void;
+    private static renderTooltipFor2DCharts;
+    private static renderTooltipForIntervalCharts;
+    private static renderTooltipForPolar;
+    private static renderLineTooltip;
+    private static renderTooltipForDonut;
+}