mdt-charts 1.41.1 → 1.43.0

package/lib/config/config.d.ts

@@ -44,7 +44,7 @@ interface GraphicNotationOptions {
 }
 export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
     type: "2d";
-    legend: MdtChartsTwoDimLegend;
+    legend: LegendConfig;
     axis: TwoDimensionalAxis;
     additionalElements: AdditionalElements;
     charts: MdtChartsTwoDimensionalChart[];
@@ -74,14 +74,14 @@ export interface CanvasKeyItemOptions {
 export declare type PolarChartType = DonutChart["type"];
 export interface MdtChartsPolarOptions extends GraphicNotationOptions {
     type: "polar";
-    legend: Legend;
+    legend: LegendConfig;
     chart: DonutChart;
 }
 export interface MdtChartsSunburstOptions {
     type: "sunburst";
     title?: Title;
     selectable?: boolean;
-    legend?: Legend;
+    legend?: LegendConfig;
     aggregator?: MdtChartsDonutAggregator;
     data: {
         dataSource: string;
@@ -106,14 +106,15 @@ export interface MdtChartsSunburstLevel {
         thickness?: MdtChartsDonutThicknessOptions;
     };
     valueLabels?: SunburstChartValueLabelsConfig;
+    legend?: {
+        show: boolean;
+    };
 }
-export interface Legend {
+export interface LegendConfig {
     show: boolean;
+    position?: LegendPublicPosition;
 }
-export declare type TwoDimLegendPosition = "top" | "bottom";
-export interface MdtChartsTwoDimLegend extends Legend {
-    position?: TwoDimLegendPosition;
-}
+export declare type LegendPublicPosition = "top" | "bottom" | "left" | "right";
 export interface RecordOverflowAlertOptions {
     textContent: RecordOverflowBlockTextContent;
 }

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

@@ -1,7 +1,7 @@
 import { interpolate } from "d3-interpolate";
 import { DonutHelper } from "./donutHelper";
 import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
-import { SunburstSegmentLabel } from "../../sunburstNotation/sunburstSegmentLabel";
+import { PolarLikeSegmentLabel } from "../polarLikeSegmentLabel/polarLikeSegmentLabel";
 export class Donut {
     static getAllArcGroups(block) {
         return block.getSvg().selectAll(`.${this.arcItemClass}`);
@@ -25,13 +25,14 @@ export class Donut {
         this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, chart.data.segments, chart.cssClasses);
         this.renderClonesG(donutBlock);
         if (chart.valueLabels.on) {
-            this.segmentLabels = new SunburstSegmentLabel(donutBlock);
+            this.segmentLabels = new PolarLikeSegmentLabel(block);
             this.segmentLabels.render({
                 sizesForGenerators: {
                     innerRadius: chart.sizes.innerRadius,
                     outerRadius: chart.sizes.outerRadius,
                     padAngle: settings.padAngle
-                }
+                },
+                wrapperTranslate: chart.sizes.translate
             }, chart.valueLabels.items);
         }
     }
@@ -82,7 +83,8 @@ export class Donut {
                     innerRadius: chart.sizes.innerRadius,
                     outerRadius: chart.sizes.outerRadius,
                     padAngle: donutSettings.padAngle
-                }
+                },
+                wrapperTranslate: chart.sizes.translate
             }, chart.valueLabels.items, block.transitionManager.durations.chartUpdate).then((labels) => labels.raise());
             promises.push(updateLabelsPromise);
         }

package/lib/engine/{sunburstNotation/sunburstSegmentLabel.d.ts → polarNotation/polarLikeSegmentLabel/polarLikeSegmentLabel.d.ts}

@@ -1,17 +1,21 @@
 import { PieArcDatum } from "d3-shape";
 import { BaseType, Selection } from "d3-selection";
-import { PolarSegmentLabelDataItem } from "../../model/modelTypes/valueLabelsModel";
+import { PolarSegmentLabelDataItem } from "../../../model/modelTypes/valueLabelsModel";
+import { DonutChartTranslateModel } from "../../../model/model";
+import { Block } from "../../block/block";
 interface SunburstSegmentLabelOptions {
     sizesForGenerators: {
         innerRadius: number;
         outerRadius: number;
         padAngle?: number;
     };
+    wrapperTranslate: DonutChartTranslateModel;
 }
-export declare class SunburstSegmentLabel {
-    private readonly parentSelection;
+export declare class PolarLikeSegmentLabel {
+    private readonly block;
     private static readonly arcLabelClass;
-    constructor(parentSelection: Selection<BaseType, unknown, BaseType, unknown>);
+    private readonly wrapperCssClassName;
+    constructor(block: Block, index?: number);
     render(options: SunburstSegmentLabelOptions, segments: PolarSegmentLabelDataItem[]): void;
     update(options: SunburstSegmentLabelOptions, segments: PolarSegmentLabelDataItem[], animationDuration: number): Promise<Selection<SVGTextElement, PieArcDatum<PolarSegmentLabelDataItem>, BaseType, unknown>>;
     private getTransformAttrValue;

package/lib/engine/{sunburstNotation/sunburstSegmentLabel.js → polarNotation/polarLikeSegmentLabel/polarLikeSegmentLabel.js}

@@ -1,14 +1,23 @@
 import { arc, pie } from "d3-shape";
 import { select } from "d3-selection";
 import { interpolate } from "d3-interpolate";
-import { DonutHelper } from "../polarNotation/donut/donutHelper";
-export class SunburstSegmentLabel {
-    constructor(parentSelection) {
-        this.parentSelection = parentSelection;
+import { DonutHelper } from "../donut/donutHelper";
+export class PolarLikeSegmentLabel {
+    constructor(block, index = 0) {
+        this.block = block;
+        this.wrapperCssClassName = `mdt-charts-donut-label-wrapper-${index}`;
     }
     render(options, segments) {
         const { arcGenerator, pieGenerator } = this.getGenerators(options);
-        this.parentSelection
+        let parentSelection = this.block.getSvg().select(`.${this.wrapperCssClassName}`);
+        if (parentSelection.empty()) {
+            parentSelection = this.block
+                .getSvg()
+                .append("g")
+                .classed(this.wrapperCssClassName, true)
+                .attr("transform", `translate(${options.wrapperTranslate.x}, ${options.wrapperTranslate.y})`);
+        }
+        parentSelection
             .selectAll("text")
             .data(pieGenerator(segments), (d) => d.data.key)
             .enter()
@@ -16,7 +25,7 @@ export class SunburstSegmentLabel {
             .attr("transform", (d) => {
             return this.getTransformAttrValue(arcGenerator, d);
         })
-            .classed(SunburstSegmentLabel.arcLabelClass, true)
+            .classed(PolarLikeSegmentLabel.arcLabelClass, true)
             .text((d) => d.data.textContent)
             .each(function (d) {
             if (d.data.cssClass)
@@ -25,17 +34,19 @@ export class SunburstSegmentLabel {
         });
     }
     update(options, segments, animationDuration) {
-        const oldLabels = this.parentSelection
+        const parentSelection = this.block.getSvg().select(`.${this.wrapperCssClassName}`);
+        parentSelection.attr("transform", `translate(${options.wrapperTranslate.x}, ${options.wrapperTranslate.y})`);
+        const oldLabels = parentSelection
             .selectAll("text")
             .data()
             .map((d) => d.data);
         const valueLabelsZeroRows = DonutHelper.mergeDataWithZeros(segments, oldLabels);
         this.render(options, segments);
         const { arcGenerator, pieGenerator } = this.getGenerators(options);
-        const labelsNewAndOld = this.parentSelection
+        const labelsNewAndOld = parentSelection
             .selectAll("text")
             .data(pieGenerator(valueLabelsZeroRows), (d) => d.data.key);
-        const onlyNewLabels = this.parentSelection
+        const onlyNewLabels = parentSelection
             .selectAll("text")
             .data(pieGenerator(segments), (d) => d.data.key);
         onlyNewLabels.text((d) => d.data.textContent);
@@ -83,4 +94,4 @@ export class SunburstSegmentLabel {
         return { arcGenerator, pieGenerator };
     }
 }
-SunburstSegmentLabel.arcLabelClass = "mdt-charts-arc-label";
+PolarLikeSegmentLabel.arcLabelClass = "mdt-charts-arc-label";

package/lib/engine/sunburstNotation/sunburst.js

@@ -1,7 +1,7 @@
 import { arc, pie } from "d3-shape";
 import { merge } from "d3-array";
 import { interpolate } from "d3-interpolate";
-import { SunburstSegmentLabel } from "./sunburstSegmentLabel";
+import { PolarLikeSegmentLabel } from "../polarNotation/polarLikeSegmentLabel/polarLikeSegmentLabel";
 export class Sunburst {
     constructor(block) {
         this.block = block;
@@ -28,14 +28,17 @@ export class Sunburst {
                 .attr("y", level.sizes.translate.y)
                 .attr("transform", `translate(${level.sizes.translate.x}, ${level.sizes.translate.y})`);
             this.renderNewArcItems(levelDonutBlock, pieGenerator, arcGenerator, level.segments);
+        });
+        levels.forEach((level, levelIndex) => {
             if (level.valueLabels.on) {
-                this.sunburstSegmentLabels[levelIndex] = new SunburstSegmentLabel(levelDonutBlock);
+                this.sunburstSegmentLabels[levelIndex] = new PolarLikeSegmentLabel(this.block, levelIndex);
                 this.sunburstSegmentLabels[levelIndex].render({
                     sizesForGenerators: {
                         innerRadius: level.sizes.innerRadius,
                         outerRadius: level.sizes.outerRadius,
                         padAngle: this.pagAngle
-                    }
+                    },
+                    wrapperTranslate: level.sizes.translate
                 }, level.valueLabels.items);
             }
         });
@@ -85,7 +88,8 @@ export class Sunburst {
                         innerRadius: level.sizes.innerRadius,
                         outerRadius: level.sizes.outerRadius,
                         padAngle: this.pagAngle
-                    }
+                    },
+                    wrapperTranslate: level.sizes.translate
                 }, level.valueLabels.items, this.block.transitionManager.durations.chartUpdate)
                     .then(() => undefined);
                 promises.push(updateLabelsPromise);

package/lib/engine/sunburstNotation/sunburstHighlightState/sunburstHighlightState.d.ts

@@ -1,4 +1,4 @@
-import { LegendItemModel, SunburstLevel, SunburstLevelSegment } from "../../../model/model";
+import { SunburstLegendItemModel, SunburstLevel, SunburstLevelSegment } from "../../../model/model";
 import { FilterCallback } from "../../filterManager/filterEventManager";
 export declare class SunburstHighlightState {
     private publicSelectEventCallback;
@@ -19,8 +19,8 @@ export declare class SunburstHighlightState {
     setHoverHighlightedSegment(segment: SunburstLevelSegment): void;
     clearHoverHighlightedSegment(): void;
     changeSegmentSelection(segment: SunburstLevelSegment, multiMode: boolean): void;
-    setHoverSegmentLegendItem(legendItem: LegendItemModel): void;
-    changeLegendItemSelection(legendItem: LegendItemModel, multiModeKeyPressed: boolean): void;
+    setHoverSegmentLegendItem(legendItem: SunburstLegendItemModel): void;
+    changeLegendItemSelection(legendItem: SunburstLegendItemModel, multiModeKeyPressed: boolean): void;
     clearSelection(firePublicEvent?: boolean): void;
     private getAllChildSegments;
 }

package/lib/engine/sunburstNotation/sunburstHighlightState/sunburstHighlightState.js

@@ -87,7 +87,7 @@ export class SunburstHighlightState {
         });
     }
     setHoverSegmentLegendItem(legendItem) {
-        const segment = this.levels[0].segments.find((segment) => segment.key === legendItem.textContent);
+        const segment = this.levels[legendItem.levelIndex].segments.find((segment) => segment.key === legendItem.textContent);
         if (segment) {
             const highlightSegments = [segment];
             const childSegments = this.getAllChildSegments(segment);
@@ -98,7 +98,7 @@ export class SunburstHighlightState {
         }
     }
     changeLegendItemSelection(legendItem, multiModeKeyPressed) {
-        const segment = this.levels[0].segments.find((segment) => segment.key === legendItem.textContent);
+        const segment = this.levels[legendItem.levelIndex].segments.find((segment) => segment.key === legendItem.textContent);
         if (segment) {
             this.changeSegmentSelection(segment, multiModeKeyPressed);
         }

package/lib/engine/sunburstNotation/sunburstSegmentEventDispatcher.d.ts

@@ -1,5 +1,5 @@
 import { Selection } from "d3-selection";
-import { LegendItemModel, SunburstLevelSegment } from "../../model/model";
+import { SunburstLegendItemModel, SunburstLevelSegment } from "../../model/model";
 import { DonutOverDetails } from "../features/tolltip/tooltip";
 import { PieArcDatum } from "d3-shape";
 import { LegendItemSelection } from "../features/legend/legendDomHelper";
@@ -24,19 +24,19 @@ export declare class SunburstSegmentEventDispatcher {
         };
         legendItemMousemove: {
             e: MouseEvent;
-            legendItem: LegendItemModel;
+            legendItem: SunburstLegendItemModel;
         };
         legendItemMouseover: {
             e: MouseEvent;
-            legendItem: LegendItemModel;
+            legendItem: SunburstLegendItemModel;
         };
         legendItemMouseleave: {
             e: MouseEvent;
-            legendItem: LegendItemModel;
+            legendItem: SunburstLegendItemModel;
         };
         legendItemClick: {
             multiModeKeyPressed: boolean;
-            legendItem: LegendItemModel;
+            legendItem: SunburstLegendItemModel;
         };
     }[T]) => void) => () => void;
     private clearListenersInSelection;

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -52,7 +52,7 @@ export class DataManagerModel {
             return;
         }
         const valuesInLegend = data[configOptions.data.dataSource].map((dataRow) => dataRow[configOptions.data.keyField.name]);
-        const { shownKeys, hiddenKeysAmount } = this.polarLegendParamsBuilder.calculateParamsAndSetMargin(modelInstance, valuesInLegend, legendBlock, legendCanvas);
+        const { shownKeys, hiddenKeysAmount } = this.polarLegendParamsBuilder.calculateParamsAndSetMargin(modelInstance.canvasModel, valuesInLegend, legendBlock, legendCanvas, configOptions.legend.position);
         const limitParams = this.service.limitAllowableKeys(shownKeys, hiddenKeysAmount, modelInstance.dataModel.getMaxRecordsAmount());
         modelInstance.dataModel.initScope({
             hiddenRecordsAmount: limitParams.hiddenRecordsAmount,

package/lib/model/featuresModel/grouping/groupingLabels/staticCoordinateCalculator.d.ts

@@ -1,10 +1,11 @@
-import { Orient } from "../../../model";
+import { LegendPosition, Orient } from "../../../model";
 import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
 import { GroupingItemSize } from "../../../modelInstance/configReader/twoDimConfigReader/groupingConfigReader/groupingConfigReader";
 interface GroupingStaticCoordinateCalculatorOptions {
     otherComponentSizes: {
         titleTotalNeededSpace: number;
         legendTotalNeededSpace: number;
+        legendPosition: LegendPosition;
     };
     groupingItemSizes: GroupingItemSize[];
     canvasModel: CanvasModel;

package/lib/model/featuresModel/grouping/groupingLabels/staticCoordinateCalculator.js

@@ -9,11 +9,18 @@ export class GroupingStaticCoordinateCalculator {
             .reduce((acc, item) => acc + item.size, 0);
         let staticCoordinate;
         if (orient === "top")
-            staticCoordinate = this.options.otherComponentSizes.titleTotalNeededSpace + prevSlicesSizes * sideIndex;
+            staticCoordinate =
+                this.options.otherComponentSizes.titleTotalNeededSpace +
+                    prevSlicesSizes * sideIndex +
+                    (this.options.otherComponentSizes.legendPosition === "top"
+                        ? this.options.otherComponentSizes.legendTotalNeededSpace
+                        : 0);
         if (orient === "bottom")
             staticCoordinate =
                 this.options.canvasModel.getBlockSize().height -
-                    this.options.otherComponentSizes.legendTotalNeededSpace -
+                    (this.options.otherComponentSizes.legendPosition === "bottom"
+                        ? this.options.otherComponentSizes.legendTotalNeededSpace
+                        : 0) -
                     prevSlicesSizes * sideIndex;
         if (orient === "left")
             staticCoordinate = prevSlicesSizes * sideIndex;

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

@@ -13,6 +13,6 @@ export interface LegendItemContentOptions {
     };
 }
 export declare class LegendCanvasModel {
-    static findElementsAmountByLegendSize(items: LegendItemContentOptions[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
+    static findElementsAmountByLegendSize(items: LegendItemContentOptions[], position: LegendPosition, legendBlockMaxWidth: number, legendBlockMaxHeight: number): DataLegendParams;
     private static getLegendWrapperEl;
 }

package/lib/model/featuresModel/legendModel/legendCanvasModel.js

@@ -1,8 +1,8 @@
 import { CLASSES } from "../../modelBuilder";
 export class LegendCanvasModel {
-    //TODO: find better solution
-    static findElementsAmountByLegendSize(items, position, legendBlockWidth, legendBlockHeight) {
-        const legendWrapper = this.getLegendWrapperEl(legendBlockWidth, position === "right" ? "column" : "row");
+    //TODO: find better solution to calculate legend size
+    static findElementsAmountByLegendSize(items, position, legendBlockMaxWidth, legendBlockMaxHeight) {
+        const legendWrapper = this.getLegendWrapperEl(legendBlockMaxWidth, position === "right" || position === "left" ? "column" : "row");
         document.body.append(legendWrapper);
         let amount = 0;
         for (let i = 0; i < items.length; i++) {
@@ -28,9 +28,11 @@ export class LegendCanvasModel {
             itemWrapper.append(colorBlock, textBlock);
             legendWrapper.append(itemWrapper);
             amount++;
-            if (legendWrapper.offsetHeight > legendBlockHeight) {
+            if (legendWrapper.offsetHeight > legendBlockMaxHeight) {
                 itemWrapper.remove();
-                if (legendBlockHeight - legendWrapper.offsetHeight >= 15 && position !== "bottom" && position !== "top")
+                if (legendBlockMaxHeight - legendWrapper.offsetHeight >= 15 &&
+                    position !== "bottom" &&
+                    position !== "top")
                     amount = amount; //TODO: remove
                 else
                     amount -= 1;
@@ -47,7 +49,7 @@ export class LegendCanvasModel {
             size
         };
     }
-    static getLegendWrapperEl(legendBlockWidth, itemsDirection) {
+    static getLegendWrapperEl(legendBlockMaxWidth, itemsDirection) {
         const legendWrapper = document.createElement("div");
         legendWrapper.style.opacity = "0";
         legendWrapper.style.position = "absolute";
@@ -56,7 +58,7 @@ export class LegendCanvasModel {
             legendWrapper.classList.add("legend-block-column");
         else
             legendWrapper.classList.add("legend-block-row", "legend-wrapper-with-wrap");
-        legendWrapper.style.maxWidth = legendBlockWidth + "px";
+        legendWrapper.style.maxWidth = legendBlockMaxWidth + "px";
         return legendWrapper;
     }
 }

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

@@ -1,7 +1,12 @@
 import { LegendBlockCanvas } from "../../../designer/designerConfig";
-import { LegendBlockModel, Orient } from "../../model";
+import { LegendBlockModel, LegendPosition, Orient } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 export declare class LegendModel {
     static getBaseLegendBlockModel(canvasModel: CanvasModel, legendConfig: LegendBlockCanvas): LegendBlockModel;
     static getLegendTotalMargin(position: Orient, legendBlockModel: LegendBlockModel): number;
 }
+export declare function getMaxLegendWidth(legendCanvas: LegendBlockCanvas, blockWidth: number): number;
+export declare function calculateLegendMaxSize(legendBlock: LegendBlockModel, canvasModel: CanvasModel, position: LegendPosition, legendCanvas: LegendBlockCanvas): {
+    width: number;
+    height: number;
+};

package/lib/model/featuresModel/legendModel/legendModel.js

@@ -1,3 +1,4 @@
+import { getPxPercentUnitByValue } from "../../helpers/unitsFromConfigReader";
 export class LegendModel {
     static getBaseLegendBlockModel(canvasModel, legendConfig) {
         var _a, _b;
@@ -6,7 +7,7 @@ export class LegendModel {
             coordinate: {
                 left: {
                     size: 0,
-                    margin: { top: mt, bottom: mb, left: ml, right: 0 },
+                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 0, right: 15 },
                     pad: 0
                 },
                 bottom: {
@@ -38,3 +39,32 @@ export class LegendModel {
             return legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom;
     }
 }
+export function getMaxLegendWidth(legendCanvas, blockWidth) {
+    const maxWidth = legendCanvas.maxWidth;
+    if (typeof maxWidth === "number")
+        return maxWidth;
+    const unit = getPxPercentUnitByValue(maxWidth);
+    const maxWidthNumber = parseInt(maxWidth);
+    if (unit === "px")
+        return maxWidthNumber;
+    return (maxWidthNumber / 100) * blockWidth;
+}
+export function calculateLegendMaxSize(legendBlock, canvasModel, position, legendCanvas) {
+    if (position === "right" || position === "left") {
+        return {
+            width: getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width),
+            height: canvasModel.getChartBlockHeight() - legendBlock.coordinate.right.margin.bottom
+        };
+    }
+    if (position === "top" || position === "bottom") {
+        return {
+            width: canvasModel.getChartBlockWidth() -
+                legendBlock.coordinate.bottom.margin.left -
+                legendBlock.coordinate.bottom.margin.right,
+            height: canvasModel.getChartBlockHeight() -
+                legendBlock.coordinate.bottom.margin.bottom -
+                legendBlock.coordinate.bottom.margin.top
+        };
+    }
+    throw new Error(`No legend size for orient: ${position}`);
+}

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

@@ -1,9 +1,9 @@
 import { LegendBlockCanvas } from "../../../designer/designerConfig";
-import { LegendBlockModel } from "../../model";
-import { ModelInstance } from "../../modelInstance/modelInstance";
+import { LegendBlockModel, LegendPosition } from "../../model";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 export declare class PolarLikeLegendParamsBuilder {
     private polarMarginCalculator;
-    calculateParamsAndSetMargin(modelInstance: ModelInstance, valuesInLegend: string[], legendBlock: LegendBlockModel, legendCanvas: LegendBlockCanvas): {
+    calculateParamsAndSetMargin(canvasModel: CanvasModel, valuesInLegend: string[], legendBlock: LegendBlockModel, legendCanvas: LegendBlockCanvas, presetPosition: LegendPosition | undefined): {
         shownKeys: string[];
         hiddenKeysAmount: number;
     };

package/lib/model/featuresModel/legendModel/polarLikeLegendParamsBuilder.js

@@ -1,16 +1,17 @@
 import { styledElementValues } from "../../modelBuilder";
-import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../../notations/polar/polarModel";
+import { PolarModel } from "../../notations/polar/polarModel";
 import { LegendCanvasModel } from "./legendCanvasModel";
+import { calculateLegendMaxSize } from "./legendModel";
 import { LegendPolarMarginCalculator } from "./polarMarginCalculator";
 export class PolarLikeLegendParamsBuilder {
     constructor() {
         this.polarMarginCalculator = new LegendPolarMarginCalculator();
     }
-    calculateParamsAndSetMargin(modelInstance, valuesInLegend, legendBlock, legendCanvas) {
-        const canvasModel = modelInstance.canvasModel;
-        let position = PolarModel.getLegendPositionByBlockSize(modelInstance.canvasModel);
+    calculateParamsAndSetMargin(canvasModel, valuesInLegend, legendBlock, legendCanvas, presetPosition) {
+        let position = presetPosition !== null && presetPosition !== void 0 ? presetPosition : PolarModel.getLegendPositionByBlockSize(canvasModel);
         let { amount: maxItemsNumber, size } = this.getLegendDataParams(position, valuesInLegend, legendCanvas, canvasModel, legendBlock);
-        if (position === "right" &&
+        if (!presetPosition &&
+            (position === "right" || position === "left") &&
             !PolarModel.doesChartBlockHasEnoughWidthForContainsLegend(canvasModel.getChartBlockWidth(), size.width, legendBlock.coordinate)) {
             const doesFreeSpaceExist = PolarModel.doesChartBlockHasEnoughHeightForContainsLegend(canvasModel.getChartBlockHeight(), legendBlock.coordinate);
             if (doesFreeSpaceExist) {
@@ -24,7 +25,7 @@ export class PolarLikeLegendParamsBuilder {
         const shownKeys = valuesInLegend.slice(0, maxItemsNumber);
         const hiddenKeysAmount = valuesInLegend.length - maxItemsNumber;
         canvasModel.legendCanvas.setPosition(position);
-        this.polarMarginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" ? size.height : size.width);
+        this.polarMarginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" || position === "top" ? size.height : size.width);
         return { shownKeys, hiddenKeysAmount };
     }
     //TODO: position type
@@ -34,16 +35,7 @@ export class PolarLikeLegendParamsBuilder {
             markerSize: styledElementValues.defaultLegendMarkerSizes,
             wrapperSize: { marginRightPx: styledElementValues.legend.inlineDynamicItemWrapperMarginRightPx }
         }));
-        if (position === "right") {
-            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.right.margin.bottom);
-        }
-        else {
-            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, canvasModel.getChartBlockWidth() -
-                legendBlock.coordinate.bottom.margin.left -
-                legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() -
-                legendBlock.coordinate.bottom.margin.bottom -
-                legendBlock.coordinate.bottom.margin.top -
-                MIN_DONUT_BLOCK_SIZE);
-        }
+        const legendMaxSize = calculateLegendMaxSize(legendBlock, canvasModel, position, legendCanvas);
+        return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, legendMaxSize.width, legendMaxSize.height);
     }
 }

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

@@ -1,8 +1,6 @@
-import { LegendBlockCanvas } from "../../../designer/designerConfig";
-import { LegendBlockModel } from "../../model";
+import { LegendBlockModel, LegendPosition } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 export declare class LegendPolarMarginCalculator {
-    updateMargin(legendPosition: "right" | "bottom", canvasModel: CanvasModel, legendBlockModel: LegendBlockModel, size: number): void;
-    getMaxLegendWidth(legendCanvas: LegendBlockCanvas, blockWidth: number): number;
+    updateMargin(legendPosition: LegendPosition, canvasModel: CanvasModel, legendBlockModel: LegendBlockModel, size: number): void;
     private updateMarginObj;
 }

package/lib/model/featuresModel/legendModel/polarMarginCalculator.js

@@ -1,20 +1,11 @@
-import { getPxPercentUnitByValue } from "../../helpers/unitsFromConfigReader";
 import { LegendModel } from "./legendModel";
 export class LegendPolarMarginCalculator {
     updateMargin(legendPosition, canvasModel, legendBlockModel, size) {
         this.updateMarginObj(legendBlockModel, legendPosition, size, canvasModel);
     }
-    getMaxLegendWidth(legendCanvas, blockWidth) {
-        const maxWidth = legendCanvas.maxWidth;
-        if (typeof maxWidth === "number")
-            return maxWidth;
-        const unit = getPxPercentUnitByValue(maxWidth);
-        const maxWidthNumber = parseInt(maxWidth);
-        if (unit === "px")
-            return maxWidthNumber;
-        return (maxWidthNumber / 100) * blockWidth;
-    }
     updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
+        if (legendPosition === "off")
+            return;
         if (legendSize !== 0) {
             canvasModel.increaseMarginSide(legendPosition, legendSize);
             canvasModel.increaseMarginSide(legendPosition, LegendModel.getLegendTotalMargin(legendPosition, legendBlockModel));

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

@@ -1,10 +1,11 @@
-import { MdtChartsTwoDimLegend } from "../../../config/config";
+import { LegendConfig } from "../../../config/config";
+import { LegendBlockCanvas } from "../../../designer/designerConfig";
 import { LegendBlockModel } from "../../model";
 import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader/twoDimConfigReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class TwoDimLegendModel {
     private configReader;
     constructor(configReader: TwoDimConfigReader);
-    recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: MdtChartsTwoDimLegend): void;
+    recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: LegendConfig, legendCanvas: LegendBlockCanvas): void;
     private getLegendPosition;
 }

package/lib/model/featuresModel/legendModel/twoDimLegendModel.js

@@ -1,33 +1,34 @@
 import { styledElementValues } from "../../modelBuilder";
 import { getWidthOfLegendMarkerByType } from "../../notations/twoDimensional/styles";
 import { LegendCanvasModel } from "./legendCanvasModel";
-import { LegendModel } from "./legendModel";
+import { calculateLegendMaxSize, LegendModel } from "./legendModel";
 export class TwoDimLegendModel {
     constructor(configReader) {
         this.configReader = configReader;
     }
-    recalcMarginWith2DLegend(modelInstance, legendBlockModel, legendOptions) {
+    recalcMarginWith2DLegend(modelInstance, legendBlockModel, legendOptions, legendCanvas) {
         const canvasModel = modelInstance.canvasModel;
         const legendPosition = this.getLegendPosition(legendOptions);
         modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
-        if (legendPosition !== "off") {
-            const legendItemInfo = this.configReader.getLegendItemInfo();
-            const legendSize = LegendCanvasModel.findElementsAmountByLegendSize(legendItemInfo.map((i) => ({
+        const legendItemInfo = this.configReader.getLegendItemInfo();
+        if (legendPosition !== "off" && legendItemInfo.length > 0) {
+            const legendMaxSize = calculateLegendMaxSize(legendBlockModel, canvasModel, legendPosition, legendCanvas);
+            const legendBlockSize = LegendCanvasModel.findElementsAmountByLegendSize(legendItemInfo.map((i) => ({
                 text: i.text,
                 markerSize: Object.assign(Object.assign({}, styledElementValues.defaultLegendMarkerSizes), { widthPx: getWidthOfLegendMarkerByType(i.chartType) }),
                 wrapperSize: { marginRightPx: styledElementValues.legend.inlineItemWrapperMarginRightPx }
-            })), "top", modelInstance.canvasModel.getBlockSize().width, legendBlockModel.static.maxLinesAmount * styledElementValues.legend.inlineLegendOneLineHeightPx).size.height;
-            if (legendSize !== 0) {
-                const legendTotalMargin = LegendModel.getLegendTotalMargin(legendPosition, legendBlockModel);
-                modelInstance.canvasModel.legendCanvas.initSizeAndPad(legendSize, legendTotalMargin);
-                canvasModel.increaseMarginSide(legendPosition, modelInstance.canvasModel.legendCanvas.getAllNeededSpace());
-            }
+            })), legendPosition, legendMaxSize.width, legendMaxSize.height).size;
+            const legendSize = legendPosition === "top" || legendPosition === "bottom"
+                ? legendBlockSize.height
+                : legendBlockSize.width;
+            const legendTotalMargin = LegendModel.getLegendTotalMargin(legendPosition, legendBlockModel);
+            modelInstance.canvasModel.legendCanvas.initSizeAndPad(legendSize, legendTotalMargin);
+            canvasModel.increaseMarginSide(legendPosition, modelInstance.canvasModel.legendCanvas.getAllNeededSpace());
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }
     getLegendPosition(legendOptions) {
         var _a;
-        const position = legendOptions.show ? ((_a = legendOptions.position) !== null && _a !== void 0 ? _a : "top") : "off";
-        return position;
+        return legendOptions.show ? ((_a = legendOptions.position) !== null && _a !== void 0 ? _a : "top") : "off";
     }
 }

package/lib/model/margin/sunburst/sunburstMarginModel.js

@@ -7,8 +7,9 @@ export class SunburstMarginModel {
         this.polarLegendParamsBuilder = new PolarLikeLegendParamsBuilder();
     }
     recalcMargin(otherComponents, modelInstance) {
-        const fieldInLegendName = this.configReader.getFieldInLegend();
-        const legendValues = extractLegendValues(modelInstance.dataModel.repository.getRawRows(), fieldInLegendName);
-        this.polarLegendParamsBuilder.calculateParamsAndSetMargin(modelInstance, legendValues, otherComponents.legendBlock, this.designerConfig.canvas.legendBlock);
+        var _a;
+        const fieldNamesInLegend = this.configReader.getFieldsInLegend();
+        const legendValues = extractLegendValues(modelInstance.dataModel.repository.getRawRows(), fieldNamesInLegend);
+        this.polarLegendParamsBuilder.calculateParamsAndSetMargin(modelInstance.canvasModel, legendValues, otherComponents.legendBlock, this.designerConfig.canvas.legendBlock, (_a = this.configReader.options.legend) === null || _a === void 0 ? void 0 : _a.position);
     }
 }

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

@@ -16,7 +16,7 @@ export class TwoDimMarginModel {
     }
     recalcMargin(otherComponents, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock, this.configReader.options.legend);
+        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock, this.configReader.options.legend, this.designerConfig.canvas.legendBlock);
         this.recalcVerticalMarginByAxisLabelHeight(LABEL_ELEMENT_HEIGHT_PX, canvasModel);
         const labelSize = this.getMaxLabelSize(modelInstance);
         // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются

package/lib/model/model.d.ts

@@ -92,7 +92,7 @@ export interface SunburstOptionsModel {
     levels: SunburstLevel[];
     title: OptionsModelTitle;
     selectable: boolean;
-    legend: ILegendModel;
+    legend: SunburstLegendModel;
 }
 export interface ILegendModel {
     position: LegendPosition;
@@ -106,6 +106,13 @@ export interface LegendItemModel {
         content: TooltipContent;
     };
 }
+export interface SunburstLegendModel {
+    position: LegendPosition;
+    items: SunburstLegendItemModel[];
+}
+export interface SunburstLegendItemModel extends LegendItemModel {
+    levelIndex: number;
+}
 export interface BasicOptionsModelData {
     dataSource: string;
 }

package/lib/model/modelInstance/configReader/configReaderFactory.js

@@ -7,6 +7,6 @@ export function getConfigReader(config, designerConfig) {
     if (config.options.type === "polar")
         return new PolarConfigReader(config, designerConfig);
     if (config.options.type === "sunburst")
-        return new SunburstConfigReader(config, designerConfig);
+        return SunburstConfigReader.createFromGlobalConfig(config, designerConfig);
     throw new Error(`Config reader for type "${config.options.type}" not exists`);
 }

package/lib/model/modelInstance/configReader/sunburstConifgReader/sunburstConifgReader.d.ts

@@ -1,11 +1,16 @@
-import { BlockMargin, MdtChartsConfig, MdtChartsField } from "../../../../config/config";
+import { BlockMargin, MdtChartsConfig, MdtChartsField, MdtChartsSunburstLevel, MdtChartsSunburstOptions } from "../../../../config/config";
 import { DesignerConfig } from "../../../../designer/designerConfig";
 import { BaseConfigReader } from "../baseConfigReader";
 export declare class SunburstConfigReader implements BaseConfigReader {
+    readonly options: MdtChartsSunburstOptions;
     private readonly designerConfig;
-    private readonly options;
-    constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
-    getFieldInLegend(): string;
+    static createFromGlobalConfig(config: MdtChartsConfig, designerConfig: DesignerConfig): SunburstConfigReader;
+    constructor(options: MdtChartsSunburstOptions, designerConfig: DesignerConfig);
+    getFieldsInLegend(): string[];
+    getLevelsWithLegendTurnedOn(): {
+        level: MdtChartsSunburstLevel;
+        levelIndex: number;
+    }[];
     getValueFields(): MdtChartsField[];
     getChartBlockMargin(): BlockMargin;
 }

package/lib/model/modelInstance/configReader/sunburstConifgReader/sunburstConifgReader.js

@@ -1,10 +1,21 @@
 export class SunburstConfigReader {
-    constructor(config, designerConfig) {
+    constructor(options, designerConfig) {
+        this.options = options;
         this.designerConfig = designerConfig;
-        this.options = config.options;
     }
-    getFieldInLegend() {
-        return this.options.levels[0].data.keyField.name;
+    static createFromGlobalConfig(config, designerConfig) {
+        return new SunburstConfigReader(config.options, designerConfig);
+    }
+    getFieldsInLegend() {
+        const levelsWithLegendTurnedOn = this.getLevelsWithLegendTurnedOn();
+        return levelsWithLegendTurnedOn.map(({ level }) => level.data.keyField.name);
+    }
+    getLevelsWithLegendTurnedOn() {
+        const levelsWithIndexes = this.options.levels.map((level, levelIndex) => ({ level, levelIndex }));
+        const levelsWithLegendConfig = levelsWithIndexes.filter(({ level }) => { var _a; return ((_a = level.legend) === null || _a === void 0 ? void 0 : _a.show) != null; });
+        if (levelsWithLegendConfig.length === 0)
+            return [{ level: this.options.levels[0], levelIndex: 0 }];
+        return levelsWithLegendConfig.filter(({ level }) => { var _a; return (_a = level.legend) === null || _a === void 0 ? void 0 : _a.show; });
     }
     getValueFields() {
         return [this.options.data.valueField];

package/lib/model/notations/polar/polarModel.d.ts

@@ -1,13 +1,13 @@
 import { MdtChartsPolarOptions } from "../../../config/config";
 import { DesignerConfig } from "../../../designer/designerConfig";
-import { PolarOptionsModel, LegendCoordinate } from "../../model";
+import { PolarOptionsModel, LegendCoordinate, LegendPosition } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare const MIN_DONUT_BLOCK_SIZE = 120;
 export declare class PolarModel {
     private static donutModel;
     static getOptions(options: MdtChartsPolarOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
-    static getLegendPositionByBlockSize(canvasModel: CanvasModel): "bottom" | "right";
+    static getLegendPositionByBlockSize(canvasModel: CanvasModel): LegendPosition;
     static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth: number, legendWidth: number, legendCoordinate: LegendCoordinate): boolean;
     static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight: number, legendCoordinate: LegendCoordinate): boolean;
     private static getChartsModel;

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

@@ -59,7 +59,6 @@ export class PolarModel {
             }, { positionAttrs: { bottom: "0", right: "0" } }, options.recordOverflowAlert)
         };
     }
-    //TODO: type for returned value
     static getLegendPositionByBlockSize(canvasModel) {
         const widthCoefficientWhenLegendShouldInBottom = 1.5;
         const avgLegendWidth = 100;

package/lib/model/notations/sunburst/sunburstLegendValuesExtractor.d.ts

@@ -1,2 +1,2 @@
 import { MdtChartsDataRow } from "../../../config/config";
-export declare function extractLegendValues(dataRows: MdtChartsDataRow[], fieldInLegendName: string): string[];
+export declare function extractLegendValues(dataRows: MdtChartsDataRow[], fieldNamesInLegend: string[]): string[];

package/lib/model/notations/sunburst/sunburstLegendValuesExtractor.js

@@ -1,7 +1,11 @@
-export function extractLegendValues(dataRows, fieldInLegendName) {
-    const values = dataRows.map((dataRow) => dataRow[fieldInLegendName]);
-    const uniqueValues = values.filter((value, index) => {
-        return values.indexOf(value) === index;
-    });
-    return uniqueValues;
+export function extractLegendValues(dataRows, fieldNamesInLegend) {
+    const totalLegendValues = [];
+    for (const fieldName of fieldNamesInLegend) {
+        const values = dataRows.map((dataRow) => dataRow[fieldName]);
+        const uniqueValues = values.filter((value, index) => {
+            return values.indexOf(value) === index;
+        });
+        totalLegendValues.push(...uniqueValues);
+    }
+    return totalLegendValues;
 }

package/lib/model/notations/sunburst/sunburstModel.js

@@ -1,10 +1,12 @@
 import { ChartStyleModelService } from "../../chartStyleModel/chartStyleModel";
+import { SunburstConfigReader } from "../../modelInstance/configReader/sunburstConifgReader/sunburstConifgReader";
 import { TitleConfigReader } from "../../modelInstance/titleConfigReader";
 import { DonutAggregatorService } from "../polar/donut/donutAggregatorService";
 import { POLAR_LEGEND_MARKER } from "../polar/modelConstants/polarLegendMarker";
 import { LevelModelBuilder } from "./levelModelBuilder/levelModelBuilder";
 export class SunburstModel {
     static getOptions(options, designerConfig, modelInstance) {
+        const configReader = new SunburstConfigReader(options, designerConfig);
         const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         //TODO: extract to function and remove duplicate with levelModelBuilder
         const topLevelValues = modelInstance.dataModel.repository
@@ -23,6 +25,19 @@ export class SunburstModel {
             data: options.data,
             levels: options.levels
         });
+        const totalLegendItems = [];
+        for (const { levelIndex } of configReader.getLevelsWithLegendTurnedOn()) {
+            const levelLegendItems = levels[levelIndex].segments.map((segment) => ({
+                marker: POLAR_LEGEND_MARKER,
+                markerColor: segment.color,
+                textContent: segment.key.toString(),
+                levelIndex,
+                tooltip: {
+                    content: segment.tooltip.content
+                }
+            }));
+            totalLegendItems.push(...levelLegendItems);
+        }
         return {
             type: "sunburst",
             title: {
@@ -32,14 +47,7 @@ export class SunburstModel {
             selectable: !!options.selectable,
             legend: {
                 position: modelInstance.canvasModel.legendCanvas.getPosition(),
-                items: levels[0].segments.map((segment, index) => ({
-                    marker: POLAR_LEGEND_MARKER,
-                    markerColor: segment.color,
-                    textContent: segment.key.toString(),
-                    tooltip: {
-                        content: segment.tooltip.content
-                    }
-                }))
+                items: totalLegendItems
             },
             aggregator: options.aggregator
                 ? {

package/lib/model/notations/twoDimensionalModel.js

@@ -45,7 +45,8 @@ export class TwoDimensionalModel {
             canvasModel,
             otherComponentSizes: {
                 titleTotalNeededSpace: canvasModel.titleCanvas.getAllNeededSpace(),
-                legendTotalNeededSpace: canvasModel.legendCanvas.getAllNeededSpace()
+                legendTotalNeededSpace: canvasModel.legendCanvas.getAllNeededSpace(),
+                legendPosition: canvasModel.legendCanvas.getPosition()
             },
             groupingItemSizes: configReader.grouping.getSlicesSizesByOrients(modelInstance.dataModel.repository.getScopedRows())
         });

package/package.json

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