mdt-charts 1.9.11 → 1.10.3

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

@@ -0,0 +1,181 @@
+import { select, pointer, } from 'd3-selection';
+import { TooltipDomHelper } from "./tooltipDomHelper";
+import { Donut } from "../../polarNotation/donut/donut";
+import { TooltipComponentsManager } from './tooltipComponentsManager';
+import { ElementHighlighter } from '../../elementHighlighter/elementHighlighter';
+import { DonutHelper } from '../../polarNotation/donut/DonutHelper';
+import { TipBox } from '../tipBox/tipBox';
+import { TipBoxHelper } from '../tipBox/tipBoxHelper';
+import { Helper } from '../../helpers/helper';
+import { TooltipHelper } from './tooltipHelper';
+import { DomHelper } from '../../helpers/domHelper';
+import { NewTooltip } from './newTooltip/newTooltip';
+export class Tooltip {
+    static render(block, model, data, tooltipOptions, scales) {
+        TooltipComponentsManager.renderTooltipWrapper(block);
+        const withTooltipIndex = model.options.charts.findIndex((chart) => chart.tooltip.show);
+        if (withTooltipIndex !== -1) {
+            if (model.options.type === '2d') {
+                this.renderTooltipFor2DCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
+            }
+            else if (model.options.type === 'polar') {
+                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.chartSettings.donut, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
+            }
+            else if (model.options.type === 'interval') {
+                this.renderTooltipForIntervalCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
+            }
+        }
+    }
+    static hide(block) {
+        TooltipComponentsManager.hideComponent(block.getWrapper().select(`.${this.tooltipBlockClass}`));
+        TooltipComponentsManager.hideComponent(block.getSvg().select(`.${this.tooltipLineClass}`));
+    }
+    static renderTooltipFor2DCharts(block, data, blockSize, margin, scales, options, tooltipOptions) {
+        if (scales.key.domain().length === 0)
+            return;
+        const tooltipParams = {
+            type: '2d',
+            scales,
+            margin,
+            blockSize,
+            charts: options.charts,
+            chartOrientation: options.orient,
+            keyAxisOrient: options.axis.key.orient,
+            dataOptions: options.data,
+            scaleKeyModel: options.scale.key,
+            tooltipSettings: tooltipOptions,
+            tooltipOptions: options.tooltip
+        };
+        this.renderLineTooltip(block, data, tooltipParams);
+    }
+    static renderTooltipForIntervalCharts(block, data, blockSize, margin, scales, options, tooltipOptions) {
+        if (scales.key.domain().length === 0)
+            return;
+        const tooltipParams = {
+            type: 'interval',
+            scales,
+            margin,
+            blockSize,
+            charts: options.charts,
+            chartOrientation: options.orient,
+            keyAxisOrient: options.axis.key.orient,
+            dataOptions: options.data,
+            scaleKeyModel: options.scale.key,
+            tooltipSettings: tooltipOptions,
+            tooltipOptions: options.tooltip
+        };
+        this.renderLineTooltip(block, data, tooltipParams);
+    }
+    static renderTooltipForPolar(block, options, data, blockSize, margin, chartThickness, tooltipOptions) {
+        const attrTransform = block.getSvg().select(`.${Donut.donutBlockClass}`).attr('transform');
+        const translateNums = Helper.getTranslateNumbers(attrTransform);
+        const arcItems = Donut.getAllArcGroups(block);
+        this.renderTooltipForDonut(block, arcItems, data, options.data, options.charts[0], blockSize, margin, chartThickness, tooltipOptions, options.tooltip, { x: translateNums[0], y: translateNums[1] });
+    }
+    static renderLineTooltip(block, data, args) {
+        const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
+        const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
+        const tooltipLine = TooltipComponentsManager.renderTooltipLine(block);
+        const tipBox = TipBox.renderOrGet(block, args.margin, args.blockSize);
+        let currentKey = null;
+        tipBox.on('mousemove', function (e) {
+            var _a, _b;
+            const keyValue = e.detail.keyValue || TipBoxHelper.getKeyValueByPointer(pointer(e, this), args.chartOrientation, args.margin, args.blockSize, args.scales.key, args.scaleKeyModel.type);
+            if (args.tooltipSettings.position === 'followCursor') {
+                const tooltipCoordinate = TooltipHelper.getTooltipCursorCoordinate(e.detail.pointer || pointer(e, this), block.getSvg().node().getBoundingClientRect(), tooltipBlock.getEl().node().getBoundingClientRect());
+                TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, 0);
+            }
+            if (!currentKey || currentKey !== keyValue) {
+                TooltipComponentsManager.showComponent(tooltipBlock.getEl());
+                if (args.type === '2d')
+                    TooltipDomHelper.fillForMulty2DCharts(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, (_a = args.tooltipOptions) === null || _a === void 0 ? void 0 : _a.html);
+                else
+                    TooltipDomHelper.fillForIntervalChart(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, (_b = args.tooltipOptions) === null || _b === void 0 ? void 0 : _b.html);
+                if (args.tooltipSettings.position === 'fixed') {
+                    const tooltipCoordinate = TooltipHelper.getTooltipFixedCoordinate(args.scales.key, args.margin, keyValue, block.getSvg().node().getBoundingClientRect(), tooltipContent.node().getBoundingClientRect(), args.keyAxisOrient, window.innerWidth, window.innerHeight);
+                    TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, block.transitionManager.durations.tooltipSlide);
+                }
+                const tooltipLineAttributes = TooltipHelper.getTooltipLineAttributes(args.scales.key, args.margin, keyValue, args.chartOrientation, args.blockSize);
+                TooltipComponentsManager.setTooltipLineAttributes(tooltipLine, tooltipLineAttributes, block.transitionManager.durations.tooltipSlide);
+                TooltipComponentsManager.showComponent(tooltipLine);
+                //TODO: append highlight for interval / Extract this highlighting in method 
+                if (args.type === '2d') {
+                    args.charts.forEach(chart => {
+                        const elements = DomHelper.get2DChartElements(block, chart);
+                        if (!block.filterEventManager.isSelected(currentKey)) {
+                            const oldElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
+                            if (chart.type !== 'bar' && !chart.markersOptions.show)
+                                ElementHighlighter.toggleMarkDotVisible(oldElements, false);
+                            ElementHighlighter.toggle2DElements(oldElements, false, chart.type, block.transitionManager.durations.markerHover);
+                            if (block.filterEventManager.getSelectedKeys().length > 0) {
+                                ElementHighlighter.toggleActivityStyle(oldElements, false);
+                            }
+                        }
+                        const selectedElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
+                        if (chart.type !== 'bar' && !chart.markersOptions.show)
+                            ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
+                        ElementHighlighter.toggleActivityStyle(selectedElements, true);
+                        if (block.filterEventManager.getSelectedKeys().length === 0 || block.filterEventManager.isSelected(keyValue)) {
+                            ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
+                        }
+                    });
+                }
+                currentKey = keyValue;
+            }
+        });
+        tipBox.on('mouseleave', function () {
+            TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
+            TooltipComponentsManager.hideComponent(tooltipLine);
+            if (args.type === '2d')
+                ElementHighlighter.removeUnselected2DHighlight(block, args.dataOptions.keyField.name, args.charts, block.transitionManager.durations.markerHover);
+            currentKey = null;
+        });
+    }
+    static renderTooltipForDonut(block, elements, data, dataOptions, chart, blockSize, margin, donutThickness, tooltipSettings, tooltipOptions, translate) {
+        const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
+        const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
+        let tooltipArrow;
+        if (tooltipSettings.position === 'fixed')
+            tooltipArrow = TooltipComponentsManager.renderTooltipArrow(tooltipBlock.getEl());
+        if (tooltipSettings.position === 'followCursor') {
+            elements.on('mousemove', function (e) {
+                const pointerCoordinate = !pointer(e, block.getSvg().node())[0] ? e.detail.pointer : pointer(e, block.getSvg().node());
+                const tooltipCoordinate = TooltipHelper.getTooltipCursorCoordinate(pointerCoordinate, block.getSvg().node().getBoundingClientRect(), tooltipBlock.getEl().node().getBoundingClientRect());
+                tooltipBlock.setCoordinate(tooltipCoordinate);
+            });
+        }
+        elements.on('mouseover', function (e, dataRow) {
+            TooltipComponentsManager.showComponent(tooltipBlock.getEl());
+            TooltipDomHelper.fillForPolarChart(tooltipContent, chart, data, dataOptions, dataRow.data[dataOptions.keyField.name], select(this).select('path').style('fill'), tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.html);
+            if (tooltipSettings.position === 'fixed') {
+                const coordinatePointer = TooltipDomHelper.getRecalcedCoordinateByArrow(DonutHelper.getArcCentroid(blockSize, margin, dataRow, donutThickness), tooltipBlock.getEl(), blockSize, tooltipArrow, translate.x, translate.y);
+                coordinatePointer[0] = coordinatePointer[0] + translate.x;
+                coordinatePointer[1] = coordinatePointer[1] + translate.y;
+                const tooltipCoordinate = TooltipHelper.getCoordinateByPointer(coordinatePointer);
+                tooltipBlock.setCoordinate(tooltipCoordinate);
+            }
+            ElementHighlighter.toggleActivityStyle(select(this), true);
+            const clones = Donut.getAllArcClones(block)
+                .filter((d) => d.data[dataOptions.keyField.name] === dataRow.data[dataOptions.keyField.name]);
+            if (clones.nodes().length === 0 && (block.filterEventManager.getSelectedKeys().length === 0 || block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name]))) {
+                ElementHighlighter.renderArcCloneAndHighlight(block, margin, select(this), blockSize, donutThickness);
+            }
+        });
+        elements.on('mouseleave', function (e, dataRow) {
+            TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
+            if (!block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name])) {
+                ElementHighlighter.removeCloneForElem(block, dataOptions.keyField.name, select(this));
+                ElementHighlighter.removeShadowClone(block, dataOptions.keyField.name, select(this), margin, blockSize, donutThickness);
+                ElementHighlighter.toggleDonutHighlightState(select(this), margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false);
+                if (block.filterEventManager.getSelectedKeys().length > 0) {
+                    ElementHighlighter.toggleActivityStyle(select(this), false);
+                }
+            }
+        });
+    }
+}
+Tooltip.tooltipBlockClass = NewTooltip.tooltipBlockClass;
+Tooltip.tooltipLineClass = 'tooltip-line';
+Tooltip.tooltipWrapperClass = 'tooltip-wrapper';
+Tooltip.tooltipContentClass = 'tooltip-content';
+Tooltip.tooltipArrowClass = 'tooltip-arrow';

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

@@ -0,0 +1,17 @@
+import { Selection, BaseType } from 'd3-selection';
+import { Block } from "../../block/block";
+import { TooltipLineAttributes } from "./tooltipDomHelper";
+import { ChartOrientation } from "../../../config/config";
+import { NewTooltip, TooltipCoordinate } from './newTooltip/newTooltip';
+export declare class TooltipComponentsManager {
+    static showComponent(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): void;
+    static hideComponent(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): void;
+    static renderTooltipWrapper(block: Block): void;
+    static renderTooltipBlock(block: Block, translateX?: number, translateY?: number): NewTooltip;
+    static renderTooltipContentBlock(tooltipBlock: NewTooltip): Selection<HTMLDivElement, unknown, HTMLElement, any>;
+    static renderTooltipLine(block: Block): Selection<SVGLineElement, unknown, HTMLElement, any>;
+    static setTooltipLineAttributes(tooltipLine: Selection<SVGLineElement, unknown, HTMLElement, any>, attributes: TooltipLineAttributes, transition: number): void;
+    static getLineWidth(tooltipLine: Selection<BaseType, any, BaseType, any>): number;
+    static renderTooltipArrow(tooltipBlock: Selection<BaseType, unknown, HTMLElement, any>): Selection<BaseType, unknown, HTMLElement, any>;
+    static setLineTooltipCoordinate(tooltip: NewTooltip, tooltipCoordinate: TooltipCoordinate, chartOrientation: ChartOrientation, transition?: number): void;
+}

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

@@ -0,0 +1,125 @@
+import { select } from 'd3-selection';
+import { ARROW_DEFAULT_POSITION, ARROW_SIZE } from "./tooltipDomHelper";
+import { easeLinear } from 'd3-ease';
+import { interrupt } from 'd3-transition';
+import { Tooltip } from './tooltip';
+import { NewTooltip } from './newTooltip/newTooltip';
+export class TooltipComponentsManager {
+    static showComponent(tooltipBlock) {
+        tooltipBlock.style('display', 'block');
+    }
+    static hideComponent(tooltipBlock) {
+        tooltipBlock.style('display', 'none');
+    }
+    static renderTooltipWrapper(block) {
+        let tooltipWrapper = block.getWrapper()
+            .select(`.${Tooltip.tooltipWrapperClass}`);
+        if (tooltipWrapper.empty())
+            block.getWrapper()
+                .append('div')
+                .attr('class', Tooltip.tooltipWrapperClass);
+    }
+    static renderTooltipBlock(block, translateX = 0, translateY = 0) {
+        const wrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
+        const tooltipService = new NewTooltip();
+        let tooltipBlock = tooltipService.findInWrapper(wrapper);
+        if (tooltipBlock.empty()) {
+            tooltipBlock = tooltipService.render(wrapper);
+            tooltipBlock
+                .style('position', 'absolute')
+                .style('display', 'none');
+        }
+        if (translateX !== 0 || translateY !== 0)
+            tooltipBlock.style('transform', `translate(${translateX}px, ${translateY}px)`);
+        return tooltipService;
+    }
+    static renderTooltipContentBlock(tooltipBlock) {
+        let tooltipContentBlock = tooltipBlock.getEl().select(`.${Tooltip.tooltipContentClass}`);
+        if (tooltipContentBlock.empty()) {
+            tooltipContentBlock = select(document.createElement("div"))
+                .attr("class", Tooltip.tooltipContentClass);
+            tooltipBlock.appendContent(tooltipContentBlock.node());
+        }
+        return tooltipContentBlock;
+    }
+    static renderTooltipLine(block) {
+        let tooltipLine = block.getChartBlock()
+            .select(`.${Tooltip.tooltipLineClass}`);
+        if (tooltipLine.empty())
+            tooltipLine = block.getChartBlock()
+                .append('line')
+                .attr('class', Tooltip.tooltipLineClass)
+                .lower();
+        return tooltipLine;
+    }
+    static setTooltipLineAttributes(tooltipLine, attributes, transition) {
+        interrupt(tooltipLine.node());
+        if (transition > 0 && tooltipLine.style('display') === 'block') {
+            tooltipLine
+                .interrupt()
+                .transition()
+                .duration(transition)
+                .ease(easeLinear)
+                .attr('x1', attributes.x1)
+                .attr('x2', attributes.x2)
+                .attr('y1', attributes.y1)
+                .attr('y2', attributes.y2);
+        }
+        else {
+            tooltipLine
+                .attr('x1', attributes.x1)
+                .attr('x2', attributes.x2)
+                .attr('y1', attributes.y1)
+                .attr('y2', attributes.y2);
+        }
+    }
+    static getLineWidth(tooltipLine) {
+        return parseFloat(tooltipLine.style('stroke-width'));
+    }
+    static renderTooltipArrow(tooltipBlock) {
+        let arrowSize = ARROW_SIZE / 2;
+        let tooltipArrow = tooltipBlock.select(`.${Tooltip.tooltipArrowClass}`);
+        if (tooltipArrow.empty())
+            tooltipArrow = tooltipBlock
+                .append('div')
+                .attr('class', Tooltip.tooltipArrowClass)
+                .style('position', 'absolute')
+                .style('left', `${ARROW_DEFAULT_POSITION}px`)
+                .style('border-top-width', `${arrowSize}px`)
+                .style('border-right-width', `${arrowSize}px`)
+                .style('border-bottom-width', `0px`)
+                .style('border-left-width', `${arrowSize}px`);
+        return tooltipArrow;
+    }
+    static setLineTooltipCoordinate(tooltip, tooltipCoordinate, chartOrientation, transition = null) {
+        const tooltipBlock = tooltip.getEl();
+        interrupt(tooltipBlock.node());
+        if (!transition || transition <= 0)
+            tooltip.setCoordinate(tooltipCoordinate);
+        if (chartOrientation === 'vertical' && tooltipBlock.style('left') !== '0px' && tooltipBlock.style('right') !== '0px' && tooltipCoordinate.right !== '0px' && tooltipCoordinate.left !== null) {
+            tooltipBlock
+                .style('right', tooltipCoordinate.right)
+                .style('bottom', tooltipCoordinate.bottom)
+                .style('top', tooltipCoordinate.top)
+                .interrupt()
+                .transition()
+                .duration(transition)
+                .ease(easeLinear)
+                .style('left', tooltipCoordinate.left);
+        }
+        else if (chartOrientation === 'horizontal' && tooltipBlock.style('top') !== '0px' && parseInt(tooltipBlock.style('bottom')) > 0 && tooltipCoordinate.bottom === null) {
+            tooltipBlock
+                .style('right', tooltipCoordinate.right)
+                .style('bottom', tooltipCoordinate.bottom)
+                .style('left', tooltipCoordinate.left)
+                .interrupt()
+                .transition()
+                .duration(transition)
+                .ease(easeLinear)
+                .style('top', tooltipCoordinate.top);
+        }
+        else {
+            tooltip.setCoordinate(tooltipCoordinate);
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+import { Selection, BaseType } from 'd3-selection';
+import { MdtChartsDataSource, TooltipHtml } from "../../../config/config";
+import { IntervalChartModel, OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
+import { Size } from "../../../config/config";
+export interface TooltipLineAttributes {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}
+export declare const ARROW_SIZE = 20;
+export declare const ARROW_DEFAULT_POSITION = 9;
+export declare const TOOLTIP_ARROW_PADDING_X: number;
+export declare const TOOLTIP_ARROW_PADDING_Y = 13;
+export declare class TooltipDomHelper {
+    private static readonly groupClass;
+    private static readonly headClass;
+    private static readonly textItemClass;
+    private static readonly maxContentWidth;
+    static fillForMulty2DCharts(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, htmlHandler?: TooltipHtml): void;
+    static fillForPolarChart(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, chart: PolarChartModel, data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, markColor: string, htmlHandler?: TooltipHtml): void;
+    static fillForIntervalChart(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: IntervalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, htmlHandler?: TooltipHtml): void;
+    static getRecalcedCoordinateByArrow(coordinate: [number, number], tooltipBlock: Selection<HTMLElement, unknown, HTMLElement, any>, blockSize: Size, tooltipArrow: Selection<BaseType, unknown, HTMLElement, any>, translateX?: number, translateY?: number): [number, number];
+    private static renderHead;
+    private static fillValuesContent;
+    private static getTooltipItemHtml;
+    private static setTooltipArrowCoordinate;
+    private static fillContentByFunction;
+    private static setWhiteSpaceForTextBlocks;
+}

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

@@ -0,0 +1,103 @@
+import { ValueFormatter, } from "../../valueFormatter";
+import { TooltipHelper } from './tooltipHelper';
+import { Helper } from '../../helpers/helper';
+export const ARROW_SIZE = 20;
+export const ARROW_DEFAULT_POSITION = 9;
+export const TOOLTIP_ARROW_PADDING_X = ARROW_DEFAULT_POSITION - (ARROW_SIZE * Math.sqrt(2) - ARROW_SIZE) / 2 + 14;
+export const TOOLTIP_ARROW_PADDING_Y = 13;
+export class TooltipDomHelper {
+    static fillForMulty2DCharts(contentBlock, charts, data, dataOptions, keyValue, htmlHandler) {
+        contentBlock.html('');
+        if (!htmlHandler) {
+            this.renderHead(contentBlock, keyValue);
+            charts.forEach(chart => {
+                chart.data.valueFields.forEach((field, index) => {
+                    const html = this.getTooltipItemHtml(data, dataOptions, keyValue, field);
+                    this.fillValuesContent(contentBlock, chart.style.elementColors[index % chart.style.elementColors.length], html);
+                });
+            });
+        }
+        else {
+            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
+        }
+    }
+    static fillForPolarChart(contentBlock, chart, data, dataOptions, keyValue, markColor, htmlHandler) {
+        contentBlock.html('');
+        if (!htmlHandler) {
+            this.renderHead(contentBlock, keyValue);
+            const html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField);
+            this.fillValuesContent(contentBlock, markColor, html);
+        }
+        else {
+            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
+        }
+    }
+    static fillForIntervalChart(contentBlock, charts, data, dataOptions, keyValue, htmlHandler) {
+        contentBlock.html('');
+        if (!htmlHandler) {
+            this.renderHead(contentBlock, keyValue);
+            charts.forEach(chart => {
+                let html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField1);
+                this.fillValuesContent(contentBlock, chart.style.elementColors[0 % chart.style.elementColors.length], html);
+                html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField2);
+                this.fillValuesContent(contentBlock, chart.style.elementColors[0 % chart.style.elementColors.length], html);
+            });
+        }
+        else {
+            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
+        }
+    }
+    static getRecalcedCoordinateByArrow(coordinate, tooltipBlock, blockSize, tooltipArrow, translateX = 0, translateY = 0) {
+        const tooltipBlockNode = tooltipBlock.node();
+        const horizontalPad = TooltipHelper.getHorizontalPad(coordinate[0], tooltipBlockNode.getBoundingClientRect().width, blockSize, translateX);
+        const verticalPad = TooltipHelper.getVerticalPad(coordinate[1], tooltipBlockNode.getBoundingClientRect().height, translateY);
+        this.setTooltipArrowCoordinate(tooltipArrow, TooltipHelper.getTooltipArrowPadding(tooltipBlockNode.getBoundingClientRect().width, horizontalPad));
+        return [coordinate[0] - TOOLTIP_ARROW_PADDING_X - horizontalPad,
+            coordinate[1] - TOOLTIP_ARROW_PADDING_Y - tooltipBlockNode.getBoundingClientRect().height - verticalPad];
+    }
+    static renderHead(contentBlock, keyValue) {
+        contentBlock.append('div')
+            .attr('class', `${this.groupClass} ${this.headClass}`)
+            .text(keyValue);
+    }
+    static fillValuesContent(contentBlock, markColor, tooltipHtml) {
+        const group = contentBlock.append('div')
+            .attr('class', this.groupClass);
+        if (markColor)
+            group.append('div')
+                .attr('class', 'tooltip-color')
+                .append('span')
+                .attr('class', 'tooltip-circle')
+                .style('background-color', markColor);
+        group.append('div')
+            .attr('class', 'tooltip-texts')
+            .append('div')
+            .attr('class', this.textItemClass)
+            .html(tooltipHtml);
+    }
+    static getTooltipItemHtml(data, dataOptions, keyValue, valueField) {
+        const row = data[dataOptions.dataSource].find(d => d[dataOptions.keyField.name] === keyValue);
+        const text = `<span class="tooltip-field-title">${valueField.title}</span>
+            <span class="tooltip-field-value">${ValueFormatter.formatField(valueField.format, row[valueField.name])}</span>`;
+        return text;
+    }
+    static setTooltipArrowCoordinate(tooltipArrow, horizontalPad) {
+        if (horizontalPad !== 0)
+            tooltipArrow.style('left', `${ARROW_DEFAULT_POSITION + Math.floor(horizontalPad)}px`);
+        else
+            tooltipArrow.style('left', `${ARROW_DEFAULT_POSITION}px`);
+    }
+    static fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler) {
+        const row = Helper.getRowsByKeys([keyValue], dataOptions.keyField.name, data[dataOptions.dataSource])[0];
+        contentBlock.html(htmlHandler(row));
+        this.setWhiteSpaceForTextBlocks(contentBlock);
+        contentBlock.selectAll('.tooltip-text-item').style('display', 'block');
+    }
+    static setWhiteSpaceForTextBlocks(contentBlock) {
+        contentBlock.selectAll(`.${this.textItemClass}`).style('white-space', 'pre-wrap');
+    }
+}
+TooltipDomHelper.groupClass = 'tooltip-group';
+TooltipDomHelper.headClass = 'tooltip-head';
+TooltipDomHelper.textItemClass = 'tooltip-text-item';
+TooltipDomHelper.maxContentWidth = 500;

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

@@ -0,0 +1,18 @@
+import { AxisScale } from "d3-axis";
+import { ChartOrientation } from "../../../config/config";
+import { BlockMargin, Orient } from "../../../model/model";
+import { TooltipLineAttributes } from "./tooltipDomHelper";
+import { Size } from "../../../config/config";
+import { TooltipCoordinate } from "./newTooltip/newTooltip";
+import { TooltipPreCoordinate } from "./newTooltip/newTooltipService";
+export declare class TooltipHelper {
+    private static convexsize;
+    static getHorizontalPad(coordinateX: number, tooltipBlockWidth: number, blockSize: Size, translateX: number): number;
+    static getVerticalPad(coordinateY: number, tooltipBlockHeight: number, translateY: number): number;
+    static getTooltipArrowPadding(tooltipBlockWidth: number, horizontalPad: number): number;
+    static getCoordinateByPointer(pointer: [number, number]): TooltipCoordinate;
+    static getTooltipFixedCoordinate(scaleKey: AxisScale<any>, margin: BlockMargin, keyValue: string, blockBoundingRect: DOMRect, tooltipBoundingRect: DOMRect, keyAxisOrient: Orient, winWidth: number, winHeight: number): TooltipCoordinate;
+    static getTooltipCursorCoordinate(pointer: [number, number], blockBoundingRect: DOMRect, tooltipBoundingRect: DOMRect): TooltipCoordinate;
+    static getTooltipLineAttributes(scaleKey: AxisScale<any>, margin: BlockMargin, key: string, chartOrientation: ChartOrientation, blockSize: Size): TooltipLineAttributes;
+    static recalcToolTipCoordinateByViewPort(blockBounding: DOMRect, tooltipBounding: DOMRect, preCoordinate: TooltipPreCoordinate, winWidth: number, winHeight: number): TooltipCoordinate;
+}

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

@@ -0,0 +1,93 @@
+import { Scale } from "../scale/scale";
+import { ARROW_DEFAULT_POSITION, TOOLTIP_ARROW_PADDING_X, TOOLTIP_ARROW_PADDING_Y } from "./tooltipDomHelper";
+import { TooltipService } from "./newTooltip/newTooltipService";
+export class TooltipHelper {
+    static getHorizontalPad(coordinateX, tooltipBlockWidth, blockSize, translateX) {
+        let pad = 0;
+        if (tooltipBlockWidth + coordinateX - TOOLTIP_ARROW_PADDING_X + translateX > blockSize.width)
+            pad = tooltipBlockWidth + coordinateX - TOOLTIP_ARROW_PADDING_X + translateX - blockSize.width;
+        return pad;
+    }
+    static getVerticalPad(coordinateY, tooltipBlockHeight, translateY) {
+        let pad = 0;
+        if (coordinateY - TOOLTIP_ARROW_PADDING_Y - tooltipBlockHeight + translateY < -tooltipBlockHeight - TOOLTIP_ARROW_PADDING_Y)
+            pad = coordinateY;
+        return pad; // return zero or sub zero
+    }
+    static getTooltipArrowPadding(tooltipBlockWidth, horizontalPad) {
+        return horizontalPad > tooltipBlockWidth
+            ? tooltipBlockWidth - ARROW_DEFAULT_POSITION - 20 * Math.sqrt(2)
+            : horizontalPad; // If tooltip arrow has coordinate outside svg, it take X position in end of tooltip block
+    }
+    static getCoordinateByPointer(pointer) {
+        const coordinate = {
+            left: null,
+            top: null,
+            right: null,
+            bottom: null
+        };
+        coordinate.left = pointer[0] + 'px';
+        coordinate.top = pointer[1] + 'px';
+        return coordinate;
+    }
+    static getTooltipFixedCoordinate(scaleKey, margin, keyValue, blockBoundingRect, tooltipBoundingRect, keyAxisOrient, winWidth, winHeight) {
+        const coordinate = {
+            top: null,
+            left: null
+        };
+        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
+            coordinate.left = Scale.getScaledValue(scaleKey, keyValue) + margin.left - tooltipBoundingRect.width / 2;
+            if (keyAxisOrient === 'bottom')
+                coordinate.top = margin.top - 5 - tooltipBoundingRect.height;
+            else
+                coordinate.top = blockBoundingRect.height - margin.bottom;
+        }
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            coordinate.top = Scale.getScaledValue(scaleKey, keyValue) + margin.top - tooltipBoundingRect.height / 2;
+            if (keyAxisOrient === 'left')
+                coordinate.left = blockBoundingRect.width - margin.right;
+            else
+                coordinate.left = margin.left - tooltipBoundingRect.width;
+        }
+        return this.recalcToolTipCoordinateByViewPort(blockBoundingRect, tooltipBoundingRect, coordinate, winWidth, winHeight);
+    }
+    static getTooltipCursorCoordinate(pointer, blockBoundingRect, tooltipBoundingRect) {
+        const pad = 10;
+        const coordinate = {
+            top: pointer[1] + pad,
+            left: pointer[0] + pad
+        };
+        return this.recalcToolTipCoordinateByViewPort(blockBoundingRect, tooltipBoundingRect, coordinate, window.innerWidth, window.innerHeight);
+    }
+    static getTooltipLineAttributes(scaleKey, margin, key, chartOrientation, blockSize) {
+        const attributes = {
+            x1: 0, x2: 0, y1: 0, y2: 0
+        };
+        if (chartOrientation === 'vertical') {
+            attributes.x1 = Math.ceil(Scale.getScaledValue(scaleKey, key) + margin.left) - 0.5;
+            attributes.x2 = Math.ceil(Scale.getScaledValue(scaleKey, key) + margin.left) - 0.5;
+            attributes.y1 = margin.top - this.convexsize;
+            attributes.y2 = blockSize.height - margin.bottom + this.convexsize * 2;
+        }
+        else {
+            attributes.x1 = margin.left - this.convexsize;
+            attributes.x2 = blockSize.width - margin.right + this.convexsize * 2;
+            attributes.y1 = Scale.getScaledValue(scaleKey, key) + margin.top;
+            attributes.y2 = Scale.getScaledValue(scaleKey, key) + margin.top;
+        }
+        return attributes;
+    }
+    static recalcToolTipCoordinateByViewPort(blockBounding, tooltipBounding, preCoordinate, winWidth, winHeight) {
+        const res = TooltipService.getTooltipByWindow(tooltipBounding, preCoordinate, {
+            width: winWidth,
+            height: winHeight
+        }, blockBounding);
+        return {
+            left: res.left + 'px',
+            top: res.top + 'px',
+            right: null,
+            bottom: null
+        };
+    }
+}
+TooltipHelper.convexsize = 5;

package/lib/engine/filterManager/filterEventManager.d.ts

@@ -0,0 +1,33 @@
+import { AxisScale } from "d3-axis";
+import { MdtChartsDataRow, Size } from "../../config/config";
+import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel, DonutChartSettings } from "../../model/model";
+import { Block } from "../block/block";
+export declare type FilterCallback = (rows: MdtChartsDataRow[]) => void;
+export interface SelectDetails {
+    multySelect: boolean;
+    keyValue?: string;
+}
+export declare class FilterEventManager {
+    private callback;
+    private fullDataset;
+    private filterable;
+    private block;
+    private selectedKeys;
+    constructor(callback: FilterCallback, fullDataset: MdtChartsDataRow[], filtrable: boolean, keyFieldName: string, selectedIds?: number[]);
+    setBlock(block: Block): void;
+    getSelectedKeys(): string[];
+    updateData(newDataset: MdtChartsDataRow[]): void;
+    isSelected(keyValue: string): boolean;
+    clearKeysFor2D(options: TwoDimensionalOptionsModel): void;
+    clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel, donutSettings: DonutChartSettings): void;
+    private setKey;
+    private addId;
+    private removeId;
+    private processKey;
+    setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel, donutSettings: DonutChartSettings): void;
+    event2DUpdate(options: TwoDimensionalOptionsModel): void;
+    registerEventFor2D(scaleKey: AxisScale<any>, margin: BlockMargin, blockSize: Size, options: TwoDimensionalOptionsModel): void;
+    private registerEventToDonut;
+    private getMultyParamByEvent;
+    private getMultySelectParam;
+}