mdt-charts 1.30.2 → 1.31.0

package/lib/config/config.d.ts

@@ -111,12 +111,16 @@ export interface TooltipOptions {
     html?: TooltipHtml;
     aggregator?: TooltipAggregator;
     formatValue?: TooltipFormatValue;
+    rows?: {
+        filterPredicate?: (row: TooltipPublicDataRow) => boolean;
+        sortCompareFn?: (aRow: TooltipPublicDataRow, bRow: TooltipPublicDataRow) => number;
+    };
 }
 export declare type TooltipHtml = (dataRow: MdtChartsDataRow) => string;
 export interface TooltipAggregator {
     content: (options: {
         row: MdtChartsDataRow;
-    }) => TooltipAggregatorContent;
+    }) => TooltipAggregatorContent | TooltipAggregatorContent[];
     position?: "underKey" | "underValues";
 }
 export declare type TooltipAggregatorContent = {
@@ -131,6 +135,13 @@ export declare type TooltipFormatValue = (params: {
     rawValue: number | null | undefined;
     autoFormattedValue: string;
 }) => string;
+export interface TooltipPublicDataRow {
+    textContent: {
+        caption: string;
+        value?: number;
+    };
+    valueField: MdtChartsValueField;
+}
 export interface AdditionalElements {
     gridLine: GridLineOptions;
 }

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 { ChartLegendModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { ChartLegendMarkerModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { LegendContentRenderingOptions } from "./legend";
 import { LegendHelperService } from "./legendHelperService";
 export interface LegendCoordinate {
@@ -9,9 +9,9 @@ export interface LegendCoordinate {
     height: number;
     width: number;
 }
-export interface ChartLegendEngineModel extends ChartLegendModel {
+export declare type ChartLegendEngineModel = ChartLegendMarkerModel & {
     textContent: string;
-}
+};
 export declare class LegendHelper {
     static service: LegendHelperService;
     static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel, data: MdtChartsDataSource): ChartLegendEngineModel[];

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

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

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

@@ -18,9 +18,9 @@ export function getMarkerCreator(options, customOptions) {
         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);
+    return new CircleMarkerCreator((_a = customOptions === null || customOptions === void 0 ? void 0 : customOptions.default) === null || _a === void 0 ? void 0 : _a.cssClass);
 }
-class DefaultMarkerCreator {
+class CircleMarkerCreator {
     constructor(cssClass = Legend.markerCircle) {
         this.cssClass = cssClass;
     }

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

@@ -1,6 +1,5 @@
 import { Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
-import { MdtChartsDataSource } from "../../../config/config";
 import { Scales } from "../scale/scale";
 import { TooltipSettings } from "../../../designer/designerConfig";
 export declare class Tooltip {
@@ -9,7 +8,7 @@ export declare class Tooltip {
     static readonly tooltipWrapperClass = "mdt-charts-tooltip-wrapper";
     static readonly tooltipContentClass = "mdt-charts-tooltip-content";
     static readonly tooltipArrowClass = "mdt-charts-tooltip-arrow";
-    static render(block: Block, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>, data: MdtChartsDataSource, tooltipOptions: TooltipSettings, scales?: Scales): void;
+    static render(block: Block, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>, tooltipOptions: TooltipSettings, scales?: Scales): void;
     static hide(block: Block): void;
     private static renderTooltipFor2DCharts;
     private static renderTooltipForPolar;

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

@@ -13,23 +13,20 @@ 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) {
+    static render(block, model, tooltipOptions, scales) {
         TooltipComponentsManager.renderTooltipWrapper(block);
-        const withTooltipIndex = model.options.charts.findIndex((chart) => chart.tooltip.show);
-        if (withTooltipIndex !== -1) {
-            if (model.options.type === "2d") {
-                this.renderTooltipFor2DCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
-            }
-            else if (model.options.type === "polar") {
-                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutThicknessCalculator.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
-            }
+        if (model.options.type === "2d") {
+            this.renderTooltipFor2DCharts(block, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
+        }
+        else if (model.options.type === "polar") {
+            this.renderTooltipForPolar(block, model.options, model.blockCanvas.size, model.chartBlock.margin, DonutThicknessCalculator.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
         }
     }
     static hide(block) {
         TooltipComponentsManager.hideComponent(block.getWrapper().select(`.${this.tooltipBlockClass}`));
         TooltipComponentsManager.hideComponent(block.getSvg().select(`.${this.tooltipLineClass}`));
     }
-    static renderTooltipFor2DCharts(block, data, blockSize, margin, scales, options, tooltipOptions) {
+    static renderTooltipFor2DCharts(block, blockSize, margin, scales, options, tooltipOptions) {
         if (scales.key.domain().length === 0)
             return;
         const tooltipParams = {
@@ -45,15 +42,15 @@ export class Tooltip {
             tooltipSettings: tooltipOptions,
             tooltipOptions: options.tooltip
         };
-        this.renderLineTooltip(block, data, tooltipParams);
+        this.renderLineTooltip(block, tooltipParams);
     }
-    static renderTooltipForPolar(block, options, data, blockSize, margin, chartThickness, tooltipOptions) {
+    static renderTooltipForPolar(block, options, blockSize, margin, chartThickness, tooltipOptions) {
         const attrTransform = block.getSvg().select(`.${Donut.donutBlockClass}`).attr("transform");
         const translateNums = Helper.getTranslateNumbers(attrTransform);
         const arcItems = Donut.getAllArcGroups(block);
-        this.renderTooltipForDonut(block, arcItems, data, options.data, options.charts[0], blockSize, margin, chartThickness, tooltipOptions, options.tooltip, { x: translateNums[0], y: translateNums[1] });
+        this.renderTooltipForDonut(block, arcItems, options.data, blockSize, margin, chartThickness, tooltipOptions, options.tooltip, { x: translateNums[0], y: translateNums[1] });
     }
-    static renderLineTooltip(block, data, args) {
+    static renderLineTooltip(block, args) {
         const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
         const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
         const tooltipLine = TooltipComponentsManager.renderTooltipLine(block);
@@ -69,7 +66,7 @@ export class Tooltip {
             if (!currentKey || currentKey !== keyValue) {
                 TooltipComponentsManager.showComponent(tooltipBlock.getEl());
                 if (args.type === "2d")
-                    TooltipDomHelper.fillForMulti2DCharts(tooltipContent, args.charts.filter((ch) => ch.tooltip.show), data, args.dataOptions, keyValue, args.tooltipOptions);
+                    TooltipDomHelper.fillContent(tooltipContent, keyValue, args.tooltipOptions);
                 if (args.tooltipSettings.position === "fixed") {
                     const tooltipCoordinate = TooltipHelper.getTooltipFixedCoordinate(args.scales.key, args.margin, keyValue, block.getSvg().node().getBoundingClientRect(), tooltipContent.node().getBoundingClientRect(), args.keyAxisOrient, window.innerWidth, window.innerHeight);
                     TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, block.transitionManager.durations.tooltipSlide);
@@ -110,7 +107,7 @@ export class Tooltip {
             currentKey = null;
         });
     }
-    static renderTooltipForDonut(block, elements, data, dataOptions, chart, blockSize, margin, donutThickness, tooltipSettings, tooltipOptions, translate) {
+    static renderTooltipForDonut(block, elements, dataOptions, blockSize, margin, donutThickness, tooltipSettings, tooltipOptions, translate) {
         const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
         const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
         let tooltipArrow;
@@ -127,7 +124,7 @@ export class Tooltip {
         }
         elements.on("mouseover", function (e, dataRow) {
             TooltipComponentsManager.showComponent(tooltipBlock.getEl());
-            TooltipDomHelper.fillForPolarChart(tooltipContent, chart, data, dataOptions, dataRow.data[dataOptions.keyField.name], select(this).select("path").style("fill"), tooltipOptions);
+            TooltipDomHelper.fillContent(tooltipContent, dataRow.data[dataOptions.keyField.name], tooltipOptions);
             if (tooltipSettings.position === "fixed") {
                 const coordinatePointer = TooltipDomHelper.getRecalcedCoordinateByArrow(DonutHelper.getArcCentroid(blockSize, margin, dataRow, donutThickness), tooltipBlock.getEl(), blockSize, tooltipArrow, translate.x, translate.y);
                 coordinatePointer[0] = coordinatePointer[0] + translate.x;

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

@@ -1,6 +1,5 @@
 import { Selection, BaseType } from "d3-selection";
-import { MdtChartsDataSource, TooltipOptions } from "../../../config/config";
-import { OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
+import { TooltipBasicModel } from "../../../model/model";
 import { Size } from "../../../config/config";
 export interface TooltipLineAttributes {
     x1: number;
@@ -14,20 +13,9 @@ export declare const TOOLTIP_ARROW_PADDING_X: number;
 export declare const TOOLTIP_ARROW_PADDING_Y = 13;
 export declare class TooltipDomHelper {
     private static readonly groupClass;
-    private static readonly headClass;
     private static readonly textItemClass;
     private static readonly tooltipLegendDefaultMarker;
-    static fillForMulti2DCharts(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, tooltipOptions?: TooltipOptions): void;
-    static fillForPolarChart(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, chart: PolarChartModel, data: MdtChartsDataSource, dataOptions: OptionsModelData, keyValue: string, markColor: string, tooltipOptions?: TooltipOptions): void;
+    static fillContent(contentBlock: Selection<HTMLElement, unknown, BaseType, unknown>, keyValue: string, tooltipOptions: TooltipBasicModel): void;
     static getRecalcedCoordinateByArrow(coordinate: [number, number], tooltipBlock: Selection<HTMLElement, unknown, HTMLElement, any>, blockSize: Size, tooltipArrow: Selection<BaseType, unknown, HTMLElement, any>, translateX?: number, translateY?: number): [number, number];
-    private static renderHead;
-    private static fillValuesContent;
-    private static getTooltipItemHtml;
-    private static getTooltipContentItemHtml;
     private static setTooltipArrowCoordinate;
-    private static fillContentByFunction;
-    private static setWhiteSpaceForTextBlocks;
-    private static getMarkerCreator;
-    private static addAggregatorTooltipItem;
-    private static fillCharts;
 }

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

@@ -1,34 +1,41 @@
-import { ValueFormatter } from "../../valueFormatter";
 import { TooltipHelper } from "./tooltipHelper";
-import { Helper } from "../../helpers/helper";
 import { getMarkerCreator } from "../legend/legendMarkerCreator";
 export const ARROW_SIZE = 20;
 export const ARROW_DEFAULT_POSITION = 9;
 export const TOOLTIP_ARROW_PADDING_X = ARROW_DEFAULT_POSITION - (ARROW_SIZE * Math.sqrt(2) - ARROW_SIZE) / 2 + 14;
 export const TOOLTIP_ARROW_PADDING_Y = 13;
 export class TooltipDomHelper {
-    static fillForMulti2DCharts(contentBlock, charts, data, dataOptions, keyValue, tooltipOptions) {
-        const chartDataRows = [];
-        charts.forEach((chart) => {
-            chart.data.valueFields.forEach((field, index) => {
-                chartDataRows.push({
-                    field,
-                    markColor: chart.style.elementColors[index % chart.style.elementColors.length],
-                    markerCreator: this.getMarkerCreator(chart.legend)
-                });
+    static fillContent(contentBlock, keyValue, tooltipOptions) {
+        const content = tooltipOptions.getContent(keyValue);
+        contentBlock.html("");
+        if (content.type === "html") {
+            contentBlock.html(content.htmlContent);
+            contentBlock.selectAll(`.${this.textItemClass}`).style("white-space", "pre-wrap");
+            contentBlock.selectAll(".tooltip-text-item").style("display", "block");
+        }
+        else {
+            content.rows.forEach((row) => {
+                var _a;
+                const group = contentBlock.append("div").attr("class", this.groupClass);
+                if ((_a = row.wrapper) === null || _a === void 0 ? void 0 : _a.cssClassName) {
+                    group.classed(row.wrapper.cssClassName, true);
+                }
+                if (row.marker) {
+                    const colorBlock = group.append("div").attr("class", "tooltip-color");
+                    getMarkerCreator(row.marker, {
+                        default: { cssClass: TooltipDomHelper.tooltipLegendDefaultMarker }
+                    }).renderMarker(colorBlock, row.marker.color);
+                }
+                const rowTextBlock = group
+                    .append("div")
+                    .attr("class", "tooltip-texts")
+                    .append("div")
+                    .attr("class", this.textItemClass);
+                rowTextBlock.append("span").attr("class", "tooltip-field-title").text(row.textContent.caption);
+                if (row.textContent.value)
+                    rowTextBlock.append("span").attr("class", "tooltip-field-value").text(row.textContent.value);
             });
-        });
-        this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
-    }
-    static fillForPolarChart(contentBlock, chart, data, dataOptions, keyValue, markColor, tooltipOptions) {
-        const chartDataRows = [
-            {
-                field: chart.data.valueField,
-                markColor,
-                markerCreator: this.getMarkerCreator(chart.legend)
-            }
-        ];
-        this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
+        }
     }
     static getRecalcedCoordinateByArrow(coordinate, tooltipBlock, blockSize, tooltipArrow, translateX = 0, translateY = 0) {
         const tooltipBlockNode = tooltipBlock.node();
@@ -40,97 +47,13 @@ export class TooltipDomHelper {
             coordinate[1] - TOOLTIP_ARROW_PADDING_Y - tooltipBlockNode.getBoundingClientRect().height - verticalPad
         ];
     }
-    static renderHead(contentBlock, keyValue) {
-        contentBlock.append("div").attr("class", `${this.groupClass} ${this.headClass}`).text(keyValue);
-    }
-    static fillValuesContent(contentBlock, { markColor, tooltipHtml, markerCreator }) {
-        const group = contentBlock.append("div").attr("class", this.groupClass);
-        if (markColor) {
-            const colorBlock = group.append("div").attr("class", "tooltip-color");
-            markerCreator === null || markerCreator === void 0 ? void 0 : markerCreator.renderMarker(colorBlock, markColor);
-        }
-        group
-            .append("div")
-            .attr("class", "tooltip-texts")
-            .append("div")
-            .attr("class", this.textItemClass)
-            .html(tooltipHtml);
-    }
-    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
-            })
-            : formattedValueByDefault;
-        const text = this.getTooltipContentItemHtml(valueField.title, formattedValue);
-        return text;
-    }
-    static getTooltipContentItemHtml(fieldTitle, fieldValue) {
-        return `<span class="tooltip-field-title">${fieldTitle}</span>
-                <span class="tooltip-field-value">${fieldValue}</span>`;
-    }
     static setTooltipArrowCoordinate(tooltipArrow, horizontalPad) {
         if (horizontalPad !== 0)
             tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION + Math.floor(horizontalPad)}px`);
         else
             tooltipArrow.style("left", `${ARROW_DEFAULT_POSITION}px`);
     }
-    static fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler) {
-        const row = Helper.getRowsByKeys([keyValue], dataOptions.keyField.name, data[dataOptions.dataSource])[0];
-        contentBlock.html(htmlHandler(row));
-        this.setWhiteSpaceForTextBlocks(contentBlock);
-        contentBlock.selectAll(".tooltip-text-item").style("display", "block");
-    }
-    static setWhiteSpaceForTextBlocks(contentBlock) {
-        contentBlock.selectAll(`.${this.textItemClass}`).style("white-space", "pre-wrap");
-    }
-    static getMarkerCreator(options) {
-        return getMarkerCreator(options, { default: { cssClass: TooltipDomHelper.tooltipLegendDefaultMarker } });
-    }
-    static addAggregatorTooltipItem(tooltipOptions, data, tooltipItems) {
-        if (tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.aggregator) {
-            const aggregatorContent = tooltipOptions.aggregator.content({ row: data });
-            const aggregatorHtml = aggregatorContent.type === "plainText"
-                ? aggregatorContent.textContent
-                : this.getTooltipContentItemHtml(aggregatorContent.caption, aggregatorContent.value);
-            const tooltipAggregatorItem = {
-                markColor: undefined,
-                tooltipHtml: aggregatorHtml,
-                markerCreator: undefined
-            };
-            if (tooltipOptions.aggregator.position === "underValues")
-                tooltipItems.push(tooltipAggregatorItem);
-            else
-                tooltipItems.unshift(tooltipAggregatorItem);
-        }
-    }
-    static fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions) {
-        const row = data[dataOptions.dataSource].find((d) => d[dataOptions.keyField.name] === keyValue);
-        contentBlock.html("");
-        if (!(tooltipOptions === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.html)) {
-            const tooltipItems = [];
-            this.renderHead(contentBlock, keyValue);
-            chartDataRows.forEach((dataRow) => {
-                const html = this.getTooltipItemHtml(row, dataRow.field, tooltipOptions);
-                tooltipItems.push({
-                    markColor: dataRow.markColor,
-                    tooltipHtml: html,
-                    markerCreator: dataRow.markerCreator
-                });
-            });
-            this.addAggregatorTooltipItem(tooltipOptions, row, tooltipItems);
-            tooltipItems.forEach((item) => {
-                this.fillValuesContent(contentBlock, item);
-            });
-        }
-        else {
-            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, tooltipOptions.html);
-        }
-    }
 }
 TooltipDomHelper.groupClass = "tooltip-group";
-TooltipDomHelper.headClass = "tooltip-head";
 TooltipDomHelper.textItemClass = "tooltip-text-item";
 TooltipDomHelper.tooltipLegendDefaultMarker = "tooltip-circle";

package/lib/engine/polarNotation/polarManager.js

@@ -12,7 +12,7 @@ export class PolarManager {
         this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, options.chartCanvas);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.get().render(engine.block, engine.data, options, model);
-        Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock);
+        Tooltip.render(engine.block, model, model.otherComponents.tooltipBlock);
         engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         if (model.dataSettings.scope.hidedRecordsAmount !== 0)
             RecordOverflowAlertCore.render(engine.block, options.recordOverflowAlert);
@@ -32,7 +32,7 @@ export class PolarManager {
         Tooltip.hide(block);
         const options = model.options;
         Donut.update(block, data[options.data.dataSource], model.chartBlock.margin, options.charts[0], model.blockCanvas.size, options.chartCanvas, options.data.keyField.name).then(() => {
-            Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
+            Tooltip.render(block, model, model.otherComponents.tooltipBlock);
             block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
         Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -44,7 +44,7 @@ export class TwoDimensionalManager {
         engine.block.filterEventManager.event2DUpdate(options);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.get().render(engine.block, engine.data, options, model);
-        Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock, scales);
+        Tooltip.render(engine.block, model, model.otherComponents.tooltipBlock, scales);
         if (model.dataSettings.scope.hidedRecordsAmount !== 0)
             RecordOverflowAlertCore.render(engine.block, options.recordOverflowAlert);
         engine.block.getSvg().on("click", (e) => {
@@ -87,7 +87,7 @@ export class TwoDimensionalManager {
         Promise.all(promises).then(() => {
             block.filterEventManager.event2DUpdate(options);
             block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
-            Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
+            Tooltip.render(block, model, model.otherComponents.tooltipBlock, scales);
         });
         RecordOverflowAlertCore.update(block, options.recordOverflowAlert);
         if (this.canvasValueLabels)

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -1,4 +1,4 @@
-import { AxisModel } from "../featuresModel/axisModel";
+import { AxisModel } from "../featuresModel/axis/axisModel";
 import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
 import { ModelHelper } from "../helpers/modelHelper";
 import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";

package/lib/model/featuresModel/{axisModel.d.ts → axis/axisModel.d.ts}

@@ -1,8 +1,8 @@
-import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions, AxisLabelFormatter } from "../../config/config";
-import { AxisModelOptions, Orient, ScaleValueModel, TickAmountPolicy } from "../model";
-import { AxisType } from "../modelBuilder";
-import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
-import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
+import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions, AxisLabelFormatter } from "../../../config/config";
+import { AxisModelOptions, Orient, ScaleValueModel, TickAmountPolicy } from "../../model";
+import { AxisType } from "../../modelBuilder";
+import { AxisLabelCanvas, TooltipSettings } from "../../../designer/designerConfig";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 export interface LabelSize {
     width: number;
     height: number;

package/lib/model/featuresModel/{axisModel.js → axis/axisModel.js}

@@ -1,7 +1,7 @@
-import { ModelHelper } from "../helpers/modelHelper";
-import { AxisType } from "../modelBuilder";
-import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
-import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
+import { ModelHelper } from "../../helpers/modelHelper";
+import { AxisType } from "../../modelBuilder";
+import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
+import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
 import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
 export const MINIMAL_VERTICAL_STEP_SIZE = 60;
 export const MINIMAL_HORIZONTAL_STEP_SIZE = 100;

package/lib/model/featuresModel/{axisModelService.d.ts → axis/axisModelService.d.ts}

@@ -1,4 +1,4 @@
-import { AxisLabelPosition, MdtChartsDataRow, MdtChartsShowAxisLabelRule, ShowTickFn } from "../../config/config";
+import { AxisLabelPosition, MdtChartsDataRow, MdtChartsShowAxisLabelRule, ShowTickFn } from "../../../config/config";
 export declare const showAllTicks: ShowTickFn;
 export declare class AxisModelService {
     getKeyAxisLabelPosition(chartBlockWidth: number, scopedDataLength: number, positionFromConfig?: AxisLabelPosition): AxisLabelPosition;

package/lib/model/featuresModel/otherComponents.js

@@ -1,6 +1,6 @@
 import { LegendModel } from "./legendModel/legendModel";
 import { TitleModel } from "./titleModel";
-import { TooltipModel } from "./tooltipModel";
+import { TooltipCanvasModel } from "./tooltipModel/tooltipCanvasModel";
 export class OtherComponentsModel {
     static getOtherComponentsModel(dependencies, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
@@ -8,7 +8,7 @@ export class OtherComponentsModel {
         return {
             legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel, dependencies.legendConfig),
             titleBlock: canvasModel.titleCanvas.getModel(),
-            tooltipBlock: TooltipModel.getTooltipModel(dependencies.elementsOptions.tooltip)
+            tooltipBlock: TooltipCanvasModel.getCanvasModel(dependencies.elementsOptions.tooltip)
         };
     }
 }

package/lib/model/featuresModel/tooltipModel/contentByNotations/polarInitialRowsProvider.d.ts

@@ -0,0 +1,14 @@
+import { MdtChartsDataRow } from "../../../../config/config";
+import { ValueField } from "../../../model";
+import { TooltipContentInitialRow, TooltipContentInitialRowsProvider, TooltipContentInitialRowsProviderContext } from "./tooltipContentInitialRowsProvider";
+export interface PolarInitialRowsProviderOptions {
+    valueField: ValueField;
+    datasource: MdtChartsDataRow[];
+    chartColors: string[];
+    keyFieldName: string;
+}
+export declare class PolarInitialRowsProvider implements TooltipContentInitialRowsProvider {
+    private readonly options;
+    constructor(options: PolarInitialRowsProviderOptions);
+    getInitialRows(context: TooltipContentInitialRowsProviderContext): TooltipContentInitialRow[];
+}

package/lib/model/featuresModel/tooltipModel/contentByNotations/polarInitialRowsProvider.js

@@ -0,0 +1,16 @@
+import { POLAR_LEGEND_MARKER } from "../../../notations/polar/modelConstants/polarLegendMarker";
+export class PolarInitialRowsProvider {
+    constructor(options) {
+        this.options = options;
+    }
+    getInitialRows(context) {
+        const indexOfCurrentDataRow = this.options.datasource.findIndex((row) => row[this.options.keyFieldName] === context.keyFieldValue);
+        const markerColor = this.options.chartColors[indexOfCurrentDataRow];
+        return [
+            {
+                marker: Object.assign(Object.assign({}, POLAR_LEGEND_MARKER), { color: markerColor }),
+                valueField: this.options.valueField
+            }
+        ];
+    }
+}

package/lib/model/featuresModel/tooltipModel/contentByNotations/tooltipContentInitialRowsProvider.d.ts

@@ -0,0 +1,13 @@
+import { MdtChartsDataRow } from "../../../../config/config";
+import { TooltipMarkerModel, ValueField } from "../../../model";
+export interface TooltipContentInitialRow {
+    marker: TooltipMarkerModel;
+    valueField: ValueField;
+}
+export interface TooltipContentInitialRowsProviderContext {
+    keyFieldValue: string;
+    currentDataRow: MdtChartsDataRow;
+}
+export interface TooltipContentInitialRowsProvider {
+    getInitialRows(context: TooltipContentInitialRowsProviderContext): TooltipContentInitialRow[];
+}

package/lib/model/featuresModel/tooltipModel/contentByNotations/tooltipContentInitialRowsProvider.js

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

package/lib/model/featuresModel/tooltipModel/contentByNotations/twoDimInitialRowsProvider.d.ts

@@ -0,0 +1,10 @@
+import { TwoDimensionalChartModel } from "../../../model";
+import { TooltipContentInitialRow, TooltipContentInitialRowsProvider } from "./tooltipContentInitialRowsProvider";
+export interface TwoDimInitialRowsProviderOptions {
+    chartsInfo: Pick<TwoDimensionalChartModel, "data" | "style" | "legend">[];
+}
+export declare class TwoDimInitialRowsProvider implements TooltipContentInitialRowsProvider {
+    private readonly options;
+    constructor(options: TwoDimInitialRowsProviderOptions);
+    getInitialRows(): TooltipContentInitialRow[];
+}

package/lib/model/featuresModel/tooltipModel/contentByNotations/twoDimInitialRowsProvider.js

@@ -0,0 +1,17 @@
+export class TwoDimInitialRowsProvider {
+    constructor(options) {
+        this.options = options;
+    }
+    getInitialRows() {
+        const initialRows = [];
+        this.options.chartsInfo.forEach((chart) => {
+            chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
+                initialRows.push({
+                    marker: Object.assign({ color: chart.style.elementColors[valueFieldIndex % chart.style.elementColors.length] }, chart.legend),
+                    valueField
+                });
+            });
+        });
+        return initialRows;
+    }
+}

package/lib/model/featuresModel/tooltipModel/tooltipCanvasModel.d.ts

@@ -0,0 +1,4 @@
+import { TooltipSettings } from "../../../designer/designerConfig";
+export declare class TooltipCanvasModel {
+    static getCanvasModel(options: TooltipSettings): TooltipSettings;
+}

package/lib/model/featuresModel/{tooltipModel.js → tooltipModel/tooltipCanvasModel.js}

@@ -1,5 +1,5 @@
-export class TooltipModel {
-    static getTooltipModel(options) {
+export class TooltipCanvasModel {
+    static getCanvasModel(options) {
         return {
             position: (options === null || options === void 0 ? void 0 : options.position) || "followCursor"
         };

package/lib/model/featuresModel/tooltipModel/tooltipContentModel.d.ts

@@ -0,0 +1,18 @@
+import { MdtChartsDataRow, TooltipOptions } from "../../../config/config";
+import { Formatter } from "../../../main";
+import { TooltipContent } from "../../model";
+import { TooltipContentInitialRowsProvider } from "./contentByNotations/tooltipContentInitialRowsProvider";
+export interface TooltipContentGeneratorOptions {
+    datasource: MdtChartsDataRow[];
+    initialRowsProvider: TooltipContentInitialRowsProvider;
+    publicOptions?: TooltipOptions;
+    keyFieldName: string;
+    valueGlobalFormatter: Formatter;
+}
+export declare class TwoDimTooltipContentGenerator {
+    private readonly options;
+    private readonly headWrapperCssClassName;
+    constructor(options: TooltipContentGeneratorOptions);
+    generateContent(keyFieldValue: string): TooltipContent;
+    private createRows;
+}

package/lib/model/featuresModel/tooltipModel/tooltipContentModel.js

@@ -0,0 +1,87 @@
+export class TwoDimTooltipContentGenerator {
+    constructor(options) {
+        this.options = options;
+        this.headWrapperCssClassName = "tooltip-head";
+    }
+    generateContent(keyFieldValue) {
+        var _a;
+        const currentDataRow = this.options.datasource.find((r) => r[this.options.keyFieldName] === keyFieldValue);
+        if ((_a = this.options.publicOptions) === null || _a === void 0 ? void 0 : _a.html)
+            return {
+                type: "html",
+                htmlContent: this.options.publicOptions.html(currentDataRow)
+            };
+        return this.createRows(keyFieldValue, currentDataRow);
+    }
+    createRows(keyFieldValue, currentDataRow) {
+        var _a, _b, _c, _d, _e;
+        let contentRows = [];
+        let initialRows = this.options.initialRowsProvider
+            .getInitialRows({ keyFieldValue, currentDataRow })
+            .map((initialRow) => {
+            return {
+                marker: initialRow.marker,
+                textContent: {
+                    caption: initialRow.valueField.title,
+                    value: currentDataRow[initialRow.valueField.name]
+                },
+                valueField: initialRow.valueField
+            };
+        });
+        initialRows = ((_b = (_a = this.options.publicOptions) === null || _a === void 0 ? void 0 : _a.rows) === null || _b === void 0 ? void 0 : _b.filterPredicate)
+            ? initialRows.filter((row) => this.options.publicOptions.rows.filterPredicate(row))
+            : initialRows;
+        if ((_d = (_c = this.options.publicOptions) === null || _c === void 0 ? void 0 : _c.rows) === null || _d === void 0 ? void 0 : _d.sortCompareFn)
+            initialRows.sort(this.options.publicOptions.rows.sortCompareFn);
+        initialRows.forEach((initialRow) => {
+            var _a;
+            const formattedValueByDefault = this.options.valueGlobalFormatter(initialRow.textContent.value, {
+                type: initialRow.valueField.format
+            });
+            const formattedValue = ((_a = this.options.publicOptions) === null || _a === void 0 ? void 0 : _a.formatValue)
+                ? this.options.publicOptions.formatValue({
+                    rawValue: currentDataRow[initialRow.valueField.name],
+                    autoFormattedValue: formattedValueByDefault
+                })
+                : formattedValueByDefault;
+            contentRows.push({
+                marker: initialRow.marker,
+                textContent: {
+                    caption: initialRow.textContent.caption,
+                    value: formattedValue
+                }
+            });
+        });
+        if ((_e = this.options.publicOptions) === null || _e === void 0 ? void 0 : _e.aggregator) {
+            const contentResult = this.options.publicOptions.aggregator.content({ row: currentDataRow });
+            const aggregatorContent = Array.isArray(contentResult) ? contentResult : [contentResult];
+            const tooltipAggregatorItem = aggregatorContent.map((content) => {
+                const caption = content.type === "plainText" ? content.textContent : content.caption;
+                const value = content.type === "plainText" ? undefined : content.value;
+                return {
+                    textContent: {
+                        caption,
+                        value
+                    }
+                };
+            });
+            if (this.options.publicOptions.aggregator.position === "underValues")
+                contentRows = contentRows.concat(tooltipAggregatorItem);
+            else
+                contentRows = tooltipAggregatorItem.concat(contentRows);
+        }
+        const headerRow = {
+            textContent: {
+                caption: keyFieldValue
+            },
+            wrapper: {
+                cssClassName: this.headWrapperCssClassName
+            }
+        };
+        contentRows.unshift(headerRow);
+        return {
+            type: "rows",
+            rows: contentRows
+        };
+    }
+}

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -1,4 +1,4 @@
-import { AxisModel, LABEL_ELEMENT_HEIGHT_PX } from "../../featuresModel/axisModel";
+import { AxisModel, LABEL_ELEMENT_HEIGHT_PX } from "../../featuresModel/axis/axisModel";
 import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendModel";
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
 import { AxisType } from "../../modelBuilder";

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 import { BoundingRect } from "../engine/features/valueLabelsCollision/valueLabelsCollision";
 declare type AxisType = "key" | "value";
@@ -36,8 +36,32 @@ export interface BlockMargin {
     left: number;
     right: number;
 }
+export interface TooltipBasicModel {
+    getContent: (keyFieldValue: string) => TooltipContent;
+}
+export declare type TooltipMarkerModel = ChartLegendMarkerModel & {
+    color: string;
+};
+export declare type TooltipContent = {
+    type: "html";
+    htmlContent: string;
+} | TooltipContentWithRows;
+export interface TooltipContentWithRows {
+    type: "rows";
+    rows: TooltipContentRow[];
+}
+export interface TooltipContentRow {
+    marker?: TooltipMarkerModel;
+    textContent: {
+        caption: string;
+        value?: string | number;
+    };
+    wrapper?: {
+        cssClassName?: string;
+    };
+}
 interface BasicOptionsModel {
-    tooltip: TooltipOptions;
+    tooltip: TooltipBasicModel;
 }
 interface GraphicNotationOptionsModel extends BasicOptionsModel {
     legend: ILegendModel;
@@ -281,23 +305,23 @@ export interface DonutThicknessOptions {
     unit: DonutThicknessUnit;
 }
 interface ChartModel {
-    tooltip: TooltipModel;
     cssClasses: string[];
     style: ChartStyle;
 }
-interface TooltipModel {
-    show: boolean;
-}
 export interface ChartStyle {
     elementColors: string[];
     opacity: number;
 }
-export interface ChartLegendModel {
-    markerShape: LegendMarkerShape;
+export declare type ChartLegendMarkerModel = {
+    markerShape: "circle";
+} | {
+    markerShape: "bar";
     barViewOptions: TwoDimensionalChartLegendBarModel;
+} | {
+    markerShape: "line";
     lineViewOptions: TwoDimensionalChartLegendLineModel;
-}
-export declare type LegendMarkerShape = "default" | "bar" | "line";
+};
+export declare type LegendMarkerShape = ChartLegendMarkerModel["markerShape"];
 export interface TwoDimensionalChartLegendBarModel {
     hatch: BarLikeChartHatchOptions;
     borderRadius: BarBorderRadius;
@@ -359,13 +383,13 @@ export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLine
     index: number;
     embeddedLabels: EmbeddedLabelTypeModel;
     isSegmented: boolean;
-    legend: ChartLegendModel;
+    legend: ChartLegendMarkerModel;
     valueLabels: TwoDimChartValueLabelsOptions;
 }
 export interface PolarChartModel extends ChartModel {
     type: PolarChartType;
     data: PolarChartDataModel;
-    legend: ChartLegendModel;
+    legend: ChartLegendMarkerModel;
 }
 export interface TwoDimensionalChartDataModel {
     valueFields: ValueField[];

package/lib/model/notations/polar/modelConstants/polarLegendMarker.d.ts

@@ -0,0 +1,2 @@
+import { ChartLegendMarkerModel } from "../../../model";
+export declare const POLAR_LEGEND_MARKER: ChartLegendMarkerModel;

package/lib/model/notations/polar/modelConstants/polarLegendMarker.js

@@ -0,0 +1,3 @@
+export const POLAR_LEGEND_MARKER = {
+    markerShape: "circle"
+};

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

@@ -2,10 +2,14 @@ import { ChartStyleModelService } from "../../chartStyleModel/chartStyleModel";
 import { DonutModel } from "./donut/donutModel";
 import { TitleConfigReader } from "../../modelInstance/titleConfigReader";
 import { createRecordOverflowModel } from "../../featuresModel/recordOverflowModel/recordOverflowModel";
+import { POLAR_LEGEND_MARKER } from "./modelConstants/polarLegendMarker";
+import { TwoDimTooltipContentGenerator } from "../../featuresModel/tooltipModel/tooltipContentModel";
+import { PolarInitialRowsProvider } from "../../featuresModel/tooltipModel/contentByNotations/polarInitialRowsProvider";
 export const MIN_DONUT_BLOCK_SIZE = 120;
 export class PolarModel {
     static getOptions(options, designerConfig, modelInstance) {
         const titleConfig = TitleConfigReader.create(options.title, modelInstance);
+        const chart = this.getChartsModel(options.chart, modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle);
         return {
             type: options.type,
             selectable: !!options.selectable,
@@ -14,9 +18,25 @@ export class PolarModel {
                 fontSize: titleConfig.getFontSize()
             },
             data: Object.assign({}, options.data),
-            charts: this.getChartsModel(options.chart, modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle),
+            charts: [chart],
             legend: modelInstance.canvasModel.legendCanvas.getModel(),
-            tooltip: options.tooltip,
+            tooltip: {
+                getContent: (keyFieldValue) => {
+                    const generator = new TwoDimTooltipContentGenerator({
+                        datasource: modelInstance.dataModel.repository.getRawRows(),
+                        keyFieldName: options.data.keyField.name,
+                        publicOptions: options.tooltip,
+                        initialRowsProvider: new PolarInitialRowsProvider({
+                            datasource: modelInstance.dataModel.repository.getRawRows(),
+                            valueField: options.chart.data.valueField,
+                            keyFieldName: options.data.keyField.name,
+                            chartColors: chart.style.elementColors
+                        }),
+                        valueGlobalFormatter: designerConfig.dataFormat.formatters
+                    });
+                    return generator.generateContent(keyFieldValue);
+                }
+            },
             chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows()),
             defs: { gradients: [] },
             recordOverflowAlert: createRecordOverflowModel(modelInstance.dataModel.getScope().hidedRecordsAmount, {
@@ -52,28 +72,13 @@ export class PolarModel {
         return this.donutModel.getSettings(settings, chartOptions, dataRows);
     }
     static getChartsModel(chart, dataLength, chartStyleConfig) {
-        const chartsModel = [];
-        chartsModel.push({
+        return {
             type: chart.type,
             data: Object.assign({}, chart.data),
-            tooltip: { show: true },
             cssClasses: ChartStyleModelService.getCssClasses(0),
             style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig),
-            legend: {
-                markerShape: "default",
-                barViewOptions: {
-                    hatch: { on: false },
-                    borderRadius: { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 },
-                    width: 0
-                },
-                lineViewOptions: {
-                    dashedStyles: { on: false, dashSize: 0, gapSize: 0 },
-                    strokeWidth: 0,
-                    length: 0
-                }
-            }
-        });
-        return chartsModel;
+            legend: POLAR_LEGEND_MARKER
+        };
     }
 }
 PolarModel.donutModel = new DonutModel();

package/lib/model/notations/twoDimensional/styles.d.ts

@@ -1,4 +1,4 @@
-import { AreaChartViewOptions, BarBorderRadius, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions, Orient, TwoDimensionalBarLikeChartViewModel, TwoDimensionalChartLegendLineModel } from "../../model";
+import { AreaChartViewOptions, BarBorderRadius, ChartLegendMarkerModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions, Orient, TwoDimensionalBarLikeChartViewModel, TwoDimensionalChartLegendLineModel } from "../../model";
 import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../../config/config";
 import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
 export declare const LINE_CHART_DEFAULT_WIDTH = 2;
@@ -7,7 +7,7 @@ export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDa
 export declare function getBarViewOptions(chart: MdtChartsTwoDimensionalChart, keyAxisOrient: Orient, barIndexes: number[]): TwoDimensionalBarLikeChartViewModel;
 export declare function calculateBarIndexes(allCharts: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">[], currentChart: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">, currentChartIndex: number): number[];
 export declare function getSegmentedRadiusValues(segmentsLength: number, segmentIndex: number, keyAxisOrient: Orient, defaultRadius: number): BarBorderRadius;
-export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
+export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendMarkerModel;
 export declare function getLineViewOptions(chart: MdtChartsTwoDimensionalChart): TwoDimensionalChartLegendLineModel;
 export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;
 export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle, chartBlockId: number): AreaChartViewOptions;

package/lib/model/notations/twoDimensionalModel.js

@@ -1,6 +1,6 @@
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensionalChartStyleModel";
-import { AxisModel } from "../featuresModel/axisModel";
+import { AxisModel } from "../featuresModel/axis/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
@@ -8,6 +8,8 @@ import { calculateValueLabelAlignment, ValueLabelCoordinateCalculator } from "..
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 import { createRecordOverflowModel } from "../featuresModel/recordOverflowModel/recordOverflowModel";
+import { TwoDimTooltipContentGenerator } from "../featuresModel/tooltipModel/tooltipContentModel";
+import { TwoDimInitialRowsProvider } from "../featuresModel/tooltipModel/contentByNotations/twoDimInitialRowsProvider";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
@@ -42,7 +44,18 @@ export class TwoDimensionalModel {
             data: Object.assign({}, options.data),
             charts,
             additionalElements: this.getAdditionalElements(options),
-            tooltip: options.tooltip,
+            tooltip: {
+                getContent: (keyFieldValue) => {
+                    const generator = new TwoDimTooltipContentGenerator({
+                        datasource: modelInstance.dataModel.repository.getRawRows(),
+                        keyFieldName: options.data.keyField.name,
+                        publicOptions: options.tooltip,
+                        initialRowsProvider: new TwoDimInitialRowsProvider({ chartsInfo: charts }),
+                        valueGlobalFormatter: designerConfig.dataFormat.formatters
+                    });
+                    return generator.generateContent(keyFieldValue);
+                }
+            },
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
             valueLabels: TwoDimensionalModelHelper.getValueLabels(options.valueLabels, canvasModel, options.orientation, configReader.getValueLabelsStyleModel()),
             defs: {
@@ -90,7 +103,6 @@ export class TwoDimensionalModel {
                 type: chart.type,
                 isSegmented: chart.isSegmented,
                 data: Object.assign({}, chart.data),
-                tooltip: { show: true },
                 cssClasses: ChartStyleModelService.getCssClasses(index),
                 style,
                 embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),

package/lib/style/charts-main.css

@@ -193,10 +193,10 @@
 .mdt-charts-tooltip-content .tooltip-text-item > span {
     display: block;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:first-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-title {
     flex: 1;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:last-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-value {
     flex: 0;
 }
 .tooltip-field-value {

package/lib/style/charts-main.less

@@ -193,10 +193,10 @@
 .mdt-charts-tooltip-content .tooltip-text-item > span {
     display: block;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:first-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-title {
     flex: 1;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:last-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-value {
     flex: 0;
 }
 .tooltip-field-value {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mdt-charts",
-	"version": "1.30.2",
+	"version": "1.31.0",
 	"description": "",
 	"main": "lib/main.js",
 	"scripts": {

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

@@ -1,4 +0,0 @@
-import { TooltipSettings } from "../../designer/designerConfig";
-export declare class TooltipModel {
-    static getTooltipModel(options: TooltipSettings): TooltipSettings;
-}