mdt-charts 1.26.1 → 1.27.0

package/lib/config/config.d.ts

@@ -290,8 +290,12 @@ export interface TwoDimensionalChartData {
     valueFields: TwoDimValueField[];
     valueGroup?: TwoDimensionalValueGroup;
 }
+export declare type ValueLabelsPositionMode = "after" | "center";
 export interface TwoDimensionalChartValueLabels {
     on: boolean;
+    position?: {
+        mode?: ValueLabelsPositionMode;
+    };
     format?: ValueLabelsFormatter;
 }
 export declare type ValueLabelsFormatter = (value: number) => string;

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

@@ -24,12 +24,14 @@ export interface ValueLabelAttrs {
 export declare class ChartValueLabels {
     private readonly globalOptions;
     private readonly chart;
-    private static readonly valueLabelClass;
+    static readonly valueLabelClass: string;
     private readonly renderPipeline;
+    private readonly attrsProvider;
     constructor(globalOptions: ValueLabelsOptions, chart: TwoDimensionalChartModel);
     render(scales: Scales, data: MdtChartsDataRow[]): void;
     update(scales: Scales, newData: MdtChartsDataRow[]): Promise<void[]>;
-    static getChartValueLabelsClassName(): string;
+    private renderByGroupIndex;
+    private updateByGroupIndex;
     private getAllValueLabelsOfChart;
     private setAttrs;
     private setClasses;

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

@@ -1,16 +1,18 @@
 import { NamesHelper } from "../../../engine/helpers/namesHelper";
-import { ValueLabelsHelper } from "../../../engine/features/valueLabels/valueLabelsHelper";
+import { ValueLabelsAttrsProvider } from "../../../engine/features/valueLabels/valueLabelsHelper";
 import { Helper } from "../../../engine/helpers/helper";
 import { select } from "d3-selection";
 import { DomHelper } from "../../../engine/helpers/domHelper";
 import { CLASSES } from "../../../model/modelBuilder";
 import { ValueLabelsCollision } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
+import { getStackedData } from "../../twoDimensionalNotation/line/lineHelper";
 export class ChartValueLabels {
     constructor(globalOptions, chart) {
         this.globalOptions = globalOptions;
         this.chart = chart;
         this.renderPipeline = new Pipeline();
+        this.attrsProvider = new ValueLabelsAttrsProvider();
         this.renderPipeline.push((valueLabels, { style }) => {
             valueLabels
                 .attr('fill', 'currentColor')
@@ -22,50 +24,70 @@ export class ChartValueLabels {
         });
     }
     render(scales, data) {
-        this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-            let valueLabels = this.getAllValueLabelsOfChart(vfIndex)
-                .data(data)
-                .enter()
-                .append('text');
-            valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
-            const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
-            this.setAttrs(valueLabels, attrs, valueField.name, this.chart.valueLabels.format);
-            this.setClasses(valueLabels, this.chart.cssClasses, vfIndex);
-        });
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(data, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, '1', d => d.data);
+            });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, d => d);
+            });
+        }
     }
     update(scales, newData) {
         const updatePromises = [];
-        this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-            const updateProms = new Promise((resolve) => {
-                const valueLabels = this.getAllValueLabelsOfChart(vfIndex)
-                    .data(newData);
-                valueLabels.exit().remove();
-                const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
-                let newValueLabels = valueLabels
-                    .enter()
-                    .append('text');
-                newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
-                const mergedValueLabels = newValueLabels.merge(valueLabels);
-                this.setAttrs(newValueLabels, attrs, valueField.name, this.chart.valueLabels.format);
-                this.setClasses(mergedValueLabels, this.chart.cssClasses, vfIndex);
-                this.setAttrs(valueLabels, attrs, valueField.name, this.chart.valueLabels.format, true, resolve);
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(newData, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                const promise = this.updateByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, '1', d => d.data);
+                updatePromises.push(promise);
             });
-            updatePromises.push(updateProms);
-        });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                const promise = this.updateByGroupIndex(scales, vfIndex, newData, valueField.name, valueField.name, d => d);
+                updatePromises.push(promise);
+            });
+        }
         return Promise.all(updatePromises);
     }
-    static getChartValueLabelsClassName() {
-        return ChartValueLabels.valueLabelClass;
+    renderByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        let valueLabels = this.getAllValueLabelsOfChart(groupIndex)
+            .data(data)
+            .enter()
+            .append('text');
+        valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
+        const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.chart.valueLabels, scales, datumField, dataRowAccessor);
+        this.setAttrs(valueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor);
+        this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
+    }
+    updateByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        return new Promise((resolve) => {
+            const valueLabels = this.getAllValueLabelsOfChart(groupIndex)
+                .data(data);
+            valueLabels.exit().remove();
+            const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.chart.valueLabels, scales, datumField, dataRowAccessor);
+            let newValueLabels = valueLabels
+                .enter()
+                .append('text');
+            newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
+            const mergedValueLabels = newValueLabels.merge(valueLabels);
+            this.setAttrs(newValueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor);
+            this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
+            this.setAttrs(valueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor, true, resolve);
+        });
     }
     getAllValueLabelsOfChart(vfIndex) {
         const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
         return block
             .selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
     }
-    setAttrs(valueLabels, attrs, valueFieldName, formatter, animate = false, onEndAnimation) {
+    setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
         const animationName = 'labels-updating';
         valueLabels
-            .text(d => formatter(d[valueFieldName]))
+            .text(d => formatter(dataRowAccessor(d)[valueFieldName]))
             .attr('dominant-baseline', attrs.dominantBaseline)
             .attr('text-anchor', attrs.textAnchor);
         if (animate) {
@@ -136,7 +158,7 @@ export class CanvasValueLabels {
     getAllValueLabels() {
         const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
         return block
-            .selectAll(`.${ChartValueLabels.getChartValueLabelsClassName()}`);
+            .selectAll(`.${ChartValueLabels.valueLabelClass}`);
     }
     getChartScales(scales, chart) {
         return {

package/lib/engine/features/valueLabels/valueLabelsHelper.d.ts

@@ -1,6 +1,8 @@
 import { ValueLabelAttrs, ValueLabelsOptions } from "../../../engine/features/valueLabels/valueLabels";
-import { TwoDimChartValueLabelsOptions, ValueField } from "../../../model/model";
+import { TwoDimChartValueLabelsOptions } from "../../../model/model";
 import { Scales } from "../../../engine/features/scale/scale";
-export declare class ValueLabelsHelper {
-    static getValueLabelsAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, valueField: ValueField): ValueLabelAttrs;
+import { Segment } from "../../twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
+import { MdtChartsDataRow } from "../../../config/config";
+export declare class ValueLabelsAttrsProvider {
+    getAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, datumField: string, dataRowAccessor: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow): ValueLabelAttrs;
 }

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

@@ -1,6 +1,6 @@
 import { Scale } from "../../../engine/features/scale/scale";
-export class ValueLabelsHelper {
-    static getValueLabelsAttrs(globalOptions, valueLabels, scales, valueField) {
+export class ValueLabelsAttrsProvider {
+    getAttrs(globalOptions, valueLabels, scales, datumField, dataRowAccessor) {
         let attrs = {
             x: null,
             y: null,
@@ -9,12 +9,12 @@ export class ValueLabelsHelper {
         };
         const orient = globalOptions.canvas.keyAxisOrient;
         if (orient === 'left' || orient === 'right') {
-            attrs.x = d => valueLabels.handleX(scales.value(d[valueField.name]));
-            attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, d[globalOptions.data.keyFieldName]));
+            attrs.x = d => valueLabels.handleX(scales.value(valueLabels.handleScaledValue(d, datumField)));
+            attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
         }
         else if (orient === 'bottom' || orient === 'top') {
-            attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, d[globalOptions.data.keyFieldName]));
-            attrs.y = d => valueLabels.handleY(scales.value(d[valueField.name]));
+            attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
+            attrs.y = d => valueLabels.handleY(scales.value(valueLabels.handleScaledValue(d, datumField)));
         }
         return attrs;
     }

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

@@ -21,8 +21,8 @@ export declare class Bar {
     private createBarPipeline;
     private createSegmentGroupBarsPipeline;
     constructor();
-    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[], firstBarIndex: number): void;
-    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, firstBarIndex: number, barSettings: BarChartSettings): Promise<any>[];
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[]): void;
+    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, barSettings: BarChartSettings): Promise<any>[];
     updateColors(block: Block, chart: TwoDimensionalChartModel): void;
     getAllBarsForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
     private renderGrouped;

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -18,19 +18,19 @@ export class Bar {
     static get() {
         return new Bar();
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, firstBarIndex) {
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts) {
         if (chart.isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings);
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings);
         else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings);
     }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
         let promises;
         if (chart.isSegmented) {
-            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings);
         }
         else {
-            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings);
         }
         return promises;
     }
@@ -44,7 +44,7 @@ export class Bar {
     getAllBarsForChart(block, chartCssClasses) {
         return block.getSvg().selectAll(`rect.${this.barItemClass}${Helper.getCssClassesLine(chartCssClasses)}`);
     }
-    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
             let bars = block.svg.getChartGroup(chart.index)
                 .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`)
@@ -63,7 +63,7 @@ export class Bar {
                 EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
         });
     }
-    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         let groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -95,7 +95,7 @@ export class Bar {
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
     }
-    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
@@ -144,7 +144,7 @@ export class Bar {
         });
         return promises;
     }
-    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -124,7 +124,7 @@ export class TwoDimensionalManager {
         charts.forEach((chart) => {
             const chartScales = { key: scales.key, value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value };
             if (chart.type === 'bar')
-                Bar.get().render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, chartSettings.bar, BarHelper.getBarsInGroupAmount(charts), charts.findIndex(ch => ch.type === 'bar'));
+                Bar.get().render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, chartSettings.bar, BarHelper.getBarsInGroupAmount(charts));
             else if (chart.type === 'line')
                 Line.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             else if (chart.type === 'area')
@@ -141,7 +141,7 @@ export class TwoDimensionalManager {
             const chartScales = { key: scales.key, value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value };
             let proms;
             if (chart.type === 'bar') {
-                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, charts.findIndex(ch => ch.type === 'bar'), chartSettings.bar);
+                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, chartSettings.bar);
             }
             else if (chart.type === 'line') {
                 proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);

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

@@ -1,15 +1,21 @@
 import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
 import { BoundingRect } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
-import { Size } from "../../../config/config";
+import { Size, ValueLabelsPositionMode } from "../../../config/config";
 interface ValueLabelAlignment {
     dominantBaseline: ValueLabelDominantBaseline;
     textAnchor: ValueLabelAnchor;
 }
 export declare const OFFSET_SIZE_PX = 10;
 export declare const BORDER_OFFSET_SIZE_PX = 2;
-export declare function getValueLabelY(scaledValue: number, keyAxisOrient: Orient, margin: BlockMargin): number;
-export declare function getValueLabelX(scaledValue: number, keyAxisOrient: Orient, margin: BlockMargin): number;
-export declare function calculateValueLabelAlignment(keyAxisOrient: Orient): ValueLabelAlignment;
+export declare class ValueLabelCoordinateCalculator {
+    private readonly keyAxisOrient;
+    private readonly margin;
+    private readonly offsetSizePx;
+    constructor(positionMode: ValueLabelsPositionMode | undefined, keyAxisOrient: Orient, margin: BlockMargin);
+    getValueLabelY(scaledValue: number): number;
+    getValueLabelX(scaledValue: number): number;
+}
+export declare function calculateValueLabelAlignment(keyAxisOrient: Orient, positionMode?: ValueLabelsPositionMode): 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;

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

@@ -1,35 +1,47 @@
 export const OFFSET_SIZE_PX = 10;
 export const BORDER_OFFSET_SIZE_PX = 2;
-export function getValueLabelY(scaledValue, keyAxisOrient, margin) {
-    switch (keyAxisOrient) {
-        case 'bottom':
-            return scaledValue - OFFSET_SIZE_PX + margin.top;
-        case 'top':
-            return scaledValue + OFFSET_SIZE_PX + margin.top;
-        default:
-            return scaledValue + margin.top;
+export class ValueLabelCoordinateCalculator {
+    constructor(positionMode, keyAxisOrient, margin) {
+        this.keyAxisOrient = keyAxisOrient;
+        this.margin = margin;
+        this.offsetSizePx = positionMode === "center" ? 0 : OFFSET_SIZE_PX;
     }
-}
-export function getValueLabelX(scaledValue, keyAxisOrient, margin) {
-    switch (keyAxisOrient) {
-        case 'right':
-            return scaledValue - OFFSET_SIZE_PX + margin.left;
-        case 'left':
-            return scaledValue + OFFSET_SIZE_PX + margin.left;
-        default:
-            return scaledValue + margin.left;
+    getValueLabelY(scaledValue) {
+        switch (this.keyAxisOrient) {
+            case 'bottom':
+                return scaledValue - this.offsetSizePx + this.margin.top;
+            case 'top':
+                return scaledValue + this.offsetSizePx + this.margin.top;
+            default:
+                return scaledValue + this.margin.top;
+        }
+    }
+    getValueLabelX(scaledValue) {
+        switch (this.keyAxisOrient) {
+            case 'right':
+                return scaledValue - this.offsetSizePx + this.margin.left;
+            case 'left':
+                return scaledValue + this.offsetSizePx + this.margin.left;
+            default:
+                return scaledValue + this.margin.left;
+        }
     }
 }
-export function calculateValueLabelAlignment(keyAxisOrient) {
-    switch (keyAxisOrient) {
-        case 'top':
-            return { dominantBaseline: "hanging", textAnchor: "middle" };
-        case "bottom":
-            return { dominantBaseline: "auto", textAnchor: "middle" };
-        case "left":
-            return { dominantBaseline: "middle", textAnchor: "start" };
-        case "right":
-            return { dominantBaseline: "middle", textAnchor: "end" };
+export function calculateValueLabelAlignment(keyAxisOrient, positionMode) {
+    if (!positionMode || positionMode === "after") {
+        switch (keyAxisOrient) {
+            case 'top':
+                return { dominantBaseline: "hanging", textAnchor: "middle" };
+            case "bottom":
+                return { dominantBaseline: "auto", textAnchor: "middle" };
+            case "left":
+                return { dominantBaseline: "middle", textAnchor: "start" };
+            case "right":
+                return { dominantBaseline: "middle", textAnchor: "end" };
+        }
+    }
+    else {
+        return { dominantBaseline: "middle", textAnchor: "middle" };
     }
 }
 export function hasCollisionLeftSide(labelClientRect, margin) {

package/lib/model/model.d.ts

@@ -380,6 +380,7 @@ export interface TwoDimChartValueLabelsOptions {
     textAnchor: ValueLabelAnchor;
     dominantBaseline: ValueLabelDominantBaseline;
     format: ValueLabelsFormatter;
+    handleScaledValue: (dataRow: MdtChartsDataRow, datumField: string) => number;
 }
 export declare type ValueLabelsFormatter = (value: number) => string;
 export interface MarkersOptions {

package/lib/model/notations/twoDimensionalModel.js

@@ -4,7 +4,7 @@ import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
-import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { calculateValueLabelAlignment, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 export class TwoDimensionalModel {
@@ -73,8 +73,9 @@ 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;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
             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());
             chartsModel.push({
                 type: chart.type,
                 isSegmented: chart.isSegmented,
@@ -87,30 +88,39 @@ export class TwoDimensionalModel {
                     show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
-                            size: { radius: (_c = (_b = (_a = designerConfig.canvas.markers) === null || _a === void 0 ? void 0 : _a.highlighted) === null || _b === void 0 ? void 0 : _b.radius) !== null && _c !== void 0 ? _c : 4, borderSize: '3.5px' }
+                            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, borderSize: '3.5px' }
                         },
                         normal: {
                             size: {
-                                radius: (_f = (_e = (_d = designerConfig.canvas.markers) === null || _d === void 0 ? void 0 : _d.normal) === null || _e === void 0 ? void 0 : _e.radius) !== null && _f !== void 0 ? _f : 3,
-                                borderSize: `${(_j = (_h = (_g = designerConfig.canvas.markers) === null || _g === void 0 ? void 0 : _g.normal) === null || _h === void 0 ? void 0 : _h.borderSize) !== null && _j !== void 0 ? _j : 2}px`
+                                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`
                             }
                         }
                     }
                 },
                 lineLikeViewOptions: {
-                    dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
-                    strokeWidth: (_m = (_l = chart.lineStyles) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : LINE_CHART_DEFAULT_WIDTH,
+                    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,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
                 barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {
-                    show: (_p = (_o = chart.valueLabels) === null || _o === void 0 ? void 0 : _o.on) !== null && _p !== void 0 ? _p : false,
-                    handleX: (scaledValue) => getValueLabelX(scaledValue, keyAxisOrient, canvasModel.getMargin()),
-                    handleY: (scaledValue) => getValueLabelY(scaledValue, keyAxisOrient, canvasModel.getMargin()),
-                    textAnchor: calculateValueLabelAlignment(keyAxisOrient).textAnchor,
-                    dominantBaseline: calculateValueLabelAlignment(keyAxisOrient).dominantBaseline,
+                    show: (_r = (_q = chart.valueLabels) === null || _q === void 0 ? void 0 : _q.on) !== null && _r !== void 0 ? _r : false,
+                    handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
+                    handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
+                    handleScaledValue: (dataRow, datumField) => {
+                        var _a, _b, _c, _d;
+                        if (!((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) || ((_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode) === 'after')
+                            return dataRow[datumField];
+                        if (chart.isSegmented)
+                            return dataRow[datumField] - (dataRow[datumField] - dataRow['0']) / 2;
+                        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),
                 },
                 areaViewOptions: getAreaViewOptions(chart, index, style),
@@ -119,7 +129,7 @@ export class TwoDimensionalModel {
                         type: "line",
                         handleEndCoordinate: (v) => v + 2,
                         handleStartCoordinate: (v) => v - 2,
-                        width: (_s = (_r = (_q = chart.dotLikeStyles) === null || _q === void 0 ? void 0 : _q.shape) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : LINE_CHART_DEFAULT_WIDTH
+                        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
                     }
                 }
             });

package/package.json

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