mdt-charts 1.18.2 → 1.18.4

package/lib/config/config.d.ts

@@ -8,7 +8,6 @@ export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
 export declare type PolarChartType = 'donut';
 export declare type IntervalChartType = 'gantt';
 export declare type EmbeddedLabelType = 'none' | 'key' | 'value';
-export declare type TooltipHtml = (dataRow: MdtChartsDataRow) => string;
 export declare type MdtChartsDataRow = {
     [field: string]: any;
 };
@@ -96,8 +95,29 @@ export interface TwoDimValueField extends MdtChartsValueField {
     color?: string;
 }
 export interface TooltipOptions {
-    html: TooltipHtml;
+    html?: TooltipHtml;
+    aggregator?: TooltipAggregator;
+    formatValue?: TooltipFormatValue;
 }
+export declare type TooltipHtml = (dataRow: MdtChartsDataRow) => string;
+export interface TooltipAggregator {
+    content: (options: {
+        row: MdtChartsDataRow;
+    }) => TooltipAggregatorContent;
+    position?: "underKey" | "underValues";
+}
+export declare type TooltipAggregatorContent = {
+    type: "plainText";
+    textContent: string;
+} | {
+    type: "captionValue";
+    caption: string;
+    value: any;
+};
+export declare type TooltipFormatValue = (params: {
+    rawValue: number | null | undefined;
+    autoFormattedValue: string;
+}) => string;
 export interface AdditionalElements {
     gridLine: GridLineOptions;
 }
@@ -121,13 +141,18 @@ interface AxisTicks {
     flag: boolean;
 }
 export interface NumberAxisOptions extends AxisOptions {
-    domain: NumberDomain;
+    domain: AxisNumberDomain;
     labels?: NumberAxisLabel;
 }
 export interface NumberDomain {
     start: number;
     end: number;
 }
+export interface AxisDomainFunctionParams {
+    data: MdtChartsDataRow[];
+}
+export declare type AxisDomainFunction = (params: AxisDomainFunctionParams) => NumberDomain;
+export declare type AxisNumberDomain = NumberDomain | AxisDomainFunction;
 export interface NumberAxisLabel {
     format: (v: number) => string;
     stepSize?: number;
@@ -195,7 +220,9 @@ export interface IntervalChart extends ChartSettings {
 }
 export interface TwoDimensionalChartData {
     valueFields: TwoDimValueField[];
+    valueGroup?: TwoDimensionalValueGroup;
 }
+export declare type TwoDimensionalValueGroup = 'main' | 'secondary';
 interface MarkersOptions {
     show: boolean;
 }

package/lib/engine/contentManager/contentManagerFactory.js

@@ -8,8 +8,6 @@ export class ContentManagerFactory {
         };
     }
     getManager(type) {
-        if (type === "interval")
-            return;
         const managerClass = this.managers[type];
         return new managerClass();
     }

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

@@ -11,4 +11,5 @@ export declare class Axis {
     private static renderAxis;
     private static updateValueAxis;
     private static updateKeyAxis;
+    private static handleLabelsHighlight;
 }

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

@@ -16,7 +16,7 @@ export class Axis {
     }
     static update(block, scales, scalesOptions, axisModel, blockSize, keyDomainsEquality) {
         if (axisModel.value.visibility)
-            this.updateValueAxis(block, scales.value, scalesOptions.value, axisModel.value);
+            this.updateValueAxis(block, scales.value, scalesOptions.value, axisModel.value, blockSize);
         if (axisModel.key.visibility)
             this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
     }
@@ -51,6 +51,9 @@ export class Axis {
                 AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
             AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
             AxisLabelsEventManager.setHoverEvents(block, axisElement);
+            block.filterEventManager.eventEmitter.subscribe('change', (selectedKeys) => {
+                this.handleLabelsHighlight(axisElement, selectedKeys);
+            });
         }
         if (axisOptions.type === "value") {
             AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
@@ -58,7 +61,7 @@ export class Axis {
         if (axisOptions.labels.defaultTooltip)
             AxisLabelHelper.setTitles(axisElement);
     }
-    static updateValueAxis(block, scaleValue, scaleOptions, axisOptions) {
+    static updateValueAxis(block, scaleValue, scaleOptions, axisOptions, blockSize) {
         const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
         AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions, axisOptions.labels);
         const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
@@ -66,6 +69,9 @@ export class Axis {
             .then(() => {
             if (axisOptions.labels.defaultTooltip)
                 AxisLabelHelper.setTitles(axisElement);
+            if (axisOptions.orient === 'bottom' || axisOptions.orient === 'top') {
+                AxisLabelHelper.cropLabels(block, scaleValue, scaleOptions, axisOptions, blockSize);
+            }
         });
     }
     static updateKeyAxis(block, scaleKey, scaleOptions, axisOptions, blockSize, domainNotUpdated) {
@@ -94,6 +100,7 @@ export class Axis {
             AxisLabelsEventManager.setHoverEvents(block, axisElement);
             if (axisOptions.labels.defaultTooltip)
                 AxisLabelHelper.setTitles(axisElement);
+            this.handleLabelsHighlight(axisElement, block.filterEventManager.getSelectedKeys());
         });
         // Ведется отсчет нескольких кадров, чтобы получить уже 100%-отрендеренные лейблы оси.
         let frame = 0;
@@ -128,5 +135,15 @@ export class Axis {
         };
         requestAnimationFrame(labelHandler);
     }
+    static handleLabelsHighlight(axisElement, selectedKeys) {
+        const labels = axisElement.selectAll('.tick text');
+        if (selectedKeys.length === 0)
+            labels.classed('mdt-charts-opacity-inactive', false);
+        else
+            labels.each(function (data) {
+                const isActive = selectedKeys.includes(data);
+                select(this).classed('mdt-charts-opacity-inactive', !isActive);
+            });
+    }
 }
 Axis.axesClass = NamesHelper.getClassName('axis');

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

@@ -2,6 +2,7 @@ import { axisTop, axisBottom, axisLeft, axisRight } from 'd3-axis';
 import { format } from 'd3-format';
 import { AxisLabelHelper } from './axisLabelDomHelper';
 import { max, min } from 'd3-array';
+import { AxisModel } from "../../../model/featuresModel/axisModel";
 export class AxisHelper {
     static getAxisByOrient(orient, scale) {
         if (orient === 'top')
@@ -20,7 +21,8 @@ export class AxisHelper {
             axisGenerator.ticks(Math.floor(axisLength / minimalStepSize));
         }
         else {
-            axisGenerator.tickValues([min(scaleOptions.domain), max(scaleOptions.domain)]);
+            const roundedMaxValue = AxisModel.getRoundValue(max(scaleOptions.domain));
+            axisGenerator.tickValues([min(scaleOptions.domain), roundedMaxValue]);
         }
         if (scaleOptions.type === 'linear') {
             this.setNumTickFormat(axisGenerator, scaleOptions.formatter);

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

@@ -1,6 +1,6 @@
 import { BaseType, Selection } from "d3-selection";
 import { MdtChartsDataSource } from "../../../config/config";
-import { IntervalOptionsModel, LegendBlockModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { LegendBlockModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { SelectionCondition } from "../../helpers/domHelper";
 import { ChartLegendEngineModel } from "./legendHelper";
@@ -25,7 +25,7 @@ export declare class Legend {
     private readonly markerCreator;
     render(block: Block, data: MdtChartsDataSource, options: TwoDimensionalOptionsModel | PolarOptionsModel, model: Model): void;
     update(block: Block, data: MdtChartsDataSource, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>): void;
-    updateColors(block: Block, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel): void;
+    updateColors(block: Block, options: TwoDimensionalOptionsModel | PolarOptionsModel): void;
     static getItemsByKeys(block: Block, keys: string[], condition?: SelectionCondition): Selection<HTMLDivElement, ChartLegendEngineModel, BaseType, unknown>;
     private setContent;
     private renderObject;

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, IntervalOptionsModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { ChartLegendModel, LegendBlockModel, LegendPosition, Orient, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { LegendContentRenderingOptions } from "./legend";
 import { LegendHelperService } from "./legendHelperService";
 export interface LegendCoordinate {
@@ -15,7 +15,7 @@ export interface ChartLegendEngineModel extends ChartLegendModel {
 export declare class LegendHelper {
     static service: LegendHelperService;
     static getLegendItemsContent(options: TwoDimensionalOptionsModel | PolarOptionsModel, data: MdtChartsDataSource): ChartLegendEngineModel[];
-    static getMarksColor(options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, dataRows?: MdtChartsDataRow[]): string[];
+    static getMarksColor(options: TwoDimensionalOptionsModel | PolarOptionsModel, 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;

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

@@ -27,9 +27,6 @@ export class LegendHelper {
                 return options.charts.map(chart => chart.style.elementColors)[0];
             return dataRows.map(row => row[options.charts[0].data.colorField]);
         }
-        else if (options.type === 'interval') {
-            return options.charts.map(chart => chart.style.elementColors[0]);
-        }
     }
     static getMaxItemWidth(legendBlockWidth, marginsLeft, itemsDirection) {
         if (itemsDirection === 'row') {

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

@@ -5,8 +5,12 @@ export interface Scales {
     key: AxisScale<any>;
     value: AxisScale<any>;
 }
+export interface ScalesWithSecondary extends Scales {
+    valueSecondary: AxisScale<any>;
+}
 export declare class Scale {
     static getScales(scaleKey: ScaleKeyModel, scaleValue: ScaleValueModel, bandSettings: BarChartSettings): Scales;
+    static getScalesWithSecondary(scaleKey: ScaleKeyModel, scaleValue: ScaleValueModel, scaleValueSecondary: ScaleValueModel, bandSettings: BarChartSettings): ScalesWithSecondary;
     static getScaleValue(scaleValue: ScaleValueModel): ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
     static getScaleBandWidth(scale: AxisScale<any>): number;
     static getScaleStep(scale: AxisScale<any>): number;

package/lib/engine/features/scale/scale.js

@@ -12,6 +12,10 @@ export class Scale {
         scales.value = this.getScaleValue(scaleValue);
         return scales;
     }
+    static getScalesWithSecondary(scaleKey, scaleValue, scaleValueSecondary, bandSettings) {
+        const scales = this.getScales(scaleKey, scaleValue, bandSettings);
+        return Object.assign(Object.assign({}, scales), { valueSecondary: this.getScaleValue(scaleValueSecondary) });
+    }
     static getScaleValue(scaleValue) {
         if (scaleValue.type === 'linear')
             return this.getScaleLinear(scaleValue.domain, scaleValue.range);

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

@@ -4,7 +4,7 @@ import { Block } from "../../block/block";
 export declare class Title {
     private static readonly titleCssClass;
     static render(block: Block, text: string, titleBlockModel: TitleBlockModel, blockSize: Size): void;
-    static updateData(text: string): void;
+    static updateData(block: Block, text: string): void;
     private static fillTitleBlockAttributes;
     private static getTitleAttributes;
     private static setTitleTooltip;

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

@@ -1,4 +1,3 @@
-import { select } from 'd3-selection';
 import { DomHelper } from '../../helpers/domHelper';
 export class Title {
     static render(block, text, titleBlockModel, blockSize) {
@@ -11,8 +10,8 @@ export class Title {
         this.fillTitleBlockAttributes(titleBlock, titleCoordinate, text);
         this.setTitleTooltip(titleBlock, text);
     }
-    static updateData(text) {
-        select(`.${this.titleCssClass}`).text(text);
+    static updateData(block, text) {
+        block.getSvg().select(`.${this.titleCssClass}`).text(text);
     }
     static fillTitleBlockAttributes(titleBlock, attributes, text) {
         titleBlock

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

@@ -12,7 +12,6 @@ export declare class Tooltip {
     static render(block: Block, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>, data: MdtChartsDataSource, tooltipOptions: TooltipSettings, scales?: Scales): void;
     static hide(block: Block): void;
     private static renderTooltipFor2DCharts;
-    private static renderTooltipForIntervalCharts;
     private static renderTooltipForPolar;
     private static renderLineTooltip;
     private static renderTooltipForDonut;

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

@@ -45,24 +45,6 @@ export class Tooltip {
         };
         this.renderLineTooltip(block, data, tooltipParams);
     }
-    static renderTooltipForIntervalCharts(block, data, blockSize, margin, scales, options, tooltipOptions) {
-        if (scales.key.domain().length === 0)
-            return;
-        const tooltipParams = {
-            type: 'interval',
-            scales,
-            margin,
-            blockSize,
-            charts: options.charts,
-            chartOrientation: options.orient,
-            keyAxisOrient: options.axis.key.orient,
-            dataOptions: options.data,
-            scaleKeyModel: options.scale.key,
-            tooltipSettings: tooltipOptions,
-            tooltipOptions: options.tooltip
-        };
-        this.renderLineTooltip(block, data, tooltipParams);
-    }
     static renderTooltipForPolar(block, options, data, blockSize, margin, chartThickness, tooltipOptions) {
         const attrTransform = block.getSvg().select(`.${Donut.donutBlockClass}`).attr('transform');
         const translateNums = Helper.getTranslateNumbers(attrTransform);
@@ -76,7 +58,6 @@ export class Tooltip {
         const tipBox = TipBox.renderOrGet(block, args.margin, args.blockSize);
         let currentKey = null;
         tipBox.on('mousemove', function (e) {
-            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,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, (_a = args.tooltipOptions) === null || _a === void 0 ? void 0 : _a.html);
+                    TooltipDomHelper.fillForMulti2DCharts(tooltipContent, args.charts.filter(ch => ch.tooltip.show), data, args.dataOptions, keyValue, args.tooltipOptions);
                 if (args.tooltipSettings.position === 'fixed') {
                     const tooltipCoordinate = TooltipHelper.getTooltipFixedCoordinate(args.scales.key, args.margin, keyValue, block.getSvg().node().getBoundingClientRect(), tooltipContent.node().getBoundingClientRect(), args.keyAxisOrient, window.innerWidth, window.innerHeight);
                     TooltipComponentsManager.setLineTooltipCoordinate(tooltipBlock, tooltipCoordinate, args.chartOrientation, block.transitionManager.durations.tooltipSlide);
@@ -140,7 +121,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 === null || tooltipOptions === void 0 ? void 0 : tooltipOptions.html);
+            TooltipDomHelper.fillForPolarChart(tooltipContent, chart, data, dataOptions, dataRow.data[dataOptions.keyField.name], select(this).select('path').style('fill'), tooltipOptions);
             if (tooltipSettings.position === 'fixed') {
                 const coordinatePointer = TooltipDomHelper.getRecalcedCoordinateByArrow(DonutHelper.getArcCentroid(blockSize, margin, dataRow, donutThickness), tooltipBlock.getEl(), blockSize, tooltipArrow, translate.x, translate.y);
                 coordinatePointer[0] = coordinatePointer[0] + translate.x;

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

@@ -1,5 +1,5 @@
 import { Selection, BaseType } from 'd3-selection';
-import { MdtChartsDataSource, TooltipHtml } from "../../../config/config";
+import { MdtChartsDataSource, TooltipOptions } from "../../../config/config";
 import { OptionsModelData, PolarChartModel, TwoDimensionalChartModel } from "../../../model/model";
 import { Size } from "../../../config/config";
 export interface TooltipLineAttributes {
@@ -17,14 +17,17 @@ export declare class TooltipDomHelper {
     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, 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 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 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

@@ -7,31 +7,26 @@ 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, htmlHandler) {
-        contentBlock.html('');
-        if (!htmlHandler) {
-            this.renderHead(contentBlock, keyValue);
-            charts.forEach(chart => {
-                chart.data.valueFields.forEach((field, index) => {
-                    const html = this.getTooltipItemHtml(data, dataOptions, keyValue, field);
-                    this.fillValuesContent(contentBlock, chart.style.elementColors[index % chart.style.elementColors.length], html, this.getMarkerCreator(chart.legend));
+    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)
                 });
             });
-        }
-        else {
-            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
-        }
+        });
+        this.fillCharts(contentBlock, chartDataRows, data, dataOptions, keyValue, tooltipOptions);
     }
-    static fillForPolarChart(contentBlock, chart, data, dataOptions, keyValue, markColor, htmlHandler) {
-        contentBlock.html('');
-        if (!htmlHandler) {
-            this.renderHead(contentBlock, keyValue);
-            const html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField);
-            this.fillValuesContent(contentBlock, markColor, html, this.getMarkerCreator(chart.legend));
-        }
-        else {
-            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
-        }
+    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();
@@ -46,7 +41,7 @@ export class TooltipDomHelper {
             .attr('class', `${this.groupClass} ${this.headClass}`)
             .text(keyValue);
     }
-    static fillValuesContent(contentBlock, markColor, tooltipHtml, markerCreator) {
+    static fillValuesContent(contentBlock, { markColor, tooltipHtml, markerCreator }) {
         const group = contentBlock.append('div')
             .attr('class', this.groupClass);
         if (markColor) {
@@ -59,12 +54,20 @@ export class TooltipDomHelper {
             .attr('class', this.textItemClass)
             .html(tooltipHtml);
     }
-    static getTooltipItemHtml(data, dataOptions, keyValue, valueField) {
-        const row = data[dataOptions.dataSource].find(d => d[dataOptions.keyField.name] === keyValue);
-        const text = `<span class="tooltip-field-title">${valueField.title}</span>
-            <span class="tooltip-field-value">${ValueFormatter.formatField(valueField.format, row[valueField.name])}</span>`;
+    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`);
@@ -83,6 +86,40 @@ export class TooltipDomHelper {
     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';

package/lib/engine/filterManager/filterEventManager.d.ts

@@ -2,17 +2,22 @@ import { AxisScale } from "d3-axis";
 import { MdtChartsDataRow, Size } from "../../config/config";
 import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
+import { EventEmitter } from "../../model/EventEmitter";
 export declare type FilterCallback = (rows: MdtChartsDataRow[]) => void;
 export interface SelectDetails {
     multySelect: boolean;
     keyValue?: string;
 }
+interface FilterEventMap {
+    change: string[];
+}
 export declare class FilterEventManager {
     private callback;
     private fullDataset;
     private filterable;
     private block;
     private selectedKeys;
+    eventEmitter: EventEmitter<FilterEventMap>;
     constructor(callback: FilterCallback, fullDataset: MdtChartsDataRow[], filtrable: boolean, keyFieldName: string, selectedIds?: number[]);
     setBlock(block: Block): void;
     getSelectedKeys(): string[];
@@ -31,3 +36,4 @@ export declare class FilterEventManager {
     private getMultyParamByEvent;
     private getMultySelectParam;
 }
+export {};

package/lib/engine/filterManager/filterEventManager.js

@@ -4,12 +4,14 @@ import { TipBox } from "../features/tipBox/tipBox";
 import { TipBoxHelper } from "../features/tipBox/tipBoxHelper";
 import { Helper } from "../helpers/helper";
 import { Donut } from "../polarNotation/donut/donut";
+import { EventEmitter } from "../../model/EventEmitter";
 export class FilterEventManager {
     constructor(callback, fullDataset, filtrable, keyFieldName, selectedIds = []) {
         this.callback = callback;
         this.fullDataset = fullDataset;
         this.selectedKeys = Helper.getKeysByIds(selectedIds, keyFieldName, fullDataset);
         this.filterable = filtrable;
+        this.eventEmitter = new EventEmitter();
     }
     setBlock(block) {
         this.block = block;
@@ -27,12 +29,14 @@ export class FilterEventManager {
         this.selectedKeys = [];
         if (this.callback)
             this.callback([]);
+        this.eventEmitter.emit('change', this.selectedKeys);
         SelectHighlighter.clear2D(this.block, options);
     }
     clearKeysForPolar(margin, blockSize, options) {
         this.selectedKeys = [];
         if (this.callback)
             this.callback([]);
+        this.eventEmitter.emit('change', this.selectedKeys);
         SelectHighlighter.clearPolar(margin, blockSize, this.block, options, Donut.getAllArcGroups(this.block), options.chartCanvas);
     }
     setKey(key) {
@@ -82,6 +86,8 @@ export class FilterEventManager {
                     removedKeys.push(key);
             });
             removedKeys.forEach(rKey => this.selectedKeys.splice(this.selectedKeys.findIndex(sKey => sKey === rKey), 1));
+            if (removedKeys.length > 0)
+                this.eventEmitter.emit("change", this.selectedKeys);
             this.selectedKeys.forEach(key => {
                 SelectHighlighter.click2DHandler(true, true, key, this.selectedKeys, this.block, options);
             });
@@ -99,6 +105,7 @@ export class FilterEventManager {
                 if (thisClass.callback) {
                     thisClass.callback(Helper.getRowsByKeys(thisClass.selectedKeys, options.data.keyField.name, thisClass.fullDataset));
                 }
+                thisClass.eventEmitter.emit("change", thisClass.selectedKeys);
             });
         }
     }
@@ -113,6 +120,7 @@ export class FilterEventManager {
             if (thisClass.callback) {
                 thisClass.callback(Helper.getRowsByKeys(thisClass.selectedKeys, options.data.keyField.name, thisClass.fullDataset));
             }
+            thisClass.eventEmitter.emit("change", thisClass.selectedKeys);
         });
     }
     getMultyParamByEvent(e) {

package/lib/engine/polarNotation/polarManager.js

@@ -29,7 +29,7 @@ export class PolarManager {
         block.transitionManager.interruptTransitions();
         block.removeMouseEvents();
         block.filterEventManager.updateData(data[model.options.data.dataSource]);
-        Title.updateData(model.options.title);
+        Title.updateData(block, model.options.title);
         ElementHighlighter.removeDonutArcClones(block);
         ElementHighlighter.removeFilter(Donut.getAllArcGroups(block));
         ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);

package/lib/engine/twoDimensionalNotation/line/line.d.ts

@@ -1,3 +1,4 @@
+import { SeriesPoint } from 'd3-shape';
 import { BaseType, Selection } from 'd3-selection';
 import { BlockMargin, Field, LineLikeChartSettings, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
@@ -7,6 +8,11 @@ import { Pipeline } from '../../helpers/pipeline/Pipeline';
 interface LineChartOptions {
     staticSettings: LineLikeChartSettings;
 }
+export interface Segment extends SeriesPoint<{
+    [p: string]: number;
+}> {
+    fieldName: string;
+}
 export declare class Line {
     private options;
     static readonly lineChartClass = "line";

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

@@ -1,7 +1,6 @@
-import { stack } from 'd3-shape';
 import { select } from 'd3-selection';
 import { MarkDot } from "../../features/markDots/markDot";
-import { LineGeneratorFactory, onLineChartInit } from './lineHelper';
+import { getStackedData, LineGeneratorFactory, onLineChartInit } from './lineHelper';
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
 import { Pipeline } from '../../helpers/pipeline/Pipeline';
@@ -40,7 +39,7 @@ export class Line {
         });
     }
     renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type });
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
         chart.data.valueFields.forEach((valueField, valueIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
             let path = block.svg.getChartGroup(chart.index)
@@ -57,8 +56,8 @@ export class Line {
         });
     }
     renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type });
+        let stackedData = getStackedData(data, chart);
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
         const lineGenerator = generatorFactory.getSegmentedLineGenerator();
         let lines = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -81,7 +80,7 @@ export class Line {
     }
     updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
         const promises = [];
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type });
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
         chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
             const lineObject = block.svg.getChartGroup(chart.index)
@@ -93,8 +92,8 @@ export class Line {
         return promises;
     }
     updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
-        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type });
+        let stackedData = getStackedData(newData, chart);
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
         const lineGenerator = generatorFactory.getSegmentedLineGenerator();
         const lines = block.svg.getChartGroup(chart.index)
             .selectAll(`path.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)