mdt-charts 1.27.4 → 1.28.0

package/lib/config/config.d.ts

@@ -297,6 +297,14 @@ export interface TwoDimensionalChartValueLabels {
         mode?: ValueLabelsPositionMode;
     };
     format?: ValueLabelsFormatter;
+    rotation?: ValueLabelsRotationOptions;
+    handleElement?: (elInfo: {
+        element: SVGTextElement;
+        value: number;
+    }) => void;
+}
+export interface ValueLabelsRotationOptions {
+    angle?: number;
 }
 export declare type ValueLabelsFormatter = (value: number) => string;
 export declare type TwoDimensionalValueGroup = "main" | "secondary";

package/lib/engine/features/valueLabels/valueLabels.js

@@ -78,23 +78,42 @@ export class ChartValueLabels {
     }
     setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
         const animationName = "labels-updating";
-        valueLabels
+        let selection = valueLabels
             .text((d) => formatter(dataRowAccessor(d)[valueFieldName]))
             .attr("dominant-baseline", attrs.dominantBaseline)
             .attr("text-anchor", attrs.textAnchor);
         if (animate) {
-            const transition = valueLabels
+            selection = selection
                 .interrupt(animationName)
                 .transition(animationName)
-                .duration(this.globalOptions.elementAccessors.getBlock().transitionManager.durations.chartUpdate)
-                .attr("x", (d) => attrs.x(d))
-                .attr("y", (d) => attrs.y(d));
-            if (onEndAnimation)
-                transition.on("end", onEndAnimation);
-        }
-        else {
-            valueLabels.attr("x", (d) => attrs.x(d)).attr("y", (d) => attrs.y(d));
+                .duration(this.globalOptions.elementAccessors.getBlock().transitionManager.durations.chartUpdate);
         }
+        selection
+            .attr("x", (d) => attrs.x(d))
+            .attr("y", (d) => attrs.y(d))
+            .attr("transform", (d) => {
+            var _a;
+            return ((_a = this.chart.valueLabels.rotation) === null || _a === void 0 ? void 0 : _a.angle) ? `rotate(${this.chart.valueLabels.rotation.angle}, ${attrs.x(d)}, ${attrs.y(d)})`
+                : null;
+        });
+        const handleElements = () => {
+            if (this.chart.valueLabels.handleElement) {
+                const thisClass = this;
+                selection.each(function (d) {
+                    thisClass.chart.valueLabels.handleElement({
+                        element: this,
+                        value: dataRowAccessor(d)[valueFieldName]
+                    });
+                });
+            }
+        };
+        if (animate)
+            selection.on("end", () => {
+                onEndAnimation();
+                handleElements();
+            });
+        else
+            handleElements();
     }
     setClasses(textLabels, cssClasses, vfIndex) {
         textLabels.classed(ChartValueLabels.valueLabelClass, true);
@@ -134,8 +153,7 @@ export class CanvasValueLabels {
             return this.chartsValueLabels[index].update(chartScales, data[dataOptions.dataSource], chart.valueLabels);
         });
         Promise.all(chartsUpdatePromises).then(() => {
-            const newValueLabels = this.getAllValueLabels();
-            ValueLabelsCollision.resolveValueLabelsCollisions(newValueLabels, valueLabelsSettings);
+            ValueLabelsCollision.resolveValueLabelsCollisions(this.getAllValueLabels(), valueLabelsSettings);
         });
     }
     toggleOldValueLabelsVisibility() {

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.js

@@ -10,7 +10,7 @@ export class ValueLabelsCollision {
     static getValueLabelElementsRectInfo(valueLabels) {
         let ValueLabelElementsReactInfo = [];
         valueLabels.each(function (_, index) {
-            const { height, width } = this.getBBox();
+            const { height, width } = this.getBoundingClientRect();
             const x = +this.getAttribute("x");
             const y = +this.getAttribute("y");
             ValueLabelElementsReactInfo.push({

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

@@ -1,6 +1,6 @@
 import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
 import { BoundingRect } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
-import { Size, ValueLabelsPositionMode } from "../../../config/config";
+import { Size, ValueLabelsPositionMode, ValueLabelsRotationOptions } from "../../../config/config";
 interface ValueLabelAlignment {
     dominantBaseline: ValueLabelDominantBaseline;
     textAnchor: ValueLabelAnchor;
@@ -15,13 +15,13 @@ export declare class ValueLabelCoordinateCalculator {
     getValueLabelY(scaledValue: number): number;
     getValueLabelX(scaledValue: number): number;
 }
-export declare function calculateValueLabelAlignment(keyAxisOrient: Orient, positionMode?: ValueLabelsPositionMode): ValueLabelAlignment;
+export declare function calculateValueLabelAlignment(keyAxisOrient: Orient, positionMode?: ValueLabelsPositionMode, rotation?: ValueLabelsRotationOptions): ValueLabelAlignment;
 export declare function hasCollisionLeftSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
 export declare function hasCollisionRightSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
 export declare function hasCollisionTopSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
 export declare function hasCollisionBottomSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
-export declare function shiftCoordinateXLeft(labelClientRect: BoundingRect): void;
-export declare function shiftCoordinateXRight(labelClientRect: BoundingRect): void;
+export declare function shiftCoordinateXLeft(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): void;
+export declare function shiftCoordinateXRight(labelClientRect: BoundingRect, margin: BlockMargin): void;
 export declare function shiftCoordinateYTop(labelClientRect: BoundingRect): void;
 export declare function shiftCoordinateYBottom(labelClientRect: BoundingRect): void;
 export {};

package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.js

@@ -27,8 +27,8 @@ export class ValueLabelCoordinateCalculator {
         }
     }
 }
-export function calculateValueLabelAlignment(keyAxisOrient, positionMode) {
-    if (!positionMode || positionMode === "after") {
+export function calculateValueLabelAlignment(keyAxisOrient, positionMode, rotation) {
+    if ((positionMode !== null && positionMode !== void 0 ? positionMode : "after") === "after" && !(rotation === null || rotation === void 0 ? void 0 : rotation.angle)) {
         switch (keyAxisOrient) {
             case "top":
                 return { dominantBaseline: "hanging", textAnchor: "middle" };
@@ -56,11 +56,14 @@ export function hasCollisionTopSide(labelClientRect, margin) {
 export function hasCollisionBottomSide(labelClientRect, blockSize, margin) {
     return labelClientRect.y + labelClientRect.height / 2 >= blockSize.height - margin.bottom;
 }
-export function shiftCoordinateXLeft(labelClientRect) {
-    labelClientRect.x -= labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
+export function shiftCoordinateXLeft(labelClientRect, blockSize, margin) {
+    const blockRightSide = blockSize.width - margin.right;
+    const labelRightSide = labelClientRect.x + labelClientRect.width / 2;
+    labelClientRect.x -= labelRightSide - blockRightSide + BORDER_OFFSET_SIZE_PX;
 }
-export function shiftCoordinateXRight(labelClientRect) {
-    labelClientRect.x += labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
+export function shiftCoordinateXRight(labelClientRect, margin) {
+    const labelLeftSide = labelClientRect.x - labelClientRect.width / 2;
+    labelClientRect.x += margin.left - labelLeftSide + BORDER_OFFSET_SIZE_PX;
 }
 export function shiftCoordinateYTop(labelClientRect) {
     labelClientRect.y -= labelClientRect.height / 2 + BORDER_OFFSET_SIZE_PX;

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -70,12 +70,12 @@ export class TwoDimensionalModelHelper {
                 left: {
                     mode: "shift",
                     hasCollision: blockSidesOptions.hasCollisionLeft,
-                    shiftCoordinate: blockSidesOptions.shiftRight
+                    shiftCoordinate: blockSidesOptions.shiftToRight
                 },
                 right: {
                     mode: "shift",
                     hasCollision: blockSidesOptions.hasCollisionRight,
-                    shiftCoordinate: blockSidesOptions.shiftLeft
+                    shiftCoordinate: blockSidesOptions.shiftToLeft
                 },
                 top: {
                     mode: "none"
@@ -116,9 +116,9 @@ export class TwoDimensionalModelHelper {
     static getChartBlockSidesOptions(canvasModel) {
         return {
             hasCollisionLeft: (labelClientRect) => hasCollisionLeftSide(labelClientRect, canvasModel.getMargin()),
-            shiftLeft: (labelClientRect) => shiftCoordinateXLeft(labelClientRect),
+            shiftToLeft: (labelClientRect) => shiftCoordinateXLeft(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
             hasCollisionRight: (labelClientRect) => hasCollisionRightSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
-            shiftRight: (labelClientRect) => shiftCoordinateXRight(labelClientRect),
+            shiftToRight: (labelClientRect) => shiftCoordinateXRight(labelClientRect, canvasModel.getMargin()),
             hasCollisionTop: (labelClientRect) => hasCollisionTopSide(labelClientRect, canvasModel.getMargin()),
             shiftTop: (labelClientRect) => shiftCoordinateYTop(labelClientRect),
             hasCollisionBottom: (labelClientRect) => hasCollisionBottomSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 import { BoundingRect } from "../engine/features/valueLabelsCollision/valueLabelsCollision";
 declare type AxisType = "key" | "value";
@@ -394,6 +394,11 @@ export interface TwoDimChartValueLabelsOptions {
     dominantBaseline: ValueLabelDominantBaseline;
     format: ValueLabelsFormatter;
     handleScaledValue: (dataRow: MdtChartsDataRow, datumField: string) => number;
+    rotation?: ValueLabelsRotationOptions;
+    handleElement?: (elInfo: {
+        element: SVGTextElement;
+        value: number;
+    }) => void;
 }
 export declare type ValueLabelsFormatter = (value: number) => string;
 export interface MarkersOptions {

package/lib/model/notations/twoDimensionalModel.js

@@ -74,9 +74,10 @@ export class TwoDimensionalModel {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
             const style = styleModel.getChartStyle(chart, index);
             const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode, keyAxisOrient, canvasModel.getMargin());
+            const valueLabelsAlignment = calculateValueLabelAlignment(keyAxisOrient, (_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode, (_e = chart.valueLabels) === null || _e === void 0 ? void 0 : _e.rotation);
             chartsModel.push({
                 type: chart.type,
                 isSegmented: chart.isSegmented,
@@ -90,28 +91,28 @@ export class TwoDimensionalModel {
                     styles: {
                         highlighted: {
                             size: {
-                                radius: (_e = (_d = (_c = designerConfig.canvas.markers) === null || _c === void 0 ? void 0 : _c.highlighted) === null || _d === void 0 ? void 0 : _d.radius) !== null && _e !== void 0 ? _e : 4,
+                                radius: (_h = (_g = (_f = designerConfig.canvas.markers) === null || _f === void 0 ? void 0 : _f.highlighted) === null || _g === void 0 ? void 0 : _g.radius) !== null && _h !== void 0 ? _h : 4,
                                 borderSize: "3.5px"
                             }
                         },
                         normal: {
                             size: {
-                                radius: (_h = (_g = (_f = designerConfig.canvas.markers) === null || _f === void 0 ? void 0 : _f.normal) === null || _g === void 0 ? void 0 : _g.radius) !== null && _h !== void 0 ? _h : 3,
-                                borderSize: `${(_l = (_k = (_j = designerConfig.canvas.markers) === null || _j === void 0 ? void 0 : _j.normal) === null || _k === void 0 ? void 0 : _k.borderSize) !== null && _l !== void 0 ? _l : 2}px`
+                                radius: (_l = (_k = (_j = designerConfig.canvas.markers) === null || _j === void 0 ? void 0 : _j.normal) === null || _k === void 0 ? void 0 : _k.radius) !== null && _l !== void 0 ? _l : 3,
+                                borderSize: `${(_p = (_o = (_m = designerConfig.canvas.markers) === null || _m === void 0 ? void 0 : _m.normal) === null || _o === void 0 ? void 0 : _o.borderSize) !== null && _p !== void 0 ? _p : 2}px`
                             }
                         }
                     }
                 },
                 lineLikeViewOptions: {
-                    dashedStyles: parseDashStyles((_m = chart.lineStyles) === null || _m === void 0 ? void 0 : _m.dash),
-                    strokeWidth: (_p = (_o = chart.lineStyles) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : LINE_CHART_DEFAULT_WIDTH,
+                    dashedStyles: parseDashStyles((_q = chart.lineStyles) === null || _q === void 0 ? void 0 : _q.dash),
+                    strokeWidth: (_s = (_r = chart.lineStyles) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
                 barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {
-                    show: (_r = (_q = chart.valueLabels) === null || _q === void 0 ? void 0 : _q.on) !== null && _r !== void 0 ? _r : false,
+                    show: (_u = (_t = chart.valueLabels) === null || _t === void 0 ? void 0 : _t.on) !== null && _u !== void 0 ? _u : false,
                     handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
                     handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
                     handleScaledValue: (dataRow, datumField) => {
@@ -123,11 +124,11 @@ export class TwoDimensionalModel {
                         else
                             return dataRow[datumField] / 2;
                     },
-                    textAnchor: calculateValueLabelAlignment(keyAxisOrient, (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.position) === null || _t === void 0 ? void 0 : _t.mode)
-                        .textAnchor,
-                    dominantBaseline: calculateValueLabelAlignment(keyAxisOrient, (_v = (_u = chart.valueLabels) === null || _u === void 0 ? void 0 : _u.position) === null || _v === void 0 ? void 0 : _v.mode)
-                        .dominantBaseline,
-                    format: configReader.getValueLabelFormatterForChart(index)
+                    textAnchor: valueLabelsAlignment.textAnchor,
+                    dominantBaseline: valueLabelsAlignment.dominantBaseline,
+                    format: configReader.getValueLabelFormatterForChart(index),
+                    rotation: (_v = chart.valueLabels) === null || _v === void 0 ? void 0 : _v.rotation,
+                    handleElement: (_w = chart.valueLabels) === null || _w === void 0 ? void 0 : _w.handleElement
                 },
                 areaViewOptions: getAreaViewOptions(chart, index, style, modelInstance.version.getVersionNumber()),
                 dotViewOptions: {
@@ -135,7 +136,7 @@ export class TwoDimensionalModel {
                         type: "line",
                         handleEndCoordinate: (v) => v + 2,
                         handleStartCoordinate: (v) => v - 2,
-                        width: (_y = (_x = (_w = chart.dotLikeStyles) === null || _w === void 0 ? void 0 : _w.shape) === null || _x === void 0 ? void 0 : _x.width) !== null && _y !== void 0 ? _y : LINE_CHART_DEFAULT_WIDTH
+                        width: (_z = (_y = (_x = chart.dotLikeStyles) === null || _x === void 0 ? void 0 : _x.shape) === null || _y === void 0 ? void 0 : _y.width) !== null && _z !== void 0 ? _z : LINE_CHART_DEFAULT_WIDTH
                     }
                 }
             });

package/package.json

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