mdt-charts 1.24.0 → 1.26.0

package/lib/config/config.d.ts

@@ -77,10 +77,14 @@ export interface MdtChartsTwoDimLegend extends Legend {
 export interface TitleFunctionParams {
     data: MdtChartsDataRow[];
 }
-export interface TitleFunction {
+export interface TitleFunc {
     (params: TitleFunctionParams): string;
 }
-export declare type Title = string | TitleFunction;
+export interface TitleObj {
+    text: string | TitleFunc;
+    fontSize?: number;
+}
+export declare type Title = string | TitleFunc | TitleObj;
 export interface MdtChartsBasicDataOptions {
     dataSource: string;
 }
@@ -191,7 +195,8 @@ export interface MdtChartsShowAxisLabelRule {
     showTickFn?: ShowTickFn;
 }
 export interface MdtChartsTwoDimensionalValueLabels {
-    collision: ValueLabelsCollision;
+    collision?: ValueLabelsCollision;
+    style?: ValueLabelsStyleOptions;
 }
 export interface ValueLabelsCollision {
     otherValueLabels: OtherValueLabels;
@@ -199,6 +204,11 @@ export interface ValueLabelsCollision {
 export interface OtherValueLabels {
     mode: ValueLabelsCollisionMode;
 }
+export interface ValueLabelsStyleOptions {
+    cssClassName?: string;
+    fontSize?: number;
+    color?: string;
+}
 export interface IntervalAxis {
     key: DiscreteAxisOptions;
     value: DateAxisOptions;

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

@@ -1,10 +1,10 @@
 import { Size } from '../../../config/config';
-import { TitleBlockModel } from "../../../model/model";
+import { OptionsModelTitle, TitleBlockModel } from "../../../model/model";
 import { Block } from "../../block/block";
 export declare class Title {
     private static readonly titleCssClass;
-    static render(block: Block, text: string, titleBlockModel: TitleBlockModel, blockSize: Size): void;
-    static updateData(block: Block, text: string): void;
+    static render(block: Block, title: OptionsModelTitle, titleBlockModel: TitleBlockModel, blockSize: Size): void;
+    static updateData(block: Block, title: OptionsModelTitle): void;
     private static fillTitleBlockAttributes;
     private static getTitleAttributes;
     private static setTitleTooltip;

package/lib/engine/features/title/title.js

@@ -1,24 +1,25 @@
 import { DomHelper } from '../../helpers/domHelper';
 export class Title {
-    static render(block, text, titleBlockModel, blockSize) {
-        if (!text)
+    static render(block, title, titleBlockModel, blockSize) {
+        if (!title.textContent)
             return;
         const titleBlock = block.getSvg()
             .append('text')
             .attr('class', this.titleCssClass);
         const titleCoordinate = this.getTitleAttributes(blockSize, titleBlockModel);
-        this.fillTitleBlockAttributes(titleBlock, titleCoordinate, text);
-        this.setTitleTooltip(titleBlock, text);
+        this.fillTitleBlockAttributes(titleBlock, titleCoordinate, title);
+        this.setTitleTooltip(titleBlock, title.textContent);
     }
-    static updateData(block, text) {
-        block.getSvg().select(`.${this.titleCssClass}`).text(text);
+    static updateData(block, title) {
+        block.getSvg().select(`.${this.titleCssClass}`).text(title.textContent);
     }
-    static fillTitleBlockAttributes(titleBlock, attributes, text) {
+    static fillTitleBlockAttributes(titleBlock, attributes, title) {
         titleBlock
             .attr('x', attributes.x)
             .attr('y', attributes.y)
             .attr('dominant-baseline', attributes.dominantBaseline)
-            .text(text);
+            .text(title.textContent)
+            .style('font-size', `${title.fontSize}px`);
         DomHelper.cropSvgLabels(titleBlock, attributes.maxWidth);
     }
     static getTitleAttributes(blockSize, titleBlockModel) {

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

@@ -1,5 +1,5 @@
 import { Block } from "../../../engine/block/block";
-import { OptionsModelData, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../../model/model";
+import { OptionsModelData, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels, ValueLabelAnchor, ValueLabelDominantBaseline, ValueLabelsStyleModel } from "../../../model/model";
 import { MdtChartsDataRow, MdtChartsDataSource } from "../../../config/config";
 import { Scales, ScalesWithSecondary } from "../../../engine/features/scale/scale";
 export interface ValueLabelsOptions {
@@ -12,6 +12,7 @@ export interface ValueLabelsOptions {
     canvas: {
         keyAxisOrient: Orient;
         valueLabels: TwoDimensionalValueLabels;
+        style: ValueLabelsStyleModel;
     };
 }
 export interface ValueLabelAttrs {
@@ -24,6 +25,7 @@ export declare class ChartValueLabels {
     private readonly globalOptions;
     private readonly chart;
     private static readonly valueLabelClass;
+    private readonly renderPipeline;
     constructor(globalOptions: ValueLabelsOptions, chart: TwoDimensionalChartModel);
     render(scales: Scales, data: MdtChartsDataRow[]): void;
     update(scales: Scales, newData: MdtChartsDataRow[]): Promise<void[]>;

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

@@ -5,17 +5,29 @@ import { select } from "d3-selection";
 import { DomHelper } from "../../../engine/helpers/domHelper";
 import { CLASSES } from "../../../model/modelBuilder";
 import { ValueLabelsCollision } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
 export class ChartValueLabels {
     constructor(globalOptions, chart) {
         this.globalOptions = globalOptions;
         this.chart = chart;
+        this.renderPipeline = new Pipeline();
+        this.renderPipeline.push((valueLabels, { style }) => {
+            valueLabels
+                .attr('fill', 'currentColor')
+                .style('font-size', style.fontSize)
+                .style('color', style.color);
+            if (style.cssClassName)
+                valueLabels.classed(style.cssClassName, true);
+            return valueLabels;
+        });
     }
     render(scales, data) {
         this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-            const valueLabels = this.getAllValueLabelsOfChart(vfIndex)
+            let valueLabels = this.getAllValueLabelsOfChart(vfIndex)
                 .data(data)
                 .enter()
                 .append('text');
+            valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
             const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
             this.setAttrs(valueLabels, attrs, valueField.name, this.chart.valueLabels.format);
             this.setClasses(valueLabels, this.chart.cssClasses, vfIndex);
@@ -29,9 +41,10 @@ export class ChartValueLabels {
                     .data(newData);
                 valueLabels.exit().remove();
                 const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
-                const newValueLabels = valueLabels
+                let newValueLabels = valueLabels
                     .enter()
                     .append('text');
+                newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
                 const mergedValueLabels = newValueLabels.merge(valueLabels);
                 this.setAttrs(newValueLabels, attrs, valueField.name, this.chart.valueLabels.format);
                 this.setClasses(mergedValueLabels, this.chart.cssClasses, vfIndex);

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -65,6 +65,7 @@ export class TwoDimensionalManager {
             canvas: {
                 keyAxisOrient: options.axis.key.orient,
                 valueLabels: options.valueLabels,
+                style: options.valueLabels.style
             }
         });
         this.canvasValueLabels.render(scales, options.charts, engine.data, options.data);

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

@@ -1,10 +1,11 @@
 import { OtherCommonComponents } from "../model";
 import { ElementsOptions, LegendBlockCanvas } from "../../designer/designerConfig";
 import { ModelInstance } from "../modelInstance/modelInstance";
+import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 interface OtherComponentsModelDependencies {
     elementsOptions: ElementsOptions;
     legendConfig: LegendBlockCanvas;
-    title: string;
+    titleConfig: TitleConfigReader;
 }
 export declare class OtherComponentsModel {
     static getOtherComponentsModel(dependencies: OtherComponentsModelDependencies, modelInstance: ModelInstance): OtherCommonComponents;

package/lib/model/featuresModel/otherComponents.js

@@ -4,7 +4,7 @@ import { TooltipModel } from "./tooltipModel";
 export class OtherComponentsModel {
     static getOtherComponentsModel(dependencies, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.title));
+        canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.titleConfig));
         return {
             legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel, dependencies.legendConfig),
             titleBlock: canvasModel.titleCanvas.getModel(),

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

@@ -1,6 +1,5 @@
 import { TitleBlockModel } from "../model";
-import { MdtChartsDataRow, Title } from "../../config/config";
-export declare const getResolvedTitle: (title: Title, dataRows: MdtChartsDataRow[]) => string;
+import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 export declare class TitleModel {
-    static getTitleModel(titleText: string): TitleBlockModel;
+    static getTitleModel(titleConfig: TitleConfigReader): TitleBlockModel;
 }

package/lib/model/featuresModel/titleModel.js

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

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

@@ -1,5 +1,5 @@
 import { ChartOrientation, MdtChartsDataRow, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalValueLabels } from "../../config/config";
-import { GradientDef, MarkDotDatumItem, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels } from "../model";
+import { GradientDef, MarkDotDatumItem, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels, ValueLabelsStyleModel } 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;
@@ -7,6 +7,6 @@ export declare class TwoDimensionalModelHelper {
     private static getGradientItems;
     private static calculateOpacityItem;
     private static getGradientItemColor;
-    static getValueLabels(valueLabels: MdtChartsTwoDimensionalValueLabels, canvasModel: CanvasModel, chartOrientation: ChartOrientation): TwoDimensionalValueLabels;
+    static getValueLabels(valueLabels: MdtChartsTwoDimensionalValueLabels, canvasModel: CanvasModel, chartOrientation: ChartOrientation, styleModel: ValueLabelsStyleModel): TwoDimensionalValueLabels;
     private static getChartBlockSidesOptions;
 }

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -62,8 +62,8 @@ export class TwoDimensionalModelHelper {
         else
             return itemIndex === 0 ? minColor : maxColor;
     }
-    static getValueLabels(valueLabels, canvasModel, chartOrientation) {
-        var _a;
+    static getValueLabels(valueLabels, canvasModel, chartOrientation, styleModel) {
+        var _a, _b;
         const blockSidesOptions = this.getChartBlockSidesOptions(canvasModel);
         const chartBlockConfig = {
             vertical: {
@@ -105,11 +105,12 @@ export class TwoDimensionalModelHelper {
         };
         return {
             collision: {
-                otherValueLables: (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.collision.otherValueLabels) !== null && _a !== void 0 ? _a : {
+                otherValueLables: (_b = (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.collision) === null || _a === void 0 ? void 0 : _a.otherValueLabels) !== null && _b !== void 0 ? _b : {
                     mode: 'none'
                 },
                 chartBlock: chartBlockConfig[chartOrientation]
-            }
+            },
+            style: styleModel
         };
     }
     static getChartBlockSidesOptions(canvasModel) {

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

@@ -2,7 +2,7 @@ import { DesignerConfig } from "../../../designer/designerConfig";
 import { OtherCommonComponents } from "../../model";
 import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
-export declare const AXIS_HORIZONTAL_LABEL_PADDING = 20;
+export declare const AXIS_HORIZONTAL_LABEL_PADDING = 12;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 8;
 export declare class TwoDimMarginModel {
     private designerConfig;

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

@@ -3,9 +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_HORIZONTAL_LABEL_PADDING = 12;
 export const AXIS_VERTICAL_LABEL_PADDING = 8;
 export class TwoDimMarginModel {
     constructor(designerConfig, configReader) {
@@ -108,7 +107,7 @@ export class TwoDimMarginModel {
     }
     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 valueLabelFontSize = this.configReader.getValueLabelsStyleModel().fontSize;
         const axisMarginMapping = {
             top: "bottom",
             bottom: "top"

package/lib/model/model.d.ts

@@ -42,7 +42,7 @@ interface BasicOptionsModel {
 interface GraphicNotationOptionsModel extends BasicOptionsModel {
     legend: ILegendModel;
     data: OptionsModelData;
-    title: string;
+    title: OptionsModelTitle;
     selectable: boolean;
     defs: OptionsModelGradients;
 }
@@ -83,6 +83,10 @@ export interface Field {
     name: string;
     format: DataType;
 }
+export interface OptionsModelTitle {
+    textContent: string;
+    fontSize: number;
+}
 export interface OptionsModelGradients {
     gradients: GradientDef[];
 }
@@ -225,6 +229,7 @@ interface SegmentedBarBorderRadius {
 }
 export interface TwoDimensionalValueLabels {
     collision: ValueLabelsCollision;
+    style: ValueLabelsStyleModel;
 }
 export interface ValueLabelsCollision {
     otherValueLables: OtherValueLables;
@@ -233,6 +238,11 @@ export interface ValueLabelsCollision {
 export interface OtherValueLables {
     mode: ValueLabelsCollisionMode;
 }
+export interface ValueLabelsStyleModel {
+    cssClassName?: string;
+    fontSize: number;
+    color: string;
+}
 export interface ValueLabelsChartBlock {
     left: ValueLabelsChartBlockSide;
     right: ValueLabelsChartBlockSide;

package/lib/model/modelBuilder.js

@@ -6,7 +6,7 @@ import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
 import { ModelInstance } from './modelInstance/modelInstance';
 import { TwoDimConfigReader } from './modelInstance/configReader';
-import { getResolvedTitle } from "../model/featuresModel/titleModel";
+import { TitleConfigReader } from "./modelInstance/titleConfigReader";
 export var AxisType;
 (function (AxisType) {
     AxisType[AxisType["Key"] = 0] = "Key";
@@ -79,7 +79,7 @@ export function assembleModel(config, data, designerConfig) {
     const otherComponents = OtherComponentsModel.getOtherComponentsModel({
         elementsOptions: designerConfig.elementsOptions,
         legendConfig: designerConfig.canvas.legendBlock,
-        title: getResolvedTitle(config.options.title, modelInstance.dataModel.repository.getRawRows())
+        titleConfig: TitleConfigReader.create(config.options.title, modelInstance)
     }, modelInstance);
     const marginModel = new MarginModel(designerConfig, config);
     marginModel.initMargin(otherComponents, modelInstance);

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

@@ -1,6 +1,7 @@
 import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup, ValueLabelsFormatter } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { DataRepositoryModel } from "../../model/modelInstance/dataModel/dataRepository";
+import { ValueLabelsStyleModel } from "../model";
 interface BaseConfigReader {
     getValueFields(): MdtChartsField[];
 }
@@ -23,6 +24,7 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     getValueLabelFormatterForChart(chartIndex: number): ValueLabelsFormatter;
     calculateDefaultAxisLabelFormatter(): AxisLabelFormatter;
     isValueLabelsOn(): boolean;
+    getValueLabelsStyleModel(): ValueLabelsStyleModel;
     private calculateBiggestValueAndDecremented;
     private calculateAxisLabelFormatter;
 }

package/lib/model/modelInstance/configReader.js

@@ -78,6 +78,14 @@ export class TwoDimConfigReader {
     isValueLabelsOn() {
         return this.options.charts.some(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.on; });
     }
+    getValueLabelsStyleModel() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return {
+            fontSize: (_c = (_b = (_a = this.options.valueLabels) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 10,
+            color: (_f = (_e = (_d = this.options.valueLabels) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.color) !== null && _f !== void 0 ? _f : "rgba(68, 68, 68, 0.5)",
+            cssClassName: (_h = (_g = this.options.valueLabels) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.cssClassName
+        };
+    }
     calculateBiggestValueAndDecremented(repository, domain, fields) {
         const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
         if (resolvedDomain && resolvedDomain.end !== -1) {

package/lib/model/modelInstance/dataModel/dataRepository.js

@@ -20,7 +20,8 @@ export class DataRepositoryModel {
             });
         });
         const biggest = Math.max(...values);
-        return [biggest, biggest - 1];
+        const biggestDecremented = Math.abs(biggest) > 1 ? (biggest - 1) : (biggest - 0.1);
+        return [biggest, biggestDecremented];
     }
     initRawFullSource(rawSource) {
         this.rawFullSource = rawSource;

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

@@ -0,0 +1,12 @@
+import { ModelInstance } from "./modelInstance";
+import { MdtChartsDataRow, Title } from "../../config/config";
+export declare class TitleConfigReader {
+    private readonly config;
+    private readonly dataGetter;
+    private readonly defaultCssUnitReader;
+    static create(config: Title, modelInstance: ModelInstance): TitleConfigReader;
+    constructor(config: Title, dataGetter: () => MdtChartsDataRow[], defaultCssUnitReader: () => number);
+    getTextContent(): string;
+    getFontSize(): number;
+    private getResolvedTitle;
+}

package/lib/model/modelInstance/titleConfigReader.js

@@ -0,0 +1,33 @@
+import { ModelHelper } from "../helpers/modelHelper";
+export class TitleConfigReader {
+    constructor(config, dataGetter, defaultCssUnitReader) {
+        this.config = config;
+        this.dataGetter = dataGetter;
+        this.defaultCssUnitReader = defaultCssUnitReader;
+    }
+    static create(config, modelInstance) {
+        return new TitleConfigReader(config, () => modelInstance.dataModel.repository.getRawRows(), () => ModelHelper.getFontSizeCssValue('--chart-title-font-size', 16));
+    }
+    getTextContent() {
+        return this.getResolvedTitle();
+    }
+    getFontSize() {
+        var _a;
+        return typeof this.config === 'object'
+            ? (_a = this.config.fontSize) !== null && _a !== void 0 ? _a : this.defaultCssUnitReader() : this.defaultCssUnitReader();
+    }
+    getResolvedTitle() {
+        switch (typeof this.config) {
+            case 'string':
+                return this.config;
+            case "function":
+                return this.config({ data: this.dataGetter() });
+            case "object":
+                return typeof this.config.text === 'function'
+                    ? this.config.text({ data: this.dataGetter() })
+                    : this.config.text;
+            default:
+                return '';
+        }
+    }
+}

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

@@ -1,15 +1,17 @@
 import { ChartStyleModelService } from "../../chartStyleModel/chartStyleModel";
 import { DonutModel } from "./donut/donutModel";
-import { getResolvedTitle } from "../../../model/featuresModel/titleModel";
+import { TitleConfigReader } from "../../modelInstance/titleConfigReader";
 export const MIN_DONUT_BLOCK_SIZE = 120;
 export class PolarModel {
     static getOptions(options, designerConfig, modelInstance) {
-        const dataRows = modelInstance.dataModel.repository.getRawRows();
-        const resolvedTitle = getResolvedTitle(options.title, dataRows);
+        const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         return {
             type: options.type,
             selectable: !!options.selectable,
-            title: resolvedTitle,
+            title: {
+                textContent: titleConfig.getTextContent(),
+                fontSize: titleConfig.getFontSize(),
+            },
             data: Object.assign({}, options.data),
             charts: this.getChartsModel(options.chart, modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle),
             legend: modelInstance.canvasModel.legendCanvas.getModel(),

package/lib/model/notations/twoDimensionalModel.js

@@ -4,14 +4,15 @@ import { AxisModel } from "../featuresModel/axisModel";
 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 } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
+import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
         const scaleModel = new ScaleModel();
+        const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
@@ -26,7 +27,10 @@ export class TwoDimensionalModel {
         const defaultFormatter = configReader.calculateDefaultAxisLabelFormatter();
         return {
             legend: canvasModel.legendCanvas.getModel(),
-            title: getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows()),
+            title: {
+                textContent: titleConfig.getTextContent(),
+                fontSize: titleConfig.getFontSize(),
+            },
             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 })),
@@ -37,7 +41,7 @@ export class TwoDimensionalModel {
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
-            valueLabels: TwoDimensionalModelHelper.getValueLabels(options.valueLabels, canvasModel, options.orientation),
+            valueLabels: TwoDimensionalModelHelper.getValueLabels(options.valueLabels, canvasModel, options.orientation, configReader.getValueLabelsStyleModel()),
             defs: {
                 gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
             }
@@ -67,7 +71,6 @@ export class TwoDimensionalModel {
     }
     static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName) {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
-        this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;

package/lib/style/charts-main.css

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

package/lib/style/charts-main.less

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

package/package.json

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