mdt-charts 1.23.2 → 1.24.0

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -53,7 +53,7 @@ export class TwoDimensionalManager {
         engine.block.getSvg()
             .on('click', (e) => {
             if (e.target === engine.block.getSvg().node())
-                engine.block.filterEventManager.clearKeysFor2D(options);
+                this.clearSelection(engine.block.filterEventManager, model);
         });
         this.canvasValueLabels = new CanvasValueLabels({
             elementAccessors: {
@@ -113,6 +113,9 @@ export class TwoDimensionalManager {
                 Area.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
         });
     }
+    clearSelection(filterEventManager, model) {
+        filterEventManager.clearKeysFor2D(model.options);
+    }
     renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings, blockSize) {
         block.svg.renderChartClipPath(margin, blockSize);
         block.svg.renderBarHatchPattern();
@@ -124,7 +127,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.get({ staticSettings: chartSettings.lineLike }).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);
             else if (chart.type === 'dot')
                 this.dotChart.render(chartScales, chart, data[dataOptions.dataSource], margin);
         });
@@ -143,7 +146,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.get({ staticSettings: chartSettings.lineLike }).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);
             }
             else if (chart.type === 'dot') {
                 proms = this.dotChart.update(chartScales, data[dataOptions.dataSource], margin);

package/lib/main.d.ts

@@ -26,6 +26,10 @@ export interface IChart {
      * @param newColors Новые базовые цвета
      */
     updateColors(newColors: string[]): void;
+    /**
+     * Сброс выделения ключей
+     */
+    clearSelection(): void;
 }
 export declare class Chart implements IChart {
     static chartCounter: number;
@@ -70,6 +74,7 @@ export declare class Chart implements IChart {
      * @param newColors Новые базовые цвета
      */
     updateColors(newColors: string[]): void;
+    clearSelection(): void;
     private registerResizeEvent;
     private removeResizeEvent;
     private resizeListener;

package/lib/main.js

@@ -70,6 +70,9 @@ export class Chart {
         this.model = assembleModel(this.config, this.data, this.designerConfig);
         this.engine.updateColors(this.model);
     }
+    clearSelection() {
+        this.engine.clearSelection(this.model);
+    }
     registerResizeEvent() {
         window.addEventListener('resize', this.resizeHandler);
     }

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

@@ -1,4 +1,4 @@
-import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions } from "../../config/config";
+import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions, AxisLabelFormatter } from "../../config/config";
 import { AxisModelOptions, Orient } from "../model";
 import { AxisType } from "../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
@@ -12,8 +12,8 @@ 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 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;
+    static getMainValueAxis(defaultFormatter: AxisLabelFormatter, orient: ChartOrientation, position: AxisPosition, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    static getSecondaryValueAxis(defaultFormatter: AxisLabelFormatter, 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;

package/lib/model/featuresModel/axisModel.js

@@ -30,16 +30,19 @@ export class AxisModel {
             visibility: axisConfig.visibility,
             line: {
                 visible: (_c = (_b = axisConfig.line) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : DEFAULT_AXIS_LINE_VISIBLE
+            },
+            browserTooltip: {
+                format: value => value
             }
         };
     }
-    static getMainValueAxis(orient, position, axisConfig, labelConfig, canvasModel) {
-        return this.getValueAxis(orient, position, 'value-axis', axisConfig, labelConfig, canvasModel);
+    static getMainValueAxis(defaultFormatter, orient, position, axisConfig, labelConfig, canvasModel) {
+        return this.getValueAxis(defaultFormatter, 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 getSecondaryValueAxis(defaultFormatter, orient, mainAxisPosition, axisConfig, labelConfig, canvasModel) {
+        return this.getValueAxis(defaultFormatter, orient, mainAxisPosition === "start" ? "end" : "start", 'value-secondary-axis', axisConfig, labelConfig, canvasModel);
     }
-    static getValueAxis(orient, position, cssClass, axisConfig, labelConfig, canvasModel) {
+    static getValueAxis(defaultFormatter, orient, position, cssClass, axisConfig, labelConfig, canvasModel) {
         var _a, _b, _c, _d;
         return {
             type: 'value',
@@ -61,6 +64,9 @@ export class AxisModel {
             visibility: axisConfig.visibility,
             line: {
                 visible: (_d = (_c = axisConfig.line) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : DEFAULT_AXIS_LINE_VISIBLE
+            },
+            browserTooltip: {
+                format: value => defaultFormatter(value)
             }
         };
     }

package/lib/model/featuresModel/titleModel.js

@@ -1,3 +1,4 @@
+import { ModelHelper } from "../helpers/modelHelper";
 export const getResolvedTitle = (title, dataRows) => {
     return typeof title === 'function'
         ? title({ data: dataRows })
@@ -5,7 +6,7 @@ export const getResolvedTitle = (title, dataRows) => {
 };
 export class TitleModel {
     static getTitleModel(titleText) {
-        const defaultPads = 20;
+        const defaultPads = ModelHelper.getFontSizeCssValue('--chart-title-font-size', 16);
         const pad = titleText ? defaultPads : 0;
         return {
             margin: {

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

@@ -5,11 +5,17 @@ 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 function hasCollisionLeftSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
 export declare function hasCollisionRightSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
+export declare function hasCollisionTopSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
+export declare function hasCollisionBottomSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
 export declare function shiftCoordinateXLeft(labelClientRect: BoundingRect): void;
 export declare function shiftCoordinateXRight(labelClientRect: BoundingRect): void;
+export declare function shiftCoordinateYTop(labelClientRect: BoundingRect): void;
+export declare function shiftCoordinateYBottom(labelClientRect: BoundingRect): void;
 export {};

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

@@ -1,5 +1,5 @@
-const OFFSET_SIZE_PX = 10;
-const BORDER_OFFSET_SIZE_PX = 2;
+export const OFFSET_SIZE_PX = 10;
+export const BORDER_OFFSET_SIZE_PX = 2;
 export function getValueLabelY(scaledValue, keyAxisOrient, margin) {
     switch (keyAxisOrient) {
         case 'bottom':
@@ -38,9 +38,21 @@ export function hasCollisionLeftSide(labelClientRect, margin) {
 export function hasCollisionRightSide(labelClientRect, blockSize, margin) {
     return labelClientRect.x + labelClientRect.width / 2 >= blockSize.width - margin.right;
 }
+export function hasCollisionTopSide(labelClientRect, margin) {
+    return labelClientRect.y - labelClientRect.height / 2 <= margin.top;
+}
+export function hasCollisionBottomSide(labelClientRect, blockSize, margin) {
+    return labelClientRect.y + labelClientRect.height / 2 >= blockSize.height - margin.bottom;
+}
 export function shiftCoordinateXLeft(labelClientRect) {
     labelClientRect.x -= labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
 }
 export function shiftCoordinateXRight(labelClientRect) {
-    labelClientRect.x += +labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
+    labelClientRect.x += labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
+}
+export function shiftCoordinateYTop(labelClientRect) {
+    labelClientRect.y -= labelClientRect.height / 2 + BORDER_OFFSET_SIZE_PX;
+}
+export function shiftCoordinateYBottom(labelClientRect) {
+    labelClientRect.y += labelClientRect.height / 2 + BORDER_OFFSET_SIZE_PX;
 }

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

@@ -2,6 +2,7 @@ export declare class ModelHelper {
     private static readonly defaultBaseFontSize;
     private static baseFontSize;
     private static getBaseFontSize;
+    static getFontSizeCssValue(propertyName: string, defaultValue: number): number;
     static getSum(items: number[]): number;
     static getUniqueValues(values: string[]): string[];
     static getStringScore(word: string): number;

package/lib/model/helpers/modelHelper.js

@@ -1,9 +1,13 @@
 import { DomHelper } from "../../engine/helpers/domHelper";
 export class ModelHelper {
-    static getBaseFontSize() {
+    static getBaseFontSize(propertyName) {
         if (!this.baseFontSize)
-            this.baseFontSize = parseInt(DomHelper.getCssPropertyValue(document.documentElement, '--chart-base-font-size'));
-        return (!this.baseFontSize || isNaN(this.baseFontSize)) ? this.defaultBaseFontSize : this.baseFontSize;
+            this.baseFontSize = this.getFontSizeCssValue(propertyName, this.defaultBaseFontSize);
+        return this.baseFontSize;
+    }
+    static getFontSizeCssValue(propertyName, defaultValue) {
+        const value = parseInt(DomHelper.getCssPropertyValue(document.documentElement, propertyName));
+        return isNaN(value) ? defaultValue : value;
     }
     static getSum(items) {
         return items.reduce((acc, item) => acc + item, 0);
@@ -15,7 +19,7 @@ export class ModelHelper {
     static getStringScore(word) {
         // lower case letter width ~ 0.8 from upper case width.
         // Number width == lower case letter width
-        const fontSize = this.getBaseFontSize();
+        const fontSize = this.getBaseFontSize('--chart-base-font-size');
         let score = 0;
         const upperLetterScore = fontSize / 10;
         const lowerLetterScore = fontSize / 14;

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

@@ -1,9 +1,12 @@
-import { ChartOrientation, MdtChartsDataRow, MdtChartsTwoDimensionalChart } from "../../config/config";
-import { GradientDef, MarkDotDatumItem, Orient, TwoDimensionalChartModel } from "../model";
+import { ChartOrientation, MdtChartsDataRow, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalValueLabels } from "../../config/config";
+import { GradientDef, MarkDotDatumItem, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels } from "../model";
+import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
 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;
     private static getGradientItemColor;
+    static getValueLabels(valueLabels: MdtChartsTwoDimensionalValueLabels, canvasModel: CanvasModel, chartOrientation: ChartOrientation): TwoDimensionalValueLabels;
+    private static getChartBlockSidesOptions;
 }

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -1,4 +1,5 @@
 import { getGradientId } from "../../model/notations/twoDimensional/styles";
+import { hasCollisionBottomSide, hasCollisionLeftSide, hasCollisionRightSide, hasCollisionTopSide, shiftCoordinateXLeft, shiftCoordinateXRight, shiftCoordinateYBottom, shiftCoordinateYTop } from "../featuresModel/valueLabelsModel/valueLabelsModel";
 export class TwoDimensionalModelHelper {
     static shouldMarkerShow(chart, dataRows, valueFieldName, currentRow, keyFieldName) {
         if (chart.markers.show || dataRows.length === 1)
@@ -61,4 +62,66 @@ export class TwoDimensionalModelHelper {
         else
             return itemIndex === 0 ? minColor : maxColor;
     }
+    static getValueLabels(valueLabels, canvasModel, chartOrientation) {
+        var _a;
+        const blockSidesOptions = this.getChartBlockSidesOptions(canvasModel);
+        const chartBlockConfig = {
+            vertical: {
+                left: {
+                    mode: 'shift',
+                    hasCollision: blockSidesOptions.hasCollisionLeft,
+                    shiftCoordinate: blockSidesOptions.shiftRight
+                },
+                right: {
+                    mode: 'shift',
+                    hasCollision: blockSidesOptions.hasCollisionRight,
+                    shiftCoordinate: blockSidesOptions.shiftLeft
+                },
+                top: {
+                    mode: 'none'
+                },
+                bottom: {
+                    mode: 'none'
+                }
+            },
+            horizontal: {
+                left: {
+                    mode: 'none'
+                },
+                right: {
+                    mode: 'none'
+                },
+                top: {
+                    mode: 'shift',
+                    hasCollision: blockSidesOptions.hasCollisionTop,
+                    shiftCoordinate: blockSidesOptions.shiftBottom
+                },
+                bottom: {
+                    mode: 'shift',
+                    hasCollision: blockSidesOptions.hasCollisionBottom,
+                    shiftCoordinate: blockSidesOptions.shiftTop
+                }
+            }
+        };
+        return {
+            collision: {
+                otherValueLables: (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.collision.otherValueLabels) !== null && _a !== void 0 ? _a : {
+                    mode: 'none'
+                },
+                chartBlock: chartBlockConfig[chartOrientation]
+            }
+        };
+    }
+    static getChartBlockSidesOptions(canvasModel) {
+        return {
+            hasCollisionLeft: (labelClientRect) => hasCollisionLeftSide(labelClientRect, canvasModel.getMargin()),
+            shiftLeft: (labelClientRect) => shiftCoordinateXLeft(labelClientRect),
+            hasCollisionRight: (labelClientRect) => hasCollisionRightSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
+            shiftRight: (labelClientRect) => shiftCoordinateXRight(labelClientRect),
+            hasCollisionTop: (labelClientRect) => hasCollisionTopSide(labelClientRect, canvasModel.getMargin()),
+            shiftTop: (labelClientRect) => shiftCoordinateYTop(labelClientRect),
+            hasCollisionBottom: (labelClientRect) => hasCollisionBottomSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
+            shiftBottom: (labelClientRect) => shiftCoordinateYBottom(labelClientRect)
+        };
+    }
 }

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

@@ -16,4 +16,5 @@ export declare class TwoDimMarginModel {
     private recalcVerticalMarginByAxisLabelHeight;
     private recalcHorizontalMarginByAxisLabelWidth;
     private recalcMarginBySecondaryAxisLabelSize;
+    private recalcVerticalMarginWithValueLabelsOn;
 }

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

@@ -3,6 +3,8 @@ import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendM
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
 import { AxisType } from "../../modelBuilder";
 import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
+import { ModelHelper } from "../../helpers/modelHelper";
+import { OFFSET_SIZE_PX } from "../../featuresModel/valueLabelsModel/valueLabelsModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 20;
 export const AXIS_VERTICAL_LABEL_PADDING = 8;
 export class TwoDimMarginModel {
@@ -27,6 +29,9 @@ export class TwoDimMarginModel {
             const secondaryLabelSize = this.getMaxLabelSizeSecondary(modelInstance);
             this.recalcMarginBySecondaryAxisLabelSize(secondaryLabelSize, canvasModel);
         }
+        if (this.configReader.isValueLabelsOn() && this.configReader.options.orientation === 'vertical') {
+            this.recalcVerticalMarginWithValueLabelsOn(canvasModel);
+        }
     }
     recalcMarginByVerticalAxisLabel(modelInstance) {
         if (this.configReader.options.orientation === 'vertical') {
@@ -101,4 +106,13 @@ export class TwoDimMarginModel {
             canvasModel.increaseMarginSide(secondaryOrient, sizeMap[this.configReader.options.orientation]);
         }
     }
+    recalcVerticalMarginWithValueLabelsOn(canvasModel) {
+        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, this.configReader.options.orientation, this.configReader.options.axis.key.position);
+        const valueLabelFontSize = ModelHelper.getFontSizeCssValue('--value-label-font-size', 10);
+        const axisMarginMapping = {
+            top: "bottom",
+            bottom: "top"
+        };
+        canvasModel.increaseMarginSide(axisMarginMapping[keyAxisOrient], valueLabelFontSize + OFFSET_SIZE_PX);
+    }
 }

package/lib/model/model.d.ts

@@ -136,6 +136,10 @@ export interface AxisModelOptions {
     ticks: AxisTicksModel;
     labels: AxisLabelModel;
     line: AxisLineModel;
+    browserTooltip: AxisBrowserTooltipModel;
+}
+export interface AxisBrowserTooltipModel {
+    format: (value: number | string) => string | number;
 }
 export interface AxisLineModel {
     visible: boolean;
@@ -230,17 +234,18 @@ export interface OtherValueLables {
     mode: ValueLabelsCollisionMode;
 }
 export interface ValueLabelsChartBlock {
-    left: {
-        mode: "none" | "shift";
-        hasCollision: (labelClientRect: BoundingRect) => boolean;
-        shiftCoordinate: (labelClientRect: BoundingRect) => void;
-    };
-    right: {
-        mode: "none" | "shift";
-        hasCollision: (labelClientRect: BoundingRect) => boolean;
-        shiftCoordinate: (labelClientRect: BoundingRect) => void;
-    };
-}
+    left: ValueLabelsChartBlockSide;
+    right: ValueLabelsChartBlockSide;
+    top: ValueLabelsChartBlockSide;
+    bottom: ValueLabelsChartBlockSide;
+}
+export declare type ValueLabelsChartBlockSide = {
+    mode: "shift";
+    hasCollision: (labelClientRect: BoundingRect) => boolean;
+    shiftCoordinate: (labelClientRect: BoundingRect) => void;
+} | {
+    mode: "none";
+};
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;

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

@@ -21,6 +21,8 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     }[];
     containsSecondaryAxis(): boolean;
     getValueLabelFormatterForChart(chartIndex: number): ValueLabelsFormatter;
+    calculateDefaultAxisLabelFormatter(): AxisLabelFormatter;
+    isValueLabelsOn(): boolean;
     private calculateBiggestValueAndDecremented;
     private calculateAxisLabelFormatter;
 }

package/lib/model/modelInstance/configReader.js

@@ -71,6 +71,13 @@ export class TwoDimConfigReader {
         const valueFieldFormat = chart.data.valueFields[0].format;
         return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
     }
+    calculateDefaultAxisLabelFormatter() {
+        const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
+        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+    }
+    isValueLabelsOn() {
+        return this.options.charts.some(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.on; });
+    }
     calculateBiggestValueAndDecremented(repository, domain, fields) {
         const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
         if (resolvedDomain && resolvedDomain.end !== -1) {
@@ -82,8 +89,7 @@ export class TwoDimConfigReader {
         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 });
+        return this.calculateDefaultAxisLabelFormatter();
     }
 }
 export class PolarConfigReader {

package/lib/model/notations/twoDimensional/styles.d.ts

@@ -1,4 +1,4 @@
-import { AreaChartViewOptions, BarBorderRadius, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions, Orient, TwoDimensionalBarLikeChartViewModel } from "../../model";
+import { AreaChartViewOptions, BarBorderRadius, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions, Orient, TwoDimensionalBarLikeChartViewModel, TwoDimensionalChartLegendLineModel } from "../../model";
 import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../../config/config";
 import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
 export declare const LINE_CHART_DEFAULT_WIDTH = 2;
@@ -7,6 +7,7 @@ export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDa
 export declare function getBarViewOptions(chart: MdtChartsTwoDimensionalChart, keyAxisOrient: Orient): TwoDimensionalBarLikeChartViewModel;
 export declare function getSegmentedRadiusValues(segmentsLength: number, segmentIndex: number, keyAxisOrient: Orient, defaultRadius: number): BarBorderRadius;
 export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
+export declare function getLineViewOptions(chart: MdtChartsTwoDimensionalChart): TwoDimensionalChartLegendLineModel;
 export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;
 export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle): AreaChartViewOptions;
 export declare function getGradientId(chartIndex: number, subIndex: number): GradientId;

package/lib/model/notations/twoDimensional/styles.js

@@ -78,25 +78,44 @@ export function getSegmentedRadiusValues(segmentsLength, segmentIndex, keyAxisOr
 export function getLegendMarkerOptions(chart) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const shapeByType = {
-        area: "default",
+        area: "line",
         bar: "bar",
         line: "line",
-        dot: "default"
+        dot: (_c = (_b = (_a = chart.dotLikeStyles) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : "line"
     };
     return {
         markerShape: shapeByType[chart.type],
         barViewOptions: {
-            hatch: { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false },
-            borderRadius: getRadiusValues((_f = (_e = (_d = chart.barStyles) === null || _d === void 0 ? void 0 : _d.borderRadius) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : BAR_CHART_BORDER_RADIUS_DEFAULT),
+            hatch: { on: (_f = (_e = (_d = chart.barStyles) === null || _d === void 0 ? void 0 : _d.hatch) === null || _e === void 0 ? void 0 : _e.on) !== null && _f !== void 0 ? _f : false },
+            borderRadius: getRadiusValues((_j = (_h = (_g = chart.barStyles) === null || _g === void 0 ? void 0 : _g.borderRadius) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : BAR_CHART_BORDER_RADIUS_DEFAULT),
             width: getWidthOfLegendMarkerByType("bar")
         },
-        lineViewOptions: {
-            dashedStyles: parseDashStyles((_g = chart.lineStyles) === null || _g === void 0 ? void 0 : _g.dash),
-            strokeWidth: (_j = (_h = chart.lineStyles) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : LINE_CHART_DEFAULT_WIDTH,
-            length: getWidthOfLegendMarkerByType("line")
-        }
+        lineViewOptions: getLineViewOptions(chart)
     };
 }
+export function getLineViewOptions(chart) {
+    var _a, _b, _c, _d, _e, _f;
+    switch (chart.type) {
+        case "dot":
+            return {
+                dashedStyles: { on: false, dashSize: 0, gapSize: 0 },
+                strokeWidth: (_c = (_b = (_a = chart.dotLikeStyles) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : LINE_CHART_DEFAULT_WIDTH,
+                length: getWidthOfLegendMarkerByType("line")
+            };
+        case "area":
+            return {
+                dashedStyles: { on: false, dashSize: 0, gapSize: 0 },
+                strokeWidth: LINE_CHART_DEFAULT_WIDTH,
+                length: getWidthOfLegendMarkerByType("line")
+            };
+        default:
+            return {
+                dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash),
+                strokeWidth: (_f = (_e = chart.lineStyles) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : LINE_CHART_DEFAULT_WIDTH,
+                length: getWidthOfLegendMarkerByType("line")
+            };
+    }
+}
 export function getWidthOfLegendMarkerByType(chartType) {
     if (chartType === "bar")
         return 8;

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -18,5 +18,4 @@ export declare class TwoDimensionalModel {
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
     private static getChartsByTypes;
-    private static getValueLabels;
 }

package/lib/model/notations/twoDimensionalModel.js

@@ -5,7 +5,7 @@ import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 import { getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
-import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY, hasCollisionLeftSide, hasCollisionRightSide, shiftCoordinateXLeft, shiftCoordinateXRight } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
@@ -23,20 +23,21 @@ export class TwoDimensionalModel {
         }
         const keyAxis = AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0));
         const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name);
+        const defaultFormatter = configReader.calculateDefaultAxisLabelFormatter();
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows()),
             selectable: !!options.selectable,
             orient: options.orientation,
             scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByTypes(options.charts, ['bar', 'dot'])), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
-            axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
+            axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(defaultFormatter, options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(defaultFormatter, options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
             type: options.type,
             data: Object.assign({}, options.data),
             charts,
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
-            valueLabels: this.getValueLabels(options.valueLabels, canvasModel),
+            valueLabels: TwoDimensionalModelHelper.getValueLabels(options.valueLabels, canvasModel, options.orientation),
             defs: {
                 gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
             }
@@ -115,7 +116,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 : 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
                     }
                 }
             });
@@ -150,26 +151,4 @@ export class TwoDimensionalModel {
     static getChartsByTypes(charts, types) {
         return charts.filter(chart => types.includes(chart.type));
     }
-    static getValueLabels(valueLabels, canvasModel) {
-        var _a;
-        return {
-            collision: {
-                otherValueLables: (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.collision.otherValueLabels) !== null && _a !== void 0 ? _a : {
-                    mode: 'none'
-                },
-                chartBlock: {
-                    left: {
-                        mode: 'shift',
-                        hasCollision: (labelClientRect) => hasCollisionLeftSide(labelClientRect, canvasModel.getMargin()),
-                        shiftCoordinate: (labelClientRect) => shiftCoordinateXRight(labelClientRect),
-                    },
-                    right: {
-                        mode: 'shift',
-                        hasCollision: (labelClientRect) => hasCollisionRightSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
-                        shiftCoordinate: (labelClientRect) => shiftCoordinateXLeft(labelClientRect),
-                    }
-                }
-            },
-        };
-    }
 }

package/lib/style/charts-main.css

@@ -1,5 +1,7 @@
 :root {
 	--chart-base-font-size: 12px;
+	--value-label-font-size: 10px;
+	--chart-title-font-size: 16px;
 }
 
 .wrapper {
@@ -271,7 +273,7 @@
     font-family: "Roboto", sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 18px;
+    font-size: var(--chart-title-font-size);
     line-height: 140.62%;
     cursor: default;
 }
@@ -290,6 +292,6 @@
 /* Value Labels */
 .mdt-charts-value-label {
     opacity: 0.5;
-    font-size: 10px;
+    font-size: var(--value-label-font-size);
     letter-spacing: -0.4px;
 }

package/lib/style/charts-main.less

@@ -1,5 +1,7 @@
 :root {
 	--chart-base-font-size: 12px;
+	--value-label-font-size: 10px;
+	--chart-title-font-size: 16px;
 }
 
 .wrapper {
@@ -271,7 +273,7 @@
     font-family: "Roboto", sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 18px;
+    font-size: var(--chart-title-font-size);
     line-height: 140.62%;
     cursor: default;
 }
@@ -290,6 +292,6 @@
 /* Value Labels */
 .mdt-charts-value-label {
     opacity: 0.5;
-    font-size: 10px;
+    font-size: var(--value-label-font-size);
     letter-spacing: -0.4px;
 }

package/package.json

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