mdt-charts 1.19.0 → 1.20.1

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware.js

@@ -0,0 +1,21 @@
+import { curveBasis, curveMonotoneX, curveMonotoneY } from "d3-shape";
+import { LineCurveType } from "../../../../model/model";
+export class LineLikeGeneratorCurveMiddleware {
+    constructor(options) {
+        this.options = options;
+        this.curvies = {
+            [LineCurveType.monotoneX]: curveMonotoneX,
+            [LineCurveType.monotoneY]: curveMonotoneY,
+            [LineCurveType.basis]: curveBasis,
+            [LineCurveType.none]: undefined
+        };
+    }
+    handle(generator) {
+        if (this.options.curve != null) {
+            const curve = this.curvies[this.options.curve];
+            if (curve)
+                generator.curve(curve);
+        }
+        return generator;
+    }
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware.d.ts

@@ -0,0 +1,20 @@
+import { Area, Line, SeriesPoint } from "d3-shape";
+import { LineLikeGeneratorMiddleware } from "./lineLikeGeneratorMiddleware";
+import { MdtChartsDataRow } from "../../../../config/config";
+import { LineLikeChartRenderFn } from "../../../../model/model";
+import { SegmentWithFieldName } from "../../bar/stackedData/dataStacker";
+interface LineLikeGeneratorDefinedMiddlewareOptions {
+    definedFn: LineLikeChartRenderFn;
+    valueFieldNameGetter: (d: MdtChartsDataRow | Segment) => string;
+    dataRowGetter: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow;
+}
+export interface Segment extends SeriesPoint<{
+    [p: string]: number;
+}>, SegmentWithFieldName {
+}
+export declare class LineLikeGeneratorDefinedMiddleware implements LineLikeGeneratorMiddleware {
+    private readonly options;
+    constructor(options: LineLikeGeneratorDefinedMiddlewareOptions);
+    handle(generator: Line<MdtChartsDataRow> | Area<MdtChartsDataRow>): Line<MdtChartsDataRow> | Area<MdtChartsDataRow>;
+}
+export {};

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware.js

@@ -0,0 +1,9 @@
+export class LineLikeGeneratorDefinedMiddleware {
+    constructor(options) {
+        this.options = options;
+    }
+    handle(generator) {
+        generator.defined(d => this.options.definedFn(this.options.dataRowGetter(d), this.options.valueFieldNameGetter(d)));
+        return generator;
+    }
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorMiddleware.d.ts

@@ -0,0 +1,5 @@
+import { Line as ILine, Area as IArea } from "d3-shape";
+import { MdtChartsDataRow } from "../../../../config/config";
+export interface LineLikeGeneratorMiddleware {
+    handle(generator: ILine<MdtChartsDataRow> | IArea<MdtChartsDataRow>): ILine<MdtChartsDataRow> | IArea<MdtChartsDataRow>;
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorMiddleware.js

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

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

@@ -4,6 +4,7 @@ import { Block } from "../block/block";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
 import { Engine } from "../engine";
 export declare class TwoDimensionalManager implements ChartContentManager {
+    private canvasValueLabels?;
     render(engine: Engine, model: Model<TwoDimensionalOptionsModel>): void;
     updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -13,6 +13,7 @@ import { Bar } from "./bar/bar";
 import { BarHelper } from "./bar/barHelper";
 import { TwoDimRecordOverflowAlert } from "./extenders/twoDimRecordOverflowAlert";
 import { Line } from "./line/line";
+import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -38,6 +39,19 @@ export class TwoDimensionalManager {
             if (e.target === engine.block.getSvg().node())
                 engine.block.filterEventManager.clearKeysFor2D(options);
         });
+        this.canvasValueLabels = new CanvasValueLabels({
+            elementAccessors: {
+                getBlock: () => engine.block,
+            },
+            data: {
+                keyFieldName: options.data.keyField.name
+            },
+            canvas: {
+                keyAxisOrient: options.axis.key.orient,
+                valueLabels: options.valueLabels,
+            }
+        });
+        this.canvasValueLabels.render(scales, options.charts, engine.data, options.data);
     }
     updateData(block, model, data) {
         block.transitionManager.interruptTransitions();
@@ -63,6 +77,8 @@ export class TwoDimensionalManager {
             hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
             chartOrientation: options.orient
         });
+        if (this.canvasValueLabels)
+            this.canvasValueLabels.update(scales, options.charts, data, model.options.data);
     }
     updateColors(block, model) {
         Legend.get().updateColors(block, model.options);
@@ -72,7 +88,7 @@ export class TwoDimensionalManager {
             else if (chart.type === 'line')
                 Line.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
             else if (chart.type === 'area')
-                Area.updateColors(block, chart);
+                Area.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
         });
     }
     renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings, blockSize) {
@@ -86,7 +102,7 @@ export class TwoDimensionalManager {
             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')
-                Area.render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
+                Area.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
         });
         EmbeddedLabels.raiseGroups(block);
     }
@@ -103,7 +119,7 @@ export class TwoDimensionalManager {
                 proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             }
             else if (chart.type === 'area') {
-                proms = Area.update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
+                proms = Area.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
             }
             promises.push(...proms);
         });

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

@@ -1,4 +1,4 @@
-import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions } from "../../config/config";
+import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions } from "../../config/config";
 import { AxisModelOptions, Orient } from "../model";
 import { AxisType } from "../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
@@ -12,7 +12,9 @@ export declare const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
 export declare class AxisModel {
     private static service;
     static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings, getZeroCoordinate?: () => number): AxisModelOptions;
-    static getValueAxis(orient: ChartOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    static getMainValueAxis(orient: ChartOrientation, position: AxisPosition, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    static getSecondaryValueAxis(orient: ChartOrientation, mainAxisPosition: AxisPosition, axisConfig: NumberSecondaryAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    private static getValueAxis;
     static getAxisLength(chartOrientation: ChartOrientation, canvasModel: CanvasModel): number;
     static getAxisOrient(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition): Orient;
     static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;

package/lib/model/featuresModel/axisModel.js

@@ -19,7 +19,7 @@ export class AxisModel {
             cssClass: 'key-axis',
             ticks: axisConfig.ticks,
             labels: {
-                maxSize: AxisModel.getLabelSizeLegacy(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
+                maxSize: AxisModel.getLabelSize(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
                 position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length, axisConfig),
                 visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
                 defaultTooltip: tooltipSettings.position === 'fixed',
@@ -29,16 +29,22 @@ export class AxisModel {
             visibility: axisConfig.visibility
         };
     }
-    static getValueAxis(orient, axisConfig, labelConfig, canvasModel) {
+    static getMainValueAxis(orient, position, axisConfig, labelConfig, canvasModel) {
+        return this.getValueAxis(orient, position, 'value-axis', axisConfig, labelConfig, canvasModel);
+    }
+    static getSecondaryValueAxis(orient, mainAxisPosition, axisConfig, labelConfig, canvasModel) {
+        return this.getValueAxis(orient, mainAxisPosition === "start" ? "end" : "start", 'value-secondary-axis', axisConfig, labelConfig, canvasModel);
+    }
+    static getValueAxis(orient, position, cssClass, axisConfig, labelConfig, canvasModel) {
         var _a, _b;
         return {
             type: 'value',
-            orient: AxisModel.getAxisOrient(AxisType.Value, orient, axisConfig.position),
+            orient: AxisModel.getAxisOrient(AxisType.Value, orient, position),
             translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, axisConfig.position, canvasModel),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, axisConfig.position, canvasModel)
+                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, position, canvasModel),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, position, canvasModel)
             },
-            cssClass: 'value-axis',
+            cssClass,
             ticks: axisConfig.ticks,
             labels: {
                 maxSize: labelConfig.maxSize.main,
@@ -131,6 +137,8 @@ export class AxisModel {
         const sign = Math.sign(value);
         if (absValue < 10)
             return value;
+        if (absValue < 100)
+            return sign * Math.floor(absValue / 10) * 10;
         const valueStr = absValue.toString();
         const firstTwoDigits = Math.floor(absValue / Math.pow(10, valueStr.length - 2));
         const roundedFirstTwoDigits = firstTwoDigits < 10 ? firstTwoDigits : Math.floor(firstTwoDigits / 5) * 5;

package/lib/model/featuresModel/scaleModel/scaleModel.js

@@ -38,7 +38,7 @@ export class ScaleModel {
                 end: getScaleValueRangePeek(options.orientation, canvasModel)
             },
             type: "linear",
-            formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
+            formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getSecondaryAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
         };
     }
     getScaleKeyType(charts) {

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

@@ -0,0 +1,9 @@
+import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
+interface ValueLabelAlignment {
+    dominantBaseline: ValueLabelDominantBaseline;
+    textAnchor: ValueLabelAnchor;
+}
+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 {};

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

@@ -0,0 +1,33 @@
+const OFFSET_SIZE_PX = 10;
+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 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;
+    }
+}
+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" };
+    }
+}

package/lib/model/helpers/modelHelper.d.ts

@@ -1,4 +1,5 @@
 export declare class ModelHelper {
+    private static readonly defaultBaseFontSize;
     private static baseFontSize;
     private static getBaseFontSize;
     static getSum(items: number[]): number;

package/lib/model/helpers/modelHelper.js

@@ -3,7 +3,7 @@ export class ModelHelper {
     static getBaseFontSize() {
         if (!this.baseFontSize)
             this.baseFontSize = parseInt(DomHelper.getCssPropertyValue(document.documentElement, '--chart-base-font-size'));
-        return this.baseFontSize;
+        return (!this.baseFontSize || isNaN(this.baseFontSize)) ? this.defaultBaseFontSize : this.baseFontSize;
     }
     static getSum(items) {
         return items.reduce((acc, item) => acc + item, 0);
@@ -17,7 +17,7 @@ export class ModelHelper {
         // Number width == lower case letter width
         const fontSize = this.getBaseFontSize();
         let score = 0;
-        const upperLetterScore = fontSize / 13;
+        const upperLetterScore = fontSize / 10;
         const lowerLetterScore = fontSize / 15;
         const digitScore = fontSize / 15;
         const otherSymbolScore = fontSize / 23;
@@ -37,3 +37,4 @@ export class ModelHelper {
         return score;
     }
 }
+ModelHelper.defaultBaseFontSize = 13;

package/lib/model/helpers/twoDimensionalModelHelper.d.ts

@@ -0,0 +1,5 @@
+import { MdtChartsDataRow, MdtChartsTwoDimensionalChart } from "../../config/config";
+import { MarkDotDatumItem } from "../model";
+export declare class TwoDimensionalModelHelper {
+    static shouldMarkerShow(chart: MdtChartsTwoDimensionalChart, dataRows: MdtChartsDataRow[], valueFieldName: string, currentRow: MarkDotDatumItem, keyFieldName: string): boolean;
+}

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -0,0 +1,16 @@
+export class TwoDimensionalModelHelper {
+    static shouldMarkerShow(chart, dataRows, valueFieldName, currentRow, keyFieldName) {
+        if (chart.markers.show || dataRows.length === 1)
+            return true;
+        const rowIndex = dataRows.findIndex(row => row[keyFieldName] === currentRow[keyFieldName]);
+        if (rowIndex === -1)
+            return false;
+        const isFirst = rowIndex === 0;
+        const isLast = rowIndex === dataRows.length - 1;
+        const previousRow = dataRows[rowIndex - 1];
+        const nextRow = dataRows[rowIndex + 1];
+        const hasNullNeighborsRows = !isFirst && !isLast &&
+            (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) === null && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) === null;
+        return (isFirst && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) === null) || (isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) === null) || hasNullNeighborsRows;
+    }
+}

package/lib/model/margin/twoDim/twoDimMarginModel.d.ts

@@ -12,6 +12,8 @@ export declare class TwoDimMarginModel {
     recalcMargin(otherComponents: OtherCommonComponents, modelInstance: ModelInstance): void;
     recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance): void;
     private getMaxLabelSize;
+    private getMaxLabelSizeSecondary;
     private recalcVerticalMarginByAxisLabelHeight;
     private recalcHorizontalMarginByAxisLabelWidth;
+    private recalcMarginBySecondaryAxisLabelSize;
 }

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

@@ -23,6 +23,10 @@ export class TwoDimMarginModel {
             ? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(this.configReader.options.charts, this.configReader.options.orientation)
             : true;
         this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, showingFlag);
+        if (this.configReader.containsSecondaryAxis()) {
+            const secondaryLabelSize = this.getMaxLabelSizeSecondary(modelInstance);
+            this.recalcMarginBySecondaryAxisLabelSize(secondaryLabelSize, canvasModel);
+        }
     }
     recalcMarginByVerticalAxisLabel(modelInstance) {
         if (this.configReader.options.orientation === 'vertical') {
@@ -43,11 +47,23 @@ export class TwoDimMarginModel {
             labelsTexts = modelInstance.dataModel.repository.getValuesByKeyField();
         }
         else {
-            labelsTexts = this.configReader.calculateBiggestValueAndDecremented(modelInstance.dataModel.repository)
+            labelsTexts = this.configReader.getBiggestValueAndDecremented(modelInstance.dataModel.repository)
                 .map(v => this.configReader.getAxisLabelFormatter()(v).toString());
         }
         return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);
     }
+    getMaxLabelSizeSecondary(modelInstance) {
+        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, this.configReader.options.orientation, this.configReader.options.axis.key.position);
+        let labelsTexts;
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            labelsTexts = modelInstance.dataModel.repository.getValuesByKeyField();
+        }
+        else {
+            labelsTexts = this.configReader.getBiggestValueAndDecrementedSecondary(modelInstance.dataModel.repository)
+                .map(v => this.configReader.getSecondaryAxisLabelFormatter()(v).toString());
+        }
+        return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);
+    }
     recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, this.configReader.options.orientation, this.configReader.options.axis.key.position);
         const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, this.configReader.options.orientation, this.configReader.options.axis.value.position);
@@ -68,4 +84,21 @@ export class TwoDimMarginModel {
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
     }
+    recalcMarginBySecondaryAxisLabelSize(labelSize, canvasModel) {
+        const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, this.configReader.options.orientation, this.configReader.options.axis.value.position);
+        const secondaryOrientByMain = {
+            bottom: "top",
+            left: "right",
+            right: "left",
+            top: "bottom"
+        };
+        const secondaryOrient = secondaryOrientByMain[valueAxisOrient];
+        const sizeMap = {
+            vertical: labelSize.width + AXIS_VERTICAL_LABEL_PADDING,
+            horizontal: labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING
+        };
+        if (this.configReader.options.axis.valueSecondary.visibility) {
+            canvasModel.increaseMarginSide(secondaryOrient, sizeMap[this.configReader.options.orientation]);
+        }
+    }
 }

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollision } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
@@ -10,6 +10,8 @@ export declare type DataOptions = {
     [option: string]: any;
 };
 export declare type UnitsFromConfig = "%" | "px";
+export declare type ValueLabelAnchor = "start" | "middle" | "end";
+export declare type ValueLabelDominantBaseline = "hanging" | "middle" | "auto";
 export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
 export interface Model<O = OptionsModel> {
     blockCanvas: BlockCanvas;
@@ -49,6 +51,7 @@ export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel
     additionalElements: AdditionalElementsOptions;
     orient: ChartOrientation;
     chartSettings: TwoDimChartElementsSettings;
+    valueLabels: TwoDimensionalValueLabels;
 }
 export interface PolarOptionsModel extends GraphicNotationOptionsModel {
     type: "polar";
@@ -101,6 +104,7 @@ export interface RangeModel {
 export interface IAxisModel {
     key: AxisModelOptions;
     value: AxisModelOptions;
+    valueSecondary?: AxisModelOptions;
 }
 export interface AxisModelOptions {
     visibility: boolean;
@@ -170,6 +174,9 @@ interface LineLikeChartCurveOptions {
 interface BarLikeChartHatchOptions {
     on: boolean;
 }
+export interface TwoDimensionalValueLabels {
+    collision: ValueLabelsCollision;
+}
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;
@@ -214,14 +221,14 @@ export interface TwoDimensionalChartLegendLineModel extends Omit<TwoDimensionalL
     width: number;
 }
 interface TwoDimensionalLineLikeChartModel {
-    lineViewOptions: TwoDimensionalLineLikeChartViewModel;
+    lineLikeViewOptions: TwoDimensionalLineLikeChartViewModel;
     markersOptions: MarkersOptions;
 }
 interface TwoDimensionalLineLikeChartViewModel {
     dashedStyles: LineLikeChartDashOptions;
-    renderForKey: LineLikeChartRenderOptions;
+    renderForKey: LineLikeChartRenderFn;
 }
-export declare type LineLikeChartRenderOptions = (dataRow: MdtChartsDataRow, valueFieldName: string) => boolean;
+export declare type LineLikeChartRenderFn = (dataRow: MdtChartsDataRow, valueFieldName: string) => boolean;
 interface TwoDimensionalBarLikeChartModel {
     barViewOptions: TwoDimensionalBarLikeChartViewModel;
 }
@@ -235,6 +242,7 @@ export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLine
     embeddedLabels: EmbeddedLabelTypeModel;
     isSegmented: boolean;
     legend: ChartLegendModel;
+    valueLabels?: TwoDimChartValueLabelsOptions;
 }
 export interface IntervalChartModel extends Omit<ChartModel, "legend"> {
     type: IntervalChartType;
@@ -252,10 +260,26 @@ export interface TwoDimensionalChartDataModel {
 export interface ValueField extends Field {
     title: string;
 }
-export interface MarkersOptions {
+export interface TwoDimChartValueLabelsOptions {
     show: boolean;
+    handleX: (scaledValue: number) => number;
+    handleY: (scaledValue: number) => number;
+    textAnchor: ValueLabelAnchor;
+    dominantBaseline: ValueLabelDominantBaseline;
+    format: ValueLabelsFormatter;
+}
+export declare type ValueLabelsFormatter = (value: number) => string;
+export interface MarkersOptions {
+    show: MarkersOptionsShow;
     styles: MarkersStyleOptions;
 }
+export declare type MarkDotDatumItem = MdtChartsDataRow | {
+    "1": any;
+} & Array<number>;
+export declare type MarkersOptionsShow = (options: {
+    row: MarkDotDatumItem;
+    valueFieldName: string;
+}) => boolean;
 export interface MarkersStyleOptions {
     highlighted: MarkerStyle;
     normal: MarkerStyle;

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

@@ -1,4 +1,4 @@
-import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType } from "../../config/config";
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup, ValueLabelsFormatter } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { DataRepositoryModel } from "../../model/modelInstance/dataModel/dataRepository";
 interface BaseConfigReader {
@@ -10,13 +10,19 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     readonly options: MdtChartsTwoDimensionalOptions;
     constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
     getValueFields(): MdtChartsField[];
-    calculateBiggestValueAndDecremented(repository: DataRepositoryModel): number[];
-    getFieldsBySegments(): MdtChartsFieldName[][];
+    getBiggestValueAndDecremented(repository: DataRepositoryModel): number[];
+    getBiggestValueAndDecrementedSecondary(repository: DataRepositoryModel): number[];
+    getFieldsBySegments(valueGroup: TwoDimensionalValueGroup): MdtChartsFieldName[][];
     getAxisLabelFormatter(): AxisLabelFormatter;
+    getSecondaryAxisLabelFormatter(): AxisLabelFormatter;
     getLegendItemInfo(): {
         text: string;
         chartType: TwoDimensionalChartType;
     }[];
+    containsSecondaryAxis(): boolean;
+    getValueLabelFormatterForChart(chartIndex: number): ValueLabelsFormatter;
+    private calculateBiggestValueAndDecremented;
+    private calculateAxisLabelFormatter;
 }
 export declare class PolarConfigReader implements BaseConfigReader {
     private options;

package/lib/model/modelInstance/configReader.js

@@ -18,18 +18,16 @@ export class TwoDimConfigReader {
         });
         return fields;
     }
-    calculateBiggestValueAndDecremented(repository) {
-        const domain = this.options.axis.value.domain;
-        const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
-        if (resolvedDomain && resolvedDomain.end !== -1) {
-            return [resolvedDomain.end, resolvedDomain.end - 1];
-        }
-        return repository.getBiggestValueAndDecremented(this.getFieldsBySegments());
+    getBiggestValueAndDecremented(repository) {
+        return this.calculateBiggestValueAndDecremented(repository, this.options.axis.value.domain, this.getFieldsBySegments("main"));
+    }
+    getBiggestValueAndDecrementedSecondary(repository) {
+        return this.calculateBiggestValueAndDecremented(repository, this.options.axis.valueSecondary.domain, this.getFieldsBySegments("secondary"));
     }
-    getFieldsBySegments() {
+    getFieldsBySegments(valueGroup) {
         const segments = [];
-        const mainCharts = this.options.charts.filter(chart => chart.data.valueGroup !== 'secondary');
-        mainCharts.forEach(chart => {
+        const valueGroupCharts = this.options.charts.filter(chart => { var _a; return ((_a = chart.data.valueGroup) !== null && _a !== void 0 ? _a : "main") === valueGroup; });
+        valueGroupCharts.forEach(chart => {
             if (!chart.isSegmented)
                 segments.push(...chart.data.valueFields.map(vf => [vf.name]));
             else
@@ -38,11 +36,10 @@ export class TwoDimConfigReader {
         return segments;
     }
     getAxisLabelFormatter() {
-        var _a, _b;
-        if ((_a = this.options.axis.value.labels) === null || _a === void 0 ? void 0 : _a.format)
-            return (_b = this.options.axis.value.labels) === null || _b === void 0 ? void 0 : _b.format;
-        const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
-        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+        return this.calculateAxisLabelFormatter(this.options.axis.value);
+    }
+    getSecondaryAxisLabelFormatter() {
+        return this.calculateAxisLabelFormatter(this.options.axis.valueSecondary);
     }
     getLegendItemInfo() {
         const info = [];
@@ -54,6 +51,40 @@ export class TwoDimConfigReader {
         });
         return info;
     }
+    containsSecondaryAxis() {
+        return !!this.options.axis.valueSecondary && this.options.charts.some(chart => chart.data.valueGroup === 'secondary');
+    }
+    getValueLabelFormatterForChart(chartIndex) {
+        var _a, _b, _c;
+        const chart = this.options.charts[chartIndex];
+        const axis = this.options.axis;
+        if (chart.valueLabels.format)
+            return chart.valueLabels.format;
+        if (chart.data.valueGroup === "secondary") {
+            if ((_a = axis.valueSecondary.labels) === null || _a === void 0 ? void 0 : _a.format)
+                return axis.valueSecondary.labels.format;
+            else if ((_b = axis.value.labels) === null || _b === void 0 ? void 0 : _b.format)
+                return axis.value.labels.format;
+        }
+        else if ((_c = axis.value.labels) === null || _c === void 0 ? void 0 : _c.format)
+            return axis.value.labels.format;
+        const valueFieldFormat = chart.data.valueFields[0].format;
+        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+    }
+    calculateBiggestValueAndDecremented(repository, domain, fields) {
+        const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
+        if (resolvedDomain && resolvedDomain.end !== -1) {
+            return [resolvedDomain.end, resolvedDomain.end - 1];
+        }
+        return repository.getBiggestValueAndDecremented(fields);
+    }
+    calculateAxisLabelFormatter(axisValue) {
+        var _a, _b;
+        if ((_a = axisValue.labels) === null || _a === void 0 ? void 0 : _a.format)
+            return (_b = axisValue.labels) === null || _b === void 0 ? void 0 : _b.format;
+        const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
+        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+    }
 }
 export class PolarConfigReader {
     constructor(config) {