mdt-charts 1.41.0 → 1.42.0

package/lib/config/valueLabelsConfig.d.ts

@@ -14,6 +14,6 @@ export interface SunburstChartValueLabelsConfig {
     };
     cssClass?: string;
     content?: (segment: {
-        attachedDataRow: MdtChartsDataRow[];
+        attachedDataRows: MdtChartsDataRow[];
     }) => string;
 }

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/model/notations/sunburst/levelModelBuilder/levelModelBuilder.js

@@ -96,7 +96,7 @@ export class LevelModelBuilder {
                                 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, {
-                                    attachedDataRow: segment.attachedDataRows
+                                    attachedDataRows: segment.attachedDataRows
                                 })) !== null && _f !== void 0 ? _f : segment.key.toString()
                             };
                         })

package/package.json

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