mdt-charts 1.30.0 → 1.30.1

package/jest.config.js

@@ -0,0 +1,4 @@
+/** @type {import('jest').Config} */
+module.exports = {
+	testEnvironment: "jsdom"
+};

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -1,7 +1,7 @@
 import { select } from "d3-selection";
 import { easeLinear } from "d3-ease";
 import { interrupt } from "d3-transition";
-import { DomHelper, SelectionCondition } from "../helpers/domHelper";
+import { DomSelectionHelper, SelectionCondition } from "../helpers/domSelectionHelper";
 import { Donut } from "../polarNotation/donut/donut";
 import { MarkDot } from "../features/markDots/markDot";
 import { Helper } from "../helpers/helper";
@@ -66,18 +66,18 @@ export class ElementHighlighter {
         });
     }
     static removeDonutHighlightingByKeys(arcSegments, keyFieldName, keyValues, margin, blockSize, donutThickness) {
-        const segments = DomHelper.getChartElementsByKeys(arcSegments, true, keyFieldName, keyValues, SelectionCondition.Exclude);
+        const segments = DomSelectionHelper.getChartElementsByKeys(arcSegments, true, keyFieldName, keyValues, SelectionCondition.Exclude);
         this.toggleDonutHighlightState(segments, margin, blockSize, donutThickness, 0, false);
     }
     static setInactiveFor2D(block, keyFieldName, charts) {
         charts.forEach((chart) => {
-            const elems = DomHelper.get2DChartElements(block, chart);
+            const elems = DomSelectionHelper.get2DChartElements(block, chart);
             if (block.filterEventManager.getSelectedKeys().length === 0) {
                 this.toggleActivityStyle(elems, true);
             }
             else {
-                const unselectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
-                const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys());
+                const unselectedElems = DomSelectionHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
+                const selectedElems = DomSelectionHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys());
                 this.toggleActivityStyle(unselectedElems, false);
                 this.toggleActivityStyle(selectedElems, true);
             }
@@ -85,7 +85,7 @@ export class ElementHighlighter {
     }
     static remove2DChartsFullHighlighting(block, charts, transitionDuration = 0) {
         charts.forEach((chart) => {
-            const elems = DomHelper.get2DChartElements(block, chart);
+            const elems = DomSelectionHelper.get2DChartElements(block, chart);
             if (chart.type !== "bar")
                 MarkDot.tryMakeMarkDotVisible(elems, chart.markersOptions, false);
             this.toggle2DElements(elems, false, chart, transitionDuration);
@@ -94,8 +94,8 @@ export class ElementHighlighter {
     }
     static removeUnselected2DHighlight(block, keyFieldName, charts, transitionDuration) {
         charts.forEach((chart) => {
-            const elems = DomHelper.get2DChartElements(block, chart);
-            const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
+            const elems = DomSelectionHelper.get2DChartElements(block, chart);
+            const selectedElems = DomSelectionHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
             if (chart.type !== "bar")
                 MarkDot.tryMakeMarkDotVisible(selectedElems, chart.markersOptions, false);
             this.toggle2DElements(selectedElems, false, chart, transitionDuration);

package/lib/engine/elementHighlighter/selectHighlighter.js

@@ -1,15 +1,15 @@
 import { select } from "d3-selection";
 import { Legend } from "../features/legend/legend";
-import { DomHelper, SelectionCondition } from "../helpers/domHelper";
+import { DomSelectionHelper, SelectionCondition } from "../helpers/domSelectionHelper";
 import { Donut } from "../polarNotation/donut/donut";
-import { DonutHelper } from "../polarNotation/donut/DonutHelper";
 import { ElementHighlighter } from "./elementHighlighter";
 import { MarkDot } from "../../engine/features/markDots/markDot";
+import { DonutThicknessCalculator } from "../../model/notations/polar/donut/donutThicknessService";
 export class SelectHighlighter {
     static click2DHandler(multySelection, appendKey, keyValue, selectedKeys, block, options) {
         options.charts.forEach((chart) => {
-            const selectedElements = DomHelper.getChartElementsByKeys(DomHelper.get2DChartElements(block, chart), chart.isSegmented, options.data.keyField.name, [keyValue]);
-            const elements = DomHelper.get2DChartElements(block, chart);
+            const selectedElements = DomSelectionHelper.getChartElementsByKeys(DomSelectionHelper.get2DChartElements(block, chart), chart.isSegmented, options.data.keyField.name, [keyValue]);
+            const elements = DomSelectionHelper.get2DChartElements(block, chart);
             if (!appendKey) {
                 ElementHighlighter.toggle2DElements(selectedElements, false, chart, block.transitionManager.durations.markerHover);
                 if (chart.type !== "bar")
@@ -27,10 +27,10 @@ export class SelectHighlighter {
             if (multySelection) {
                 ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
                 ElementHighlighter.toggleActivityStyle(selectedElements, true);
-                ElementHighlighter.toggleActivityStyle(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
+                ElementHighlighter.toggleActivityStyle(DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
             }
             else {
-                ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggle2DElements(DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
                 ElementHighlighter.toggleActivityStyle(elements, false);
                 if (chart.type !== "bar")
                     MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
@@ -42,7 +42,7 @@ export class SelectHighlighter {
         });
     }
     static clickPolarHandler(multySelection, appendKey, selectedSegment, selectedKeys, margin, blockSize, block, options, arcItems, donutSettings) {
-        const donutThickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        const donutThickness = DonutThicknessCalculator.getThickness(donutSettings, blockSize, margin);
         if (!appendKey) {
             ElementHighlighter.toggleDonutHighlightState(selectedSegment, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false);
             ElementHighlighter.removeCloneForElem(block, options.data.keyField.name, selectedSegment);
@@ -62,7 +62,7 @@ export class SelectHighlighter {
             ElementHighlighter.removeShadowClone(block, options.data.keyField.name, selectedSegment, margin, blockSize, donutThickness);
             ElementHighlighter.renderArcCloneAndHighlight(block, margin, selectedSegment, blockSize, donutThickness);
             ElementHighlighter.toggleActivityStyle(selectedSegment, true);
-            ElementHighlighter.toggleActivityStyle(DomHelper.getChartElementsByKeys(Donut.getAllArcGroups(block), true, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
+            ElementHighlighter.toggleActivityStyle(DomSelectionHelper.getChartElementsByKeys(Donut.getAllArcGroups(block), true, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
         }
         else {
             ElementHighlighter.removeDonutHighlightingByKeys(arcItems, options.data.keyField.name, selectedKeys, margin, blockSize, donutThickness);
@@ -76,7 +76,7 @@ export class SelectHighlighter {
     }
     static clear2D(block, options) {
         options.charts.forEach((chart) => {
-            const elements = DomHelper.get2DChartElements(block, chart);
+            const elements = DomSelectionHelper.get2DChartElements(block, chart);
             ElementHighlighter.toggle2DElements(elements, false, chart, block.transitionManager.durations.markerHover);
             ElementHighlighter.toggleActivityStyle(elements, true);
             if (chart.type !== "bar")
@@ -84,7 +84,7 @@ export class SelectHighlighter {
         });
     }
     static clearPolar(margin, blockSize, block, options, arcItems, donutSettings) {
-        const donutThickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        const donutThickness = DonutThicknessCalculator.getThickness(donutSettings, blockSize, margin);
         ElementHighlighter.toggleDonutHighlightState(arcItems, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false);
         arcItems.each(function () {
             ElementHighlighter.removeCloneForElem(block, options.data.keyField.name, select(this));

package/lib/engine/features/axis/axisLabelDomHelper.js

@@ -1,5 +1,5 @@
 import { select } from "d3-selection";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from "../../../model/margin/twoDim/twoDimMarginModel";
 export class AxisLabelHelper {
@@ -42,7 +42,7 @@ export class AxisLabelHelper {
             maxLabelSize = axisOptions.labels.maxSize;
         else
             maxLabelSize = ((_c = (_b = (_a = scale).step) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : Infinity) - 4;
-        DomHelper.cropSvgLabels(axisTextBlocks, maxLabelSize);
+        DomSelectionHelper.cropSvgLabels(axisTextBlocks, maxLabelSize);
         if (axisOptions.labels.position === "straight" &&
             (axisOptions.orient === "top" || axisOptions.orient === "bottom")) {
             this.cropAndAlignExtremeLabels(block, maxLabelSize, axisOptions, blockSize);
@@ -84,7 +84,7 @@ export class AxisLabelHelper {
             lastLabel.attr("text-anchor", "start");
             lastLabel.attr("transform", `translate(${this.getTranslateNumber(maxLabelSize, lastLabel, marginRight)}, 0)`);
             if (crop)
-                DomHelper.cropSvgLabels(lastLabel, maxLabelSize / 2 + marginRight);
+                DomSelectionHelper.cropSvgLabels(lastLabel, maxLabelSize / 2 + marginRight);
         }
     }
     static cropAndAlignExtremeLabels(block, maxLabelSize, axisOptions, blockSize) {
@@ -100,7 +100,7 @@ export class AxisLabelHelper {
         if (axisOptions.translate.translateX - firstLabel.node().getBBox().width / 2 < 0) {
             firstLabel.attr("text-anchor", "start");
             firstLabel.attr("transform", `translate(${-axisOptions.translate.translateX}, 0)`);
-            DomHelper.cropSvgLabels(firstLabel, maxLabelSize / 2 + axisElementTranslate);
+            DomSelectionHelper.cropSvgLabels(firstLabel, maxLabelSize / 2 + axisElementTranslate);
         }
     }
     static getTranslateNumber(maxLabelSize, lastLabel, marginRight) {

package/lib/engine/features/embeddedLabels/embeddedLabels.js

@@ -1,5 +1,5 @@
 import { select } from "d3-selection";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { ValueFormatter } from "../../valueFormatter";
 import { EmbeddedLabelsDomHelper } from "./embeddedLabelsDomHelper";
@@ -7,7 +7,7 @@ import { EmbeddedLabelsHelper } from "./embeddedLabelsHelper";
 export class EmbeddedLabels {
     static render(block, bars, barAttrsHelper, field, type, keyAxisOrient, blockSize, margin, index, cssClasses) {
         const labelsGroup = this.renderGroup(block, Helper.getCssClassesWithElementIndex(cssClasses, index));
-        DomHelper.setCssClasses(labelsGroup, Helper.getCssClassesWithElementIndex(cssClasses, index));
+        DomSelectionHelper.setCssClasses(labelsGroup, Helper.getCssClassesWithElementIndex(cssClasses, index));
         bars.each((dataRow) => {
             this.renderLabel(labelsGroup, barAttrsHelper, dataRow, field, type, keyAxisOrient, blockSize, margin);
         });

package/lib/engine/features/embeddedLabels/embeddedLabelsDomHelper.js

@@ -1,5 +1,5 @@
 import { EmbeddedLabelsHelper } from "./embeddedLabelsHelper";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 export class EmbeddedLabelsDomHelper {
     static setLabelBlockAttrs(attrs, labelBlock, transitionDuration = 0) {
         return new Promise((resolve) => {
@@ -22,6 +22,6 @@ export class EmbeddedLabelsDomHelper {
             labelTextSpace = blockSize.width - margin.left - margin.right;
         else
             labelTextSpace = EmbeddedLabelsHelper.getSpaceSizeForType(position, barAttrs.width, margin, blockSize);
-        DomHelper.cropSvgLabels(labelBlock, labelTextSpace);
+        DomSelectionHelper.cropSvgLabels(labelBlock, labelTextSpace);
     }
 }

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

@@ -2,7 +2,7 @@ import { BaseType, Selection } from "d3-selection";
 import { MdtChartsDataSource } from "../../../config/config";
 import { LegendBlockModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
-import { SelectionCondition } from "../../helpers/domHelper";
+import { SelectionCondition } from "../../helpers/domSelectionHelper";
 import { ChartLegendEngineModel } from "./legendHelper";
 export interface LegendContentRenderingOptions {
     wrapperClasses: string[];

package/lib/engine/features/legend/legend.js

@@ -1,6 +1,6 @@
 import { select } from "d3-selection";
 import { ColorReader } from "../../colorReader/colorReader";
-import { SelectionCondition } from "../../helpers/domHelper";
+import { SelectionCondition } from "../../helpers/domSelectionHelper";
 import { LegendDomHelper } from "./legendDomHelper";
 import { LegendEventsManager } from "./legendEventsManager";
 import { LegendHelper } from "./legendHelper";

package/lib/engine/features/legend/legendDomHelper.js

@@ -1,8 +1,8 @@
-import { DomHelper } from "../../helpers/domHelper";
 import { Helper } from "../../helpers/helper";
 import { Legend } from "./legend";
 import { LegendHelper } from "./legendHelper";
 import { getNewLegendItemWidths } from "./legendWidthCalculator";
+import { getCssPropertyValue } from "../../../model/domUtils/cssUtils";
 export class LegendDomHelper {
     static setItemsTitles(items) {
         items.attr("title", (d) => d.textContent);
@@ -59,9 +59,7 @@ export class LegendDomHelper {
         }
     }
     static getItemsRightMargins(items) {
-        return items
-            .nodes()
-            .map((node) => Helper.getPXValueFromString(DomHelper.getCssPropertyValue(node, "margin-right")));
+        return items.nodes().map((node) => Helper.getPXValueFromString(getCssPropertyValue(node, "margin-right")));
     }
     static getItemsWidth(items) {
         return items.nodes().map((node) => node.getBoundingClientRect().width);

package/lib/engine/features/legend/legendHelper.js

@@ -71,10 +71,11 @@ export class LegendHelper {
     static getContentRenderingOptions(chartNotation, legendPosition, legendBlockModel) {
         const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
         const legendLabelClass = this.getLegendClassByChartNotation(chartNotation);
+        const centeredCssClass = "legend-block-centered";
         return {
             wrapperClasses: [
                 Legend.legendBlockClass,
-                chartNotation === "2d" ? "legend-block-centered" : "",
+                chartNotation === "2d" ? centeredCssClass : itemsDirection === "column" ? centeredCssClass : "",
                 this.service.getWrapperClassByItemsDirection(itemsDirection),
                 this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
             ],

package/lib/engine/features/markDots/markDot.js

@@ -1,6 +1,6 @@
 import { select } from "d3-selection";
 import { transition } from "d3-transition";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { NamesHelper } from "../../helpers/namesHelper";
 import { MarkDotHelper } from "./markDotsHelper";
@@ -45,7 +45,7 @@ export class MarkDot {
         const dots = block.svg
             .getChartGroup(chart.index)
             .selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
-        DomHelper.setChartElementColor(dots, chart.style.elementColors, valueFieldIndex, "stroke");
+        DomSelectionHelper.setChartElementColor(dots, chart.style.elementColors, valueFieldIndex, "stroke");
     }
     static getMarkDotForChart(block, chartCssClasses) {
         return block.getSvg().selectAll(`.${MarkDot.markerDotClass}${Helper.getCssClassesLine(chartCssClasses)}`);
@@ -64,8 +64,8 @@ export class MarkDot {
         markDots.classed(MarkDot.hiddenDotClass, !isHighlight);
     }
     static setClassesAndStyle(dots, cssClasses, vfIndex, elementColors) {
-        DomHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
-        DomHelper.setChartElementColor(dots, elementColors, vfIndex, "stroke");
+        DomSelectionHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
+        DomSelectionHelper.setChartElementColor(dots, elementColors, vfIndex, "stroke");
     }
     static setAttrs(block, dots, attrs, styles) {
         dots.attr("class", this.markerDotClass)

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

@@ -1,4 +1,4 @@
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 export class Title {
     static render(block, title, titleBlockModel, blockSize) {
         if (!title.textContent)
@@ -18,7 +18,7 @@ export class Title {
             .attr("dominant-baseline", attributes.dominantBaseline)
             .text(title.textContent)
             .style("font-size", `${title.fontSize}px`);
-        DomHelper.cropSvgLabels(titleBlock, attributes.maxWidth);
+        DomSelectionHelper.cropSvgLabels(titleBlock, attributes.maxWidth);
     }
     static getTitleAttributes(blockSize, titleBlockModel) {
         const coordinate = {

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

@@ -8,9 +8,10 @@ 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 { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { NewTooltip } from "./newTooltip/newTooltip";
 import { MarkDot } from "../../../engine/features/markDots/markDot";
+import { DonutThicknessCalculator } from "../../../model/notations/polar/donut/donutThicknessService";
 export class Tooltip {
     static render(block, model, data, tooltipOptions, scales) {
         TooltipComponentsManager.renderTooltipWrapper(block);
@@ -20,7 +21,7 @@ export class Tooltip {
                 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.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
+                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutThicknessCalculator.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
             }
         }
     }
@@ -78,9 +79,9 @@ export class Tooltip {
                 TooltipComponentsManager.showComponent(tooltipLine);
                 if (args.type === "2d") {
                     args.charts.forEach((chart) => {
-                        const elements = DomHelper.get2DChartElements(block, chart);
+                        const elements = DomSelectionHelper.get2DChartElements(block, chart);
                         if (!block.filterEventManager.isSelected(currentKey)) {
-                            const oldElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
+                            const oldElements = DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
                             if (chart.type !== "bar")
                                 MarkDot.tryMakeMarkDotVisible(oldElements, chart.markersOptions, false);
                             ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
@@ -88,7 +89,7 @@ export class Tooltip {
                                 ElementHighlighter.toggleActivityStyle(oldElements, false);
                             }
                         }
-                        const selectedElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
+                        const selectedElements = DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
                         if (chart.type !== "bar")
                             MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
                         ElementHighlighter.toggleActivityStyle(selectedElements, true);

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

@@ -58,10 +58,11 @@ export class TooltipDomHelper {
     }
     static getTooltipItemHtml(row, valueField, tooltipOptions) {
         const formattedValueByDefault = ValueFormatter.formatField(valueField.format, row[valueField.name]);
-        const formattedValue = (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.formatValue) ? tooltipOptions.formatValue({
-            rawValue: row[valueField.name],
-            autoFormattedValue: formattedValueByDefault
-        })
+        const formattedValue = (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.formatValue)
+            ? tooltipOptions.formatValue({
+                rawValue: row[valueField.name],
+                autoFormattedValue: formattedValueByDefault
+            })
             : formattedValueByDefault;
         const text = this.getTooltipContentItemHtml(valueField.title, formattedValue);
         return text;

package/lib/engine/features/valueLabels/valueLabels.js

@@ -2,7 +2,7 @@ import { NamesHelper } from "../../../engine/helpers/namesHelper";
 import { ValueLabelsAttrsProvider } from "../../../engine/features/valueLabels/valueLabelsHelper";
 import { Helper } from "../../../engine/helpers/helper";
 import { select } from "d3-selection";
-import { DomHelper } from "../../../engine/helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { CLASSES } from "../../../model/modelBuilder";
 import { ValueLabelsCollision } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
@@ -100,7 +100,8 @@ export class ChartValueLabels {
             .attr("y", (d) => attrs.y(d))
             .attr("transform", (d) => {
             var _a;
-            return ((_a = this.chart.valueLabels.rotation) === null || _a === void 0 ? void 0 : _a.angle) ? `rotate(${this.chart.valueLabels.rotation.angle}, ${attrs.x(d)}, ${attrs.y(d)})`
+            return ((_a = this.chart.valueLabels.rotation) === null || _a === void 0 ? void 0 : _a.angle)
+                ? `rotate(${this.chart.valueLabels.rotation.angle}, ${attrs.x(d)}, ${attrs.y(d)})`
                 : null;
         });
         const handleElements = () => {
@@ -126,7 +127,7 @@ export class ChartValueLabels {
     setClasses(textLabels, cssClasses, vfIndex) {
         textLabels.classed(ChartValueLabels.valueLabelClass, true);
         textLabels.classed(CLASSES.dataLabel, true);
-        DomHelper.setCssClasses(textLabels, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
+        DomSelectionHelper.setCssClasses(textLabels, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
     }
 }
 ChartValueLabels.valueLabelClass = NamesHelper.getClassName("value-label");

package/lib/engine/helpers/{domHelper.d.ts → domSelectionHelper.d.ts}

@@ -7,10 +7,9 @@ export declare enum SelectionCondition {
     Include = 0,
     Exclude = 1
 }
-export declare class DomHelper {
+export declare class DomSelectionHelper {
     static setCssClasses(elem: Selection<BaseType, unknown, any, unknown>, cssClasses: string[]): void;
     static get2DChartElements(block: Block, chart: TwoDimensionalChartModel): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
-    static getCssPropertyValue(node: Element, propertyName: string): string;
     static getSelectionNumericAttr(selection: Selection<BaseType, unknown, BaseType, unknown>, attrName: string): number;
     static setChartStyle(elements: Selection<BaseType, unknown, BaseType, unknown>, chartStyle: ChartStyle, fieldIndex: number, styleType: StyleColorType): void;
     static setChartElementColor(elements: Selection<BaseType, unknown, BaseType, unknown>, colorPalette: string[], fieldIndex: number, styleType: StyleColorType): void;

package/lib/engine/helpers/{domHelper.js → domSelectionHelper.js}

@@ -5,7 +5,7 @@ export var SelectionCondition;
     SelectionCondition[SelectionCondition["Include"] = 0] = "Include";
     SelectionCondition[SelectionCondition["Exclude"] = 1] = "Exclude";
 })(SelectionCondition || (SelectionCondition = {}));
-export class DomHelper {
+export class DomSelectionHelper {
     static setCssClasses(elem, cssClasses) {
         cssClasses.forEach((cssClass) => {
             elem.classed(cssClass, true);
@@ -17,9 +17,6 @@ export class DomHelper {
         else
             return Bar.get().getAllBarsForChart(block, chart.cssClasses);
     }
-    static getCssPropertyValue(node, propertyName) {
-        return window.getComputedStyle(node).getPropertyValue(propertyName);
-    }
     static getSelectionNumericAttr(selection, attrName) {
         return parseFloat(selection.attr(attrName));
     }

package/lib/engine/polarNotation/donut/donut.js

@@ -1,12 +1,13 @@
 import { interpolate } from "d3-interpolate";
 import { Aggregator } from "../../features/aggregator/aggregator";
-import { DonutHelper } from "./DonutHelper";
-import { DomHelper } from "../../helpers/domHelper";
+import { DonutHelper } from "./donutHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { ColorReader } from "../../colorReader/colorReader";
+import { DonutThicknessCalculator } from "../../../model/notations/polar/donut/donutThicknessService";
 export class Donut {
     static render(block, data, margin, chart, blockSize, settings) {
         const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
-        const thickness = DonutHelper.getThickness(settings, blockSize, margin);
+        const thickness = DonutThicknessCalculator.getThickness(settings, blockSize, margin);
         const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
         const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
         const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
@@ -24,7 +25,7 @@ export class Donut {
     }
     static update(block, data, margin, chart, blockSize, donutSettings, keyField) {
         const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
-        const thickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        const thickness = DonutThicknessCalculator.getThickness(donutSettings, blockSize, margin);
         const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
         const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
         const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, donutSettings.padAngle);
@@ -85,7 +86,7 @@ export class Donut {
             .each(function (d) {
             this._currentData = d;
         }); // _currentData используется для получения текущих данных внутри функции обновления.
-        DomHelper.setCssClasses(arcs, chart.cssClasses);
+        DomSelectionHelper.setCssClasses(arcs, chart.cssClasses);
         this.setElementsColor(items, chart);
     }
     static setElementsColor(arcItems, chart) {

package/lib/engine/polarNotation/donut/{DonutHelper.d.ts → donutHelper.d.ts}

@@ -1,9 +1,8 @@
 import { PieArcDatum, Arc, Pie } from "d3-shape";
 import { MdtChartsDataRow, Size, MdtChartsColorField } from "../../../config/config";
-import { BlockMargin, DonutChartSettings } from "../../../model/model";
+import { BlockMargin } from "../../../model/model";
 import { Translate } from "./donut";
 export declare class DonutHelper {
-    static getThickness(donutSettings: DonutChartSettings, blockSize: Size, margin: BlockMargin): number;
     static getArcCentroid(blockSize: Size, margin: BlockMargin, dataItem: PieArcDatum<MdtChartsDataRow>, donutThickness: number): [number, number];
     static getArcGeneratorObject(blockSize: Size, margin: BlockMargin, donutThickness: number): Arc<any, PieArcDatum<MdtChartsDataRow>>;
     static getOuterRadius(margin: BlockMargin, blockSize: Size): number;
@@ -12,6 +11,4 @@ export declare class DonutHelper {
     static getArcGenerator(outerRadius: number, innerRadius: number): Arc<any, PieArcDatum<MdtChartsDataRow>>;
     static getPieGenerator(valueField: string, padAngle: number): Pie<any, MdtChartsDataRow>;
     static mergeDataWithZeros(firstDataset: MdtChartsDataRow[], secondDataset: MdtChartsDataRow[], keyField: string, colorField: MdtChartsColorField): MdtChartsDataRow[];
-    private static getThicknessByUnit;
-    private static getChartBlockSize;
 }

package/lib/engine/polarNotation/donut/{DonutHelper.js → donutHelper.js}

@@ -1,16 +1,6 @@
 import { merge } from "d3-array";
 import { arc, pie } from "d3-shape";
-const MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS = 400;
 export class DonutHelper {
-    static getThickness(donutSettings, blockSize, margin) {
-        const thicknessOpts = donutSettings.thickness;
-        const chartBlockSize = this.getChartBlockSize(blockSize, margin);
-        if (thicknessOpts.value)
-            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.value, thicknessOpts.unit);
-        if (Math.min(chartBlockSize.width, chartBlockSize.height) > MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS)
-            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.max, thicknessOpts.unit);
-        return this.getThicknessByUnit(chartBlockSize, thicknessOpts.min, thicknessOpts.unit);
-    }
     static getArcCentroid(blockSize, margin, dataItem, donutThickness) {
         const arc = this.getArcGeneratorObject(blockSize, margin, donutThickness);
         return arc.centroid(dataItem);
@@ -60,16 +50,4 @@ export class DonutHelper {
         const sortedMerge = merge([secondDataset, onlyNew]);
         return sortedMerge;
     }
-    static getThicknessByUnit(chartBlockSize, valueInPx, unit) {
-        if (unit === "px")
-            return valueInPx;
-        const minSideSize = Math.min(chartBlockSize.width, chartBlockSize.height);
-        return (minSideSize / 2) * (valueInPx / 100);
-    }
-    static getChartBlockSize(blockSize, margin) {
-        return {
-            height: blockSize.height - margin.top - margin.bottom,
-            width: blockSize.width - margin.left - margin.right
-        };
-    }
 }

package/lib/engine/twoDimensionalNotation/area/area.js

@@ -1,7 +1,7 @@
 import { select } from "d3-selection";
 import { MarkDot } from "../../features/markDots/markDot";
 import { AreaGeneratorFactory } from "./areaHelper";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { getStackedDataWithOwn } from "../bar/stackedData/dataStacker";
 import { getStackedData, LineGeneratorFactory } from "../../../engine/twoDimensionalNotation/line/lineHelper";
@@ -37,7 +37,7 @@ export class Area {
             this.setChartFillStyle(chart, areaPath, valueIndex);
             if (chart.areaViewOptions.borderLine.on) {
                 const borderLinePath = chartGroup.select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-                DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, "stroke");
+                DomSelectionHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, "stroke");
             }
             MarkDot.updateColors(block, chart, valueIndex);
         });
@@ -122,7 +122,7 @@ export class Area {
             path.style("fill", `url(#${chart.areaViewOptions.fill.ids[valueIndex]})`);
         }
         else
-            DomHelper.setChartStyle(path, chart.style, valueIndex, "fill");
+            DomSelectionHelper.setChartStyle(path, chart.style, valueIndex, "fill");
     }
     createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
         return new AreaGeneratorFactory({
@@ -153,7 +153,7 @@ export class Area {
             .attr("class", Area.areaChartClass)
             .style("clip-path", `url(#${block.svg.getClipPathId()})`)
             .style("pointer-events", "none");
-        DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+        DomSelectionHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
         this.setChartFillStyle(chart, path, valueIndex);
     }
     renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex) {
@@ -166,8 +166,8 @@ export class Area {
             .style("fill", "none")
             .style("clip-path", `url(#${block.svg.getClipPathId()})`)
             .style("pointer-events", "none");
-        DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-        DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, "stroke");
+        DomSelectionHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+        DomSelectionHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, "stroke");
     }
     renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map((field) => field.name));
@@ -185,7 +185,7 @@ export class Area {
         const thisClass = this;
         areas.each(function (_, i) {
             thisClass.setChartFillStyle(chart, select(this), i);
-            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+            DomSelectionHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
         });
         stackedData.forEach((dataset, index) => {
             MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
@@ -200,7 +200,7 @@ export class Area {
         let lines = lineBuilder.renderSegmented(stackedData, Area.areaBorderLineClass);
         lineBuilder.setSegmentColor(lines, chart.style.elementColors);
         lines.each(function (_, i) {
-            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+            DomSelectionHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
         });
     }
     updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -3,7 +3,7 @@ import { EmbeddedLabels } from "../../features/embeddedLabels/embeddedLabels";
 import { EmbeddedLabelsHelper } from "../../features/embeddedLabels/embeddedLabelsHelper";
 import { BarHelper, onBarChartInit } from "./barHelper";
 import { sum } from "d3-array";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { getStackedDataWithOwn } from "./stackedData/dataStacker";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
@@ -39,7 +39,7 @@ export class Bar {
             const bars = block.svg
                 .getChartGroup(chart.index)
                 .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`);
-            DomHelper.setChartStyle(bars, chart.style, index, "fill");
+            DomSelectionHelper.setChartStyle(bars, chart.style, index, "fill");
         });
     }
     getAllBarsForChart(block, chartCssClasses) {
@@ -58,8 +58,8 @@ export class Bar {
             bars = this.createBarPipeline.execute(bars, chart);
             const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
-            DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
-            DomHelper.setChartStyle(bars, chart.style, index, "fill");
+            DomSelectionHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
+            DomSelectionHelper.setChartStyle(bars, chart.style, index, "fill");
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
             if (chart.embeddedLabels !== "none")
                 EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
@@ -84,12 +84,12 @@ export class Bar {
         const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-        DomHelper.setCssClasses(groups, chart.cssClasses);
-        DomHelper.setCssClasses(bars, chart.cssClasses); // Для обозначения принадлежности бара к конкретному чарту
+        DomSelectionHelper.setCssClasses(groups, chart.cssClasses);
+        DomSelectionHelper.setCssClasses(bars, chart.cssClasses); // Для обозначения принадлежности бара к конкретному чарту
         const thisClass = this;
         groups.each(function (d, i) {
             const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
-            DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            DomSelectionHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
             thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, { segmentIndex: i, chart });
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
@@ -132,8 +132,8 @@ export class Bar {
             this.fillBarAttrs(newBars, barAttrs);
             promises.push(prom);
             this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
-            DomHelper.setCssClasses(newBars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
-            DomHelper.setChartStyle(newBars, chart.style, index, "fill");
+            DomSelectionHelper.setCssClasses(newBars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
+            DomSelectionHelper.setChartStyle(newBars, chart.style, index, "fill");
             if (chart.embeddedLabels !== "none") {
                 EmbeddedLabels.removeUnused(block, chart.cssClasses, index, indexesOfRemoved);
                 EmbeddedLabels.update(block, bars, keyAxisOrient, barAttrs, margin, valueField, chart.embeddedLabels, blockSize, newData, index, chart.cssClasses);
@@ -176,11 +176,11 @@ export class Bar {
         });
         this.fillBarAttrs(newBars, barAttrs);
         this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
-        DomHelper.setCssClasses(newBars, chart.cssClasses);
+        DomSelectionHelper.setCssClasses(newBars, chart.cssClasses);
         const thisClass = this;
         groups.each(function (d, i) {
             const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
-            DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            DomSelectionHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
             thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, { segmentIndex: i, chart });
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
@@ -217,14 +217,14 @@ export class Bar {
      */
     setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
         bars.each(function () {
-            const width = DomHelper.getSelectionNumericAttr(select(this), "width");
-            const height = DomHelper.getSelectionNumericAttr(select(this), "height");
+            const width = DomSelectionHelper.getSelectionNumericAttr(select(this), "width");
+            const height = DomSelectionHelper.getSelectionNumericAttr(select(this), "height");
             const orient = keyAxisOrient === "left" || keyAxisOrient === "right" ? "horizontal" : "vertical";
             let scaleSize = 0.06 * (orient === "vertical" ? width : height);
             scaleSize = scaleSize > barSettings.barDistance / 2 ? barSettings.barDistance / 2 : scaleSize;
             this.attrs = {
-                x: DomHelper.getSelectionNumericAttr(select(this), "x"),
-                y: DomHelper.getSelectionNumericAttr(select(this), "y"),
+                x: DomSelectionHelper.getSelectionNumericAttr(select(this), "x"),
+                y: DomSelectionHelper.getSelectionNumericAttr(select(this), "y"),
                 width,
                 height,
                 orient,

package/lib/engine/twoDimensionalNotation/dot/dotChart.js

@@ -1,5 +1,5 @@
 import { Scale } from "../../features/scale/scale";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { NamesHelper } from "../../helpers/namesHelper";
 import { BarHelper, DotChartSettingsStore } from "../bar/barHelper";
@@ -31,8 +31,8 @@ export class CanvasDotChart {
             .attr("y1", (d) => attrs.y1(d))
             .attr("x2", (d) => attrs.x2(d))
             .attr("y2", (d) => attrs.y2(d));
-        DomHelper.setCssClasses(elements, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex));
-        DomHelper.setChartStyle(elements, chart.style, valueFieldIndex, "stroke");
+        DomSelectionHelper.setCssClasses(elements, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex));
+        DomSelectionHelper.setChartStyle(elements, chart.style, valueFieldIndex, "stroke");
         this.renderedChart = chart;
     }
     update(scales, newRecords, margin) {
@@ -56,8 +56,8 @@ export class CanvasDotChart {
             .attr("y1", (d) => attrs.y1(d))
             .attr("x2", (d) => attrs.x2(d))
             .attr("y2", (d) => attrs.y2(d));
-        DomHelper.setCssClasses(newElements, Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex));
-        DomHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, "stroke");
+        DomSelectionHelper.setCssClasses(newElements, Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex));
+        DomSelectionHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, "stroke");
         return [
             new Promise((resolve) => {
                 elements

package/lib/engine/twoDimensionalNotation/line/line.js

@@ -1,7 +1,7 @@
 import { select } from "d3-selection";
 import { MarkDot } from "../../features/markDots/markDot";
 import { getStackedData, LineGeneratorFactory, onLineChartInit } from "./lineHelper";
-import { DomHelper } from "../../helpers/domHelper";
+import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
 import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
@@ -36,7 +36,7 @@ export class Line {
             const path = block.svg
                 .getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
+            DomSelectionHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
             MarkDot.updateColors(block, chart, valueIndex);
         });
     }
@@ -60,8 +60,8 @@ export class Line {
                 .style("clip-path", `url(#${block.svg.getClipPathId()})`)
                 .style("pointer-events", "none");
             path = this.creatingPipeline.execute(path, chart);
-            DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-            DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
+            DomSelectionHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+            DomSelectionHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
             MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, valueField.name, chart);
         });
     }
@@ -76,7 +76,7 @@ export class Line {
         lines = this.creatingPipeline.execute(lines, chart);
         lineBuilder.setSegmentColor(lines, chart.style.elementColors);
         lines.each(function (_, i) {
-            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+            DomSelectionHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
         });
         stackedData.forEach((dataset, stackIndex) => {
             MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, "1", chart);

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware.d.ts

@@ -1,7 +1,7 @@
 import { Area, Line } from "d3-shape";
 import { LineCurveType } from "../../../../model/model";
 import { LineLikeGeneratorMiddleware } from "./lineLikeGeneratorMiddleware";
-import { MdtChartsDataRow } from "../../../../main";
+import { MdtChartsDataRow } from "../../../../config/config";
 interface LineLikeGeneratorCurveMiddlewareOptions {
     curve?: LineCurveType;
 }

package/lib/model/domUtils/cssUtils.d.ts

@@ -0,0 +1 @@
+export declare function getCssPropertyValue(node: Element, propertyName: string): string;

package/lib/model/domUtils/cssUtils.js

@@ -0,0 +1,3 @@
+export function getCssPropertyValue(node, propertyName) {
+    return window.getComputedStyle(node).getPropertyValue(propertyName);
+}

package/lib/model/featuresModel/axisModel.js

@@ -3,7 +3,6 @@ import { AxisType } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
 import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
-import { max, min } from "d3-array";
 export const MINIMAL_VERTICAL_STEP_SIZE = 60;
 export const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
 export const LABEL_ELEMENT_HEIGHT_PX = 17;
@@ -149,8 +148,8 @@ export class AxisModel {
             tickAmountPolicy = { type: "amount", amount: Math.floor(axisLength / linearTickStep) };
         }
         else {
-            const roundedMaxValue = this.getRoundValue(max(scaleInfo.domain));
-            tickAmountPolicy = { type: "constant", values: [min(scaleInfo.domain), roundedMaxValue] };
+            const roundedMaxValue = this.getRoundValue(Math.max(...scaleInfo.domain));
+            tickAmountPolicy = { type: "constant", values: [Math.min(...scaleInfo.domain), roundedMaxValue] };
         }
         return tickAmountPolicy;
     }

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

@@ -1,4 +1,4 @@
-import { LegendBlockCanvas } from "../../../main";
+import { LegendBlockCanvas } from "../../../designer/designerConfig";
 import { LegendBlockModel, Orient } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { LegendItemsDirection } from "./legendCanvasModel";

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

@@ -1,4 +1,8 @@
 import { RecordOverflowAlertOptions, RecordOverflowVariationTextContent } from "../../../config/config";
-import { RecordOverflowAlertModel } from "../../model";
+import { RecordOverflowAlertModel, RecordOverflowAlertPositionAttrs } from "../../model";
 export declare function getTextVariationByNumber(hidedRecordsAmount: number, textVariation: RecordOverflowVariationTextContent): string;
-export declare function createRecordOverflowModel(hiddenRecordsAmount: number, defaultTextVariation: RecordOverflowVariationTextContent, options?: RecordOverflowAlertOptions): RecordOverflowAlertModel;
+interface RecordOverflowBlockCanvasOptions {
+    positionAttrs: RecordOverflowAlertPositionAttrs;
+}
+export declare function createRecordOverflowModel(hiddenRecordsAmount: number, defaultTextVariation: RecordOverflowVariationTextContent, canvasOptions: RecordOverflowBlockCanvasOptions, options?: RecordOverflowAlertOptions): RecordOverflowAlertModel;
+export {};

package/lib/model/featuresModel/recordOverflowModel/recordOverflowModel.js

@@ -8,7 +8,7 @@ export function getTextVariationByNumber(hidedRecordsAmount, textVariation) {
         return textVariation.twoToFour;
     return textVariation.other;
 }
-export function createRecordOverflowModel(hiddenRecordsAmount, defaultTextVariation, options) {
+export function createRecordOverflowModel(hiddenRecordsAmount, defaultTextVariation, canvasOptions, options) {
     var _a;
     let textContent;
     if ((_a = options === null || options === void 0 ? void 0 : options.textContent) === null || _a === void 0 ? void 0 : _a.create) {
@@ -24,10 +24,7 @@ export function createRecordOverflowModel(hiddenRecordsAmount, defaultTextVariat
         ? { show: false }
         : {
             show: true,
-            positionAttrs: {
-                bottom: "0",
-                right: "0"
-            },
+            positionAttrs: canvasOptions.positionAttrs,
             textContent
         };
 }

package/lib/model/helpers/modelHelper.js

@@ -1,4 +1,4 @@
-import { DomHelper } from "../../engine/helpers/domHelper";
+import { getCssPropertyValue } from "../domUtils/cssUtils";
 export class ModelHelper {
     static getBaseFontSize(propertyName) {
         if (!this.baseFontSize)
@@ -6,7 +6,7 @@ export class ModelHelper {
         return this.baseFontSize;
     }
     static getFontSizeCssValue(propertyName, defaultValue) {
-        const value = parseInt(DomHelper.getCssPropertyValue(document.documentElement, propertyName));
+        const value = parseInt(getCssPropertyValue(document.documentElement, propertyName));
         return isNaN(value) ? defaultValue : value;
     }
     static getSum(items) {

package/lib/model/modelInstance/titleConfigReader.js

@@ -14,7 +14,8 @@ export class TitleConfigReader {
     getFontSize() {
         var _a;
         return typeof this.config === "object"
-            ? (_a = this.config.fontSize) !== null && _a !== void 0 ? _a : this.defaultCssUnitReader() : this.defaultCssUnitReader();
+            ? (_a = this.config.fontSize) !== null && _a !== void 0 ? _a : this.defaultCssUnitReader()
+            : this.defaultCssUnitReader();
     }
     getResolvedTitle() {
         switch (typeof this.config) {

package/lib/model/notations/polar/donut/donutThicknessService.d.ts

@@ -1,7 +1,13 @@
+import { Size } from "../../../../config/config";
 import { MdtChartsDonutThicknessOptions } from "../../../../designer/designerConfig";
-import { DonutThicknessUnit } from "../../../model";
+import { BlockMargin, DonutChartSettings, DonutThicknessUnit } from "../../../model";
 export declare class DonutThicknessService {
     private defaultUnit;
     getUnit(settingsFromConfig: MdtChartsDonutThicknessOptions): DonutThicknessUnit;
     valueToNumber(value: string | number): number;
 }
+export declare class DonutThicknessCalculator {
+    static getThickness(donutSettings: DonutChartSettings, blockSize: Size, margin: BlockMargin): number;
+    private static getThicknessByUnit;
+    private static getChartBlockSize;
+}

package/lib/model/notations/polar/donut/donutThicknessService.js

@@ -1,4 +1,5 @@
 import { getPxPercentUnitByValue } from "../../../helpers/unitsFromConfigReader";
+const MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS = 400;
 export class DonutThicknessService {
     constructor() {
         this.defaultUnit = "px";
@@ -16,3 +17,26 @@ export class DonutThicknessService {
         return parseInt(value);
     }
 }
+export class DonutThicknessCalculator {
+    static getThickness(donutSettings, blockSize, margin) {
+        const thicknessOpts = donutSettings.thickness;
+        const chartBlockSize = this.getChartBlockSize(blockSize, margin);
+        if (thicknessOpts.value)
+            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.value, thicknessOpts.unit);
+        if (Math.min(chartBlockSize.width, chartBlockSize.height) > MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS)
+            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.max, thicknessOpts.unit);
+        return this.getThicknessByUnit(chartBlockSize, thicknessOpts.min, thicknessOpts.unit);
+    }
+    static getThicknessByUnit(chartBlockSize, valueInPx, unit) {
+        if (unit === "px")
+            return valueInPx;
+        const minSideSize = Math.min(chartBlockSize.width, chartBlockSize.height);
+        return (minSideSize / 2) * (valueInPx / 100);
+    }
+    static getChartBlockSize(blockSize, margin) {
+        return {
+            height: blockSize.height - margin.top - margin.bottom,
+            width: blockSize.width - margin.left - margin.right
+        };
+    }
+}

package/lib/model/notations/polar/polarModel.js

@@ -24,7 +24,7 @@ export class PolarModel {
                 twoToFour: "категории",
                 tenToTwenty: "категорий",
                 other: "категорий"
-            }, options.recordOverflowAlert)
+            }, { positionAttrs: { bottom: "0", right: "0" } }, options.recordOverflowAlert)
         };
     }
     //TODO: type for returned value

package/lib/model/notations/twoDimensional/styles.js

@@ -137,7 +137,8 @@ export function getAreaViewOptions(chart, chartIndex, style, chartBlockId) {
     for (let index = 0; index < style.elementColors.length; index++) {
         gradientIds.push(getGradientId(chartIndex, index, chartBlockId));
     }
-    const fill = ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on) ? { type: "gradient", ids: gradientIds }
+    const fill = ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on)
+        ? { type: "gradient", ids: gradientIds }
         : { type: "paletteColor" };
     const borderLine = {
         on: (_e = (_d = (_c = chart.areaStyles) === null || _c === void 0 ? void 0 : _c.borderLine) === null || _d === void 0 ? void 0 : _d.on) !== null && _e !== void 0 ? _e : false,

package/lib/model/notations/twoDimensionalModel.js

@@ -53,7 +53,7 @@ export class TwoDimensionalModel {
                 twoToFour: isHorizontal ? "строки" : "столбца",
                 tenToTwenty: isHorizontal ? "строк" : "столбцов",
                 other: isHorizontal ? "строк" : "столбцов"
-            }, options.recordOverflowAlert)
+            }, { positionAttrs: { top: "0", right: "0" } }, options.recordOverflowAlert)
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mdt-charts",
-	"version": "1.30.0",
+	"version": "1.30.1",
 	"description": "",
 	"main": "lib/main.js",
 	"scripts": {
@@ -23,36 +23,36 @@
 		"@types/chroma-js": "^2.1.3",
 		"@types/d3-array": "^3.2.1",
 		"@types/d3-axis": "^3.0.6",
-		"@types/d3-ease": "^2.0.0",
-		"@types/d3-format": "^2.0.0",
-		"@types/d3-interpolate": "^2.0.0",
+		"@types/d3-ease": "^3.0.2",
+		"@types/d3-format": "^3.0.4",
+		"@types/d3-interpolate": "^3.0.4",
 		"@types/d3-scale": "^3.2.2",
 		"@types/d3-selection": "^2.0.0",
 		"@types/d3-shape": "^2.0.0",
 		"@types/d3-timer": "^2.0.0",
 		"@types/d3-transition": "^2.0.0",
 		"@types/html-webpack-plugin": "^3.2.4",
-		"@types/jest": "^26.0.20",
+		"@types/jest": "^29.5.14",
 		"clean-webpack-plugin": "^3.0.0",
-		"css-loader": "^5.0.1",
+		"css-loader": "^7.1.2",
 		"d3-timer": "^2.0.0",
-		"html-webpack-plugin": "^4.5.0",
-		"jest": "^26.6.3",
-		"shx": "^0.3.4",
+		"html-webpack-plugin": "^5.6.3",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"shx": "^0.4.0",
 		"style-loader": "^2.0.0",
-		"ts-loader": "^8.0.12",
-		"typescript": "^4.1.3",
-		"webpack": "^5.10.1",
-		"webpack-bundle-analyzer": "^4.4.0",
-		"webpack-cli": "^4.2.0"
+		"ts-loader": "^8.4.0",
+		"typescript": "^4.8.4",
+		"webpack": "^5.99.5",
+		"webpack-cli": "^6.0.1"
 	},
 	"dependencies": {
 		"chroma-js": "^2.1.1",
 		"d3-array": "^3.2.4",
 		"d3-axis": "^3.0.0",
-		"d3-ease": "^2.0.0",
-		"d3-format": "^2.0.0",
-		"d3-interpolate": "^2.0.1",
+		"d3-ease": "^3.0.1",
+		"d3-format": "^3.1.0",
+		"d3-interpolate": "^3.0.1",
 		"d3-scale": "^3.2.3",
 		"d3-selection": "^2.0.0",
 		"d3-shape": "^2.0.0",