mdt-charts 1.13.2 → 1.14.0

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

@@ -1,46 +1,58 @@
+import { select } from "d3-selection";
 import { ColorReader } from "../../colorReader/colorReader";
 import { SelectionCondition } from "../../helpers/domHelper";
 import { LegendDomHelper } from "./legendDomHelper";
 import { LegendEventsManager } from "./legendEventsManager";
 import { LegendHelper } from "./legendHelper";
+import { LegendMarkerCreator } from "./legendMarkerCreator";
 export class Legend {
-    static render(block, data, options, model) {
+    constructor() {
+        this.markerCreator = new LegendMarkerCreator();
+    }
+    static get() {
+        return new Legend();
+    }
+    render(block, data, options, model) {
         if (options.legend.position !== 'off') {
             const legendObject = this.renderObject(block, options.legend.position, model.otherComponents.legendBlock, model.blockCanvas.size);
-            this.setContent(block, data, options, legendObject);
+            this.setContent(block, data, options, legendObject, model.otherComponents.legendBlock);
         }
     }
-    static update(block, data, model) {
-        if (model.options.type != "card" && model.options.legend.position !== 'off') {
+    update(block, data, model) {
+        if (model.options.legend.position !== 'off') {
             const legendObject = this.getObject(block);
             const legendCoordinate = LegendHelper.getLegendCoordinateByPosition(model.options.legend.position, model.otherComponents.legendBlock, model.blockCanvas.size);
             this.fillCoordinate(legendObject, legendCoordinate);
             this.removeContent(legendObject);
-            this.setContent(block, data, model.options, legendObject);
+            this.setContent(block, data, model.options, legendObject, model.otherComponents.legendBlock);
         }
     }
-    static updateColors(block, options) {
+    updateColors(block, options) {
         if (options.type === "polar" && ColorReader.isNeedReadFromData(options.charts[0]))
             return;
         const legendObject = this.getObject(block);
         const colors = LegendHelper.getMarksColor(options);
         const itemWrappers = legendObject
-            .selectAll(`.${this.itemClass}`);
-        LegendDomHelper.setItemsColors(itemWrappers, colors);
+            .selectAll(`.${Legend.itemClass}`);
+        const markerCreator = this.markerCreator;
+        itemWrappers.each(function (d, i) {
+            const selection = select(this);
+            markerCreator.updateColorForItem(selection, Object.assign(Object.assign({}, d), { color: colors[i % colors.length] }));
+        });
     }
     static getItemsByKeys(block, keys, condition = SelectionCondition.Include) {
         return block
             .getSvg()
             .selectAll(`.${this.itemClass}`)
             .filter(d => {
-            const index = keys.findIndex(k => k === d);
+            const index = keys.findIndex(k => k === d.textContent);
             return condition === SelectionCondition.Include ? index !== -1 : index === -1;
         });
     }
-    static setContent(block, data, options, legendObject) {
+    setContent(block, data, options, legendObject, legendBlockModel) {
         const items = LegendHelper.getLegendItemsContent(options, data);
         const colors = LegendHelper.getMarksColor(options, data[options.data.dataSource]);
-        const renderingOptions = LegendHelper.getContentRenderingOptions(options.type, options.legend.position);
+        const renderingOptions = LegendHelper.getContentRenderingOptions(options.type, options.legend.position, legendBlockModel);
         const itemBlocks = this.renderContent(legendObject, items, colors, renderingOptions);
         if (options.type === 'polar') {
             LegendEventsManager.setListeners(block, options.data.keyField.name, itemBlocks, options.selectable);
@@ -49,7 +61,7 @@ export class Legend {
             LegendDomHelper.setItemsTitles(itemBlocks);
         }
     }
-    static renderObject(block, legendPosition, legendBlockModel, blockSize) {
+    renderObject(block, legendPosition, legendBlockModel, blockSize) {
         const legendObject = block.getSvg()
             .append('foreignObject')
             .attr('class', Legend.objectClass);
@@ -57,35 +69,38 @@ export class Legend {
         this.fillCoordinate(legendObject, legendCoordinate);
         return legendObject;
     }
-    static renderContent(foreignObject, items, colorPalette, options) {
+    renderContent(foreignObject, items, colorPalette, options) {
         const wrapper = foreignObject.append('xhtml:div');
         wrapper.classed(options.wrapperClasses.join(" "), true);
         const itemWrappers = wrapper
-            .selectAll(`.${this.itemClass}`)
+            .selectAll(`.${Legend.itemClass}`)
             .data(items)
             .enter()
             .append('div');
         itemWrappers.classed(options.itemsOptions.wrapperClasses.join(" "), true);
+        const markerCreator = this.markerCreator;
         itemWrappers
-            .append('span')
-            .classed(options.itemsOptions.markerClass, true);
-        LegendDomHelper.setItemsColors(itemWrappers, colorPalette);
+            .each(function (d, i) {
+            const selection = select(this);
+            const markers = markerCreator.create(selection, Object.assign(Object.assign({}, d), { color: colorPalette[i % colorPalette.length] }));
+            markers.classed(options.itemsOptions.markerClass, true);
+        });
         itemWrappers
             .append('span')
             .attr('class', options.itemsOptions.labelClass)
-            .text(d => d);
+            .text(d => d.textContent);
         if (options.shouldCropLabels)
             LegendDomHelper.cropRowLabels(foreignObject, itemWrappers);
         return itemWrappers;
     }
-    static getObject(block) {
+    getObject(block) {
         return block.getSvg()
             .select(`foreignObject.${Legend.objectClass}`);
     }
-    static removeContent(legendObject) {
+    removeContent(legendObject) {
         legendObject.select(`.${Legend.legendBlockClass}`).remove();
     }
-    static fillCoordinate(legendBlock, coordinate) {
+    fillCoordinate(legendBlock, coordinate) {
         legendBlock
             .attr('x', coordinate.x)
             .attr('y', coordinate.y)
@@ -96,5 +111,6 @@ export class Legend {
 Legend.objectClass = 'legend-object';
 Legend.labelClass = 'legend-label';
 Legend.itemClass = 'legend-item';
-Legend.markerClass = 'legend-circle';
+Legend.markerClass = 'legend-marker';
+Legend.markerCircle = 'legend-circle';
 Legend.legendBlockClass = 'legend-block';

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

@@ -1,8 +1,12 @@
 import { BaseType, Selection } from "d3-selection";
+import { ChartLegendEngineModel } from "./legendHelper";
+import { StaticLegendBlockCanvas } from "../../../designer/designerConfig";
+export declare type LegendItemSelection = Selection<HTMLDivElement, ChartLegendEngineModel, BaseType, unknown>;
 export declare class LegendDomHelper {
-    static setItemsTitles(items: Selection<HTMLDivElement, string, BaseType, unknown>): void;
-    static setItemsColors(items: Selection<HTMLDivElement, string, BaseType, unknown>, colorPalette: string[]): void;
-    static cropRowLabels(legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>, items: Selection<HTMLDivElement, string, BaseType, unknown>): void;
-    private static getItemsLeftMargins;
+    static setItemsTitles(items: LegendItemSelection): void;
+    static decreaseRowLabels(legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>, items: LegendItemSelection, staticLegend: StaticLegendBlockCanvas): void;
+    /** @deprecated */
+    static cropRowLabels(legendBlock: Selection<SVGForeignObjectElement, unknown, HTMLElement, any>, items: LegendItemSelection): void;
+    private static getItemsRightMargins;
     private static getItemsWidth;
 }

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

@@ -2,17 +2,29 @@ import { DomHelper } from "../../helpers/domHelper";
 import { Helper } from "../../helpers/helper";
 import { Legend } from "./legend";
 import { LegendHelper } from "./legendHelper";
+import { getNewLegendItemWidths } from "./legendWidthCalculator";
 export class LegendDomHelper {
     static setItemsTitles(items) {
-        items.attr('title', d => d);
+        items.attr('title', d => d.textContent);
     }
-    static setItemsColors(items, colorPalette) {
-        items.select(`.${Legend.markerClass}`)
-            .style('background-color', (d, i) => colorPalette[i % colorPalette.length]);
+    static decreaseRowLabels(legendBlock, items, staticLegend) {
+        let itemsRightMargins = this.getItemsRightMargins(items);
+        const itemConfig = [];
+        items.nodes().forEach((node, i) => {
+            itemConfig.push({ width: node.getBoundingClientRect().width, marginLeft: 0, marginRight: itemsRightMargins[i] });
+        });
+        const newWidths = getNewLegendItemWidths({
+            items: itemConfig,
+            wrapper: { maxRowsAmount: staticLegend.maxLinesAmount, width: legendBlock.node().getBoundingClientRect().width }
+        });
+        items.nodes().forEach((node, i) => {
+            node.style.width = `${newWidths[i]}px`;
+        });
     }
+    /** @deprecated */
     static cropRowLabels(legendBlock, items) {
         const maxWidth = legendBlock.node().getBoundingClientRect().width;
-        let itemsLeftMargins = this.getItemsLeftMargins(items);
+        let itemsLeftMargins = this.getItemsRightMargins(items);
         let itemsWidth = this.getItemsWidth(items);
         let sumOfItemsWidth = LegendHelper.getSumOfItemsWidths(itemsWidth, itemsLeftMargins);
         const maxItemWidth = LegendHelper.getMaxItemWidth(legendBlock.attr('width'), itemsLeftMargins, 'row');
@@ -27,7 +39,7 @@ export class LegendDomHelper {
                         : textBlock.textContent;
                     labelText = labelText.substr(0, labelText.length - 1);
                     textBlock.textContent = labelText + '...';
-                    itemsLeftMargins = this.getItemsLeftMargins(items);
+                    itemsLeftMargins = this.getItemsRightMargins(items);
                     itemsWidth = this.getItemsWidth(items);
                     sumOfItemsWidth = LegendHelper.getSumOfItemsWidths(itemsWidth, itemsLeftMargins);
                     if (labelText.length === 0) {
@@ -39,8 +51,8 @@ export class LegendDomHelper {
             index++;
         }
     }
-    static getItemsLeftMargins(items) {
-        return items.nodes().map(node => Helper.getPXValueFromString(DomHelper.getCssPropertyValue(node, 'margin-left')));
+    static getItemsRightMargins(items) {
+        return items.nodes().map(node => Helper.getPXValueFromString(DomHelper.getCssPropertyValue(node, 'margin-right')));
     }
     static getItemsWidth(items) {
         return items.nodes().map(node => node.getBoundingClientRect().width);

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

@@ -1,12 +1,12 @@
-import { BaseType, Selection } from "d3-selection";
 import { Block } from "../../block/block";
+import { LegendItemSelection } from "./legendDomHelper";
 export declare class LegendEventsManager {
     /**
      * @param block
      * @param keyFieldName
      * @param legendItems айтемы легенды полара, которые привязаны к ключам
      */
-    static setListeners(block: Block, keyFieldName: string, legendItems: Selection<HTMLDivElement, string, BaseType, unknown>, selectable: boolean): void;
+    static setListeners(block: Block, keyFieldName: string, legendItems: LegendItemSelection, selectable: boolean): void;
     private static setHoverListeners;
     private static setClickListeners;
 }

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

@@ -15,7 +15,7 @@ export class LegendEventsManager {
     static setHoverListeners(block, keyFieldName, legendItems) {
         const arcItems = Donut.getAllArcGroups(block);
         legendItems.on('mousemove', function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue)
+            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent)
                 .dispatch('mousemove', {
                 bubbles: false,
                 cancelable: true,
@@ -26,21 +26,21 @@ export class LegendEventsManager {
             });
         });
         legendItems.on('mouseover', function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue)
+            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent)
                 .dispatch('mouseover');
             ElementHighlighter.toggleActivityStyle(select(this), true);
         });
         legendItems.on('mouseleave', function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue)
+            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent)
                 .dispatch('mouseleave');
-            if (!block.filterEventManager.isSelected(keyValue) && block.filterEventManager.getSelectedKeys().length > 0)
+            if (!block.filterEventManager.isSelected(keyValue.textContent) && block.filterEventManager.getSelectedKeys().length > 0)
                 ElementHighlighter.toggleActivityStyle(select(this), false);
         });
     }
     static setClickListeners(block, keyFieldName, legendItems) {
         const arcItems = Donut.getAllArcGroups(block);
         legendItems.on('click', (e, keyValue) => {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue)
+            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent)
                 .dispatch('click', { bubbles: false, cancelable: true, detail: { multySelect: e.ctrlKey || e.metaKey } });
         });
     }

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

@@ -1,6 +1,6 @@
 import { ChartNotation, MdtChartsDataRow, MdtChartsDataSource, Size } from "../../../config/config";
 import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/legendCanvasModel";
-import { IntervalOptionsModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { ChartLegendModel, IntervalOptionsModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { LegendContentRenderingOptions } from "./legend";
 import { LegendHelperService } from "./legendHelperService";
 export interface LegendCoordinate {
@@ -9,12 +9,15 @@ export interface LegendCoordinate {
     height: number;
     width: number;
 }
+export interface ChartLegendEngineModel extends ChartLegendModel {
+    textContent: string;
+}
 export declare class LegendHelper {
     static service: LegendHelperService;
-    static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, data: MdtChartsDataSource): string[];
+    static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel, data: MdtChartsDataSource): ChartLegendEngineModel[];
     static getMarksColor(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, dataRows?: MdtChartsDataRow[]): string[];
     static getMaxItemWidth(legendBlockWidth: string, marginsLeft: number[], itemsDirection: LegendItemsDirection): number;
     static getSumOfItemsWidths(itemsWidth: number[], marginsLeft: number[]): number;
     static getLegendCoordinateByPosition(legendPosition: Orient, legendBlockModel: LegendBlockModel, blockSize: Size): LegendCoordinate;
-    static getContentRenderingOptions(chartNotation: ChartNotation, legendPosition: LegendPosition): LegendContentRenderingOptions;
+    static getContentRenderingOptions(chartNotation: ChartNotation, legendPosition: LegendPosition, legendBlockModel: LegendBlockModel): LegendContentRenderingOptions;
 }

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

@@ -6,15 +6,12 @@ export class LegendHelper {
         if (options.type === '2d') {
             let texts = [];
             options.charts.forEach(chart => {
-                texts = texts.concat(chart.data.valueFields.map(field => field.title));
+                texts = texts.concat(chart.data.valueFields.map(field => (Object.assign(Object.assign({}, chart.legend), { textContent: field.title }))));
             });
             return texts;
         }
-        else if (options.type === 'polar') {
-            return data[options.data.dataSource].map((record) => record[options.data.keyField.name]);
-        }
-        else if (options.type === 'interval') {
-            return options.charts.map(chart => chart.data.valueField1.name);
+        if (options.type === "polar") {
+            return data[options.data.dataSource].map((record) => (Object.assign(Object.assign({}, options.charts[0].legend), { textContent: record[options.data.keyField.name] })));
         }
     }
     static getMarksColor(options, dataRows) {
@@ -74,7 +71,7 @@ export class LegendHelper {
             coordinate.y = blockSize.height - legendModel.size - legendModel.margin.bottom;
         return coordinate;
     }
-    static getContentRenderingOptions(chartNotation, legendPosition) {
+    static getContentRenderingOptions(chartNotation, legendPosition, legendBlockModel) {
         const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
         return {
             wrapperClasses: [
@@ -84,6 +81,7 @@ export class LegendHelper {
                 this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
             ],
             shouldCropLabels: chartNotation === "2d",
+            blockModel: legendBlockModel,
             itemsOptions: {
                 markerClass: Legend.markerClass,
                 labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, Legend.labelClass),

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

@@ -0,0 +1,21 @@
+import { BaseType, Selection } from "d3-selection";
+import { ChartLegendModel } from "../../../model/model";
+interface MarkerCreationOptions extends ChartLegendModel {
+    color: string;
+}
+declare type MarkerParentSelection = Selection<BaseType, any, BaseType, any>;
+export declare class LegendMarkerCreator {
+    create(selection: MarkerParentSelection, options: MarkerCreationOptions): Selection<BaseType, ChartLegendModel, BaseType, unknown>;
+    updateColorForItem(selection: MarkerParentSelection, options: MarkerCreationOptions): void;
+}
+export interface MarkerCreator {
+    renderMarker(selection: MarkerParentSelection, color: string): Selection<BaseType, ChartLegendModel, BaseType, unknown>;
+    updateColors(selection: MarkerParentSelection, color: string): void;
+}
+interface MakerCreatorCustomOptions {
+    default?: {
+        cssClass: string;
+    };
+}
+export declare function getMarkerCreator(options: ChartLegendModel, customOptions?: MakerCreatorCustomOptions): MarkerCreator;
+export {};

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

@@ -0,0 +1,88 @@
+import { Legend } from "./legend";
+import { HatchPatternDef } from "../../block/defs";
+import { applyLineDash } from "../../twoDimensionalNotation/line/lineHelper";
+export class LegendMarkerCreator {
+    create(selection, options) {
+        const creator = getMarkerCreator(options);
+        return creator.renderMarker(selection, options.color);
+    }
+    updateColorForItem(selection, options) {
+        const creator = getMarkerCreator(options);
+        creator.updateColors(selection, options.color);
+    }
+}
+export function getMarkerCreator(options, customOptions) {
+    var _a;
+    if (options.markerShape === "bar")
+        return new BarMarkerCreator(options.barViewOptions);
+    if (options.markerShape === "line")
+        return new LineMarkerCreator(options.lineViewOptions);
+    return new DefaultMarkerCreator((_a = customOptions === null || customOptions === void 0 ? void 0 : customOptions.default) === null || _a === void 0 ? void 0 : _a.cssClass);
+}
+class DefaultMarkerCreator {
+    constructor(cssClass = Legend.markerCircle) {
+        this.cssClass = cssClass;
+    }
+    renderMarker(selection, color) {
+        return selection.append('span').style('background-color', color).classed(this.cssClass, true);
+    }
+    updateColors(selection, color) {
+        selection.select(`.${this.cssClass}`).style('background-color', color);
+    }
+}
+class SvgMarkerCreator {
+    renderSvg(selection) {
+        return selection.append('svg')
+            .style("display", "inline-block")
+            .style("height", '10px')
+            .classed(Legend.markerClass, true);
+    }
+}
+class BarMarkerCreator extends SvgMarkerCreator {
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    renderMarker(selection, color) {
+        const svg = this.renderSvg(selection).style("width", this.options.width);
+        const bars = svg
+            .append('rect')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('height', 10)
+            .attr('width', this.options.width)
+            .style('fill', color);
+        if (this.options.hatch.on) {
+            bars.style('mask', HatchPatternDef.getMaskValue());
+        }
+        return bars;
+    }
+    updateColors(selection, color) {
+        selection.select('svg rect').style('fill', color);
+    }
+}
+class LineMarkerCreator extends SvgMarkerCreator {
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    renderMarker(selection, color) {
+        const svg = this.renderSvg(selection).style("width", this.options.width);
+        const line = svg
+            .append('line')
+            .style('stroke', 'red')
+            .classed("line", true)
+            .attr('x1', 0)
+            .attr('x2', this.options.width)
+            .attr('y1', 5)
+            .attr('y2', 5)
+            .style('stroke', color);
+        if (this.options.dashedStyles.on) {
+            applyLineDash(line, this.options.dashedStyles.dashSize, this.options.dashedStyles.gapSize);
+        }
+        return line;
+    }
+    updateColors(selection, color) {
+        selection.select('svg line').style('stroke', color);
+    }
+}

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

@@ -0,0 +1,16 @@
+declare type SizePx = number;
+interface WidthCalculatorConfig {
+    wrapper: LegendWrapperConfig;
+    items: LegendItemConfig[];
+}
+export declare function getNewLegendItemWidths(config: WidthCalculatorConfig): SizePx[];
+interface LegendWrapperConfig {
+    maxRowsAmount: number;
+    width: SizePx;
+}
+export interface LegendItemConfig {
+    marginLeft: SizePx;
+    marginRight: SizePx;
+    width: SizePx;
+}
+export {};

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

@@ -0,0 +1,119 @@
+export function getNewLegendItemWidths(config) {
+    const wrapper = new LegendWrapper(config.wrapper);
+    const collection = new LegendItemCollection(config.items.map(i => new LegendItem(i)));
+    return getNewWidths(collection, wrapper);
+}
+function getNewWidths(collection, wrapper) {
+    let extra = collection.getTotalWidth() - wrapper.getMaxWidth();
+    if (extra <= 0) {
+        return fixWidthsByLinePos(collection, wrapper);
+    }
+    const avgWidth = (wrapper.getMaxWidth() - collection.getTotalMarginSizes()) / collection.getItemsAmount();
+    const biggerThanAvg = collection.getItemsWithWidthBiggerThan(avgWidth);
+    let avgExtra = extra / biggerThanAvg.length;
+    biggerThanAvg.forEach((item, index) => {
+        const avgDiff = item.getCurrentWidth() - avgWidth;
+        const decreaseBy = avgDiff < avgExtra ? avgDiff : avgExtra;
+        item.decreaseBy(decreaseBy);
+        extra -= decreaseBy;
+        avgExtra = extra / (biggerThanAvg.length - index - 1);
+    });
+    return fixWidthsByLinePos(collection, wrapper);
+}
+function fixWidthsByLinePos(collection, wrapper) {
+    const byRows = [];
+    let currentRow = [];
+    collection.items.forEach((item, i) => {
+        const currentRowSum = currentRow.reduce((acc, i) => acc + i.getCurrentTotalWidth(), 0);
+        if (currentRowSum + item.getWidthWithoutRightMargin() <= wrapper.getWidthOfOneLine()) {
+            currentRow.push(item);
+        }
+        else {
+            byRows.push(new LegendItemCollection(currentRow));
+            currentRow = [item];
+        }
+        if (i === collection.items.length - 1)
+            byRows.push(new LegendItemCollection(currentRow));
+    });
+    if (byRows.length <= wrapper.getMaxRowsCount())
+        return collection.getActualWidths();
+    const result = [];
+    for (let i = 0; i < byRows.length - 1; i++) {
+        const top = byRows[i];
+        const bottom = byRows[i + 1];
+        const topFreeSpace = wrapper.getWidthOfOneLine() - top.getTotalWidth();
+        const firstOfBottom = bottom.getFirstItem();
+        if (topFreeSpace / firstOfBottom.getCurrentTotalWidth() > 0.51 || i === byRows.length - 2) {
+            const fromBottom = bottom.shift();
+            top.push(fromBottom);
+            result.push(...getNewWidths(top, new LegendWrapper({ maxRowsAmount: 1, width: wrapper.getWidthOfOneLine() })));
+        }
+    }
+    return result;
+}
+class LegendWrapper {
+    constructor(config) {
+        this.config = config;
+    }
+    getMaxWidth() {
+        return this.config.width * this.config.maxRowsAmount;
+    }
+    getWidthOfOneLine() {
+        return this.config.width;
+    }
+    getMaxRowsCount() {
+        return this.config.maxRowsAmount;
+    }
+}
+class LegendItem {
+    constructor(config) {
+        this.config = config;
+        this.width = this.config.width;
+    }
+    getCurrentTotalWidth() {
+        return this.width + this.getTotalMarginSize();
+    }
+    getWidthWithoutRightMargin() {
+        return this.width + this.config.marginLeft;
+    }
+    decreaseBy(by) {
+        this.width -= by;
+    }
+    getCurrentWidth() {
+        return this.width;
+    }
+    getTotalMarginSize() {
+        return this.config.marginLeft + this.config.marginRight;
+    }
+}
+class LegendItemCollection {
+    constructor(items) {
+        this.items = items;
+    }
+    getTotalWidth() {
+        return this.items.reduce((acc, item) => acc + item.getCurrentTotalWidth(), 0);
+    }
+    getActualWidths() {
+        return this.items.map(item => item.getCurrentWidth());
+    }
+    getTotalMarginSizes() {
+        return this.items.reduce((acc, item) => acc + item.getTotalMarginSize(), 0);
+    }
+    getItemsAmount() {
+        return this.items.length;
+    }
+    getItemsWithWidthBiggerThan(thanWidth) {
+        return this.items
+            .filter(item => item.getCurrentWidth() > thanWidth)
+            .sort((a, b) => a.getCurrentWidth() - b.getCurrentWidth());
+    }
+    getFirstItem() {
+        return this.items[0];
+    }
+    shift() {
+        return this.items.shift();
+    }
+    push(item) {
+        this.items.push(item);
+    }
+}

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

@@ -76,7 +76,7 @@ export class Tooltip {
         const tipBox = TipBox.renderOrGet(block, args.margin, args.blockSize);
         let currentKey = null;
         tipBox.on('mousemove', function (e) {
-            var _a, _b;
+            var _a;
             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());
@@ -85,9 +85,7 @@ export class Tooltip {
             if (!currentKey || currentKey !== keyValue) {
                 TooltipComponentsManager.showComponent(tooltipBlock.getEl());
                 if (args.type === '2d')
-                    TooltipDomHelper.fillForMulty2DCharts(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, (_a = args.tooltipOptions) === null || _a === void 0 ? void 0 : _a.html);
-                else
-                    TooltipDomHelper.fillForIntervalChart(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, (_b = args.tooltipOptions) === null || _b === void 0 ? void 0 : _b.html);
+                    TooltipDomHelper.fillForMulti2DCharts(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, (_a = args.tooltipOptions) === null || _a === void 0 ? void 0 : _a.html);
                 if (args.tooltipSettings.position === 'fixed') {
                     const tooltipCoordinate = TooltipHelper.getTooltipFixedCoordinate(args.scales.key, args.margin, keyValue, block.getSvg().node().getBoundingClientRect(), tooltipContent.node().getBoundingClientRect(), args.keyAxisOrient, window.innerWidth, window.innerHeight);
                     TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, block.transitionManager.durations.tooltipSlide);
@@ -95,7 +93,6 @@ export class Tooltip {
                 const tooltipLineAttributes = TooltipHelper.getTooltipLineAttributes(args.scales.key, args.margin, keyValue, args.chartOrientation, args.blockSize);
                 TooltipComponentsManager.setTooltipLineAttributes(tooltipLine, tooltipLineAttributes, block.transitionManager.durations.tooltipSlide);
                 TooltipComponentsManager.showComponent(tooltipLine);
-                //TODO: append highlight for interval / Extract this highlighting in method 
                 if (args.type === '2d') {
                     args.charts.forEach(chart => {
                         const elements = DomHelper.get2DChartElements(block, chart);

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

@@ -1,6 +1,6 @@
 import { Selection, BaseType } from 'd3-selection';
 import { MdtChartsDataSource, TooltipHtml } from "../../../config/config";
-import { IntervalChartModel, OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
+import { OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
 import { Size } from "../../../config/config";
 export interface TooltipLineAttributes {
     x1: number;
@@ -16,10 +16,9 @@ export declare class TooltipDomHelper {
     private static readonly groupClass;
     private static readonly headClass;
     private static readonly textItemClass;
-    private static readonly maxContentWidth;
-    static fillForMulty2DCharts(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, htmlHandler?: TooltipHtml): void;
+    private static readonly tooltipLegendDefaultMarker;
+    static fillForMulti2DCharts(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, htmlHandler?: TooltipHtml): void;
     static fillForPolarChart(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, chart: PolarChartModel, data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, markColor: string, htmlHandler?: TooltipHtml): void;
-    static fillForIntervalChart(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: IntervalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, htmlHandler?: TooltipHtml): void;
     static getRecalcedCoordinateByArrow(coordinate: [number, number], tooltipBlock: Selection<HTMLElement, unknown, HTMLElement, any>, blockSize: Size, tooltipArrow: Selection<BaseType, unknown, HTMLElement, any>, translateX?: number, translateY?: number): [number, number];
     private static renderHead;
     private static fillValuesContent;
@@ -27,4 +26,5 @@ export declare class TooltipDomHelper {
     private static setTooltipArrowCoordinate;
     private static fillContentByFunction;
     private static setWhiteSpaceForTextBlocks;
+    private static getMarkerCreator;
 }