mdt-charts 1.26.0 → 1.26.2

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

@@ -24,12 +24,14 @@ export interface ValueLabelAttrs {
 export declare class ChartValueLabels {
     private readonly globalOptions;
     private readonly chart;
-    private static readonly valueLabelClass;
+    static readonly valueLabelClass: string;
     private readonly renderPipeline;
+    private readonly attrsProvider;
     constructor(globalOptions: ValueLabelsOptions, chart: TwoDimensionalChartModel);
     render(scales: Scales, data: MdtChartsDataRow[]): void;
     update(scales: Scales, newData: MdtChartsDataRow[]): Promise<void[]>;
-    static getChartValueLabelsClassName(): string;
+    private renderByGroupIndex;
+    private updateByGroupIndex;
     private getAllValueLabelsOfChart;
     private setAttrs;
     private setClasses;

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

@@ -1,16 +1,18 @@
 import { NamesHelper } from "../../../engine/helpers/namesHelper";
-import { ValueLabelsHelper } from "../../../engine/features/valueLabels/valueLabelsHelper";
+import { ValueLabelsAttrsProvider } from "../../../engine/features/valueLabels/valueLabelsHelper";
 import { Helper } from "../../../engine/helpers/helper";
 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";
+import { getStackedData } from "../../twoDimensionalNotation/line/lineHelper";
 export class ChartValueLabels {
     constructor(globalOptions, chart) {
         this.globalOptions = globalOptions;
         this.chart = chart;
         this.renderPipeline = new Pipeline();
+        this.attrsProvider = new ValueLabelsAttrsProvider();
         this.renderPipeline.push((valueLabels, { style }) => {
             valueLabels
                 .attr('fill', 'currentColor')
@@ -22,50 +24,70 @@ export class ChartValueLabels {
         });
     }
     render(scales, data) {
-        this.chart.data.valueFields.forEach((valueField, 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);
-        });
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(data, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, '1', d => d.data);
+            });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, d => d);
+            });
+        }
     }
     update(scales, newData) {
         const updatePromises = [];
-        this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-            const updateProms = new Promise((resolve) => {
-                const valueLabels = this.getAllValueLabelsOfChart(vfIndex)
-                    .data(newData);
-                valueLabels.exit().remove();
-                const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
-                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);
-                this.setAttrs(valueLabels, attrs, valueField.name, this.chart.valueLabels.format, true, resolve);
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(newData, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                const promise = this.updateByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, '1', d => d.data);
+                updatePromises.push(promise);
             });
-            updatePromises.push(updateProms);
-        });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                const promise = this.updateByGroupIndex(scales, vfIndex, newData, valueField.name, valueField.name, d => d);
+                updatePromises.push(promise);
+            });
+        }
         return Promise.all(updatePromises);
     }
-    static getChartValueLabelsClassName() {
-        return ChartValueLabels.valueLabelClass;
+    renderByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        let valueLabels = this.getAllValueLabelsOfChart(groupIndex)
+            .data(data)
+            .enter()
+            .append('text');
+        valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
+        const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.chart.valueLabels, scales, datumField, dataRowAccessor);
+        this.setAttrs(valueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor);
+        this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
+    }
+    updateByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        return new Promise((resolve) => {
+            const valueLabels = this.getAllValueLabelsOfChart(groupIndex)
+                .data(data);
+            valueLabels.exit().remove();
+            const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.chart.valueLabels, scales, datumField, dataRowAccessor);
+            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, valueFieldName, this.chart.valueLabels.format, dataRowAccessor);
+            this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
+            this.setAttrs(valueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor, true, resolve);
+        });
     }
     getAllValueLabelsOfChart(vfIndex) {
         const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
         return block
             .selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
     }
-    setAttrs(valueLabels, attrs, valueFieldName, formatter, animate = false, onEndAnimation) {
+    setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
         const animationName = 'labels-updating';
         valueLabels
-            .text(d => formatter(d[valueFieldName]))
+            .text(d => formatter(dataRowAccessor(d)[valueFieldName]))
             .attr('dominant-baseline', attrs.dominantBaseline)
             .attr('text-anchor', attrs.textAnchor);
         if (animate) {
@@ -136,7 +158,7 @@ export class CanvasValueLabels {
     getAllValueLabels() {
         const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
         return block
-            .selectAll(`.${ChartValueLabels.getChartValueLabelsClassName()}`);
+            .selectAll(`.${ChartValueLabels.valueLabelClass}`);
     }
     getChartScales(scales, chart) {
         return {

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

@@ -1,6 +1,8 @@
 import { ValueLabelAttrs, ValueLabelsOptions } from "../../../engine/features/valueLabels/valueLabels";
-import { TwoDimChartValueLabelsOptions, ValueField } from "../../../model/model";
+import { TwoDimChartValueLabelsOptions } from "../../../model/model";
 import { Scales } from "../../../engine/features/scale/scale";
-export declare class ValueLabelsHelper {
-    static getValueLabelsAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, valueField: ValueField): ValueLabelAttrs;
+import { Segment } from "../../twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
+import { MdtChartsDataRow } from "../../../config/config";
+export declare class ValueLabelsAttrsProvider {
+    getAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, datumField: string, dataRowAccessor: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow): ValueLabelAttrs;
 }

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

@@ -1,6 +1,6 @@
 import { Scale } from "../../../engine/features/scale/scale";
-export class ValueLabelsHelper {
-    static getValueLabelsAttrs(globalOptions, valueLabels, scales, valueField) {
+export class ValueLabelsAttrsProvider {
+    getAttrs(globalOptions, valueLabels, scales, datumField, dataRowAccessor) {
         let attrs = {
             x: null,
             y: null,
@@ -9,12 +9,12 @@ export class ValueLabelsHelper {
         };
         const orient = globalOptions.canvas.keyAxisOrient;
         if (orient === 'left' || orient === 'right') {
-            attrs.x = d => valueLabels.handleX(scales.value(d[valueField.name]));
-            attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, d[globalOptions.data.keyFieldName]));
+            attrs.x = d => valueLabels.handleX(scales.value(d[datumField]));
+            attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
         }
         else if (orient === 'bottom' || orient === 'top') {
-            attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, d[globalOptions.data.keyFieldName]));
-            attrs.y = d => valueLabels.handleY(scales.value(d[valueField.name]));
+            attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
+            attrs.y = d => valueLabels.handleY(scales.value(d[datumField]));
         }
         return attrs;
     }

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[]): void;
+    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, 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,19 +18,19 @@ export class Bar {
     static get() {
         return new Bar();
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
-        if (isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings);
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts) {
+        if (chart.isSegmented)
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings);
         else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings);
     }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings, isSegmented) {
+    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
         let promises;
-        if (isSegmented) {
-            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+        if (chart.isSegmented) {
+            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings);
         }
         else {
-            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings);
         }
         return promises;
     }
@@ -44,7 +44,7 @@ export class Bar {
     getAllBarsForChart(block, chartCssClasses) {
         return block.getSvg().selectAll(`rect.${this.barItemClass}${Helper.getCssClassesLine(chartCssClasses)}`);
     }
-    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
             let bars = block.svg.getChartGroup(chart.index)
                 .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`)
@@ -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');
@@ -63,7 +63,7 @@ export class Bar {
                 EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
         });
     }
-    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         let groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -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);
@@ -95,7 +95,7 @@ export class Bar {
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
     }
-    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
@@ -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);
@@ -144,7 +144,7 @@ export class Bar {
         });
         return promises;
     }
-    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -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

@@ -124,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));
             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')
@@ -141,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, 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/model.d.ts

@@ -317,6 +317,7 @@ interface TwoDimensionalBarLikeChartModel {
 export interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
     borderRadius: BarLikeChartBorderRadius;
+    barIndexes: number[];
 }
 interface TwoDimensionalAreaChartModel {
     areaViewOptions: AreaChartViewOptions;

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,7 +3,7 @@ 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 { 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";
@@ -102,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/package.json

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