mdt-charts 1.25.0 → 1.26.1

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/bar/bar.d.ts

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

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

@@ -18,15 +18,15 @@ export class Bar {
     static get() {
         return new Bar();
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
-        if (isSegmented)
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, firstBarIndex) {
+        if (chart.isSegmented)
             this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings);
         else
             this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
     }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings, isSegmented) {
+    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
         let promises;
-        if (isSegmented) {
+        if (chart.isSegmented) {
             promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
         }
         else {
@@ -54,7 +54,7 @@ export class Bar {
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             bars = this.createBarPipeline.execute(bars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
             DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
             DomHelper.setChartStyle(bars, chart.style, index, 'fill');
@@ -82,7 +82,7 @@ export class Bar {
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         bars = this.createBarPipeline.execute(bars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
         DomHelper.setCssClasses(groups, chart.cssClasses);
@@ -123,7 +123,7 @@ export class Bar {
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             newBars = this.createBarPipeline.execute(newBars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
             const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
                 .then(() => {
                 bars.style('opacity', null);
@@ -166,7 +166,7 @@ export class Bar {
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         newBars = this.createBarPipeline.execute(newBars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
         const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
             .then(() => {
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);

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

@@ -41,13 +41,6 @@ export declare class BarHelper {
     static getGroupedBarAttrs(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, valueFieldName: string, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
     static getStackedBarAttr(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
     static getBarsInGroupAmount(charts: TwoDimensionalChartModel[]): number[];
-    /**
-     * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
-     * этот бар идет (сегментированный всегда один, группированный - количество value-филдов).
-     * @param barsAmounts
-     * @param chartIndex
-     */
-    static getBarIndex(barsAmounts: number[], chartIndex: number): number;
     static setBarAttrsByKey(attrs: BarAttrsHelper, keyAxisOrient: Orient, scaleKey: AxisScale<any>, margin: BlockMargin, keyField: string, barIndex: number, settingsStore: BandLikeChartSettingsStore, isSegmented: boolean): void;
     private static setGroupedBarAttrsByValue;
     static getBandItemValueStretch(scaleValue: AxisScale<any>, valueFieldName: string): (dataRow: MdtChartsDataRow) => number;

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

@@ -63,23 +63,6 @@ export class BarHelper {
         });
         return amounts;
     }
-    /**
-     * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
-     * этот бар идет (сегментированный всегда один, группированный - количество value-филдов).
-     * @param barsAmounts
-     * @param chartIndex
-     */
-    static getBarIndex(barsAmounts, chartIndex) {
-        if (barsAmounts.length < 2)
-            return 0;
-        let index = 0;
-        barsAmounts.forEach((chartBars, i) => {
-            if (i < chartIndex) {
-                index += chartBars;
-            }
-        });
-        return index;
-    }
     static setBarAttrsByKey(attrs, keyAxisOrient, scaleKey, margin, keyField, barIndex, settingsStore, isSegmented) {
         if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
             attrs.x = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left + settingsStore.getBandItemPad(barIndex);

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

package/lib/model/featuresModel/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;
@@ -307,6 +317,7 @@ interface TwoDimensionalBarLikeChartModel {
 export interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
     borderRadius: BarLikeChartBorderRadius;
+    barIndexes: number[];
 }
 interface TwoDimensionalAreaChartModel {
     areaViewOptions: AreaChartViewOptions;

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/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/twoDimensional/styles.d.ts

@@ -4,7 +4,8 @@ import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
 export declare const LINE_CHART_DEFAULT_WIDTH = 2;
 export declare function parseShape(chartOrientation: ChartOrientation, configOptions?: MdtChartsLineLikeChartShape): LineLikeChartShapeOptions;
 export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDashedStyles): LineLikeChartDashOptions;
-export declare function getBarViewOptions(chart: MdtChartsTwoDimensionalChart, keyAxisOrient: Orient): TwoDimensionalBarLikeChartViewModel;
+export declare function getBarViewOptions(chart: MdtChartsTwoDimensionalChart, keyAxisOrient: Orient, barIndexes: number[]): TwoDimensionalBarLikeChartViewModel;
+export declare function calculateBarIndexes(allCharts: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">[], currentChart: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">, currentChartIndex: number): number[];
 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;

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

@@ -29,7 +29,7 @@ export function parseDashStyles(configOptions) {
         gapSize: (_c = configOptions === null || configOptions === void 0 ? void 0 : configOptions.gapSize) !== null && _c !== void 0 ? _c : DEFAULT_GAP_SIZE_PX
     };
 }
-export function getBarViewOptions(chart, keyAxisOrient) {
+export function getBarViewOptions(chart, keyAxisOrient, barIndexes) {
     var _a, _b, _c, _d, _e, _f;
     const 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 };
     const defaultRadius = (_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;
@@ -39,7 +39,14 @@ export function getBarViewOptions(chart, keyAxisOrient) {
             handle: (valueIndex) => getSegmentedRadiusValues(chart.data.valueFields.length, valueIndex, keyAxisOrient, defaultRadius),
         }
     };
-    return { hatch, borderRadius };
+    return { hatch, borderRadius, barIndexes };
+}
+export function calculateBarIndexes(allCharts, currentChart, currentChartIndex) {
+    const prevBarCharts = allCharts.slice(0, currentChartIndex).filter(ch => ch.type === "bar");
+    const startBarIndex = prevBarCharts.reduce((acc, ch) => acc + (ch.isSegmented ? 1 : ch.data.valueFields.length), 0);
+    if (currentChart.isSegmented)
+        return [startBarIndex];
+    return currentChart.data.valueFields.map((_, index) => startBarIndex + index);
 }
 function getRadiusValues(defaultRadius) {
     return {

package/lib/model/notations/twoDimensionalModel.js

@@ -3,15 +3,16 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensional
 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 { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
 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)
             }
@@ -98,7 +102,7 @@ export class TwoDimensionalModel {
                     strokeWidth: (_m = (_l = chart.lineStyles) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
-                barViewOptions: getBarViewOptions(chart, keyAxisOrient),
+                barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {

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.25.0",
+  "version": "1.26.1",
   "description": "",
   "main": "lib/main.js",
   "scripts": {