mdt-charts 1.21.2 → 1.23.0

package/lib/config/config.d.ts

@@ -4,11 +4,12 @@ export declare type AxisPosition = 'start' | 'end';
 export declare type ChartOrientation = 'vertical' | 'horizontal';
 export declare type ChartNotation = '2d' | 'polar' | 'interval';
 export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
-export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
+export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area' | 'dot';
 export declare type PolarChartType = 'donut';
 export declare type IntervalChartType = 'gantt';
 export declare type EmbeddedLabelType = 'none' | 'key' | 'value';
 export declare type ValueLabelsCollisionMode = "none" | "hide";
+export declare type TwoDimLegendPosition = "top" | "bottom";
 export declare type MdtChartsDataRow = {
     [field: string]: any;
 };
@@ -44,7 +45,7 @@ interface BasicOptions {
 }
 interface GraphicNotationOptions extends BasicOptions {
     data: DataOptions;
-    legend: Legend;
+    legend: MdtChartsTwoDimLegend;
     title?: Title;
     selectable: boolean;
 }
@@ -54,7 +55,7 @@ export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
     additionalElements: AdditionalElements;
     charts: MdtChartsTwoDimensionalChart[];
     orientation: ChartOrientation;
-    valueLabels?: TwoDimensionalValueLabels;
+    valueLabels?: MdtChartsTwoDimensionalValueLabels;
 }
 export interface MdtChartsPolarOptions extends GraphicNotationOptions {
     type: 'polar';
@@ -70,6 +71,9 @@ export interface MdtChartsIntervalOptions extends GraphicNotationOptions {
 export interface Legend {
     show: boolean;
 }
+export interface MdtChartsTwoDimLegend extends Legend {
+    position?: TwoDimLegendPosition;
+}
 export interface TitleFunctionParams {
     data: MdtChartsDataRow[];
 }
@@ -125,11 +129,18 @@ export interface AdditionalElements {
 }
 interface GridLineOptions {
     flag: GridLineFlag;
+    styles?: GridLineStyles;
 }
 interface GridLineFlag {
     key: boolean;
     value: boolean;
 }
+interface GridLineStyles {
+    dash?: GridLineStylesDash;
+}
+interface GridLineStylesDash {
+    on?: boolean;
+}
 export interface TwoDimensionalAxis {
     key: DiscreteAxisOptions;
     value: NumberAxisOptions;
@@ -140,10 +151,15 @@ export interface AxisOptions {
     visibility: boolean;
     position: AxisPosition;
     ticks: AxisTicks;
+    line?: AxisLineOptions;
 }
 interface AxisTicks {
     flag: boolean;
 }
+interface AxisLineOptions {
+    /** @default true */
+    visible?: boolean;
+}
 export interface NumberAxisOptions extends AxisOptions {
     domain: AxisNumberDomain;
     labels?: NumberAxisLabel;
@@ -174,10 +190,13 @@ export interface MdtChartsShowAxisLabelRule {
     spaceForOneLabel?: number;
     showTickFn?: ShowTickFn;
 }
-export interface TwoDimensionalValueLabels {
+export interface MdtChartsTwoDimensionalValueLabels {
     collision: ValueLabelsCollision;
 }
 export interface ValueLabelsCollision {
+    otherValueLabels: OtherValueLabels;
+}
+export interface OtherValueLabels {
     mode: ValueLabelsCollisionMode;
 }
 export interface IntervalAxis {
@@ -186,12 +205,6 @@ export interface IntervalAxis {
 }
 interface DateAxisOptions extends AxisOptions {
 }
-interface ChartSettings {
-    tooltip: Tooltip;
-}
-interface Tooltip {
-    show: boolean;
-}
 interface MdtChartsLineLikeChart {
     markers: MarkersOptions;
     lineStyles?: MdtChartsLineLikeChartStyles;
@@ -199,6 +212,10 @@ interface MdtChartsLineLikeChart {
 }
 export interface MdtChartsLineLikeChartStyles {
     dash?: MdtChartsLineLikeChartDashedStyles;
+    /**
+     * @default 2
+     */
+    width?: number;
 }
 export interface MdtChartsLineLikeChartDashedStyles {
     on: boolean;
@@ -217,26 +234,45 @@ export interface AreaStylesBorderLine {
 }
 interface MdtChartsBarLikeChart {
     barStyles?: MdtChartsBarLikeChartStyles;
+    embeddedLabels: EmbeddedLabelType;
 }
-interface MdtChartsBarLikeChartStyles {
+export interface MdtChartsBarLikeChartStyles {
     hatch?: MdtChartsBarLikeChartHatchedStyles;
+    borderRadius?: MdtChartsBarLikeChartBorderRadius;
+}
+interface MdtChartsBarLikeChartBorderRadius {
+    /**
+     * @default 2
+     */
+    value?: number;
 }
 interface MdtChartsBarLikeChartHatchedStyles {
     on: boolean;
 }
-export interface MdtChartsTwoDimensionalChart extends ChartSettings, MdtChartsLineLikeChart, MdtChartsBarLikeChart {
+interface MdtChartsDotChart {
+    /** @alpha */
+    dotLikeStyles?: MdtChartsDotLikeChartStyles;
+}
+interface MdtChartsDotLikeChartStyles {
+    shape?: MdtChartsDotLikeChartShape;
+}
+interface MdtChartsDotLikeChartShape {
+    type: "line";
+    width?: number;
+}
+export interface MdtChartsTwoDimensionalChart extends MdtChartsLineLikeChart, MdtChartsBarLikeChart, MdtChartsDotChart {
+    /** @alpha dot type has no full support */
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartData;
-    embeddedLabels: EmbeddedLabelType;
     isSegmented: boolean;
     valueLabels?: TwoDimensionalChartValueLabels;
 }
-export interface PolarChart extends ChartSettings {
+export interface PolarChart {
     type: PolarChartType;
     data: PolarChartData;
     aggregator?: MdtChartsDonutAggregator;
 }
-export interface IntervalChart extends ChartSettings {
+export interface IntervalChart {
     type: IntervalChartType;
     data: IntervalChartData;
 }

package/lib/engine/features/axis/axis.js

@@ -44,6 +44,8 @@ export class Axis {
             .append('g')
             .attr('class', `${this.axesClass} ${axisOptions.cssClass} data-label`);
         AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate);
+        if (!axisOptions.line.visible)
+            axisElement.select('.domain').style('display', 'none');
         if (!axisOptions.labels.visible) {
             AxisLabelHelper.hideLabels(axisElement);
             return;

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

@@ -1,13 +1,11 @@
 import { Size } from "../../../config/config";
-import { BlockMargin, GridLineFlag, IAxisModel } from "../../../model/model";
+import { BlockMargin, GridLineOptions, IAxisModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Scales } from "../scale/scale";
 export declare class GridLine {
     private static readonly gridLineClass;
-    static render(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
-    static update(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
+    static render(block: Block, options: GridLineOptions, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
+    static update(block: Block, options: GridLineOptions, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
     private static renderLine;
     private static clear;
-    private static removeGridLinesOnAxes;
-    private static rmGridLineOnTick;
 }

package/lib/engine/features/gridLine/gridLine.js

@@ -1,23 +1,25 @@
 import { GridLineHelper } from "./gidLineHelper";
 export class GridLine {
-    static render(block, gridLineFlag, axes, blockSize, margin, scales) {
-        if (gridLineFlag.value) {
+    static render(block, options, axes, blockSize, margin, scales) {
+        if (options.flag.value) {
             const lineLength = GridLineHelper.getGridLineLength('value', axes.key, axes.value, blockSize, margin);
             const lineAttributes = GridLineHelper.getLineAttributes(axes.value, lineLength);
-            this.renderLine(block, axes.value, lineAttributes);
+            this.renderLine(block, axes.value, lineAttributes, options)
+                .style('display', (d, i, group) => {
+                return d === 0 ? 'none' : 'block';
+            });
         }
-        if (gridLineFlag.key) {
+        if (options.flag.key) {
             const lineAttributes = GridLineHelper.getKeyLineAttributes(axes.key, scales.value);
-            this.renderLine(block, axes.key, lineAttributes);
+            this.renderLine(block, axes.key, lineAttributes, options);
         }
-        this.removeGridLinesOnAxes(block, axes.key, axes.value, true);
     }
-    static update(block, gridLineFlag, axes, blockSize, margin, scales) {
+    static update(block, options, axes, blockSize, margin, scales) {
         this.clear(block, axes.key.cssClass, axes.value.cssClass);
-        this.render(block, gridLineFlag, axes, blockSize, margin, scales);
+        this.render(block, options, axes, blockSize, margin, scales);
     }
-    static renderLine(block, axis, lineAttributes) {
-        block
+    static renderLine(block, axis, lineAttributes, options) {
+        const gridLine = block
             .getSvg()
             .selectAll(`.${axis.cssClass}`)
             .selectAll('g.tick')
@@ -27,6 +29,9 @@ export class GridLine {
             .attr('y1', lineAttributes.y1)
             .attr('x2', lineAttributes.x2)
             .attr('y2', lineAttributes.y2);
+        if (options.styles.dash.on)
+            gridLine.style('stroke-dasharray', 3);
+        return gridLine;
     }
     static clear(block, keyAxisClass, valueAxisClass) {
         block.getSvg()
@@ -40,27 +45,5 @@ export class GridLine {
             .selectAll(`.${this.gridLineClass}`)
             .remove();
     }
-    static removeGridLinesOnAxes(block, keyAxis, valueAxis, excludeKey) {
-        let tickOnKeyAxisSelector = '';
-        let tickOnValueAxisSelector = '';
-        if (valueAxis.orient === 'right' || valueAxis.orient === 'bottom')
-            tickOnValueAxisSelector = ':last-of-type';
-        if (keyAxis.orient === 'bottom' || keyAxis.orient === 'right')
-            tickOnKeyAxisSelector = ':last-of-type';
-        const tickOnKey = block.getSvg()
-            .select(`.${valueAxis.cssClass}`)
-            .select(`g.tick${tickOnKeyAxisSelector}`);
-        const tickOnValue = block.getSvg()
-            .select(`.${keyAxis.cssClass}`)
-            .select(`g.tick${tickOnValueAxisSelector}`);
-        // this.rmGridLineOnTick(tickOnKey);
-        // if (!excludeKey)
-        //     this.rmGridLineOnTick(tickOnValue);
-    }
-    static rmGridLineOnTick(tick) {
-        tick
-            .select(`.${this.gridLineClass}`)
-            .remove();
-    }
 }
 GridLine.gridLineClass = 'grid-line';

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

@@ -18,6 +18,9 @@ export declare class Legend {
     static get(): Legend;
     static readonly objectClass = "legend-object";
     static readonly labelClass = "legend-label";
+    static readonly label2DClass = "legend-2d-label";
+    static readonly labelPolarClass = "legend-polar-label";
+    static readonly labelIntervalClass = "legend-interval-label";
     static readonly itemClass = "legend-item";
     static readonly markerClass = "legend-marker";
     static readonly markerCircle = "legend-circle";

package/lib/engine/features/legend/legend.js

@@ -110,6 +110,9 @@ export class Legend {
 }
 Legend.objectClass = 'legend-object';
 Legend.labelClass = 'legend-label';
+Legend.label2DClass = 'legend-2d-label';
+Legend.labelPolarClass = 'legend-polar-label';
+Legend.labelIntervalClass = 'legend-interval-label';
 Legend.itemClass = 'legend-item';
 Legend.markerClass = 'legend-marker';
 Legend.markerCircle = 'legend-circle';

package/lib/engine/features/legend/legendHelper.d.ts

@@ -20,4 +20,5 @@ export declare class LegendHelper {
     static getSumOfItemsWidths(itemsWidth: number[], marginsLeft: number[]): number;
     static getLegendCoordinateByPosition(legendPosition: Orient, legendBlockModel: LegendBlockModel, blockSize: Size): LegendCoordinate;
     static getContentRenderingOptions(chartNotation: ChartNotation, legendPosition: LegendPosition, legendBlockModel: LegendBlockModel): LegendContentRenderingOptions;
+    private static getLegendClassByChartNotation;
 }

package/lib/engine/features/legend/legendHelper.js

@@ -70,21 +70,30 @@ export class LegendHelper {
     }
     static getContentRenderingOptions(chartNotation, legendPosition, legendBlockModel) {
         const itemsDirection = this.service.getLegendItemsDirection(legendPosition);
+        const legendLabelClass = this.getLegendClassByChartNotation(chartNotation);
         return {
             wrapperClasses: [
                 Legend.legendBlockClass,
+                chartNotation === "2d" ? "legend-block-centered" : "",
                 this.service.getWrapperClassByItemsDirection(itemsDirection),
-                this.service.getWrapperJustifyContentClass(itemsDirection, legendPosition),
                 this.service.getWrapperClassByWrappingItems(legendPosition, chartNotation)
             ],
             shouldCropLabels: chartNotation === "2d",
             blockModel: legendBlockModel,
             itemsOptions: {
                 markerClass: Legend.markerClass,
-                labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, Legend.labelClass),
+                labelClass: this.service.getLegendLabelClassByPosition(legendPosition, chartNotation, legendLabelClass),
                 wrapperClasses: [Legend.itemClass, this.service.getItemClasses(itemsDirection)]
             }
         };
     }
+    static getLegendClassByChartNotation(chartNotation) {
+        const legendClasses = {
+            '2d': Legend.label2DClass,
+            'polar': Legend.labelPolarClass,
+            'interval': Legend.labelIntervalClass
+        };
+        return `${Legend.labelClass} ${legendClasses[chartNotation]}`;
+    }
 }
 LegendHelper.service = new LegendHelperService();

package/lib/engine/features/legend/legendHelperService.d.ts

@@ -3,7 +3,6 @@ import { LegendItemsDirection } from "../../../model/featuresModel/legendModel/l
 import { LegendPosition } from "../../../model/model";
 export declare class LegendHelperService {
     getWrapperClassByItemsDirection(itemsDirection: LegendItemsDirection): "legend-block-column" | "legend-block-row";
-    getWrapperJustifyContentClass(itemsDirection: LegendItemsDirection, legendPosition: LegendPosition): "" | "legend-block-centered";
     getWrapperClassByWrappingItems(legendPosition: LegendPosition, chartNotation: ChartNotation): "legend-wrapper-with-wrap" | "legend-wrapper-without-wrap";
     getLegendLabelClassByPosition(legendPosition: LegendPosition, chartNotation: ChartNotation, initialLabelClass: string): string;
     getItemClasses(itemsDirection: LegendItemsDirection): string;

package/lib/engine/features/legend/legendHelperService.js

@@ -2,9 +2,6 @@ export class LegendHelperService {
     getWrapperClassByItemsDirection(itemsDirection) {
         return itemsDirection === "column" ? "legend-block-column" : "legend-block-row";
     }
-    getWrapperJustifyContentClass(itemsDirection, legendPosition) {
-        return itemsDirection === "column" && legendPosition === "right" ? "legend-block-centered" : "";
-    }
     getWrapperClassByWrappingItems(legendPosition, chartNotation) {
         if (this.doesLegendInTopBy2d(legendPosition, chartNotation)) {
             return "legend-wrapper-without-wrap";

package/lib/engine/features/legend/legendMarkerCreator.js

@@ -1,6 +1,7 @@
 import { Legend } from "./legend";
 import { HatchPatternDef } from "../../block/defs/hatchPattern";
 import { applyLineDash } from "../../twoDimensionalNotation/line/lineHelper";
+import { getClipPathValue } from "../../../engine/twoDimensionalNotation/bar/barHelper";
 export class LegendMarkerCreator {
     create(selection, options) {
         const creator = getMarkerCreator(options);
@@ -51,7 +52,8 @@ class BarMarkerCreator extends SvgMarkerCreator {
             .attr('y', 0)
             .attr('height', this.options.width)
             .attr('width', this.options.width)
-            .style('fill', color);
+            .style('fill', color)
+            .style('clip-path', getClipPathValue(this.options.borderRadius));
         if (this.options.hatch.on) {
             bars.style('mask', HatchPatternDef.getMaskValue());
         }
@@ -67,16 +69,17 @@ class LineMarkerCreator extends SvgMarkerCreator {
         this.options = options;
     }
     renderMarker(selection, color) {
-        const svg = this.renderSvg(selection).style("width", this.options.width);
+        const svg = this.renderSvg(selection).style("width", this.options.length);
         const line = svg
             .append('line')
             .style('stroke', 'red')
             .classed("line", true)
             .attr('x1', 0)
-            .attr('x2', this.options.width)
+            .attr('x2', this.options.length)
             .attr('y1', 5)
             .attr('y2', 5)
-            .style('stroke', color);
+            .style('stroke', color)
+            .style('stroke-width', this.options.strokeWidth);
         if (this.options.dashedStyles.on) {
             applyLineDash(line, this.options.dashedStyles.dashSize, this.options.dashedStyles.gapSize);
         }

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

@@ -39,7 +39,6 @@ export declare class CanvasValueLabels {
     render(scales: ScalesWithSecondary, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData): void;
     update(scales: ScalesWithSecondary, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData): void;
     private toggleOldValueLabelsVisibility;
-    private hideValueLabelsCollision;
     private getAllValueLabels;
     private getChartScales;
 }

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

@@ -84,6 +84,7 @@ export class CanvasValueLabels {
         this.chartsValueLabels = [];
     }
     render(scales, charts, data, dataOptions) {
+        const valueLabelsSettings = this.options.canvas.valueLabels;
         const chartsWithLabels = charts.filter(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show; });
         if (chartsWithLabels.length === 0)
             return;
@@ -93,25 +94,24 @@ export class CanvasValueLabels {
             this.chartsValueLabels.push(chartValueLabels);
             chartValueLabels.render(chartScales, data[dataOptions.dataSource]);
         });
-        if (this.options.canvas.valueLabels.collision.mode === 'hide') {
-            this.hideValueLabelsCollision();
-        }
+        const valueLabels = this.getAllValueLabels();
+        ValueLabelsCollision.resolveValueLabelsCollisions(valueLabels, valueLabelsSettings);
     }
     update(scales, charts, data, dataOptions) {
+        const valueLabelsSettings = this.options.canvas.valueLabels;
         const chartsWithLabels = charts.filter(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show; });
         if (chartsWithLabels.length === 0)
             return;
-        if (this.options.canvas.valueLabels.collision.mode === 'hide')
+        if (this.options.canvas.valueLabels.collision.otherValueLables.mode === 'hide')
             this.toggleOldValueLabelsVisibility();
         const chartsUpdatePromises = chartsWithLabels.map((chart, index) => {
             const chartScales = this.getChartScales(scales, chart);
             return this.chartsValueLabels[index].update(chartScales, data[dataOptions.dataSource]);
         });
-        if (this.options.canvas.valueLabels.collision.mode === 'hide') {
-            Promise.all(chartsUpdatePromises).then(() => {
-                this.hideValueLabelsCollision();
-            });
-        }
+        Promise.all(chartsUpdatePromises).then(() => {
+            const newValueLabels = this.getAllValueLabels();
+            ValueLabelsCollision.resolveValueLabelsCollisions(newValueLabels, valueLabelsSettings);
+        });
     }
     toggleOldValueLabelsVisibility() {
         const oldValueLabels = this.getAllValueLabels();
@@ -120,11 +120,6 @@ export class CanvasValueLabels {
                 select(this).style('display', 'block');
         });
     }
-    hideValueLabelsCollision() {
-        const newValueLabels = this.getAllValueLabels();
-        const valueLabelElementsRectInfo = ValueLabelsCollision.getValueLabelElementsRectInfo(newValueLabels);
-        ValueLabelsCollision.toggleValueLabelElementsVisibility(valueLabelElementsRectInfo);
-    }
     getAllValueLabels() {
         const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
         return block

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

@@ -1,4 +1,6 @@
 import { Selection } from "d3-selection";
+import { TwoDimensionalValueLabels } from "../../../model/model";
+import { MdtChartsDataRow } from "../../../config/config";
 export declare type ValueLabelOnCanvasIndex = number;
 export interface BoundingRect {
     x: number;
@@ -18,6 +20,9 @@ export interface LabelVisibility {
     isVisible: boolean;
 }
 export declare class ValueLabelsCollision {
-    static getValueLabelElementsRectInfo(valueLabels: Selection<SVGTextElement, unknown, SVGGElement, unknown>): ValueLabelElement[];
-    static toggleValueLabelElementsVisibility(elements: ValueLabelElement[]): void;
+    static resolveValueLabelsCollisions(newValueLabels: Selection<SVGTextElement, MdtChartsDataRow, SVGGElement, unknown>, valueLabelsSettings: TwoDimensionalValueLabels): void;
+    private static getValueLabelElementsRectInfo;
+    private static shiftValueLabelsCollision;
+    private static toggleValueLabelElementsVisibility;
+    private static changeLabelElementCoordinateX;
 }

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.js

@@ -1,10 +1,18 @@
 import { select } from "d3-selection";
 import { ValueLabelsCollisionHelper } from "../../../engine/features/valueLabelsCollision/valueLabelsCollisionHelper";
 export class ValueLabelsCollision {
+    static resolveValueLabelsCollisions(newValueLabels, valueLabelsSettings) {
+        const valueLabelElementsRectInfo = this.getValueLabelElementsRectInfo(newValueLabels);
+        this.shiftValueLabelsCollision(valueLabelElementsRectInfo, valueLabelsSettings.collision.chartBlock);
+        if (valueLabelsSettings.collision.otherValueLables.mode === 'hide')
+            this.toggleValueLabelElementsVisibility(valueLabelElementsRectInfo);
+    }
     static getValueLabelElementsRectInfo(valueLabels) {
         let ValueLabelElementsReactInfo = [];
         valueLabels.each(function (_, index) {
-            const { x, y, height, width } = this.getBoundingClientRect();
+            const { height, width } = this.getBBox();
+            const x = +this.getAttribute("x");
+            const y = +this.getAttribute("y");
             ValueLabelElementsReactInfo.push({
                 index,
                 svgElement: this,
@@ -13,6 +21,18 @@ export class ValueLabelsCollision {
         });
         return ValueLabelElementsReactInfo;
     }
+    static shiftValueLabelsCollision(valueLabelElementsRectInfo, chartBlock) {
+        valueLabelElementsRectInfo.forEach(element => {
+            if (chartBlock.left.mode === 'shift' && chartBlock.left.hasCollision(element.boundingClientRect)) {
+                chartBlock.left.shiftCoordinate(element.boundingClientRect);
+                this.changeLabelElementCoordinateX(element);
+            }
+            if (chartBlock.right.mode === 'shift' && chartBlock.right.hasCollision(element.boundingClientRect)) {
+                chartBlock.right.shiftCoordinate(element.boundingClientRect);
+                this.changeLabelElementCoordinateX(element);
+            }
+        });
+    }
     static toggleValueLabelElementsVisibility(elements) {
         const labelsVisibility = ValueLabelsCollisionHelper.calculateValueLabelsVisibility(elements);
         labelsVisibility.forEach(label => {
@@ -21,4 +41,8 @@ export class ValueLabelsCollision {
                 select(labelInfo.svgElement).style('display', 'none');
         });
     }
+    static changeLabelElementCoordinateX(element) {
+        select(element.svgElement)
+            .attr('x', element.boundingClientRect.x);
+    }
 }

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

@@ -19,6 +19,7 @@ export declare class Bar {
     private readonly barItemClass;
     private readonly barSegmentGroupClass;
     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>[];

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

@@ -12,14 +12,15 @@ export class Bar {
         this.barItemClass = Bar.barItemClass;
         this.barSegmentGroupClass = 'bar-segment-group';
         this.createBarPipeline = new Pipeline();
-        onBarChartInit(this.createBarPipeline);
+        this.createSegmentGroupBarsPipeline = new Pipeline();
+        onBarChartInit(this.createBarPipeline, this.createSegmentGroupBarsPipeline);
     }
     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, blockSize, firstBarIndex, barSettings);
+            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);
     }
@@ -53,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, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
             DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
             DomHelper.setChartStyle(bars, chart.style, index, 'fill');
@@ -62,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, blockSize, firstBarIndex, barSettings) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, 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)}`)
@@ -81,14 +82,16 @@ 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, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
         DomHelper.setCssClasses(groups, chart.cssClasses);
         DomHelper.setCssClasses(bars, chart.cssClasses); // Для обозначения принадлежности бара к конкретному чарту
         const thisClass = this;
         groups.each(function (d, i) {
-            DomHelper.setCssClasses(select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`), Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
+            DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, { segmentIndex: i, chart });
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
     }
@@ -120,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, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
             const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
                 .then(() => {
                 bars.style('opacity', null);
@@ -163,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, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
         const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
             .then(() => {
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
@@ -174,7 +177,9 @@ export class Bar {
         DomHelper.setCssClasses(newBars, chart.cssClasses);
         const thisClass = this;
         groups.each(function (d, i) {
-            DomHelper.setCssClasses(select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`), Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            const barsInGroup = select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`);
+            DomHelper.setCssClasses(barsInGroup, Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            thisClass.createSegmentGroupBarsPipeline.execute(barsInGroup, { segmentIndex: i, chart });
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
         return [prom];