mdt-charts 1.27.1 → 1.27.2

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

@@ -1,25 +1,25 @@
-import { select, pointer, } from 'd3-selection';
+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';
+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";
 import { MarkDot } from "../../../engine/features/markDots/markDot";
 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') {
+            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') {
+            else if (model.options.type === "polar") {
                 this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
             }
         }
@@ -32,7 +32,7 @@ export class Tooltip {
         if (scales.key.domain().length === 0)
             return;
         const tooltipParams = {
-            type: '2d',
+            type: "2d",
             scales,
             margin,
             blockSize,
@@ -47,7 +47,7 @@ export class 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 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] });
@@ -58,29 +58,30 @@ export class Tooltip {
         const tooltipLine = TooltipComponentsManager.renderTooltipLine(block);
         const tipBox = TipBox.renderOrGet(block, args.margin, args.blockSize);
         let currentKey = null;
-        tipBox.on('mousemove', function (e) {
-            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') {
+        tipBox.on("mousemove", function (e) {
+            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.fillForMulti2DCharts(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, args.tooltipOptions);
-                if (args.tooltipSettings.position === 'fixed') {
+                if (args.type === "2d")
+                    TooltipDomHelper.fillForMulti2DCharts(tooltipContent, args.charts.filter((ch) => ch.tooltip.show), data, args.dataOptions, keyValue, args.tooltipOptions);
+                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);
-                if (args.type === '2d') {
-                    args.charts.forEach(chart => {
+                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')
+                            if (chart.type !== "bar")
                                 MarkDot.tryMakeMarkDotVisible(oldElements, chart.markersOptions, false);
                             ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
                             if (block.filterEventManager.getSelectedKeys().length > 0) {
@@ -88,10 +89,11 @@ export class Tooltip {
                             }
                         }
                         const selectedElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
-                        if (chart.type !== 'bar')
+                        if (chart.type !== "bar")
                             MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
                         ElementHighlighter.toggleActivityStyle(selectedElements, true);
-                        if (block.filterEventManager.getSelectedKeys().length === 0 || block.filterEventManager.isSelected(keyValue)) {
+                        if (block.filterEventManager.getSelectedKeys().length === 0 ||
+                            block.filterEventManager.isSelected(keyValue)) {
                             ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
                         }
                     });
@@ -99,10 +101,10 @@ export class Tooltip {
                 currentKey = keyValue;
             }
         });
-        tipBox.on('mouseleave', function () {
+        tipBox.on("mouseleave", function () {
             TooltipComponentsManager.hideComponent(tooltipBlock.getEl());
             TooltipComponentsManager.hideComponent(tooltipLine);
-            if (args.type === '2d')
+            if (args.type === "2d")
                 ElementHighlighter.removeUnselected2DHighlight(block, args.dataOptions.keyField.name, args.charts, block.transitionManager.durations.markerHover);
             currentKey = null;
         });
@@ -111,19 +113,21 @@ export class Tooltip {
         const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
         const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
         let tooltipArrow;
-        if (tooltipSettings.position === 'fixed')
+        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());
+        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) {
+        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);
-            if (tooltipSettings.position === 'fixed') {
+            TooltipDomHelper.fillForPolarChart(tooltipContent, chart, data, dataOptions, dataRow.data[dataOptions.keyField.name], select(this).select("path").style("fill"), tooltipOptions);
+            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;
@@ -131,13 +135,14 @@ export class Tooltip {
                 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]))) {
+            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) {
+        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));
@@ -151,7 +156,7 @@ export class Tooltip {
     }
 }
 Tooltip.tooltipBlockClass = NewTooltip.tooltipBlockClass;
-Tooltip.tooltipLineClass = 'mdt-charts-tooltip-line';
-Tooltip.tooltipWrapperClass = 'mdt-charts-tooltip-wrapper';
-Tooltip.tooltipContentClass = 'mdt-charts-tooltip-content';
-Tooltip.tooltipArrowClass = 'mdt-charts-tooltip-arrow';
+Tooltip.tooltipLineClass = "mdt-charts-tooltip-line";
+Tooltip.tooltipWrapperClass = "mdt-charts-tooltip-wrapper";
+Tooltip.tooltipContentClass = "mdt-charts-tooltip-content";
+Tooltip.tooltipArrowClass = "mdt-charts-tooltip-arrow";

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

@@ -1,8 +1,8 @@
-import { Selection, BaseType } from 'd3-selection';
+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';
+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;

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

@@ -1,23 +1,20 @@
-import { select } from 'd3-selection';
+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';
+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');
+        tooltipBlock.style("display", "block");
     }
     static hideComponent(tooltipBlock) {
-        tooltipBlock.style('display', 'none');
+        tooltipBlock.style("display", "none");
     }
     static renderTooltipWrapper(block) {
-        let tooltipWrapper = block.getWrapper()
-            .select(`.${Tooltip.tooltipWrapperClass}`);
+        let tooltipWrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
         if (tooltipWrapper.empty())
-            block.getWrapper()
-                .append('div')
-                .attr('class', Tooltip.tooltipWrapperClass);
+            block.getWrapper().append("div").attr("class", Tooltip.tooltipWrapperClass);
     }
     static renderTooltipBlock(block, translateX = 0, translateY = 0) {
         const wrapper = block.getWrapper().select(`.${Tooltip.tooltipWrapperClass}`);
@@ -25,70 +22,63 @@ export class TooltipComponentsManager {
         let tooltipBlock = tooltipService.findInWrapper(wrapper);
         if (tooltipBlock.empty()) {
             tooltipBlock = tooltipService.render(wrapper);
-            tooltipBlock
-                .style('position', 'absolute')
-                .style('display', 'none');
+            tooltipBlock.style("position", "absolute").style("display", "none");
         }
         if (translateX !== 0 || translateY !== 0)
-            tooltipBlock.style('transform', `translate(${translateX}px, ${translateY}px)`);
+            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);
+            tooltipContentBlock = select(document.createElement("div")).attr("class", Tooltip.tooltipContentClass);
             tooltipBlock.appendContent(tooltipContentBlock.node());
         }
         return tooltipContentBlock;
     }
     static renderTooltipLine(block) {
-        let tooltipLine = block.svg.getChartBlock()
-            .select(`.${Tooltip.tooltipLineClass}`);
+        let tooltipLine = block.svg.getChartBlock().select(`.${Tooltip.tooltipLineClass}`);
         if (tooltipLine.empty())
-            tooltipLine = block.svg.getChartBlock()
-                .append('line')
-                .attr('class', Tooltip.tooltipLineClass)
-                .lower();
+            tooltipLine = block.svg.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') {
+        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);
+                .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);
+                .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'));
+        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`);
+                .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) {
@@ -96,27 +86,34 @@ export class TooltipComponentsManager {
         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) {
+        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)
+                .style("right", tooltipCoordinate.right)
+                .style("bottom", tooltipCoordinate.bottom)
+                .style("top", tooltipCoordinate.top)
                 .interrupt()
                 .transition()
                 .duration(transition)
                 .ease(easeLinear)
-                .style('left', tooltipCoordinate.left);
+                .style("left", tooltipCoordinate.left);
         }
-        else if (chartOrientation === 'horizontal' && tooltipBlock.style('top') !== '0px' && parseInt(tooltipBlock.style('bottom')) > 0 && tooltipCoordinate.bottom === null) {
+        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)
+                .style("right", tooltipCoordinate.right)
+                .style("bottom", tooltipCoordinate.bottom)
+                .style("left", tooltipCoordinate.left)
                 .interrupt()
                 .transition()
                 .duration(transition)
                 .ease(easeLinear)
-                .style('top', tooltipCoordinate.top);
+                .style("top", tooltipCoordinate.top);
         }
         else {
             tooltip.setCoordinate(tooltipCoordinate);

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

@@ -1,4 +1,4 @@
-import { Selection, BaseType } from 'd3-selection';
+import { Selection, BaseType } from "d3-selection";
 import { MdtChartsDataSource, TooltipOptions } from "../../../config/config";
 import { OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
 import { Size } from "../../../config/config";

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

@@ -1,7 +1,7 @@
-import { ValueFormatter, } from "../../valueFormatter";
-import { TooltipHelper } from './tooltipHelper';
-import { Helper } from '../../helpers/helper';
-import { getMarkerCreator } from '../legend/legendMarkerCreator';
+import { ValueFormatter } from "../../valueFormatter";
+import { TooltipHelper } from "./tooltipHelper";
+import { Helper } from "../../helpers/helper";
+import { getMarkerCreator } from "../legend/legendMarkerCreator";
 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;
@@ -9,7 +9,7 @@ export const TOOLTIP_ARROW_PADDING_Y = 13;
 export class TooltipDomHelper {
     static fillForMulti2DCharts(contentBlock, charts, data, dataOptions, keyValue, tooltipOptions) {
         const chartDataRows = [];
-        charts.forEach(chart => {
+        charts.forEach((chart) => {
             chart.data.valueFields.forEach((field, index) => {
                 chartDataRows.push({
                     field,
@@ -21,11 +21,13 @@ export class TooltipDomHelper {
         this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
     }
     static fillForPolarChart(contentBlock, chart, data, dataOptions, keyValue, markColor, tooltipOptions) {
-        const chartDataRows = [{
+        const chartDataRows = [
+            {
                 field: chart.data.valueField,
                 markColor,
                 markerCreator: this.getMarkerCreator(chart.legend)
-            }];
+            }
+        ];
         this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
     }
     static getRecalcedCoordinateByArrow(coordinate, tooltipBlock, blockSize, tooltipArrow, translateX = 0, translateY = 0) {
@@ -33,25 +35,25 @@ export class TooltipDomHelper {
         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];
+        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);
+        contentBlock.append("div").attr("class", `${this.groupClass} ${this.headClass}`).text(keyValue);
     }
     static fillValuesContent(contentBlock, { markColor, tooltipHtml, markerCreator }) {
-        const group = contentBlock.append('div')
-            .attr('class', this.groupClass);
+        const group = contentBlock.append("div").attr("class", this.groupClass);
         if (markColor) {
-            const colorBlock = group.append('div').attr('class', 'tooltip-color');
+            const colorBlock = group.append("div").attr("class", "tooltip-color");
             markerCreator === null || markerCreator === void 0 ? void 0 : markerCreator.renderMarker(colorBlock, markColor);
         }
-        group.append('div')
-            .attr('class', 'tooltip-texts')
-            .append('div')
-            .attr('class', this.textItemClass)
+        group
+            .append("div")
+            .attr("class", "tooltip-texts")
+            .append("div")
+            .attr("class", this.textItemClass)
             .html(tooltipHtml);
     }
     static getTooltipItemHtml(row, valueField, tooltipOptions) {
@@ -70,18 +72,18 @@ export class TooltipDomHelper {
     }
     static setTooltipArrowCoordinate(tooltipArrow, horizontalPad) {
         if (horizontalPad !== 0)
-            tooltipArrow.style('left', `${ARROW_DEFAULT_POSITION + Math.floor(horizontalPad)}px`);
+            tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION + Math.floor(horizontalPad)}px`);
         else
-            tooltipArrow.style('left', `${ARROW_DEFAULT_POSITION}px`);
+            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');
+        contentBlock.selectAll(".tooltip-text-item").style("display", "block");
     }
     static setWhiteSpaceForTextBlocks(contentBlock) {
-        contentBlock.selectAll(`.${this.textItemClass}`).style('white-space', 'pre-wrap');
+        contentBlock.selectAll(`.${this.textItemClass}`).style("white-space", "pre-wrap");
     }
     static getMarkerCreator(options) {
         return getMarkerCreator(options, { default: { cssClass: TooltipDomHelper.tooltipLegendDefaultMarker } });
@@ -89,19 +91,23 @@ export class TooltipDomHelper {
     static addAggregatorTooltipItem(tooltipOptions, data, tooltipItems) {
         if (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.aggregator) {
             const aggregatorContent = tooltipOptions.aggregator.content({ row: data });
-            const aggregatorHtml = aggregatorContent.type === 'plainText'
+            const aggregatorHtml = aggregatorContent.type === "plainText"
                 ? aggregatorContent.textContent
                 : this.getTooltipContentItemHtml(aggregatorContent.caption, aggregatorContent.value);
-            const tooltipAggregatorItem = { markColor: undefined, tooltipHtml: aggregatorHtml, markerCreator: undefined };
-            if (tooltipOptions.aggregator.position === 'underValues')
+            const tooltipAggregatorItem = {
+                markColor: undefined,
+                tooltipHtml: aggregatorHtml,
+                markerCreator: undefined
+            };
+            if (tooltipOptions.aggregator.position === "underValues")
                 tooltipItems.push(tooltipAggregatorItem);
             else
                 tooltipItems.unshift(tooltipAggregatorItem);
         }
     }
     static fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions) {
-        const row = data[dataOptions.dataSource].find(d => d[dataOptions.keyField.name] === keyValue);
-        contentBlock.html('');
+        const row = data[dataOptions.dataSource].find((d) => d[dataOptions.keyField.name] === keyValue);
+        contentBlock.html("");
         if (!(tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.html)) {
             const tooltipItems = [];
             this.renderHead(contentBlock, keyValue);
@@ -114,14 +120,16 @@ export class TooltipDomHelper {
                 });
             });
             this.addAggregatorTooltipItem(tooltipOptions, row, tooltipItems);
-            tooltipItems.forEach(item => { this.fillValuesContent(contentBlock, item); });
+            tooltipItems.forEach((item) => {
+                this.fillValuesContent(contentBlock, item);
+            });
         }
         else {
             this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, tooltipOptions.html);
         }
     }
 }
-TooltipDomHelper.groupClass = 'tooltip-group';
-TooltipDomHelper.headClass = 'tooltip-head';
-TooltipDomHelper.textItemClass = 'tooltip-text-item';
-TooltipDomHelper.tooltipLegendDefaultMarker = 'tooltip-circle';
+TooltipDomHelper.groupClass = "tooltip-group";
+TooltipDomHelper.headClass = "tooltip-head";
+TooltipDomHelper.textItemClass = "tooltip-text-item";
+TooltipDomHelper.tooltipLegendDefaultMarker = "tooltip-circle";

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

@@ -10,7 +10,8 @@ export class TooltipHelper {
     }
     static getVerticalPad(coordinateY, tooltipBlockHeight, translateY) {
         let pad = 0;
-        if (coordinateY - TOOLTIP_ARROW_PADDING_Y - tooltipBlockHeight + translateY < -tooltipBlockHeight - TOOLTIP_ARROW_PADDING_Y)
+        if (coordinateY - TOOLTIP_ARROW_PADDING_Y - tooltipBlockHeight + translateY <
+            -tooltipBlockHeight - TOOLTIP_ARROW_PADDING_Y)
             pad = coordinateY;
         return pad; // return zero or sub zero
     }
@@ -26,8 +27,8 @@ export class TooltipHelper {
             right: null,
             bottom: null
         };
-        coordinate.left = pointer[0] + 'px';
-        coordinate.top = pointer[1] + 'px';
+        coordinate.left = pointer[0] + "px";
+        coordinate.top = pointer[1] + "px";
         return coordinate;
     }
     static getTooltipFixedCoordinate(scaleKey, margin, keyValue, blockBoundingRect, tooltipBoundingRect, keyAxisOrient, winWidth, winHeight) {
@@ -35,16 +36,16 @@ export class TooltipHelper {
             top: null,
             left: null
         };
-        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
+        if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
             coordinate.left = Scale.getScaledValue(scaleKey, keyValue) + margin.left - tooltipBoundingRect.width / 2;
-            if (keyAxisOrient === 'bottom')
+            if (keyAxisOrient === "bottom")
                 coordinate.top = margin.top - 5 - tooltipBoundingRect.height;
             else
                 coordinate.top = blockBoundingRect.height - margin.bottom;
         }
-        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+        if (keyAxisOrient === "left" || keyAxisOrient === "right") {
             coordinate.top = Scale.getScaledValue(scaleKey, keyValue) + margin.top - tooltipBoundingRect.height / 2;
-            if (keyAxisOrient === 'left')
+            if (keyAxisOrient === "left")
                 coordinate.left = blockBoundingRect.width - margin.right;
             else
                 coordinate.left = margin.left - tooltipBoundingRect.width;
@@ -61,9 +62,12 @@ export class TooltipHelper {
     }
     static getTooltipLineAttributes(scaleKey, margin, key, chartOrientation, blockSize) {
         const attributes = {
-            x1: 0, x2: 0, y1: 0, y2: 0
+            x1: 0,
+            x2: 0,
+            y1: 0,
+            y2: 0
         };
-        if (chartOrientation === 'vertical') {
+        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;
@@ -83,8 +87,8 @@ export class TooltipHelper {
             height: winHeight
         }, blockBounding);
         return {
-            left: res.left + 'px',
-            top: res.top + 'px',
+            left: res.left + "px",
+            top: res.top + "px",
             right: null,
             bottom: null
         };