mdt-charts 1.20.0 → 1.21.0

package/lib/engine/twoDimensionalNotation/line/lineHelper.d.ts

@@ -1,25 +1,16 @@
 import { Line as ILine } from 'd3-shape';
 import { MdtChartsDataRow } from '../../../config/config';
-import { Orient, BlockMargin, LineCurveType, TwoDimensionalChartModel, LineLikeChartRenderOptions } from "../../../model/model";
-import { Scales } from "../../features/scale/scale";
+import { TwoDimensionalChartModel } from "../../../model/model";
 import { Pipeline } from '../../helpers/pipeline/Pipeline';
 import { BaseType, Selection } from 'd3-selection';
-import { Segment } from './line';
-interface LineGeneratorFactoryOptions {
-    keyAxisOrient: Orient;
-    scales: Scales;
-    keyFieldName: string;
-    margin: BlockMargin;
-    curve: LineCurveType;
-    shouldRenderLine: LineLikeChartRenderOptions;
-}
+import { Segment } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
+import { LineLikeGeneratorFactoryOptions } from '../lineLike/generatorFactory/lineLikeGeneratorFactory';
 export declare class LineGeneratorFactory {
     private options;
-    constructor(options: LineGeneratorFactoryOptions);
+    constructor(options: LineLikeGeneratorFactoryOptions);
     getLineGenerator(valueFieldName: string): ILine<MdtChartsDataRow>;
     getSegmentedLineGenerator(): ILine<MdtChartsDataRow>;
 }
 export declare function onLineChartInit(creatingPipeline: Pipeline<Selection<SVGElement, any, BaseType, any>, TwoDimensionalChartModel>): void;
 export declare function applyLineDash(lineSelection: Selection<SVGElement, any, BaseType, any>, dashSize: number, gapSize: number): Selection<SVGElement, any, BaseType, any>;
 export declare function getStackedData(data: MdtChartsDataRow[], chart: TwoDimensionalChartModel): Segment[][];
-export {};

package/lib/engine/twoDimensionalNotation/line/lineHelper.js

@@ -1,35 +1,47 @@
 import { stack } from 'd3-shape';
 import { Scale } from "../../features/scale/scale";
 import { LineGenerator } from './lineGenerator';
+import { LineLikeGeneratorCurveMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware';
+import { LineLikeGeneratorDefinedMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
 export class LineGeneratorFactory {
     constructor(options) {
         this.options = options;
     }
     getLineGenerator(valueFieldName) {
-        const { keyAxisOrient, scales, keyFieldName, margin, shouldRenderLine } = this.options;
-        const generator = new LineGenerator({ curve: this.options.curve });
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRender } = this.options;
+        const generator = new LineGenerator({
+            middlewares: [
+                new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
+                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: () => valueFieldName, dataRowGetter: (d) => d })
+            ]
+        });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return generator.get(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(d[valueFieldName]) + margin.top).defined(d => shouldRenderLine(d, valueFieldName));
+            return generator.get(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(d[valueFieldName]) + margin.top);
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top).defined(d => shouldRenderLine(d, valueFieldName));
+            return generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
         }
     }
     getSegmentedLineGenerator() {
-        const { keyAxisOrient, scales, keyFieldName, margin, shouldRenderLine } = this.options;
-        const generator = new LineGenerator({ curve: this.options.curve });
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRender } = this.options;
+        const generator = new LineGenerator({
+            middlewares: [
+                new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
+                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: (d) => d.fieldName, dataRowGetter: (d) => d.data })
+            ]
+        });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return generator.get(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, d => scales.value(d[1]) + margin.top).defined(d => shouldRenderLine(d.data, d.fieldName));
+            return generator.get(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, d => scales.value(d[1]) + margin.top);
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return generator.get(d => scales.value(d[1]) + margin.left, d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top).defined(d => shouldRenderLine(d.data, d.fieldName));
+            return generator.get(d => scales.value(d[1]) + margin.left, d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
         }
     }
 }
 export function onLineChartInit(creatingPipeline) {
     creatingPipeline.push((path, chart) => {
-        if (chart.lineViewOptions.dashedStyles.on) {
-            return applyLineDash(path, chart.lineViewOptions.dashedStyles.dashSize, chart.lineViewOptions.dashedStyles.gapSize);
+        if (chart.lineLikeViewOptions.dashedStyles.on) {
+            return applyLineDash(path, chart.lineLikeViewOptions.dashedStyles.dashSize, chart.lineLikeViewOptions.dashedStyles.gapSize);
         }
         return path;
     });

package/lib/engine/twoDimensionalNotation/lineLike/generatorFactory/lineLikeGeneratorFactory.d.ts

@@ -0,0 +1,12 @@
+import { MdtChartsDataRow } from "../../../../config/config";
+import { BlockMargin, LineCurveType, LineLikeChartRenderFn, Orient } from "../../../../model/model";
+import { Scales } from "../../../features/scale/scale";
+export declare type CoordinateGetter = (dataRow: MdtChartsDataRow) => number;
+export interface LineLikeGeneratorFactoryOptions {
+    keyAxisOrient: Orient;
+    scales: Scales;
+    keyFieldName: string;
+    margin: BlockMargin;
+    curve: LineCurveType;
+    shouldRender: LineLikeChartRenderFn;
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorFactory/lineLikeGeneratorFactory.js

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

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

@@ -0,0 +1,14 @@
+import { Area, Line } from "d3-shape";
+import { LineCurveType } from "../../../../model/model";
+import { LineLikeGeneratorMiddleware } from "./lineLikeGeneratorMiddleware";
+import { MdtChartsDataRow } from "../../../../main";
+interface LineLikeGeneratorCurveMiddlewareOptions {
+    curve?: LineCurveType;
+}
+export declare class LineLikeGeneratorCurveMiddleware implements LineLikeGeneratorMiddleware {
+    private options;
+    private readonly curvies;
+    constructor(options: LineLikeGeneratorCurveMiddlewareOptions);
+    handle(generator: Line<MdtChartsDataRow> | Area<MdtChartsDataRow>): Line<MdtChartsDataRow> | Area<MdtChartsDataRow>;
+}
+export {};

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,8 @@ import { Block } from "../block/block";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
 import { Engine } from "../engine";
 export declare class TwoDimensionalManager implements ChartContentManager {
+    private canvasValueLabels?;
+    private linearGradientDef?;
     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,8 @@ 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";
+import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -38,6 +40,23 @@ 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);
+        if (options.defs) {
+            this.linearGradientDef = new LinearGradientDef();
+            this.linearGradientDef.render(engine.block.svg.ensureDefsRendered(), options.defs.gradients);
+        }
     }
     updateData(block, model, data) {
         block.transitionManager.interruptTransitions();
@@ -63,16 +82,20 @@ 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) {
+        var _a;
         Legend.get().updateColors(block, model.options);
+        (_a = this.linearGradientDef) === null || _a === void 0 ? void 0 : _a.updateColors(block.svg.ensureDefsRendered(), model.options.defs.gradients);
         model.options.charts.forEach(chart => {
             if (chart.type === 'bar')
                 Bar.get().updateColors(block, chart);
             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 +109,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 +126,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/chartStyleModel/twoDimensionalChartStyleModel.js

@@ -8,10 +8,14 @@ export class TwoDimensionalChartStyleModel {
         this.service = new TwoDimensionalChartStyleService();
     }
     getChartStyle(chart, chartIndex) {
+        var _a, _b;
         const fieldsAmounts = this.getChartsValueFieldsAmounts();
+        const opacity = chart.type === 'area' && ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on)
+            ? 1
+            : this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented);
         return {
             elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
-            opacity: this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented)
+            opacity,
         };
     }
     getChartsValueFieldsAmounts() {

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',
@@ -137,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/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,8 @@
+import { ChartOrientation, MdtChartsDataRow, MdtChartsTwoDimensionalChart } from "../../config/config";
+import { GradientDef, MarkDotDatumItem, Orient, TwoDimensionalChartModel } from "../model";
+export declare class TwoDimensionalModelHelper {
+    static shouldMarkerShow(chart: MdtChartsTwoDimensionalChart, dataRows: MdtChartsDataRow[], valueFieldName: string, currentRow: MarkDotDatumItem, keyFieldName: string): boolean;
+    static getGradientDefs(charts: TwoDimensionalChartModel[], keyAxisOrient: Orient, chartOrient: ChartOrientation): GradientDef[];
+    private static getGradientItems;
+    private static calculateOpacityItem;
+}

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -0,0 +1,56 @@
+import { getGradientId } from "../../model/notations/twoDimensional/styles";
+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;
+    }
+    static getGradientDefs(charts, keyAxisOrient, chartOrient) {
+        let gradients = [];
+        charts.forEach((chart) => {
+            var _a;
+            if (chart.type === 'area' && chart.areaViewOptions.fill.type === 'gradient') {
+                (_a = chart.style.elementColors) === null || _a === void 0 ? void 0 : _a.forEach((elementColor, subIndex) => {
+                    const gradientId = getGradientId(chart.index, subIndex);
+                    gradients.push({
+                        id: gradientId,
+                        position: {
+                            x1: 0,
+                            y1: 0,
+                            x2: chartOrient === 'horizontal' ? 1 : 0,
+                            y2: chartOrient === 'horizontal' ? 0 : 1,
+                        },
+                        items: this.getGradientItems(gradientId, elementColor, keyAxisOrient),
+                    });
+                });
+            }
+        });
+        return gradients;
+    }
+    static getGradientItems(gradientId, elementColor, keyAxisOrient) {
+        return [0, 1].map(indexItem => ({
+            id: gradientId + `-item-${indexItem}`,
+            color: elementColor,
+            offset: indexItem,
+            opacity: this.calculateOpacityItem(indexItem, keyAxisOrient)
+        }));
+    }
+    static calculateOpacityItem(indexItem, orientation) {
+        const maxOpacity = 0.3;
+        const minOpacity = 0;
+        if (orientation === 'bottom' || orientation === 'right')
+            return indexItem === 0 ? maxOpacity : minOpacity;
+        else
+            return indexItem === 0 ? minOpacity : maxOpacity;
+    }
+    ;
+}

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,9 @@ 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 GradientId = string;
 export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
 export interface Model<O = OptionsModel> {
     blockCanvas: BlockCanvas;
@@ -40,6 +43,7 @@ interface GraphicNotationOptionsModel extends BasicOptionsModel {
     data: OptionsModelData;
     title: string;
     selectable: boolean;
+    defs: OptionsModelGradients;
 }
 export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel {
     type: "2d";
@@ -49,6 +53,7 @@ export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel
     additionalElements: AdditionalElementsOptions;
     orient: ChartOrientation;
     chartSettings: TwoDimChartElementsSettings;
+    valueLabels: TwoDimensionalValueLabels;
 }
 export interface PolarOptionsModel extends GraphicNotationOptionsModel {
     type: "polar";
@@ -77,6 +82,24 @@ export interface Field {
     name: string;
     format: DataType;
 }
+export interface OptionsModelGradients {
+    gradients: GradientDef[];
+}
+export interface GradientDef {
+    id: GradientId;
+    position: {
+        x1: number;
+        x2: number;
+        y1: number;
+        y2: number;
+    };
+    items: {
+        id: string;
+        color: string;
+        offset: number;
+        opacity: number;
+    }[];
+}
 export interface IScaleModel {
     key: ScaleKeyModel;
     value: ScaleValueModel;
@@ -171,6 +194,9 @@ interface LineLikeChartCurveOptions {
 interface BarLikeChartHatchOptions {
     on: boolean;
 }
+export interface TwoDimensionalValueLabels {
+    collision: ValueLabelsCollision;
+}
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;
@@ -215,27 +241,45 @@ 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;
 }
 interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
 }
-export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel {
+interface TwoDimensionalAreaChartModel {
+    areaViewOptions: AreaChartViewOptions;
+}
+export interface AreaChartViewOptions {
+    fill: AreaViewFill;
+    borderLine: AreaViewBorderLine;
+}
+export declare type AreaViewFill = {
+    type: "paletteColor";
+} | {
+    type: "gradient";
+    ids: GradientId[];
+};
+export interface AreaViewBorderLine {
+    on: boolean;
+    colorStyle: ChartStyle;
+}
+export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel, TwoDimensionalAreaChartModel {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartDataModel;
     index: number;
     embeddedLabels: EmbeddedLabelTypeModel;
     isSegmented: boolean;
     legend: ChartLegendModel;
+    valueLabels?: TwoDimChartValueLabelsOptions;
 }
 export interface IntervalChartModel extends Omit<ChartModel, "legend"> {
     type: IntervalChartType;
@@ -253,10 +297,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, TwoDimensionalValueGroup } 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 {
@@ -20,6 +20,7 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
         chartType: TwoDimensionalChartType;
     }[];
     containsSecondaryAxis(): boolean;
+    getValueLabelFormatterForChart(chartIndex: number): ValueLabelsFormatter;
     private calculateBiggestValueAndDecremented;
     private calculateAxisLabelFormatter;
 }

package/lib/model/modelInstance/configReader.js

@@ -54,6 +54,23 @@ export class TwoDimConfigReader {
     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) {

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

@@ -14,7 +14,8 @@ export class PolarModel {
             charts: this.getChartsModel(options.chart, modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle),
             legend: modelInstance.canvasModel.legendCanvas.getModel(),
             tooltip: options.tooltip,
-            chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows())
+            chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows()),
+            defs: { gradients: [] },
         };
     }
     //TODO: type for returned value