mdt-charts 1.30.2 → 1.32.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;
 }
@@ -283,15 +294,29 @@ export interface TwoDimensionalChartData {
     valueFields: TwoDimValueField[];
     valueGroup?: TwoDimensionalValueGroup;
 }
-export declare type ValueLabelsPositionMode = "after" | "center";
+export declare type ValueLabelsPositionOptions = {
+    mode: "afterHead" | "beforeHead";
+    /** @default 10 */
+    offsetSize?: number;
+} | {
+    mode?: "center";
+};
+export declare type ValueLabelsPositionMode = ValueLabelsPositionOptions["mode"];
+export interface ValueLabelsContentSetterOptions {
+    dataRow: MdtChartsDataRow;
+    field: MdtChartsValueField;
+}
+export declare type ValueLabelsContentSetter = (options: ValueLabelsContentSetterOptions) => {
+    textContent: string | number;
+};
 export interface TwoDimensionalChartValueLabels {
     on: boolean;
-    position?: {
-        mode?: ValueLabelsPositionMode;
-    };
+    position?: ValueLabelsPositionOptions;
     format?: ValueLabelsFormatter;
     rotation?: ValueLabelsRotationOptions;
     handleElement?: ValueLabelsHandleElement;
+    renderForFields?: MdtChartsFieldName[];
+    setContent?: ValueLabelsContentSetter;
 }
 export declare type ValueLabelsHandleElement = (elInfo: {
     element: SVGTextElement;

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/features/valueLabels/valueLabels.js

@@ -24,14 +24,18 @@ export class ChartValueLabels {
     render(scales, data) {
         if (this.chart.isSegmented) {
             const preparedData = getStackedData(data, this.chart);
-            preparedData.forEach((segment, segmentIndex) => {
+            preparedData
+                .filter((segment) => { var _a; return this.options.forFields.includes((_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName); })
+                .forEach((segment, segmentIndex) => {
                 if (!segment[0])
                     return;
                 this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, "1", (d) => d.data);
             });
         }
         else {
-            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+            this.chart.data.valueFields
+                .filter((field) => this.options.forFields.includes(field.name))
+                .forEach((valueField, vfIndex) => {
                 this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, (d) => d);
             });
         }
@@ -41,14 +45,18 @@ export class ChartValueLabels {
         this.options = updatedOptions;
         if (this.chart.isSegmented) {
             const preparedData = getStackedData(newData, this.chart);
-            preparedData.forEach((segment, segmentIndex) => {
+            preparedData
+                .filter((segment) => { var _a; return this.options.forFields.includes((_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName); })
+                .forEach((segment, segmentIndex) => {
                 var _a;
                 const promise = this.updateByGroupIndex(scales, segmentIndex, segment, "1", (d) => d.data, (_a = segment[0]) === null || _a === void 0 ? void 0 : _a.fieldName);
                 updatePromises.push(promise);
             });
         }
         else {
-            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+            this.chart.data.valueFields
+                .filter((field) => this.options.forFields.includes(field.name))
+                .forEach((valueField, vfIndex) => {
                 const promise = this.updateByGroupIndex(scales, vfIndex, newData, valueField.name, (d) => d, valueField.name);
                 updatePromises.push(promise);
             });
@@ -59,7 +67,7 @@ export class ChartValueLabels {
         let valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data).enter().append("text");
         valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
         const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor);
-        this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
+        this.setAttrs(valueLabels, attrs, valueFieldName, this.options.setContent, dataRowAccessor);
         this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
     }
     updateByGroupIndex(scales, groupIndex, data, datumField, dataRowAccessor, valueFieldName) {
@@ -74,19 +82,19 @@ export class ChartValueLabels {
             let newValueLabels = valueLabels.enter().append("text");
             newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
             const mergedValueLabels = newValueLabels.merge(valueLabels);
-            this.setAttrs(newValueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor);
+            this.setAttrs(newValueLabels, attrs, valueFieldName, this.options.setContent, dataRowAccessor);
             this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
-            this.setAttrs(valueLabels, attrs, valueFieldName, this.options.format, dataRowAccessor, true, resolve);
+            this.setAttrs(valueLabels, attrs, valueFieldName, this.options.setContent, dataRowAccessor, true, resolve);
         });
     }
     getAllValueLabelsOfChart(vfIndex) {
         const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
         return block.selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
     }
-    setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
+    setAttrs(valueLabels, attrs, valueFieldName, setContent, dataRowAccessor, animate = false, onEndAnimation) {
         const animationName = "labels-updating";
         let selection = valueLabels
-            .text((d) => formatter(dataRowAccessor(d)[valueFieldName]))
+            .text((d) => setContent({ dataRow: dataRowAccessor(d), fieldName: valueFieldName }).textContent)
             .attr("dominant-baseline", attrs.dominantBaseline)
             .attr("text-anchor", attrs.textAnchor);
         if (animate) {

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
+            }
+        ];
+    }
+}