mdt-charts 1.37.1 → 1.37.3

package/lib/engine/features/markDots/markDotsHelper.js

@@ -5,10 +5,12 @@ export class MarkDotHelper {
         const attrs = { cx: null, cy: null };
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
             attrs.cx = (d) => scales.value(d[valueField]) + margin.left;
-            attrs.cy = (d) => Scale.getScaledValue(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top;
+            attrs.cy = (d) => Scale.getScaledValueOnMiddleOfItem(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) +
+                margin.top;
         }
         else if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
-            attrs.cx = (d) => Scale.getScaledValue(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left;
+            attrs.cx = (d) => Scale.getScaledValueOnMiddleOfItem(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) +
+                margin.left;
             attrs.cy = (d) => scales.value(d[valueField]) + margin.top;
         }
         return attrs;

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

@@ -14,9 +14,8 @@ export declare class Scale {
     static getScaleValue(scaleValue: ScaleValueModel): ScaleLinear<number, number, number>;
     static getScaleBandWidth(scale: AxisScale<any>): number;
     static getScaleStep(scale: AxisScale<any>): number;
-    static getScaledValue(scale: AxisScale<any>, value: any): number;
+    static getScaledValueOnMiddleOfItem(scale: AxisScale<any>, value: any): number;
     static getScaleBandNew(scaleKey: ScaleBandModel): ScaleBand<string>;
-    private static getScaleBand;
     private static getScaleLinear;
     private static getScalePoint;
 }

package/lib/engine/features/scale/scale.js

@@ -34,7 +34,7 @@ export class Scale {
             return scale.step();
         }
     }
-    static getScaledValue(scale, value) {
+    static getScaledValueOnMiddleOfItem(scale, value) {
         if (scale.bandwidth && scale.bandwidth() !== 0) {
             return scale(value) + this.getScaleBandWidth(scale) / 2;
         }
@@ -47,32 +47,6 @@ export class Scale {
             .paddingInner(scaleKey.sizes.paddingInner / scaleKey.sizes.oneKeyTotalSpace)
             .paddingOuter(scaleKey.sizes.paddingOuter / scaleKey.sizes.recalculatedStepSize);
     }
-    //TODO: remove after tests of new way to create scale band
-    static getScaleBand(domain, range, bandSettings, elementsInGroupAmount) {
-        const scale = scaleBand().domain(domain).range([range.start, range.end]);
-        const bandSize = scale.bandwidth();
-        if (bandSettings.groupMinDistance < bandSize) {
-            scale.paddingInner(bandSettings.groupMinDistance / bandSize);
-            scale.paddingOuter(bandSettings.groupMinDistance / bandSize / 2);
-        }
-        // Padding inner = 10. If bandwidth more than needed, paddingInner is increased to number less than 35
-        let paddingInner = bandSettings.groupMinDistance;
-        while (scale.bandwidth() >
-            bandSettings.maxBarWidth * elementsInGroupAmount +
-                bandSettings.barDistance * (elementsInGroupAmount - 1) &&
-            paddingInner < bandSettings.groupMaxDistance) {
-            scale.paddingInner(++paddingInner / bandSize);
-        }
-        // if bandwidth more than all bars widths in group + distance between it + distance between groups
-        let paddingOuter = 1;
-        while (scale.step() >
-            bandSettings.maxBarWidth * elementsInGroupAmount +
-                bandSettings.groupMaxDistance +
-                bandSettings.barDistance * (elementsInGroupAmount - 1)) {
-            scale.paddingOuter(++paddingOuter / bandSize);
-        }
-        return scale;
-    }
     static getScaleLinear(domain, range) {
         const scale = scaleLinear().domain(domain).range([range.start, range.end]);
         scale.unknown(scale(0));

package/lib/engine/features/tolltip/tooltipHelper.js

@@ -37,14 +37,16 @@ export class TooltipHelper {
             left: null
         };
         if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
-            coordinate.left = Scale.getScaledValue(scaleKey, keyValue) + margin.left - tooltipBoundingRect.width / 2;
+            coordinate.left =
+                Scale.getScaledValueOnMiddleOfItem(scaleKey, keyValue) + margin.left - tooltipBoundingRect.width / 2;
             if (keyAxisOrient === "bottom")
                 coordinate.top = margin.top - 5 - tooltipBoundingRect.height;
             else
                 coordinate.top = blockBoundingRect.height - margin.bottom;
         }
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
-            coordinate.top = Scale.getScaledValue(scaleKey, keyValue) + margin.top - tooltipBoundingRect.height / 2;
+            coordinate.top =
+                Scale.getScaledValueOnMiddleOfItem(scaleKey, keyValue) + margin.top - tooltipBoundingRect.height / 2;
             if (keyAxisOrient === "left")
                 coordinate.left = blockBoundingRect.width - margin.right;
             else
@@ -68,16 +70,16 @@ export class TooltipHelper {
             y2: 0
         };
         if (chartOrientation === "vertical") {
-            attributes.x1 = Math.ceil(Scale.getScaledValue(scaleKey, key) + margin.left) - 0.5;
-            attributes.x2 = Math.ceil(Scale.getScaledValue(scaleKey, key) + margin.left) - 0.5;
+            attributes.x1 = Math.ceil(Scale.getScaledValueOnMiddleOfItem(scaleKey, key) + margin.left) - 0.5;
+            attributes.x2 = Math.ceil(Scale.getScaledValueOnMiddleOfItem(scaleKey, key) + margin.left) - 0.5;
             attributes.y1 = margin.top - this.convexsize;
             attributes.y2 = blockSize.height - margin.bottom + this.convexsize * 2;
         }
         else {
             attributes.x1 = margin.left - this.convexsize;
             attributes.x2 = blockSize.width - margin.right + this.convexsize * 2;
-            attributes.y1 = Scale.getScaledValue(scaleKey, key) + margin.top;
-            attributes.y2 = Scale.getScaledValue(scaleKey, key) + margin.top;
+            attributes.y1 = Scale.getScaledValueOnMiddleOfItem(scaleKey, key) + margin.top;
+            attributes.y2 = Scale.getScaledValueOnMiddleOfItem(scaleKey, key) + margin.top;
         }
         return attributes;
     }

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

@@ -66,7 +66,7 @@ export class ChartValueLabels {
     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.options, scales, datumField, dataRowAccessor);
+        const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor, groupIndex);
         this.setAttrs(valueLabels, attrs, valueFieldName, dataRowAccessor);
         this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
     }
@@ -74,7 +74,7 @@ export class ChartValueLabels {
         return new Promise((resolve) => {
             const valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data);
             valueLabels.exit().remove();
-            const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor);
+            const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor, groupIndex);
             if (!valueFieldName) {
                 resolve();
                 return;

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

@@ -4,5 +4,5 @@ import { Scales } from "../../../engine/features/scale/scale";
 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;
+    getAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, datumField: string, dataRowAccessor: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow, fieldIndexInChart: number): ValueLabelAttrs;
 }

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

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

package/lib/engine/twoDimensionalNotation/area/areaHelper.js

@@ -19,10 +19,10 @@ export class AreaGeneratorFactory {
             ]
         });
         if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
-            return generator.getVertical((d) => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, (d) => scales.value(0) + margin.top, (d) => scales.value(d[valueFieldName]) + margin.top);
+            return generator.getVertical((d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d[keyFieldName]) + margin.left, (d) => scales.value(0) + margin.top, (d) => scales.value(d[valueFieldName]) + margin.top);
         }
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
-            return generator.getHorizontal((d) => scales.value(0) + margin.left, (d) => scales.value(d[valueFieldName]) + margin.left, (d) => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+            return generator.getHorizontal((d) => scales.value(0) + margin.left, (d) => scales.value(d[valueFieldName]) + margin.left, (d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d[keyFieldName]) + margin.top);
         }
     }
     getSegmentedAreaGenerator() {
@@ -38,10 +38,10 @@ export class AreaGeneratorFactory {
             ]
         });
         if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
-            return generator.getVertical((d) => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, (d) => scales.value(d[0]) + margin.top, (d) => scales.value(d[1]) + margin.top);
+            return generator.getVertical((d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d.data[keyFieldName]) + margin.left, (d) => scales.value(d[0]) + margin.top, (d) => scales.value(d[1]) + margin.top);
         }
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
-            return generator.getHorizontal((d) => scales.value(d[0]) + margin.left, (d) => scales.value(d[1]) + margin.left, (d) => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
+            return generator.getHorizontal((d) => scales.value(d[0]) + margin.left, (d) => scales.value(d[1]) + margin.left, (d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d.data[keyFieldName]) + margin.top);
         }
     }
 }

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[]): void;
-    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, barSettings: BarChartSettings): Promise<any>[];
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings): void;
+    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, 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

@@ -2,7 +2,6 @@ import { select } from "d3-selection";
 import { EmbeddedLabels } from "../../features/embeddedLabels/embeddedLabels";
 import { EmbeddedLabelsHelper } from "../../features/embeddedLabels/embeddedLabelsHelper";
 import { BarHelper, onBarChartInit } from "./barHelper";
-import { sum } from "d3-array";
 import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { getStackedDataWithOwn } from "./stackedData/dataStacker";
@@ -18,19 +17,19 @@ export class Bar {
     static get() {
         return new Bar();
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts) {
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings) {
         if (chart.isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings);
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barSettings);
         else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings);
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings);
     }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
+    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, keyField, barSettings) {
         let promises;
         if (chart.isSegmented) {
-            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings);
+            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, keyField, barSettings);
         }
         else {
-            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings);
+            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, keyField, barSettings);
         }
         return promises;
     }
@@ -45,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, barSettings) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
             let bars = block.svg
                 .getChartGroup(chart.index)
@@ -56,7 +55,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, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, chart.barViewOptions.barIndexes[index], chart.bandLikeViewOptions.settingsStore);
             this.fillBarAttrs(bars, barAttrs);
             DomSelectionHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
             DomSelectionHelper.setChartStyle(bars, chart.style, index, "fill");
@@ -65,7 +64,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, barSettings) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map((field) => field.name));
         let groups = block.svg
             .getChartGroup(chart.index)
@@ -81,7 +80,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, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], chart.bandLikeViewOptions.settingsStore);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
         DomSelectionHelper.setCssClasses(groups, chart.cssClasses);
@@ -94,7 +93,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, barSettings) {
+    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, keyField, barSettings) {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
@@ -124,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, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, chart.barViewOptions.barIndexes[index], chart.bandLikeViewOptions.settingsStore);
             const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
                 bars.style("opacity", null);
                 this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
@@ -144,7 +143,7 @@ export class Bar {
         });
         return promises;
     }
-    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
+    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, keyField, barSettings) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map((field) => field.name));
         block.svg
             .getChartGroup(chart.index)
@@ -169,7 +168,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, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], chart.bandLikeViewOptions.settingsStore);
         const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
             bars.style("opacity", null);

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

@@ -1,5 +1,5 @@
 import { AxisScale } from "d3-axis";
-import { BarBorderRadius, BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { BandLikeChartSettingsStore, BarBorderRadius, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { MdtChartsDataRow } from "../../../config/config";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
@@ -14,33 +14,9 @@ export interface GroupBarsSegment {
     segmentIndex: number;
     chart: TwoDimensionalChartModel;
 }
-interface BandLikeChartSettingsStore {
-    getBandItemSize(): number;
-    getBandItemPad(bandItemIndex: number): number;
-}
-export declare class DotChartSettingsStore implements BandLikeChartSettingsStore {
-    private readonly canvasConfig;
-    constructor(canvasConfig: {
-        scaleBandWidth: number;
-    });
-    getBandItemSize(): number;
-    getBandItemPad(): number;
-}
-export declare class BarSettingsStore implements BandLikeChartSettingsStore {
-    private readonly modelSettings;
-    private readonly canvasConfig;
-    constructor(modelSettings: BarChartSettings, canvasConfig: {
-        scaleBandWidth: number;
-        barsAmount: number;
-    });
-    getBandItemSize(): number;
-    getBandItemPad(barIndex: number): number;
-    private getBarStep;
-}
 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[];
+    static getGroupedBarAttrs(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, valueFieldName: string, barIndex: number, settingsStore: BandLikeChartSettingsStore): BarAttrsHelper;
+    static getStackedBarAttr(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, barIndex: number, settingsStore: BandLikeChartSettingsStore): BarAttrsHelper;
     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;
@@ -49,4 +25,3 @@ export declare class BarHelper {
 }
 export declare function onBarChartInit(createBarPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, TwoDimensionalChartModel>, createSegmentGroupBarsPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, GroupBarsSegment>): void;
 export declare function getClipPathValue({ topLeft, topRight, bottomLeft, bottomRight }: BarBorderRadius): string;
-export {};

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

@@ -1,81 +1,40 @@
-import { Scale } from "../../features/scale/scale";
 import { Helper } from "../../helpers/helper";
 import { HatchPatternDef } from "../../block/defs/hatchPattern";
-export class DotChartSettingsStore {
-    constructor(canvasConfig) {
-        this.canvasConfig = canvasConfig;
-    }
-    getBandItemSize() {
-        return this.canvasConfig.scaleBandWidth;
-    }
-    getBandItemPad() {
-        return 0;
-    }
-}
-export class BarSettingsStore {
-    constructor(modelSettings, canvasConfig) {
-        this.modelSettings = modelSettings;
-        this.canvasConfig = canvasConfig;
-    }
-    getBandItemSize() {
-        const barSize = this.getBarStep() > this.modelSettings.maxBarWidth ? this.modelSettings.maxBarWidth : this.getBarStep();
-        return barSize;
-    }
-    getBandItemPad(barIndex) {
-        const barDiff = ((this.getBarStep() - this.getBandItemSize()) * this.canvasConfig.barsAmount) / 2; // if bar bigger than maxWidth, diff for x coordinate
-        const barPad = this.getBandItemSize() * barIndex + this.modelSettings.barDistance * barIndex + barDiff; // Отступ бара от края. Зависит от количества баров в одной группе и порядке текущего бара
-        return barPad;
-    }
-    getBarStep() {
-        return ((this.canvasConfig.scaleBandWidth - this.modelSettings.barDistance * (this.canvasConfig.barsAmount - 1)) /
-            this.canvasConfig.barsAmount); // Space for one bar
-    }
-}
 export class BarHelper {
-    static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, barIndex, barsAmount, barSettings) {
+    static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, barIndex, settingsStore) {
         const attrs = {
             x: null,
             y: null,
             width: null,
             height: null
         };
-        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, new BarSettingsStore(barSettings, { scaleBandWidth: Scale.getScaleBandWidth(scales.key), barsAmount }), false);
+        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, settingsStore, false);
         this.setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scales.value, valueFieldName);
         return attrs;
     }
-    static getStackedBarAttr(keyAxisOrient, scales, margin, keyField, barIndex, barsAmount, barSettings) {
+    static getStackedBarAttr(keyAxisOrient, scales, margin, keyField, barIndex, settingsStore) {
         const attrs = {
             x: null,
             y: null,
             width: null,
             height: null
         };
-        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, new BarSettingsStore(barSettings, { scaleBandWidth: Scale.getScaleBandWidth(scales.key), barsAmount }), true);
+        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, settingsStore, true);
         this.setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scales.value, margin);
         return attrs;
     }
-    static getBarsInGroupAmount(charts) {
-        let amounts = [];
-        charts.forEach((chart) => {
-            if (chart.type === "bar" && chart.isSegmented)
-                amounts.push(1); // Сегментированный бар содержит все свои valueFields в одном баре
-            else if (chart.type === "bar")
-                amounts.push(chart.data.valueFields.length);
-        });
-        return amounts;
-    }
     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);
-            attrs.width = (d) => settingsStore.getBandItemSize();
+            attrs.width = (d) => settingsStore.getBandSubItemSize();
         }
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
             attrs.y = (d) => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) +
                 margin.top +
                 settingsStore.getBandItemPad(barIndex);
-            attrs.height = (d) => settingsStore.getBandItemSize();
+            attrs.height = (d) => settingsStore.getBandSubItemSize();
         }
     }
     static setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scaleValue, valueFieldName) {

package/lib/engine/twoDimensionalNotation/dot/dotChart.js

@@ -1,8 +1,7 @@
-import { Scale } from "../../features/scale/scale";
 import { DomSelectionHelper } from "../../helpers/domSelectionHelper";
 import { Helper } from "../../helpers/helper";
 import { NamesHelper } from "../../helpers/namesHelper";
-import { BarHelper, DotChartSettingsStore } from "../bar/barHelper";
+import { BarHelper } from "../bar/barHelper";
 /**
  * @alpha experimental feature. Need to refactor.
  */
@@ -79,21 +78,21 @@ export class CanvasDotChart {
             x2: null,
             y2: null
         };
-        const settingsStore = new DotChartSettingsStore({ scaleBandWidth: Scale.getScaleBandWidth(scales.key) });
+        const settingsStore = chart.bandLikeViewOptions.settingsStore;
         // TODO: refactor
         if (this.options.canvas.keyAxisOrient === "top" || this.options.canvas.keyAxisOrient === "bottom") {
             const handleBase = (d) => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
                 margin.left +
-                settingsStore.getBandItemPad();
+                settingsStore.getBandItemPad(0);
             attrs.x1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
-            attrs.x2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+            attrs.x2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandSubItemSize());
         }
         if (this.options.canvas.keyAxisOrient === "left" || this.options.canvas.keyAxisOrient === "right") {
             const handleBase = (d) => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
                 margin.top +
-                settingsStore.getBandItemPad();
+                settingsStore.getBandItemPad(0);
             attrs.y1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
-            attrs.y2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+            attrs.y2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandSubItemSize());
         }
         if (this.options.canvas.keyAxisOrient === "top") {
             attrs.y1 = (d) => scales.value(Math.min(d[field.name], 0)) +

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

@@ -20,10 +20,10 @@ export class LineGeneratorFactory {
             ]
         });
         if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
-            return generator.get((d) => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, (d) => scales.value(d[valueFieldName]) + margin.top);
+            return generator.get((d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d[keyFieldName]) + margin.left, (d) => scales.value(d[valueFieldName]) + margin.top);
         }
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
-            return generator.get((d) => scales.value(d[valueFieldName]) + margin.left, (d) => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+            return generator.get((d) => scales.value(d[valueFieldName]) + margin.left, (d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d[keyFieldName]) + margin.top);
         }
     }
     getSegmentedLineGenerator() {
@@ -39,10 +39,10 @@ export class LineGeneratorFactory {
             ]
         });
         if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
-            return generator.get((d) => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, (d) => scales.value(d[1]) + margin.top);
+            return generator.get((d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d.data[keyFieldName]) + margin.left, (d) => scales.value(d[1]) + margin.top);
         }
         if (keyAxisOrient === "left" || keyAxisOrient === "right") {
-            return generator.get((d) => scales.value(d[1]) + margin.left, (d) => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
+            return generator.get((d) => scales.value(d[1]) + margin.left, (d) => Scale.getScaledValueOnMiddleOfItem(scales.key, d.data[keyFieldName]) + margin.top);
         }
     }
 }

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -10,7 +10,6 @@ import { Tooltip } from "../features/tolltip/tooltip";
 import { Helper } from "../helpers/helper";
 import { Area } from "./area/area";
 import { Bar } from "./bar/bar";
-import { BarHelper } from "./bar/barHelper";
 import { Line } from "./line/line";
 import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels";
 import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
@@ -142,7 +141,7 @@ export class TwoDimensionalManager {
                 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));
+                Bar.get().render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, chartSettings.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")
@@ -162,7 +161,7 @@ export class TwoDimensionalManager {
             };
             let proms;
             if (chart.type === "bar") {
-                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, chartSettings.bar);
+                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, 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/featuresModel/bandLikeCharts/bandLikeChartSettings.d.ts

@@ -0,0 +1,3 @@
+import { TwoDimensionalChartType } from "../../../config/config";
+import { BandLikeChartSettingsStore, BarChartSettings, ScaleKeyModel } from "../../model";
+export declare function createBandLikeChartSettingsStore(chartType: TwoDimensionalChartType, modelSettings: BarChartSettings, oneKeyBarsAmount: number, keyScale: ScaleKeyModel): BandLikeChartSettingsStore | undefined;

package/lib/model/featuresModel/bandLikeCharts/bandLikeChartSettings.js

@@ -0,0 +1,10 @@
+import { BarSettingsStore } from "./barChartSettingsStore";
+import { DotChartSettingsStore } from "./dotChartSettingsStore";
+export function createBandLikeChartSettingsStore(chartType, modelSettings, oneKeyBarsAmount, keyScale) {
+    const scaleBandWidth = keyScale.type === "band" ? keyScale.sizes.bandSize : 0;
+    if (chartType === "bar")
+        return new BarSettingsStore(modelSettings, { oneKeyBarsAmount, scaleBandWidth });
+    if (chartType === "dot")
+        return new DotChartSettingsStore({ scaleBandWidth });
+    return undefined;
+}

package/lib/model/featuresModel/bandLikeCharts/barChartSettingsStore.d.ts

@@ -0,0 +1,11 @@
+import { BandLikeChartSettingsStore, BarChartSettings } from "../../model";
+export declare class BarSettingsStore implements BandLikeChartSettingsStore {
+    private readonly modelSettings;
+    private readonly canvasConfig;
+    constructor(modelSettings: BarChartSettings, canvasConfig: {
+        scaleBandWidth: number;
+        oneKeyBarsAmount: number;
+    });
+    getBandSubItemSize(): number;
+    getBandItemPad(barIndex: number): number;
+}

package/lib/model/featuresModel/bandLikeCharts/barChartSettingsStore.js

@@ -0,0 +1,14 @@
+export class BarSettingsStore {
+    constructor(modelSettings, canvasConfig) {
+        this.modelSettings = modelSettings;
+        this.canvasConfig = canvasConfig;
+    }
+    getBandSubItemSize() {
+        return ((this.canvasConfig.scaleBandWidth -
+            this.modelSettings.barDistance * (this.canvasConfig.oneKeyBarsAmount - 1)) /
+            this.canvasConfig.oneKeyBarsAmount); // Space for one bar
+    }
+    getBandItemPad(barIndex) {
+        return this.getBandSubItemSize() * barIndex + this.modelSettings.barDistance * barIndex; // Отступ бара от края. Зависит от количества баров в одной группе и порядке текущего бара
+    }
+}

package/lib/model/featuresModel/bandLikeCharts/dotChartSettingsStore.d.ts

@@ -0,0 +1,9 @@
+import { BandLikeChartSettingsStore } from "../../model";
+export declare class DotChartSettingsStore implements BandLikeChartSettingsStore {
+    private readonly canvasConfig;
+    constructor(canvasConfig: {
+        scaleBandWidth: number;
+    });
+    getBandSubItemSize(): number;
+    getBandItemPad(): number;
+}

package/lib/model/featuresModel/bandLikeCharts/dotChartSettingsStore.js

@@ -0,0 +1,11 @@
+export class DotChartSettingsStore {
+    constructor(canvasConfig) {
+        this.canvasConfig = canvasConfig;
+    }
+    getBandSubItemSize() {
+        return this.canvasConfig.scaleBandWidth;
+    }
+    getBandItemPad() {
+        return 0;
+    }
+}

package/lib/model/featuresModel/scaleModel/scaleModel.js

@@ -84,7 +84,8 @@ export class ScaleModel {
             paddingInner: paddings.inner,
             paddingOuter: paddings.outer,
             oneKeyTotalSpace,
-            recalculatedStepSize: getStepSize()
+            recalculatedStepSize: getStepSize(),
+            bandSize: getBandSize()
         };
     }
     getChartsByTypes(charts, types) {

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

@@ -10,10 +10,13 @@ export declare const BORDER_OFFSET_SIZE_PX = 2;
 export declare class ValueLabelCoordinateCalculator {
     private readonly keyAxisOrient;
     private readonly margin;
+    private readonly isSegmented;
+    private readonly shiftCoordinateByKeyScale;
     private readonly offsetSizePx;
-    constructor(positionOptions: ValueLabelsPositionOptions | undefined, keyAxisOrient: Orient, margin: BlockMargin);
-    getValueLabelY(scaledValue: number): number;
-    getValueLabelX(scaledValue: number): number;
+    constructor(positionOptions: ValueLabelsPositionOptions | undefined, keyAxisOrient: Orient, margin: BlockMargin, isSegmented: boolean, shiftCoordinateByKeyScale: (value: number, fieldIndex: number) => number);
+    getValueLabelY(scaledValue: number, fieldIndex: number): number;
+    getValueLabelX(scaledValue: number, fieldIndex: number): number;
+    private getOverrideFieldIndex;
 }
 export declare function calculateValueLabelAlignment(keyAxisOrient: Orient, positionMode?: ValueLabelsPositionMode, rotation?: ValueLabelsRotationOptions): ValueLabelAlignment;
 export declare function handleScaledValue(dataRow: MdtChartsDataRow, datumField: string, isSegmented: boolean, positionMode?: ValueLabelsPositionMode): number;

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

@@ -1,9 +1,11 @@
 export const VALUE_LABEL_OFFSET_ABS_SIZE_PX = 10;
 export const BORDER_OFFSET_SIZE_PX = 2;
 export class ValueLabelCoordinateCalculator {
-    constructor(positionOptions, keyAxisOrient, margin) {
+    constructor(positionOptions, keyAxisOrient, margin, isSegmented, shiftCoordinateByKeyScale) {
         this.keyAxisOrient = keyAxisOrient;
         this.margin = margin;
+        this.isSegmented = isSegmented;
+        this.shiftCoordinateByKeyScale = shiftCoordinateByKeyScale;
         let offsetAbsSize = VALUE_LABEL_OFFSET_ABS_SIZE_PX;
         if (((positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.mode) === "beforeHead" || (positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.mode) === "afterHead") &&
             (positionOptions === null || positionOptions === void 0 ? void 0 : positionOptions.offsetSize) != null)
@@ -15,26 +17,29 @@ export class ValueLabelCoordinateCalculator {
         else
             this.offsetSizePx = 0;
     }
-    getValueLabelY(scaledValue) {
+    getValueLabelY(scaledValue, fieldIndex) {
         switch (this.keyAxisOrient) {
             case "bottom":
                 return scaledValue - this.offsetSizePx + this.margin.top;
             case "top":
                 return scaledValue + this.offsetSizePx + this.margin.top;
             default:
-                return scaledValue + this.margin.top;
+                return this.shiftCoordinateByKeyScale(scaledValue + this.margin.top, this.getOverrideFieldIndex(fieldIndex));
         }
     }
-    getValueLabelX(scaledValue) {
+    getValueLabelX(scaledValue, fieldIndex) {
         switch (this.keyAxisOrient) {
             case "right":
                 return scaledValue - this.offsetSizePx + this.margin.left;
             case "left":
                 return scaledValue + this.offsetSizePx + this.margin.left;
             default:
-                return scaledValue + this.margin.left;
+                return this.shiftCoordinateByKeyScale(scaledValue + this.margin.left, this.getOverrideFieldIndex(fieldIndex));
         }
     }
+    getOverrideFieldIndex(fieldIndex) {
+        return this.isSegmented ? 0 : fieldIndex;
+    }
 }
 export function calculateValueLabelAlignment(keyAxisOrient, positionMode, rotation) {
     if (rotation === null || rotation === void 0 ? void 0 : rotation.angle)

package/lib/model/model.d.ts

@@ -139,6 +139,7 @@ export interface ScaleBandModelSizeParams {
     paddingInner: number;
     oneKeyTotalSpace: number;
     recalculatedStepSize: number;
+    bandSize: number;
 }
 export interface ScalePointModel extends BaseScaleKeyModel {
     type: "point";
@@ -392,6 +393,16 @@ export declare type LineLikeChartRenderFn = (dataRow: MdtChartsDataRow, valueFie
 interface TwoDimensionalBarLikeChartModel {
     barViewOptions: TwoDimensionalBarLikeChartViewModel;
 }
+interface BandLikeChartModel {
+    bandLikeViewOptions: BandLikeChartViewModel;
+}
+export interface BandLikeChartViewModel {
+    settingsStore?: BandLikeChartSettingsStore;
+}
+export interface BandLikeChartSettingsStore {
+    getBandSubItemSize(): number;
+    getBandItemPad(bandItemIndex: number): number;
+}
 export interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
     borderRadius: BarLikeChartBorderRadius;
@@ -426,7 +437,7 @@ interface DotChartShapeOptions {
     handleEndCoordinate: (calculatedBandItemSize: number) => number;
     width: number;
 }
-export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel, TwoDimensionalAreaChartModel, DotChartModel {
+export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel, TwoDimensionalAreaChartModel, DotChartModel, BandLikeChartModel {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartDataModel;
     index: number;
@@ -457,8 +468,8 @@ export declare type ValueLabelsInnerContentSetter = (options: ValueLabelsInnerCo
 export interface TwoDimChartValueLabelsOptions {
     enabled: boolean;
     showLabel: MarkerLikeElementVisibilityFn;
-    handleX: (scaledValue: number) => number;
-    handleY: (scaledValue: number) => number;
+    handleX: (scaledValue: number, fieldIndex: number) => number;
+    handleY: (scaledValue: number, fieldIndex: number) => number;
     textAnchor: TextAnchor;
     forFields: MdtChartsFieldName[];
     dominantBaseline: DominantBaseline;

package/lib/model/modelInstance/canvasModel/legendCanvasModel.js

@@ -20,7 +20,7 @@ export class LegendCanvasModelInstance {
     }
     getAllNeededSpace() {
         if (!this.sizeAndPadInited)
-            throw new Error("LegendCanvasModel padding and size are not initialized");
+            return 0;
         return this.size + this.pad;
     }
 }

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

@@ -5,6 +5,7 @@ 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, barIndexes: number[]): TwoDimensionalBarLikeChartViewModel;
+export declare function getBarsAmount(allCharts: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">[]): number;
 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): ChartLegendMarkerModel;

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

@@ -41,6 +41,13 @@ export function getBarViewOptions(chart, keyAxisOrient, barIndexes) {
     };
     return { hatch, borderRadius, barIndexes };
 }
+export function getBarsAmount(allCharts) {
+    return allCharts.reduce((acc, ch) => {
+        if (ch.type === "bar")
+            return acc + (ch.isSegmented ? 1 : ch.data.valueFields.length);
+        return acc;
+    }, 0);
+}
 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);
@@ -107,7 +114,7 @@ export function getLineViewOptions(chart) {
             return {
                 dashedStyles: { on: false, dashSize: 0, gapSize: 0 },
                 strokeWidth: (_c = (_b = (_a = chart.dotLikeStyles) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : LINE_CHART_DEFAULT_WIDTH,
-                length: getWidthOfLegendMarkerByType("line")
+                length: getWidthOfLegendMarkerByType("dot")
             };
         case "area":
             return {
@@ -130,6 +137,9 @@ export function getWidthOfLegendMarkerByType(chartType) {
         return 24;
     if (chartType === "area")
         return styledElementValues.defaultLegendMarkerSizes.widthPx;
+    if (chartType === "dot")
+        return 24;
+    throw new Error(`Got unknown chart type when getting width of legend marker: "${chartType}"`);
 }
 export function getAreaViewOptions(chart, chartIndex, style, chartBlockId) {
     var _a, _b, _c, _d, _e;

package/lib/model/notations/twoDimensionalModel.js

@@ -3,7 +3,7 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensional
 import { AxisModel } from "../featuresModel/axis/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
-import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
+import { calculateBarIndexes, getAreaViewOptions, getBarsAmount, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { calculateValueLabelAlignment, handleScaledValue, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 import { TitleConfigReader } from "../modelInstance/titleConfigReader";
@@ -18,6 +18,7 @@ import { GroupingSplitLinesGenerator } from "../featuresModel/grouping/groupingS
 import { GroupingDataAmountCalculator } from "../featuresModel/grouping/groupingDataAmountCalculator/groupingDataAmountCalculator";
 import { ScaleCanvasSizesCalculator } from "../featuresModel/scaleModel/sizaCalculators/scaleCanvasSizesCalculator";
 import { KeyTotalSpaceCalculator } from "../featuresModel/scaleModel/sizaCalculators/keyTotalSpaceCalculator";
+import { createBandLikeChartSettingsStore } from "../featuresModel/bandLikeCharts/bandLikeChartSettings";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
@@ -33,9 +34,9 @@ export class TwoDimensionalModel {
             secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
         }
         const keyAxis = AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0));
-        const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name, modelInstance);
-        const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         const keyScale = scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys());
+        const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name, modelInstance, keyScale);
+        const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         const isHorizontal = options.orientation === "horizontal";
         const groupingStaticCoordinateCalculator = new GroupingStaticCoordinateCalculator({
             canvasModel,
@@ -169,13 +170,22 @@ export class TwoDimensionalModel {
             lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
         };
     }
-    static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName, modelInstance) {
+    static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName, modelInstance, keyScale) {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         const chartsModel = [];
         charts.forEach((chart, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
             const style = styleModel.getChartStyle(chart, index);
-            const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position, keyAxisOrient, canvasModel.getMargin());
+            const bandSettingsStore = createBandLikeChartSettingsStore(chart.type, designerConfig.canvas.chartOptions.bar, getBarsAmount(charts), keyScale);
+            const globalBarsIndicesMap = calculateBarIndexes(charts, chart, index);
+            const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position, keyAxisOrient, canvasModel.getMargin(), chart.isSegmented, (value, fieldIndex) => {
+                if (bandSettingsStore)
+                    return (value +
+                        bandSettingsStore.getBandItemPad(globalBarsIndicesMap[fieldIndex]) +
+                        bandSettingsStore.getBandSubItemSize() / 2);
+                const keyScalePadToMiddle = keyScale.type === "band" ? keyScale.sizes.bandSize / 2 : 0;
+                return value + keyScalePadToMiddle;
+            });
             const valueLabelsAlignment = calculateValueLabelAlignment(keyAxisOrient, (_c = (_b = chart.valueLabels) === null || _b === void 0 ? void 0 : _b.position) === null || _c === void 0 ? void 0 : _c.mode, (_d = chart.valueLabels) === null || _d === void 0 ? void 0 : _d.rotation);
             chartsModel.push({
                 type: chart.type,
@@ -212,7 +222,10 @@ export class TwoDimensionalModel {
                     strokeWidth: (_r = (_q = chart.lineStyles) === null || _q === void 0 ? void 0 : _q.width) !== null && _r !== void 0 ? _r : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
-                barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
+                bandLikeViewOptions: {
+                    settingsStore: bandSettingsStore
+                },
+                barViewOptions: getBarViewOptions(chart, keyAxisOrient, globalBarsIndicesMap),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {
@@ -221,8 +234,8 @@ export class TwoDimensionalModel {
                         const value = row[valueFieldName];
                         return value != null && !Number.isNaN(value);
                     },
-                    handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
-                    handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
+                    handleX: (scaledValue, fieldIndex) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue, fieldIndex),
+                    handleY: (scaledValue, fieldIndex) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue, fieldIndex),
                     handleScaledValue: (dataRow, datumField) => {
                         var _a, _b;
                         return handleScaledValue(dataRow, datumField, chart.isSegmented, (_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode);
@@ -248,8 +261,8 @@ export class TwoDimensionalModel {
                 dotViewOptions: {
                     shape: {
                         type: "line",
-                        handleEndCoordinate: (v) => v + 2,
                         handleStartCoordinate: (v) => v - 2,
+                        handleEndCoordinate: (v) => v + 2,
                         width: (_0 = (_z = (_y = chart.dotLikeStyles) === null || _y === void 0 ? void 0 : _y.shape) === null || _z === void 0 ? void 0 : _z.width) !== null && _0 !== void 0 ? _0 : LINE_CHART_DEFAULT_WIDTH
                     }
                 }

package/package.json

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