mdt-charts 1.40.1 → 1.41.1

package/lib/config/config.d.ts

@@ -1,4 +1,5 @@
 import { MdtChartsDonutThicknessOptions } from "../designer/designerConfig";
+import { DonutChartValueLabelsConfig, SunburstChartValueLabelsConfig } from "./valueLabelsConfig";
 declare type DataType = string;
 export declare type MdtChartsIconElement = () => HTMLElement;
 export declare type ItemPositionByOrientation = "start" | "end";
@@ -104,6 +105,7 @@ export interface MdtChartsSunburstLevel {
     canvas?: {
         thickness?: MdtChartsDonutThicknessOptions;
     };
+    valueLabels?: SunburstChartValueLabelsConfig;
 }
 export interface Legend {
     show: boolean;
@@ -373,6 +375,7 @@ export interface DonutChart {
     type: "donut";
     data: PolarChartData;
     aggregator?: MdtChartsDonutAggregator;
+    valueLabels?: DonutChartValueLabelsConfig;
 }
 export interface TwoDimensionalChartData {
     valueFields: TwoDimValueField[];

package/lib/config/valueLabelsConfig.d.ts

@@ -0,0 +1,19 @@
+import { MdtChartsDataRow } from "./config";
+export interface DonutChartValueLabelsConfig {
+    on: boolean;
+    rotation?: {
+        type: "none" | "tangential";
+    };
+    cssClass?: string;
+    content?: (dataRow: MdtChartsDataRow) => string;
+}
+export interface SunburstChartValueLabelsConfig {
+    on: boolean;
+    rotation?: {
+        type: "none" | "tangential";
+    };
+    cssClass?: string;
+    content?: (segment: {
+        attachedDataRows: MdtChartsDataRow[];
+    }) => string;
+}

package/lib/config/valueLabelsConfig.js

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

package/lib/engine/colorReader/colorReader.d.ts

@@ -1,10 +1,6 @@
-import { MdtChartsDataRow } from "../../config/config";
 import { DonutChartModel } from "../../model/model";
 export declare class ColorReaderClass {
-    getColorForArc(row: MdtChartsDataRow, chart: DonutChartModel, arcIndex: number): any;
     getChartColorField(chart: DonutChartModel): string;
     isNeedReadFromData(chart: DonutChartModel): boolean;
-    private getColorFromData;
-    private getColorFromPalette;
 }
 export declare const ColorReader: ColorReaderClass;

package/lib/engine/colorReader/colorReader.js

@@ -1,21 +1,9 @@
 export class ColorReaderClass {
-    getColorForArc(row, chart, arcIndex) {
-        if (chart.data.colorField) {
-            return this.getColorFromData(row, chart.data.colorField);
-        }
-        return this.getColorFromPalette(chart.style.elementColors, arcIndex);
-    }
     getChartColorField(chart) {
         return chart.data.colorField;
     }
     isNeedReadFromData(chart) {
         return !!this.getChartColorField(chart);
     }
-    getColorFromData(row, colorField) {
-        return row[colorField];
-    }
-    getColorFromPalette(colorPalette, arcIndex) {
-        return colorPalette[arcIndex % colorPalette.length];
-    }
 }
 export const ColorReader = new ColorReaderClass();

package/lib/engine/elementHighlighter/elementHighlighter.d.ts

@@ -1,8 +1,7 @@
 import { Selection, BaseType } from "d3-selection";
 import { PieArcDatum } from "d3-shape";
-import { DonutChartSizesModel, TwoDimensionalChartModel } from "../../model/model";
+import { DonutChartSizesModel, PolarSegmentModel, TwoDimensionalChartModel } from "../../model/model";
 import { Block } from "../block/block";
-import { MdtChartsDataRow } from "../../config/config";
 export declare class ElementHighlighter {
     private static inactiveElemClass;
     static toggleActivityStyle(elementSelection: Selection<BaseType, unknown, BaseType, unknown>, isActive: boolean): void;
@@ -11,12 +10,12 @@ export declare class ElementHighlighter {
      */
     static setShadowFilter(elemSelection: Selection<BaseType, any, BaseType, any>, blurPercent?: number): void;
     static removeFilter(elemSelection: Selection<BaseType, any, BaseType, any>): void;
-    static removeShadowClone(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, chartSizes: DonutChartSizesModel): void;
-    static removeCloneForElem(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>): void;
+    static removeShadowClone(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, BaseType, unknown>, chartSizes: DonutChartSizesModel): void;
+    static removeCloneForElem(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, BaseType, unknown>): void;
     static removeDonutArcClones(block: Block): void;
-    static renderArcCloneAndHighlight(block: Block, arcSelection: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, chartSizes: DonutChartSizesModel): void;
-    static toggleDonutHighlightState(segment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, chartSizes: DonutChartSizesModel, transitionDuration: number, on: boolean): Promise<any>;
-    static removeDonutHighlightingByKeys(arcSegments: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, keyFieldName: string, keyValues: string[], chartSizes: DonutChartSizesModel): void;
+    static renderArcCloneAndHighlight(block: Block, arcSelection: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, BaseType, unknown>, chartSizes: DonutChartSizesModel): void;
+    static toggleDonutHighlightState(segment: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, BaseType, unknown>, chartSizes: DonutChartSizesModel, transitionDuration: number, on: boolean): Promise<any>;
+    static removeDonutHighlightingByKeys(arcSegments: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, BaseType, unknown>, keyFieldName: string, keyValues: string[], chartSizes: DonutChartSizesModel): void;
     static setInactiveFor2D(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[]): void;
     static remove2DChartsFullHighlighting(block: Block, charts: TwoDimensionalChartModel[], transitionDuration?: number): void;
     static removeUnselected2DHighlight(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[], transitionDuration: number): void;

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -28,12 +28,12 @@ export class ElementHighlighter {
         elemSelection.style("filter", null);
     }
     static removeShadowClone(block, keyFieldName, selectedSegment, chartSizes) {
-        const shadowClone = Donut.getAllArcShadows(block).filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
+        const shadowClone = Donut.getAllArcShadows(block).filter((d) => d.data.key === selectedSegment.datum().data.key);
         this.removeFilter(shadowClone.select("path"));
         this.toggleDonutHighlightState(shadowClone, chartSizes, block.transitionManager.durations.higlightedScale, false).then(() => shadowClone.remove());
     }
     static removeCloneForElem(block, keyFieldName, selectedSegment) {
-        const clone = Donut.getAllArcClones(block).filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
+        const clone = Donut.getAllArcClones(block).filter((d) => d.data.key === selectedSegment.datum().data.key);
         clone.remove();
     }
     static removeDonutArcClones(block) {
@@ -66,7 +66,7 @@ export class ElementHighlighter {
         });
     }
     static removeDonutHighlightingByKeys(arcSegments, keyFieldName, keyValues, chartSizes) {
-        const segments = DomSelectionHelper.getChartElementsByKeys(arcSegments, true, keyFieldName, keyValues, SelectionCondition.Exclude);
+        const segments = DomSelectionHelper.getChartElementsByKeysForPolar(arcSegments, keyValues, SelectionCondition.Exclude);
         this.toggleDonutHighlightState(segments, chartSizes, 0, false);
     }
     static setInactiveFor2D(block, keyFieldName, charts) {

package/lib/engine/elementHighlighter/selectHighlighter.d.ts

@@ -1,11 +1,10 @@
 import { BaseType, Selection } from "d3-selection";
 import { PieArcDatum } from "d3-shape";
-import { MdtChartsDataRow } from "../../config/config";
-import { PolarOptionsModel, TwoDimensionalOptionsModel } from "../../model/model";
+import { PolarOptionsModel, PolarSegmentModel, TwoDimensionalOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
 export declare class SelectHighlighter {
     static click2DHandler(multySelection: boolean, appendKey: boolean, keyValue: string, selectedKeys: string[], block: Block, options: TwoDimensionalOptionsModel): void;
-    static clickPolarHandler(multySelection: boolean, appendKey: boolean, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, selectedKeys: string[], block: Block, options: PolarOptionsModel, arcItems: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>): void;
+    static clickPolarHandler(multySelection: boolean, appendKey: boolean, selectedSegment: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, BaseType, unknown>, selectedKeys: string[], block: Block, options: PolarOptionsModel, arcItems: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, SVGGElement, unknown>): void;
     static clear2D(block: Block, options: TwoDimensionalOptionsModel): void;
-    static clearPolar(block: Block, options: PolarOptionsModel, arcItems: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>): void;
+    static clearPolar(block: Block, options: PolarOptionsModel, arcItems: Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, SVGGElement, unknown>): void;
 }

package/lib/engine/elementHighlighter/selectHighlighter.js

@@ -60,7 +60,7 @@ export class SelectHighlighter {
             ElementHighlighter.removeShadowClone(block, options.data.keyField.name, selectedSegment, options.charts[0].sizes);
             ElementHighlighter.renderArcCloneAndHighlight(block, selectedSegment, options.charts[0].sizes);
             ElementHighlighter.toggleActivityStyle(selectedSegment, true);
-            ElementHighlighter.toggleActivityStyle(DomSelectionHelper.getChartElementsByKeys(Donut.getAllArcGroups(block), true, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
+            ElementHighlighter.toggleActivityStyle(DomSelectionHelper.getChartElementsByKeysForPolar(Donut.getAllArcGroups(block), selectedKeys, SelectionCondition.Exclude), false);
         }
         else {
             ElementHighlighter.removeDonutHighlightingByKeys(arcItems, options.data.keyField.name, selectedKeys, options.charts[0].sizes);

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

@@ -11,7 +11,7 @@ export class LegendEventsManager {
         const arcItems = Donut.getAllArcGroups(block);
         legendItems.on("mousemove", function (e, keyValue) {
             arcItems
-                .filter((row) => row.data[keyFieldName] === keyValue.textContent)
+                .filter((row) => row.data.key === keyValue.textContent)
                 .dispatch("mousemove", {
                 bubbles: false,
                 cancelable: true,
@@ -22,11 +22,11 @@ export class LegendEventsManager {
             });
         });
         legendItems.on("mouseover", function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent).dispatch("mouseover");
+            arcItems.filter((row) => row.data.key === keyValue.textContent).dispatch("mouseover");
             ElementHighlighter.toggleActivityStyle(select(this), true);
         });
         legendItems.on("mouseleave", function (e, keyValue) {
-            arcItems.filter((row) => row.data[keyFieldName] === keyValue.textContent).dispatch("mouseleave");
+            arcItems.filter((row) => row.data.key === keyValue.textContent).dispatch("mouseleave");
             if (!block.filterEventManager.isSelected(keyValue.textContent) &&
                 block.filterEventManager.getSelectedKeys().length > 0)
                 ElementHighlighter.toggleActivityStyle(select(this), false);
@@ -36,7 +36,7 @@ export class LegendEventsManager {
         const arcItems = Donut.getAllArcGroups(block);
         legendItems.on("click", (e, keyValue) => {
             arcItems
-                .filter((row) => row.data[keyFieldName] === keyValue.textContent)
+                .filter((row) => row.data.key === keyValue.textContent)
                 .dispatch("click", {
                 bubbles: false,
                 cancelable: true,

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

@@ -85,18 +85,18 @@ export class Tooltip {
         const tooltipBlock = TooltipComponentsManager.renderTooltipBlock(block);
         const tooltipContent = TooltipComponentsManager.renderTooltipContentBlock(tooltipBlock);
         this.attachTooltipMoveOnElements(elements, block, tooltipBlock, {
-            mouseover: function (e, dataRow) {
-                TooltipDomHelper.fillContent(tooltipContent, tooltipOptions.getContent(dataRow.data[dataOptions.keyField.name]));
+            mouseover: function (e, segment) {
+                TooltipDomHelper.fillContent(tooltipContent, tooltipOptions.getContent(segment.data.key));
                 ElementHighlighter.toggleActivityStyle(select(this), true);
-                const clones = Donut.getAllArcClones(block).filter((d) => d.data[dataOptions.keyField.name] === dataRow.data[dataOptions.keyField.name]);
+                const clones = Donut.getAllArcClones(block).filter((d) => d.data.key === segment.data.key);
                 if (clones.nodes().length === 0 &&
                     (block.filterEventManager.getSelectedKeys().length === 0 ||
-                        block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name]))) {
+                        block.filterEventManager.isSelected(segment.data.key))) {
                     ElementHighlighter.renderArcCloneAndHighlight(block, select(this), chartSizes);
                 }
             },
-            mouseleave: function (e, dataRow) {
-                if (!block.filterEventManager.isSelected(dataRow.data[dataOptions.keyField.name])) {
+            mouseleave: function (e, segment) {
+                if (!block.filterEventManager.isSelected(segment.data.key)) {
                     ElementHighlighter.removeCloneForElem(block, dataOptions.keyField.name, select(this));
                     ElementHighlighter.removeShadowClone(block, dataOptions.keyField.name, select(this), chartSizes);
                     ElementHighlighter.toggleDonutHighlightState(select(this), chartSizes, block.transitionManager.durations.higlightedScale, false);

package/lib/engine/filterManager/filterEventManager.js

@@ -82,7 +82,7 @@ export class FilterEventManager {
     setListenerPolar(options) {
         if (this.filterable) {
             this.registerEventToDonut(options);
-            const selectedElems = Donut.getAllArcGroups(this.block).filter((d) => this.selectedKeys.findIndex((sid) => sid === d.data[options.data.keyField.name]) !== -1);
+            const selectedElems = Donut.getAllArcGroups(this.block).filter((d) => this.selectedKeys.findIndex((sid) => sid === d.data.key) !== -1);
             this.selectedKeys = [];
             selectedElems.dispatch("click", { bubbles: false, cancelable: true, detail: { multySelect: true } });
         }
@@ -124,7 +124,7 @@ export class FilterEventManager {
         const thisClass = this;
         arcItems.on("click", function (e, dataRow) {
             const multySelect = thisClass.getMultySelectParam(e);
-            const keyValue = dataRow.data[options.data.keyField.name];
+            const keyValue = dataRow.data.key;
             const appended = thisClass.processKey(multySelect, keyValue);
             SelectHighlighter.clickPolarHandler(multySelect, appended, select(this), thisClass.getSelectedKeys(), thisClass.block, options, arcItems);
             if (thisClass.callback) {

package/lib/engine/helpers/domSelectionHelper.d.ts

@@ -1,7 +1,8 @@
 import { Selection, BaseType } from "d3-selection";
 import { MdtChartsDataRow } from "../../config/config";
-import { ChartStyle, TwoDimensionalChartModel } from "../../model/model";
+import { ChartStyle, PolarSegmentModel, TwoDimensionalChartModel } from "../../model/model";
 import { Block } from "../block/block";
+import { PieArcDatum } from "d3-shape";
 declare type StyleColorType = "fill" | "stroke";
 export declare enum SelectionCondition {
     Include = 0,
@@ -24,6 +25,7 @@ export declare class DomSelectionHelper {
      * @returns Выборка по ключам
      */
     static getChartElementsByKeys<T extends BaseType>(initialSelection: Selection<T, MdtChartsDataRow, BaseType, unknown>, dataWrapped: boolean, keyFieldName: string, keyValues: string[], condition?: SelectionCondition): Selection<T, any, BaseType, unknown>;
+    static getChartElementsByKeysForPolar<T extends BaseType>(initialSelection: Selection<T, PieArcDatum<PolarSegmentModel>, BaseType, unknown>, keyValues: string[], condition?: SelectionCondition): Selection<T, any, BaseType, unknown>;
     private static setChartOpacity;
 }
 export {};

package/lib/engine/helpers/domSelectionHelper.js

@@ -59,6 +59,14 @@ export class DomSelectionHelper {
             return condition === SelectionCondition.Exclude ? i === -1 : i !== -1;
         });
     }
+    //TODO: remove this method after refactoring
+    static getChartElementsByKeysForPolar(initialSelection, keyValues, condition = SelectionCondition.Include) {
+        return initialSelection.filter((d) => {
+            let i;
+            i = keyValues.findIndex((kv) => kv === d.data.key);
+            return condition === SelectionCondition.Exclude ? i === -1 : i !== -1;
+        });
+    }
     static setChartOpacity(elements, opacity) {
         elements.attr("opacity", opacity);
     }

package/lib/engine/polarNotation/donut/donut.d.ts

@@ -1,8 +1,7 @@
 import { PieArcDatum } from "d3-shape";
 import { Selection } from "d3-selection";
-import { DonutChartSettings, DonutChartModel } from "../../../model/model";
+import { DonutChartSettings, DonutChartModel, PolarSegmentModel } from "../../../model/model";
 import { Block } from "../../block/block";
-import { MdtChartsDataRow } from "../../../config/config";
 export interface Translate {
     x: number;
     y: number;
@@ -16,17 +15,17 @@ export declare class Donut {
     static readonly arcShadowsGroupClass = "arc-shadow-clones";
     static readonly arcCloneClass = "arc-clone";
     static readonly arcShadowClass = "arc-shadow-clone";
-    static render(block: Block, data: MdtChartsDataRow[], chart: DonutChartModel, settings: DonutChartSettings): void;
-    static update(block: Block, data: MdtChartsDataRow[], chart: DonutChartModel, donutSettings: DonutChartSettings, keyField: string): Promise<any>;
-    static updateColors(block: Block, chart: DonutChartModel): void;
-    static getAllArcGroups(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
-    static getAllArcClones(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
-    static getAllArcShadows(block: Block): Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>;
-    private static renderNewArcItems;
-    private static setElementsColor;
+    static getAllArcGroups(block: Block): Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, SVGGElement, unknown>;
+    static getAllArcClones(block: Block): Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, SVGGElement, unknown>;
+    static getAllArcShadows(block: Block): Selection<SVGGElement, PieArcDatum<PolarSegmentModel>, SVGGElement, unknown>;
+    private segmentLabels;
+    render(block: Block, chart: DonutChartModel, settings: DonutChartSettings): void;
+    update(block: Block, chart: DonutChartModel, donutSettings: DonutChartSettings): Promise<any>;
+    updateColors(block: Block, chart: DonutChartModel, settings: DonutChartSettings): void;
+    private renderNewArcItems;
     /**
      * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
      */
-    private static renderClonesG;
-    private static raiseClonesG;
+    private renderClonesG;
+    private raiseClonesG;
 }

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

@@ -1,42 +1,64 @@
 import { interpolate } from "d3-interpolate";
 import { DonutHelper } from "./donutHelper";
 import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
-import { ColorReader } from "../../colorReader/colorReader";
+import { SunburstSegmentLabel } from "../../sunburstNotation/sunburstSegmentLabel";
 export class Donut {
-    static render(block, data, chart, settings) {
+    static getAllArcGroups(block) {
+        return block.getSvg().selectAll(`.${this.arcItemClass}`);
+    }
+    static getAllArcClones(block) {
+        return block.getSvg().selectAll(`.${Donut.arcCloneClass}`);
+    }
+    static getAllArcShadows(block) {
+        return block.getSvg().selectAll(`.${this.arcShadowClass}`);
+    }
+    render(block, chart, settings) {
         const arcGenerator = DonutHelper.getArcGenerator(chart.sizes.outerRadius, chart.sizes.innerRadius);
-        const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
+        const pieGenerator = DonutHelper.getPieGenerator(settings.padAngle);
         const donutBlock = block
             .getSvg()
             .append("g")
-            .attr("class", this.donutBlockClass)
+            .attr("class", Donut.donutBlockClass)
             .attr("x", chart.sizes.translate.x)
             .attr("y", chart.sizes.translate.y)
             .attr("transform", `translate(${chart.sizes.translate.x}, ${chart.sizes.translate.y})`);
-        this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart);
+        this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, chart.data.segments, chart.cssClasses);
         this.renderClonesG(donutBlock);
+        if (chart.valueLabels.on) {
+            this.segmentLabels = new SunburstSegmentLabel(donutBlock);
+            this.segmentLabels.render({
+                sizesForGenerators: {
+                    innerRadius: chart.sizes.innerRadius,
+                    outerRadius: chart.sizes.outerRadius,
+                    padAngle: settings.padAngle
+                }
+            }, chart.valueLabels.items);
+        }
     }
-    static update(block, data, chart, donutSettings, keyField) {
+    update(block, chart, donutSettings) {
+        var _a;
         const arcGenerator = DonutHelper.getArcGenerator(chart.sizes.outerRadius, chart.sizes.innerRadius);
-        const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, donutSettings.padAngle);
-        const oldData = block
+        const pieGenerator = DonutHelper.getPieGenerator(donutSettings.padAngle);
+        const oldSegments = block
             .getSvg()
-            .selectAll(`.${this.donutBlockClass}`)
+            .selectAll(`.${Donut.donutBlockClass}`)
             .selectAll("path")
             .data()
             .map((d) => d.data);
-        const dataNewZeroRows = DonutHelper.mergeDataWithZeros(data, oldData, keyField, ColorReader.getChartColorField(chart));
-        const dataExtraZeroRows = DonutHelper.mergeDataWithZeros(oldData, data, keyField, ColorReader.getChartColorField(chart));
-        const donutBlock = block.getSvg().select(`.${this.donutBlockClass}`);
+        const dataNewZeroRows = DonutHelper.mergeDataWithZeros(chart.data.segments, oldSegments);
+        const dataExtraZeroRows = DonutHelper.mergeDataWithZeros(oldSegments, chart.data.segments);
+        const donutBlock = block.getSvg().select(`.${Donut.donutBlockClass}`);
         donutBlock
             .attr("x", chart.sizes.translate.x)
             .attr("y", chart.sizes.translate.y)
             .attr("transform", `translate(${chart.sizes.translate.x}, ${chart.sizes.translate.y})`);
-        this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, dataNewZeroRows, chart);
-        const path = this.getAllArcGroups(block).data(pieGenerator(dataExtraZeroRows)).select("path");
-        const items = this.getAllArcGroups(block).data(pieGenerator(data));
-        this.setElementsColor(this.getAllArcGroups(block), chart);
-        return new Promise((resolve) => {
+        this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, dataNewZeroRows, chart.cssClasses);
+        const path = Donut.getAllArcGroups(block)
+            .data(pieGenerator(dataExtraZeroRows), (d) => d.data.key)
+            .select("path");
+        const items = Donut.getAllArcGroups(block).data(pieGenerator(chart.data.segments), (d) => d.data.key);
+        items.select(`.${Donut.arcPathClass}`).style("fill", (d) => d.data.color);
+        const updateDonutPromise = new Promise((resolve) => {
             this.raiseClonesG(block);
             path.interrupt()
                 .transition()
@@ -53,50 +75,53 @@ export class Donut {
                 };
             });
         });
+        const promises = [updateDonutPromise];
+        if (chart.valueLabels.on) {
+            const updateLabelsPromise = (_a = this.segmentLabels) === null || _a === void 0 ? void 0 : _a.update({
+                sizesForGenerators: {
+                    innerRadius: chart.sizes.innerRadius,
+                    outerRadius: chart.sizes.outerRadius,
+                    padAngle: donutSettings.padAngle
+                }
+            }, chart.valueLabels.items, block.transitionManager.durations.chartUpdate).then((labels) => labels.raise());
+            promises.push(updateLabelsPromise);
+        }
+        return Promise.all(promises);
     }
-    static updateColors(block, chart) {
-        this.setElementsColor(this.getAllArcGroups(block), chart);
+    updateColors(block, chart, settings) {
+        const pieGenerator = DonutHelper.getPieGenerator(settings.padAngle);
+        Donut.getAllArcGroups(block)
+            .data(pieGenerator(chart.data.segments), (d) => d.data.key)
+            .select(`.${Donut.arcPathClass}`)
+            .style("fill", (d) => d.data.color);
     }
-    static getAllArcGroups(block) {
-        return block.getSvg().selectAll(`.${this.arcItemClass}`);
-    }
-    static getAllArcClones(block) {
-        return block.getSvg().selectAll(`.${Donut.arcCloneClass}`);
-    }
-    static getAllArcShadows(block) {
-        return block.getSvg().selectAll(`.${this.arcShadowClass}`);
-    }
-    static renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart) {
+    renderNewArcItems(arcGenerator, pieGenerator, donutBlock, segments, cssClasses) {
         const items = donutBlock
-            .selectAll(`.${this.arcItemClass}`)
-            .data(pieGenerator(data))
+            .selectAll(`.${Donut.arcItemClass}`)
+            .data(pieGenerator(segments), (d) => d.data.key)
             .enter()
             .append("g")
-            .attr("class", this.arcItemClass);
+            .attr("class", Donut.arcItemClass);
         const arcs = items
             .append("path")
             .attr("d", arcGenerator)
-            .attr("class", this.arcPathClass)
+            .attr("class", Donut.arcPathClass)
+            .style("fill", (d) => d.data.color)
             .each(function (d) {
             this._currentData = d;
         }); // _currentData используется для получения текущих данных внутри функции обновления.
-        DomSelectionHelper.setCssClasses(arcs, chart.cssClasses);
-        this.setElementsColor(items, chart);
-    }
-    static setElementsColor(arcItems, chart) {
-        arcItems.select("path").style("fill", ({ data }, i) => ColorReader.getColorForArc(data, chart, i));
+        DomSelectionHelper.setCssClasses(arcs, cssClasses);
     }
     /**
      * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
      */
-    static renderClonesG(donutBlock) {
-        const clonesShadowsG = donutBlock.append("g").attr("class", this.arcShadowsGroupClass).raise();
-        const clonesG = donutBlock.append("g").attr("class", this.arcClonesGroupClass).raise();
-        // ElementHighlighter.setShadowFilter(clonesG);
+    renderClonesG(donutBlock) {
+        const clonesShadowsG = donutBlock.append("g").attr("class", Donut.arcShadowsGroupClass).raise();
+        const clonesG = donutBlock.append("g").attr("class", Donut.arcClonesGroupClass).raise();
     }
-    static raiseClonesG(block) {
-        block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcShadowsGroupClass}`).raise();
-        block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcClonesGroupClass}`).raise();
+    raiseClonesG(block) {
+        block.getSvg().select(`.${Donut.donutBlockClass}`).select(`.${Donut.arcShadowsGroupClass}`).raise();
+        block.getSvg().select(`.${Donut.donutBlockClass}`).select(`.${Donut.arcClonesGroupClass}`).raise();
     }
 }
 Donut.donutBlockClass = "donut-block";

package/lib/engine/polarNotation/donut/donutHelper.d.ts

@@ -1,7 +1,10 @@
 import { PieArcDatum, Arc, Pie } from "d3-shape";
-import { MdtChartsDataRow, MdtChartsColorField } from "../../../config/config";
+import { PolarSegmentModel } from "../../../model/model";
 export declare class DonutHelper {
-    static getArcGenerator(outerRadius: number, innerRadius: number): Arc<any, PieArcDatum<MdtChartsDataRow>>;
-    static getPieGenerator(valueField: string, padAngle: number): Pie<any, MdtChartsDataRow>;
-    static mergeDataWithZeros(firstDataset: MdtChartsDataRow[], secondDataset: MdtChartsDataRow[], keyField: string, colorField: MdtChartsColorField): MdtChartsDataRow[];
+    static getArcGenerator(outerRadius: number, innerRadius: number): Arc<any, PieArcDatum<PolarSegmentModel>>;
+    static getPieGenerator(padAngle: number): Pie<any, PolarSegmentModel>;
+    static mergeDataWithZeros<R extends {
+        key: string | number;
+        value: number;
+    }>(firstDataset: R[], secondDataset: R[]): R[];
 }

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

@@ -4,29 +4,22 @@ export class DonutHelper {
     static getArcGenerator(outerRadius, innerRadius) {
         return arc().innerRadius(innerRadius).outerRadius(outerRadius);
     }
-    static getPieGenerator(valueField, padAngle) {
+    static getPieGenerator(padAngle) {
         return pie()
             .padAngle(padAngle)
             .sort(null)
-            .value((d) => d[valueField]);
+            .value((d) => d.value);
     }
-    static mergeDataWithZeros(firstDataset, secondDataset, keyField, colorField) {
+    static mergeDataWithZeros(firstDataset, secondDataset) {
         const secondSet = new Set();
-        secondDataset.forEach((dataRow) => {
-            secondSet.add(dataRow[keyField]);
-        });
+        secondDataset.forEach((segment) => secondSet.add(segment.key));
         const onlyNew = firstDataset
-            .filter((d) => !secondSet.has(d[keyField]))
+            .filter((d) => !secondSet.has(d.key))
             .map((d, index, array) => {
-            const data = {
-                keyField: array[index][keyField],
-                valueField: 0,
-                [colorField]: array[index][colorField]
-                //TODO: добавить цвет из ColorReader'а
-            };
-            return data;
+            const segmentToChangeToZero = Object.assign(Object.assign({}, d), { value: 0 });
+            return segmentToChangeToZero;
         });
-        const sortedMerge = merge([secondDataset, onlyNew]);
-        return sortedMerge;
+        const merged = merge([secondDataset, onlyNew]);
+        return merged;
     }
 }

package/lib/engine/polarNotation/polarManager.d.ts

@@ -5,6 +5,7 @@ import { MdtChartsDataSource } from "../../config/config";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
 import { ChartClearSelectionOptions, FilterEventManager } from "../filterManager/filterEventManager";
 export declare class PolarManager implements ChartContentManager {
+    private readonly donut;
     render(engine: Engine, model: Model<PolarOptionsModel>): void;
     updateData(block: Block, model: Model<PolarOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<PolarOptionsModel>): void;

package/lib/engine/polarNotation/polarManager.js

@@ -6,11 +6,14 @@ import { Donut } from "./donut/donut";
 import { RecordOverflowAlertCore } from "../features/recordOverflowAlert/recordOverflowAlertCore";
 import { Aggregator } from "../features/aggregator/aggregator";
 export class PolarManager {
+    constructor() {
+        this.donut = new Donut();
+    }
     render(engine, model) {
         const options = model.options;
         engine.block.svg.render(model.blockCanvas.size);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
-        Donut.render(engine.block, engine.data[options.data.dataSource], options.charts[0], options.chartCanvas);
+        this.donut.render(engine.block, options.charts[0], options.chartCanvas);
         Aggregator.render(engine.block, options.charts[0].sizes.innerRadius, options.charts[0].sizes.translate, options.charts[0].sizes.thickness, options.chartCanvas.aggregator);
         Legend.get().render(engine.block, options, model);
         Tooltip.renderTooltipForDonut(engine.block, model.options.data, model.options.charts[0].sizes, model.options.tooltip);
@@ -32,7 +35,7 @@ export class PolarManager {
         ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
         Tooltip.hide(block);
         const options = model.options;
-        Donut.update(block, data[options.data.dataSource], options.charts[0], options.chartCanvas, options.data.keyField.name).then(() => {
+        this.donut.update(block, options.charts[0], options.chartCanvas).then(() => {
             Tooltip.renderTooltipForDonut(block, model.options.data, model.options.charts[0].sizes, model.options.tooltip);
             block.filterEventManager.setListenerPolar(options);
         });
@@ -42,7 +45,9 @@ export class PolarManager {
     }
     updateColors(block, model) {
         Legend.get().updateColors(block, model.options);
-        Donut.updateColors(block, model.options.charts[0]);
+        this.donut.updateColors(block, model.options.charts[0], model.options.chartCanvas);
+        //TODO: temp solution for updating marker colors in tooltip. In future should attach tooltip data to segments like in sunburst chart
+        Tooltip.renderTooltipForDonut(block, model.options.data, model.options.charts[0].sizes, model.options.tooltip);
     }
     clearSelection(filterEventManager, model, options) {
         filterEventManager.clearKeysForPolar(model.options, options);

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

@@ -7,8 +7,9 @@ export declare class Sunburst {
     private readonly block;
     static readonly donutBlockClassPrefix = "level-donut-block";
     static readonly arcItemClass = "arc";
-    private static readonly arcItemNonHighlightedClass;
     static readonly arcPathClass = "arc-path";
+    private static readonly arcItemNonHighlightedClass;
+    private readonly sunburstSegmentLabels;
     static getAllArcGroups(block: Block): Selection<SVGGElement, PieArcDatum<SunburstLevelSegment>, SVGGElement, unknown>;
     static getLevelArcGroups(block: Block, levelIndex: number): Selection<SVGGElement, PieArcDatum<SunburstLevelSegment>, SVGGElement, unknown>;
     private readonly pagAngle;

package/lib/engine/sunburstNotation/sunburst.js

@@ -1,9 +1,11 @@
 import { arc, pie } from "d3-shape";
 import { merge } from "d3-array";
 import { interpolate } from "d3-interpolate";
+import { SunburstSegmentLabel } from "./sunburstSegmentLabel";
 export class Sunburst {
     constructor(block) {
         this.block = block;
+        this.sunburstSegmentLabels = {};
         this.pagAngle = 0.005;
         this.block = block;
     }
@@ -26,6 +28,16 @@ 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);
+            if (level.valueLabels.on) {
+                this.sunburstSegmentLabels[levelIndex] = new SunburstSegmentLabel(levelDonutBlock);
+                this.sunburstSegmentLabels[levelIndex].render({
+                    sizesForGenerators: {
+                        innerRadius: level.sizes.innerRadius,
+                        outerRadius: level.sizes.outerRadius,
+                        padAngle: this.pagAngle
+                    }
+                }, level.valueLabels.items);
+            }
         });
         return Sunburst.getAllArcGroups(this.block);
     }
@@ -59,13 +71,25 @@ export class Sunburst {
                     resolve();
                 })
                     .attrTween("d", function (d) {
-                    const interpolateFunc = interpolate(this._currentData, d);
+                    const interpolateFunc = interpolate(this._currentDataForUsingOnUpdate, d);
                     return (t) => {
-                        this._currentData = interpolateFunc(t);
-                        return arcGenerator(this._currentData);
+                        this._currentDataForUsingOnUpdate = interpolateFunc(t);
+                        return arcGenerator(this._currentDataForUsingOnUpdate);
                     };
                 });
             }));
+            if (level.valueLabels.on) {
+                const updateLabelsPromise = this.sunburstSegmentLabels[levelIndex]
+                    .update({
+                    sizesForGenerators: {
+                        innerRadius: level.sizes.innerRadius,
+                        outerRadius: level.sizes.outerRadius,
+                        padAngle: this.pagAngle
+                    }
+                }, level.valueLabels.items, this.block.transitionManager.durations.chartUpdate)
+                    .then(() => undefined);
+                promises.push(updateLabelsPromise);
+            }
         });
         return Promise.all(promises).then(() => Sunburst.getAllArcGroups(this.block));
     }
@@ -111,8 +135,8 @@ export class Sunburst {
             .attr("d", arcGenerator)
             .attr("class", Sunburst.arcPathClass)
             .each(function (d) {
-            this._currentData = d;
-        }); // TODO: _currentData используется для получения текущих данных внутри функции обновления.
+            this._currentDataForUsingOnUpdate = d;
+        }); // TODO: _currentDataForUsingOnUpdate используется для получения текущих данных внутри функции обновления.
         return items;
     }
     getGenerators(level) {
@@ -140,5 +164,5 @@ export class Sunburst {
 }
 Sunburst.donutBlockClassPrefix = "level-donut-block";
 Sunburst.arcItemClass = "arc";
-Sunburst.arcItemNonHighlightedClass = "mdt-charts-arc-non-highlighted";
 Sunburst.arcPathClass = "arc-path";
+Sunburst.arcItemNonHighlightedClass = "mdt-charts-arc-non-highlighted";

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

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

package/lib/engine/sunburstNotation/sunburstSegmentLabel.js

@@ -0,0 +1,86 @@
+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;
+    }
+    render(options, segments) {
+        const { arcGenerator, pieGenerator } = this.getGenerators(options);
+        this.parentSelection
+            .selectAll("text")
+            .data(pieGenerator(segments), (d) => d.data.key)
+            .enter()
+            .append("text")
+            .attr("transform", (d) => {
+            return this.getTransformAttrValue(arcGenerator, d);
+        })
+            .classed(SunburstSegmentLabel.arcLabelClass, true)
+            .text((d) => d.data.textContent)
+            .each(function (d) {
+            if (d.data.cssClass)
+                select(this).classed(d.data.cssClass, true);
+            this._currentDataForUsingOnUpdate = d;
+        });
+    }
+    update(options, segments, animationDuration) {
+        const oldLabels = this.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
+            .selectAll("text")
+            .data(pieGenerator(valueLabelsZeroRows), (d) => d.data.key);
+        const onlyNewLabels = this.parentSelection
+            .selectAll("text")
+            .data(pieGenerator(segments), (d) => d.data.key);
+        onlyNewLabels.text((d) => d.data.textContent);
+        const thisClass = this;
+        return new Promise((resolve) => {
+            labelsNewAndOld
+                .interrupt()
+                .transition()
+                .duration(animationDuration)
+                .on("end", () => {
+                onlyNewLabels.exit().remove();
+                resolve(onlyNewLabels);
+            })
+                .attrTween("transform", function (d) {
+                const interpolateFunc = interpolate(this._currentDataForUsingOnUpdate, d);
+                return (t) => {
+                    this._currentDataForUsingOnUpdate = interpolateFunc(t);
+                    return thisClass.getTransformAttrValue(arcGenerator, this._currentDataForUsingOnUpdate);
+                };
+            });
+        });
+    }
+    getTransformAttrValue(arcGenerator, d) {
+        const [x, y] = arcGenerator.centroid(d);
+        let attrValue = `translate(${x},${y})`;
+        if (d.data.rotation.type === "tangential") {
+            const a = (d.startAngle + d.endAngle) / 2;
+            let rotate = (a * 180) / Math.PI - 90;
+            if (rotate > 90)
+                rotate -= 180;
+            if (rotate < -90)
+                rotate += 180;
+            attrValue += ` rotate(${rotate})`;
+        }
+        return attrValue;
+    }
+    getGenerators(options) {
+        const arcGenerator = arc()
+            .innerRadius(options.sizesForGenerators.innerRadius)
+            .outerRadius(options.sizesForGenerators.outerRadius)
+            .padAngle(options.sizesForGenerators.padAngle);
+        const pieGenerator = pie()
+            .sort(null)
+            .value((d) => d.value);
+        return { arcGenerator, pieGenerator };
+    }
+}
+SunburstSegmentLabel.arcLabelClass = "mdt-charts-arc-label";

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

@@ -1,12 +1,9 @@
-import { MdtChartsDataRow } from "../../../../config/config";
-import { ValueField } from "../../../model";
+import { PolarSegmentModel, ValueField } from "../../../model";
 import { TooltipContentInitialRow, TooltipContentInitialRowsProvider, TooltipContentInitialRowsProviderContext } from "./tooltipContentInitialRowsProvider";
 export interface PolarInitialRowsProviderOptions {
     valueField: ValueField;
-    colorField?: string;
-    datasource: MdtChartsDataRow[];
+    segments: PolarSegmentModel[];
     chartColors: string[];
-    keyFieldName: string;
 }
 export declare class PolarInitialRowsProvider implements TooltipContentInitialRowsProvider {
     private readonly options;

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

@@ -4,17 +4,13 @@ export class PolarInitialRowsProvider {
         this.options = options;
     }
     getInitialRows(context) {
-        const indexOfCurrentDataRow = this.options.datasource.findIndex((row) => row[this.options.keyFieldName] === context.keyFieldValue);
-        let markerColor;
-        if (this.options.colorField) {
-            const currentDataRow = this.options.datasource[indexOfCurrentDataRow];
-            markerColor = currentDataRow[this.options.colorField];
+        const currentSegment = this.options.segments.find((segment) => segment.key === context.keyFieldValue);
+        if (!currentSegment) {
+            throw new Error(`Segment with key ${context.keyFieldValue} not found`);
         }
-        else
-            markerColor = this.options.chartColors[indexOfCurrentDataRow];
         return [
             {
-                marker: Object.assign(Object.assign({}, POLAR_LEGEND_MARKER), { color: markerColor }),
+                marker: Object.assign(Object.assign({}, POLAR_LEGEND_MARKER), { color: currentSegment.color }),
                 valueField: this.options.valueField
             }
         ];

package/lib/model/model.d.ts

@@ -1,6 +1,7 @@
 import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement, MdtChartsFieldName, BlockMargin as ConfigBlockMargin } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, Transitions } from "../designer/designerConfig";
 import { BoundingRect } from "../engine/features/valueLabelsCollision/valueLabelsCollision";
+import { PolarLikeChartValueLabelsModel } from "./modelTypes/valueLabelsModel";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
 export declare type ScaleKeyType = (ScaleBandModel | ScalePointModel)["type"];
@@ -375,6 +376,7 @@ export interface DonutThicknessOptions {
 export interface SunburstLevel {
     segments: SunburstLevelSegment[];
     sizes: DonutChartSizesModel;
+    valueLabels: PolarLikeChartValueLabelsModel;
 }
 export interface SunburstLevelSegment {
     value: number;
@@ -483,6 +485,7 @@ export interface DonutChartModel extends ChartModel {
     type: PolarChartType;
     data: PolarChartDataModel;
     sizes: DonutChartSizesModel;
+    valueLabels: PolarLikeChartValueLabelsModel;
 }
 export interface DonutChartSizesModel {
     outerRadius: number;
@@ -549,6 +552,13 @@ interface MarkersBaseSizeOptions {
 export interface PolarChartDataModel {
     valueField: ValueField;
     colorField?: MdtChartsColorField;
+    segments: PolarSegmentModel[];
+}
+export interface PolarSegmentModel {
+    key: string;
+    value: number;
+    color: string;
+    attachedDataRow: MdtChartsDataRow;
 }
 export interface DataSettings {
     scope: DataScope;

package/lib/model/modelTypes/valueLabelsModel.d.ts

@@ -0,0 +1,15 @@
+export interface PolarSegmentLabelDataItem {
+    key: string | number;
+    value: number;
+    textContent: string;
+    rotation: {
+        type: "none" | "tangential";
+    };
+    cssClass?: string;
+}
+export declare type PolarLikeChartValueLabelsModel = {
+    on: false;
+} | {
+    on: true;
+    items: PolarSegmentLabelDataItem[];
+};

package/lib/model/modelTypes/valueLabelsModel.js

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

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

@@ -7,13 +7,14 @@ import { TwoDimTooltipContentGenerator } from "../../featuresModel/tooltipModel/
 import { PolarInitialRowsProvider } from "../../featuresModel/tooltipModel/contentByNotations/polarInitialRowsProvider";
 import { DonutThicknessCalculator } from "./donut/donutThicknessService";
 import { getDonutLikeOuterRadius, getDonutLikeTranslate } from "./donut/donutLikeSizesCalculator";
+import { SegmentModelBuilder } from "./segmentModelBuilder/segmentModelBuilder";
 export const MIN_DONUT_BLOCK_SIZE = 120;
 export class PolarModel {
     static getOptions(options, designerConfig, modelInstance) {
         const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         const donutSettings = this.donutModel.getSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows());
         const chartStyle = ChartStyleModelService.getChartStyle(modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle);
-        const chart = this.getChartsModel(donutSettings, modelInstance.canvasModel.getBlockSize(), modelInstance.canvasModel.getMargin(), options.chart, chartStyle);
+        const chart = this.getChartsModel(donutSettings, modelInstance.canvasModel.getBlockSize(), modelInstance.canvasModel.getMargin(), options.chart, chartStyle, modelInstance.dataModel.repository.getScopedRows(), options.data.keyField.name, options.chart.valueLabels);
         return {
             type: options.type,
             selectable: !!options.selectable,
@@ -25,16 +26,11 @@ export class PolarModel {
             charts: [chart],
             legend: {
                 position: modelInstance.canvasModel.legendCanvas.getPosition(),
-                items: modelInstance.dataModel.repository
-                    .getScopedRows()
-                    .map((record, index) => {
-                    let markerColor = chartStyle.elementColors[index % chartStyle.elementColors.length];
-                    if (options.chart.data.colorField)
-                        markerColor = record[options.chart.data.colorField];
+                items: chart.data.segments.map((segment, index) => {
                     return {
                         marker: POLAR_LEGEND_MARKER,
-                        markerColor,
-                        textContent: record[options.data.keyField.name]
+                        markerColor: segment.color,
+                        textContent: segment.key
                     };
                 })
             },
@@ -45,11 +41,9 @@ export class PolarModel {
                         keyFieldName: options.data.keyField.name,
                         publicOptions: options.tooltip,
                         initialRowsProvider: new PolarInitialRowsProvider({
-                            datasource: modelInstance.dataModel.repository.getRawRows(),
+                            segments: chart.data.segments,
                             valueField: options.chart.data.valueField,
-                            keyFieldName: options.data.keyField.name,
-                            chartColors: chart.style.elementColors,
-                            colorField: options.chart.data.colorField
+                            chartColors: chart.style.elementColors
                         }),
                         valueGlobalFormatter: designerConfig.dataFormat.formatters
                     });
@@ -86,12 +80,34 @@ export class PolarModel {
         const heightForLegend = chartBlockHeight - bottomLegendMargin.bottom - bottomLegendMargin.top - MIN_DONUT_BLOCK_SIZE;
         return heightForLegend >= minHeightForLegend;
     }
-    static getChartsModel(donutSettings, blockSize, margin, chart, chartStyle) {
+    static getChartsModel(donutSettings, blockSize, margin, chart, chartStyle, scopedDataRows, keyFieldName, valueLabels) {
+        var _a;
         const outerRadius = getDonutLikeOuterRadius(margin, blockSize);
         const thickness = DonutThicknessCalculator.getThickness(donutSettings.thickness, blockSize, margin);
+        const segmentModelBuilder = new SegmentModelBuilder({
+            scopedDataRows,
+            keyFieldName,
+            valueFieldName: chart.data.valueField.name,
+            chartPaletteColors: chartStyle.elementColors,
+            colorFieldName: chart.data.colorField
+        });
+        const segments = segmentModelBuilder.build();
         return {
             type: chart.type,
-            data: Object.assign({}, chart.data),
+            data: Object.assign(Object.assign({}, chart.data), { segments }),
+            valueLabels: {
+                on: (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.on) !== null && _a !== void 0 ? _a : false,
+                items: segments.map((segment) => {
+                    var _a, _b, _c;
+                    return ({
+                        key: segment.key,
+                        value: segment.value,
+                        textContent: (_b = (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.content) === null || _a === void 0 ? void 0 : _a.call(valueLabels, segment.attachedDataRow)) !== null && _b !== void 0 ? _b : segment.key.toString(),
+                        rotation: (_c = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.rotation) !== null && _c !== void 0 ? _c : { type: "tangential" },
+                        cssClass: valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.cssClass
+                    });
+                })
+            },
             cssClasses: ChartStyleModelService.getCssClasses(0),
             style: chartStyle,
             sizes: {

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

@@ -0,0 +1,15 @@
+import { MdtChartsDataRow, MdtChartsFieldName } from "../../../../config/config";
+import { PolarSegmentModel } from "../../../model";
+interface SegmentModelBuilderConfig {
+    scopedDataRows: MdtChartsDataRow[];
+    keyFieldName: MdtChartsFieldName;
+    valueFieldName: MdtChartsFieldName;
+    chartPaletteColors: string[];
+    colorFieldName?: MdtChartsFieldName;
+}
+export declare class SegmentModelBuilder {
+    private readonly config;
+    constructor(config: SegmentModelBuilderConfig);
+    build(): PolarSegmentModel[];
+}
+export {};

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

@@ -0,0 +1,19 @@
+export class SegmentModelBuilder {
+    constructor(config) {
+        this.config = config;
+    }
+    build() {
+        return this.config.scopedDataRows.map((row, index) => {
+            const paletteColor = this.config.chartPaletteColors[index % this.config.chartPaletteColors.length];
+            let color = paletteColor;
+            if (this.config.colorFieldName && row[this.config.colorFieldName])
+                color = row[this.config.colorFieldName];
+            return {
+                key: row[this.config.keyFieldName],
+                value: row[this.config.valueFieldName],
+                color,
+                attachedDataRow: row
+            };
+        });
+    }
+}

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

@@ -23,6 +23,7 @@ export class LevelModelBuilder {
             return acc;
         }, {});
         return publicConfig.levels.map((level, levelIndex) => {
+            var _a, _b;
             const valuesForLevelKeys = new Map();
             this.config.scopedDataRows.forEach((row) => {
                 var _a, _b, _c, _d;
@@ -39,49 +40,68 @@ export class LevelModelBuilder {
                 attachedDataRows.push(row);
                 valuesForLevelKeys.set(key, { value: newValue, color, parentLevelKey, attachedDataRows });
             });
-            return {
-                sizes: sizesByLevels[levelIndex],
-                segments: Array.from(valuesForLevelKeys.entries()).map(([key, { value, color, parentLevelKey, attachedDataRows }]) => {
-                    var _a;
-                    let tooltipContentRows = [
-                        {
-                            type: "plainText",
-                            textContent: key,
-                            wrapperElOptions: { cssClassName: TOOLTIP_HEAD_WRAPPER_CSS_CLASSNAME }
+            const segments = Array.from(valuesForLevelKeys.entries()).map(([key, { value, color, parentLevelKey, attachedDataRows }]) => {
+                var _a;
+                let tooltipContentRows = [
+                    {
+                        type: "plainText",
+                        textContent: key,
+                        wrapperElOptions: { cssClassName: TOOLTIP_HEAD_WRAPPER_CSS_CLASSNAME }
+                    },
+                    {
+                        type: "captionValue",
+                        marker: {
+                            shape: "circle",
+                            color
                         },
-                        {
-                            type: "captionValue",
-                            marker: {
-                                shape: "circle",
-                                color
-                            },
-                            caption: publicConfig.data.valueField.title,
-                            value: this.config.formatter(value, {
-                                type: publicConfig.data.valueField.format
-                            })
-                        }
-                    ];
-                    if ((_a = level.tooltip) === null || _a === void 0 ? void 0 : _a.overrideContent) {
-                        tooltipContentRows = level.tooltip.overrideContent({
-                            autoTooltipRows: tooltipContentRows,
-                            attachedDataRows
-                        }).rows;
+                        caption: publicConfig.data.valueField.title,
+                        value: this.config.formatter(value, {
+                            type: publicConfig.data.valueField.format
+                        })
                     }
-                    return {
-                        value,
-                        key,
-                        levelIndex,
-                        parentLevelKey,
-                        attachedDataRows,
-                        color,
-                        tooltip: {
-                            content: {
-                                type: "rows",
-                                rows: tooltipPublicRowToModel(tooltipContentRows)
-                            }
+                ];
+                if ((_a = level.tooltip) === null || _a === void 0 ? void 0 : _a.overrideContent) {
+                    tooltipContentRows = level.tooltip.overrideContent({
+                        autoTooltipRows: tooltipContentRows,
+                        attachedDataRows
+                    }).rows;
+                }
+                return {
+                    value,
+                    key,
+                    levelIndex,
+                    parentLevelKey,
+                    attachedDataRows,
+                    color,
+                    tooltip: {
+                        content: {
+                            type: "rows",
+                            rows: tooltipPublicRowToModel(tooltipContentRows)
                         }
-                    };
-                })
+                    }
+                };
+            });
+            const valueLabelsIsOn = (_b = (_a = level.valueLabels) === null || _a === void 0 ? void 0 : _a.on) !== null && _b !== void 0 ? _b : false;
+            return {
+                sizes: sizesByLevels[levelIndex],
+                segments,
+                valueLabels: valueLabelsIsOn
+                    ? {
+                        on: true,
+                        items: segments.map((segment) => {
+                            var _a, _b, _c, _d, _e, _f;
+                            return {
+                                key: segment.key,
+                                value: segment.value,
+                                rotation: (_b = (_a = level.valueLabels) === null || _a === void 0 ? void 0 : _a.rotation) !== null && _b !== void 0 ? _b : { type: "tangential" },
+                                cssClass: (_c = level.valueLabels) === null || _c === void 0 ? void 0 : _c.cssClass,
+                                textContent: (_f = (_e = (_d = level.valueLabels) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.call(_d, {
+                                    attachedDataRows: segment.attachedDataRows
+                                })) !== null && _f !== void 0 ? _f : segment.key.toString()
+                            };
+                        })
+                    }
+                    : { on: false }
             };
         });
     }

package/lib/style/charts-main.css

@@ -298,4 +298,12 @@
 
 .mdt-charts-arc-non-highlighted {
     opacity: 0.6;
+}
+
+.mdt-charts-arc-label {
+    text-anchor: middle;
+    dominant-baseline: middle;
+    font-size: 10px;
+    fill: black;
+    pointer-events: none;
 }

package/lib/style/charts-main.less

@@ -298,4 +298,12 @@
 
 .mdt-charts-arc-non-highlighted {
     opacity: 0.6;
+}
+
+.mdt-charts-arc-label {
+    text-anchor: middle;
+    dominant-baseline: middle;
+    font-size: 10px;
+    fill: black;
+    pointer-events: none;
 }

package/package.json

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