mdt-charts 1.22.0 → 1.23.1

package/lib/config/config.d.ts

@@ -9,6 +9,7 @@ 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 {
@@ -193,6 +212,10 @@ interface MdtChartsLineLikeChart {
 }
 export interface MdtChartsLineLikeChartStyles {
     dash?: MdtChartsLineLikeChartDashedStyles;
+    /**
+     * @default 2
+     */
+    width?: number;
 }
 export interface MdtChartsLineLikeChartDashedStyles {
     on: boolean;
@@ -213,8 +236,15 @@ 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;

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,7 +12,8 @@ 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();
@@ -88,7 +89,9 @@ export class Bar {
         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);
         });
     }
@@ -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];

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

@@ -1,5 +1,5 @@
 import { AxisScale } from "d3-axis";
-import { BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { BarBorderRadius, BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { MdtChartsDataRow } from "../../../config/config";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
@@ -10,6 +10,10 @@ export interface BarAttrsHelper {
     width: (dataRow: MdtChartsDataRow) => number;
     height: (dataRow: MdtChartsDataRow) => number;
 }
+export interface GroupBarsSegment {
+    segmentIndex: number;
+    chart: TwoDimensionalChartModel;
+}
 interface BandLikeChartSettingsStore {
     getBandItemSize(): number;
     getBandItemPad(bandItemIndex: number): number;
@@ -50,5 +54,6 @@ export declare class BarHelper {
     static setGroupedBandStartCoordinateAttr(attrs: BarAttrsHelper, keyAxisOrient: Orient, scaleValue: AxisScale<any>, margin: BlockMargin, valueFieldName: string): void;
     private static setSegmentedBarAttrsByValue;
 }
-export declare function onBarChartInit(createBarPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, TwoDimensionalChartModel>): void;
+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

@@ -135,8 +135,20 @@ export class BarHelper {
         }
     }
 }
-export function onBarChartInit(createBarPipeline) {
+export function onBarChartInit(createBarPipeline, createSegmentGroupBarsPipeline) {
     createBarPipeline.push(hatchBar);
+    createBarPipeline.push(roundGroupedBars);
+    createSegmentGroupBarsPipeline.push(roundSegmentedBars);
+}
+function roundSegmentedBars(bars, segment) {
+    const radiusValues = segment.chart.barViewOptions.borderRadius.segmented.handle(segment.segmentIndex);
+    return bars.style('clip-path', getClipPathValue(radiusValues));
+}
+function roundGroupedBars(bars, chart) {
+    return bars.style('clip-path', getClipPathValue(chart.barViewOptions.borderRadius.grouped));
+}
+export function getClipPathValue({ topLeft, topRight, bottomLeft, bottomRight }) {
+    return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
 }
 function hatchBar(bars, chart) {
     if (chart.barViewOptions.hatch.on)

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

@@ -45,6 +45,10 @@ export function onLineChartInit(creatingPipeline) {
         }
         return path;
     });
+    creatingPipeline.push(setStrokeWidth);
+}
+function setStrokeWidth(path, chart) {
+    return path.style('stroke-width', chart.lineLikeViewOptions.strokeWidth);
 }
 export function applyLineDash(lineSelection, dashSize, gapSize) {
     return lineSelection.style('stroke-dasharray', `${dashSize} ${gapSize}`);

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -23,7 +23,7 @@ export class TwoDimensionalManager {
         engine.block.scales = scales;
         engine.block.svg.render(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
-        GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
+        GridLine.render(engine.block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.dotChart = new CanvasDotChart({
             elementAccessors: {
                 getBlock: () => engine.block,
@@ -85,7 +85,7 @@ export class TwoDimensionalManager {
         const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
-        GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
+        GridLine.update(block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, options.chartSettings);
         Promise.all(promises)
             .then(() => {

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -72,7 +72,7 @@ export class DataManagerModel {
             wrapperSize: { marginRightPx: styledElementValues.legend.inlineDynamicItemWrapperMarginRightPx }
         }));
         if (position === 'right') {
-            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
+            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.right.margin.bottom);
         }
         else {
             return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);

package/lib/model/featuresModel/axisModel.js

@@ -5,9 +5,10 @@ import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
 import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
 export const MINIMAL_VERTICAL_STEP_SIZE = 60;
 export const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
+const DEFAULT_AXIS_LINE_VISIBLE = true;
 export class AxisModel {
     static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
-        var _a;
+        var _a, _b, _c;
         const { charts, orientation, data: dataOptions } = options;
         const axisConfig = options.axis.key;
         const translate = this.getKeyAxisTranslateModel(orientation, axisConfig.position, canvasModel, getZeroCoordinate);
@@ -26,7 +27,10 @@ export class AxisModel {
                 showTick: tickCalculator.createFunctionCalculator(this.getAxisLength(orientation, canvasModel)),
                 linearTickStep: MINIMAL_HORIZONTAL_STEP_SIZE
             },
-            visibility: axisConfig.visibility
+            visibility: axisConfig.visibility,
+            line: {
+                visible: (_c = (_b = axisConfig.line) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : DEFAULT_AXIS_LINE_VISIBLE
+            }
         };
     }
     static getMainValueAxis(orient, position, axisConfig, labelConfig, canvasModel) {
@@ -36,7 +40,7 @@ export class AxisModel {
         return this.getValueAxis(orient, mainAxisPosition === "start" ? "end" : "start", 'value-secondary-axis', axisConfig, labelConfig, canvasModel);
     }
     static getValueAxis(orient, position, cssClass, axisConfig, labelConfig, canvasModel) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return {
             type: 'value',
             orient: AxisModel.getAxisOrient(AxisType.Value, orient, position),
@@ -54,7 +58,10 @@ export class AxisModel {
                 showTick: showAllTicks,
                 linearTickStep: (_b = (_a = axisConfig.labels) === null || _a === void 0 ? void 0 : _a.stepSize) !== null && _b !== void 0 ? _b : (orient === "horizontal" ? MINIMAL_HORIZONTAL_STEP_SIZE : MINIMAL_VERTICAL_STEP_SIZE)
             },
-            visibility: axisConfig.visibility
+            visibility: axisConfig.visibility,
+            line: {
+                visible: (_d = (_c = axisConfig.line) === null || _c === void 0 ? void 0 : _c.visible) !== null && _d !== void 0 ? _d : DEFAULT_AXIS_LINE_VISIBLE
+            }
         };
     }
     static getAxisLength(chartOrientation, canvasModel) {

package/lib/model/featuresModel/legendModel/legendModel.js

@@ -11,7 +11,7 @@ export class LegendModel {
                 },
                 bottom: {
                     size: 0,
-                    margin: { top: 10, bottom: 20, left: 0, right: 0 },
+                    margin: { top: 2, bottom: 0, left: 0, right: 0 },
                     pad: 0
                 },
                 right: {
@@ -21,7 +21,7 @@ export class LegendModel {
                 },
                 top: {
                     size: 0,
-                    margin: { top: 5, bottom: 10, left: 0, right: 0 },
+                    margin: { top: 0, bottom: 10, left: 0, right: 0 },
                     pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
             },

package/lib/model/featuresModel/legendModel/twoDimLegendModel.d.ts

@@ -1,10 +1,10 @@
-import { Legend } from "../../../config/config";
+import { MdtChartsTwoDimLegend } from "../../../config/config";
 import { LegendBlockModel } from "../../model";
 import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class TwoDimLegendModel {
     private configReader;
     constructor(configReader: TwoDimConfigReader);
-    recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: Legend): void;
+    recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: MdtChartsTwoDimLegend): void;
     private getLegendModel;
 }

package/lib/model/featuresModel/legendModel/twoDimLegendModel.js

@@ -24,7 +24,9 @@ export class TwoDimLegendModel {
         }
     }
     getLegendModel(legendOptions) {
-        const position = legendOptions.show ? "top" : "off";
+        var _a;
+        const position = legendOptions.show
+            ? (_a = legendOptions.position) !== null && _a !== void 0 ? _a : "top" : "off";
         return {
             position
         };

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

@@ -1,4 +1,6 @@
 import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
+import { BoundingRect } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
+import { Size } from "../../../config/config";
 interface ValueLabelAlignment {
     dominantBaseline: ValueLabelDominantBaseline;
     textAnchor: ValueLabelAnchor;
@@ -6,4 +8,8 @@ interface ValueLabelAlignment {
 export declare function getValueLabelY(scaledValue: number, keyAxisOrient: Orient, margin: BlockMargin): number;
 export declare function getValueLabelX(scaledValue: number, keyAxisOrient: Orient, margin: BlockMargin): number;
 export declare function calculateValueLabelAlignment(keyAxisOrient: Orient): ValueLabelAlignment;
+export declare function hasCollisionLeftSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
+export declare function hasCollisionRightSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
+export declare function shiftCoordinateXLeft(labelClientRect: BoundingRect): void;
+export declare function shiftCoordinateXRight(labelClientRect: BoundingRect): void;
 export {};

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

@@ -1,4 +1,5 @@
 const OFFSET_SIZE_PX = 10;
+const BORDER_OFFSET_SIZE_PX = 2;
 export function getValueLabelY(scaledValue, keyAxisOrient, margin) {
     switch (keyAxisOrient) {
         case 'bottom':
@@ -31,3 +32,15 @@ export function calculateValueLabelAlignment(keyAxisOrient) {
             return { dominantBaseline: "middle", textAnchor: "end" };
     }
 }
+export function hasCollisionLeftSide(labelClientRect, margin) {
+    return labelClientRect.x - labelClientRect.width / 2 <= margin.left;
+}
+export function hasCollisionRightSide(labelClientRect, blockSize, margin) {
+    return labelClientRect.x + labelClientRect.width / 2 >= blockSize.width - margin.right;
+}
+export function shiftCoordinateXLeft(labelClientRect) {
+    labelClientRect.x -= labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
+}
+export function shiftCoordinateXRight(labelClientRect) {
+    labelClientRect.x += +labelClientRect.width / 2 + BORDER_OFFSET_SIZE_PX;
+}

package/lib/model/model.d.ts

@@ -1,5 +1,6 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollision } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
+import { BoundingRect } from "../engine/features/valueLabelsCollision/valueLabelsCollision";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
 export declare type ScaleKeyType = "band" | "point";
@@ -134,6 +135,10 @@ export interface AxisModelOptions {
     cssClass: string;
     ticks: AxisTicksModel;
     labels: AxisLabelModel;
+    line: AxisLineModel;
+}
+export interface AxisLineModel {
+    visible: boolean;
 }
 export interface TranslateModel {
     translateX: number;
@@ -155,11 +160,18 @@ export interface AdditionalElementsOptions {
 }
 export interface GridLineOptions {
     flag: GridLineFlag;
+    styles: GridLineStyles;
 }
 export interface GridLineFlag {
     key: boolean;
     value: boolean;
 }
+interface GridLineStyles {
+    dash: GridLineStylesDash;
+}
+interface GridLineStylesDash {
+    on: boolean;
+}
 export interface TwoDimChartElementsSettings {
     bar: BarChartSettings;
     lineLike: LineLikeChartSettings;
@@ -194,9 +206,41 @@ interface LineLikeChartCurveOptions {
 interface BarLikeChartHatchOptions {
     on: boolean;
 }
+export interface BarLikeChartBorderRadius {
+    grouped: BarBorderRadius;
+    segmented: SegmentedBarBorderRadius;
+}
+export interface BarBorderRadius {
+    topLeft: number;
+    topRight: number;
+    bottomLeft: number;
+    bottomRight: number;
+}
+interface SegmentedBarBorderRadius {
+    handle: (segmentIndex: number) => BarBorderRadius;
+}
 export interface TwoDimensionalValueLabels {
     collision: ValueLabelsCollision;
 }
+export interface ValueLabelsCollision {
+    otherValueLables: OtherValueLables;
+    chartBlock: ValueLabelsChartBlock;
+}
+export interface OtherValueLables {
+    mode: ValueLabelsCollisionMode;
+}
+export interface ValueLabelsChartBlock {
+    left: {
+        mode: "none" | "shift";
+        hasCollision: (labelClientRect: BoundingRect) => boolean;
+        shiftCoordinate: (labelClientRect: BoundingRect) => void;
+    };
+    right: {
+        mode: "none" | "shift";
+        hasCollision: (labelClientRect: BoundingRect) => boolean;
+        shiftCoordinate: (labelClientRect: BoundingRect) => void;
+    };
+}
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;
@@ -234,11 +278,13 @@ export interface ChartLegendModel {
     lineViewOptions: TwoDimensionalChartLegendLineModel;
 }
 export declare type LegendMarkerShape = "default" | "bar" | "line";
-export interface TwoDimensionalChartLegendBarModel extends TwoDimensionalBarLikeChartViewModel {
+export interface TwoDimensionalChartLegendBarModel {
+    hatch: BarLikeChartHatchOptions;
+    borderRadius: BarBorderRadius;
     width: number;
 }
 export interface TwoDimensionalChartLegendLineModel extends Omit<TwoDimensionalLineLikeChartViewModel, 'renderForKey'> {
-    width: number;
+    length: number;
 }
 interface TwoDimensionalLineLikeChartModel {
     lineLikeViewOptions: TwoDimensionalLineLikeChartViewModel;
@@ -246,14 +292,16 @@ interface TwoDimensionalLineLikeChartModel {
 }
 interface TwoDimensionalLineLikeChartViewModel {
     dashedStyles: LineLikeChartDashOptions;
+    strokeWidth: number;
     renderForKey: LineLikeChartRenderFn;
 }
 export declare type LineLikeChartRenderFn = (dataRow: MdtChartsDataRow, valueFieldName: string) => boolean;
 interface TwoDimensionalBarLikeChartModel {
     barViewOptions: TwoDimensionalBarLikeChartViewModel;
 }
-interface TwoDimensionalBarLikeChartViewModel {
+export interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
+    borderRadius: BarLikeChartBorderRadius;
 }
 interface TwoDimensionalAreaChartModel {
     areaViewOptions: AreaChartViewOptions;

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

@@ -52,8 +52,16 @@ export class PolarModel {
             style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig),
             legend: {
                 markerShape: "default",
-                barViewOptions: { hatch: { on: false }, width: 0 },
-                lineViewOptions: { dashedStyles: { on: false, dashSize: 0, gapSize: 0 }, width: 0 }
+                barViewOptions: {
+                    hatch: { on: false },
+                    borderRadius: { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 },
+                    width: 0
+                },
+                lineViewOptions: {
+                    dashedStyles: { on: false, dashSize: 0, gapSize: 0 },
+                    strokeWidth: 0,
+                    length: 0
+                }
             }
         });
         return chartsModel;

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

@@ -1,8 +1,11 @@
-import { AreaChartViewOptions, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
+import { AreaChartViewOptions, BarBorderRadius, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions, Orient, TwoDimensionalBarLikeChartViewModel } from "../../model";
 import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../../config/config";
 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 getSegmentedRadiusValues(segmentsLength: number, segmentIndex: number, keyAxisOrient: Orient, defaultRadius: number): BarBorderRadius;
 export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
 export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;
 export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle): AreaChartViewOptions;

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

@@ -1,5 +1,7 @@
 import { LineCurveType } from "../../model";
 import { styledElementValues } from "../../modelBuilder";
+const BAR_CHART_BORDER_RADIUS_DEFAULT = 2;
+export const LINE_CHART_DEFAULT_WIDTH = 2;
 export function parseShape(chartOrientation, configOptions) {
     var _a;
     const curveType = (_a = configOptions === null || configOptions === void 0 ? void 0 : configOptions.curve) === null || _a === void 0 ? void 0 : _a.type;
@@ -27,8 +29,54 @@ 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) {
+    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;
+    const borderRadius = {
+        grouped: getRadiusValues(defaultRadius),
+        segmented: {
+            handle: (valueIndex) => getSegmentedRadiusValues(chart.data.valueFields.length, valueIndex, keyAxisOrient, defaultRadius),
+        }
+    };
+    return { hatch, borderRadius };
+}
+function getRadiusValues(defaultRadius) {
+    return {
+        topLeft: defaultRadius,
+        topRight: defaultRadius,
+        bottomLeft: defaultRadius,
+        bottomRight: defaultRadius
+    };
+}
+export function getSegmentedRadiusValues(segmentsLength, segmentIndex, keyAxisOrient, defaultRadius) {
+    const radiusConfigs = {
+        first: {
+            top: { topLeft: defaultRadius, topRight: defaultRadius, bottomLeft: 0, bottomRight: 0 },
+            bottom: { topLeft: 0, topRight: 0, bottomLeft: defaultRadius, bottomRight: defaultRadius },
+            left: { topLeft: defaultRadius, topRight: 0, bottomLeft: defaultRadius, bottomRight: 0 },
+            right: { topLeft: 0, topRight: defaultRadius, bottomLeft: 0, bottomRight: defaultRadius },
+        },
+        last: {
+            top: { topLeft: 0, topRight: 0, bottomLeft: defaultRadius, bottomRight: defaultRadius },
+            bottom: { topLeft: defaultRadius, topRight: defaultRadius, bottomLeft: 0, bottomRight: 0 },
+            left: { topLeft: 0, topRight: defaultRadius, bottomLeft: 0, bottomRight: defaultRadius },
+            right: { topLeft: defaultRadius, topRight: 0, bottomLeft: defaultRadius, bottomRight: 0 },
+        },
+        middle: { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 },
+        default: getRadiusValues(defaultRadius)
+    };
+    if (segmentsLength === 1)
+        return radiusConfigs.default;
+    else if (segmentIndex === 0)
+        return radiusConfigs.first[keyAxisOrient];
+    else if (segmentIndex === segmentsLength - 1)
+        return radiusConfigs.last[keyAxisOrient];
+    else
+        return radiusConfigs.middle;
+}
 export function getLegendMarkerOptions(chart) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const shapeByType = {
         area: "default",
         bar: "bar",
@@ -37,8 +85,16 @@ export function getLegendMarkerOptions(chart) {
     };
     return {
         markerShape: shapeByType[chart.type],
-        barViewOptions: { 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 }, width: getWidthOfLegendMarkerByType("bar") },
-        lineViewOptions: { dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash), width: getWidthOfLegendMarkerByType("line") }
+        barViewOptions: {
+            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 },
+            borderRadius: getRadiusValues((_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),
+            width: getWidthOfLegendMarkerByType("bar")
+        },
+        lineViewOptions: {
+            dashedStyles: parseDashStyles((_g = chart.lineStyles) === null || _g === void 0 ? void 0 : _g.dash),
+            strokeWidth: (_j = (_h = chart.lineStyles) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : LINE_CHART_DEFAULT_WIDTH,
+            length: getWidthOfLegendMarkerByType("line")
+        }
     };
 }
 export function getWidthOfLegendMarkerByType(chartType) {

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -18,4 +18,5 @@ export declare class TwoDimensionalModel {
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
     private static getChartsByTypes;
+    private static getValueLabels;
 }

package/lib/model/notations/twoDimensionalModel.js

@@ -3,13 +3,12 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensional
 import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
-import { getAreaViewOptions, getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
+import { getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
-import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY, hasCollisionLeftSide, hasCollisionRightSide, shiftCoordinateXLeft, shiftCoordinateXRight } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
-        var _a;
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
         const scaleModel = new ScaleModel();
@@ -37,7 +36,7 @@ export class TwoDimensionalModel {
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
-            valueLabels: (_a = options.valueLabels) !== null && _a !== void 0 ? _a : { collision: { mode: "none" } },
+            valueLabels: this.getValueLabels(options.valueLabels, canvasModel),
             defs: {
                 gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
             }
@@ -70,7 +69,7 @@ export class TwoDimensionalModel {
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             const style = styleModel.getChartStyle(chart, index);
             chartsModel.push({
                 type: chart.type,
@@ -96,13 +95,14 @@ export class TwoDimensionalModel {
                 },
                 lineLikeViewOptions: {
                     dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
+                    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: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } },
+                barViewOptions: getBarViewOptions(chart, keyAxisOrient),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {
-                    show: (_q = (_p = chart.valueLabels) === null || _p === void 0 ? void 0 : _p.on) !== null && _q !== void 0 ? _q : false,
+                    show: (_p = (_o = chart.valueLabels) === null || _o === void 0 ? void 0 : _o.on) !== null && _p !== void 0 ? _p : false,
                     handleX: (scaledValue) => getValueLabelX(scaledValue, keyAxisOrient, canvasModel.getMargin()),
                     handleY: (scaledValue) => getValueLabelY(scaledValue, keyAxisOrient, canvasModel.getMargin()),
                     textAnchor: calculateValueLabelAlignment(keyAxisOrient).textAnchor,
@@ -115,7 +115,7 @@ export class TwoDimensionalModel {
                         type: "line",
                         handleEndCoordinate: (v) => v + 2,
                         handleStartCoordinate: (v) => v - 2,
-                        width: (_t = (_s = (_r = chart.dotLikeStyles) === null || _r === void 0 ? void 0 : _r.shape) === null || _s === void 0 ? void 0 : _s.width) !== null && _t !== void 0 ? _t : 2
+                        width: (_s = (_r = (_q = chart.dotLikeStyles) === null || _q === void 0 ? void 0 : _q.shape) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : 2
                     }
                 }
             });
@@ -136,11 +136,40 @@ export class TwoDimensionalModel {
         return 'none';
     }
     static getAdditionalElements(options) {
+        var _a, _b;
+        const { flag, styles } = options.additionalElements.gridLine;
         return {
-            gridLine: options.additionalElements.gridLine
+            gridLine: {
+                flag,
+                styles: {
+                    dash: { on: (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.dash) === null || _a === void 0 ? void 0 : _a.on) !== null && _b !== void 0 ? _b : false }
+                }
+            }
         };
     }
     static getChartsByTypes(charts, types) {
         return charts.filter(chart => types.includes(chart.type));
     }
+    static getValueLabels(valueLabels, canvasModel) {
+        var _a;
+        return {
+            collision: {
+                otherValueLables: (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.collision.otherValueLabels) !== null && _a !== void 0 ? _a : {
+                    mode: 'none'
+                },
+                chartBlock: {
+                    left: {
+                        mode: 'shift',
+                        hasCollision: (labelClientRect) => hasCollisionLeftSide(labelClientRect, canvasModel.getMargin()),
+                        shiftCoordinate: (labelClientRect) => shiftCoordinateXRight(labelClientRect),
+                    },
+                    right: {
+                        mode: 'shift',
+                        hasCollision: (labelClientRect) => hasCollisionRightSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
+                        shiftCoordinate: (labelClientRect) => shiftCoordinateXLeft(labelClientRect),
+                    }
+                }
+            },
+        };
+    }
 }

package/lib/style/charts-main.css

@@ -11,7 +11,6 @@
 }
 .line {
     fill: none;
-    stroke-width: 4;
 }
 
 .area-border-line {
@@ -55,15 +54,16 @@
     display: flex;
     height: 100%;
 }
+.legend-block-centered {
+    justify-content: center;
+}
 .legend-block-column {
     flex-direction: column;
 }
 .legend-block-row {
     flex-direction: row;
     flex-wrap: wrap;
-}
-.legend-block-centered {
-    justify-content: center;
+    align-items: flex-end;
 }
 .legend-item {
     cursor: default;
@@ -103,6 +103,9 @@
     overflow: hidden;
     line-height: normal;
 }
+.legend-2d-label {
+    font-weight: 500;
+}
 .legend-label-nowrap {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -203,10 +206,10 @@
 
 /*========================================================================= Additional */
 .mdt-charts-axis .domain {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 .mdt-charts-axis .tick line:first-of-type {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Aggregator */
@@ -229,8 +232,7 @@
 
 /* Grid */
 .grid-line {
-    stroke: #D2D2D2;
-    stroke-dasharray: 3;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Record overflow */

package/lib/style/charts-main.less

@@ -11,7 +11,6 @@
 }
 .line {
     fill: none;
-    stroke-width: 4;
 }
 
 .area-border-line {
@@ -55,15 +54,16 @@
     display: flex;
     height: 100%;
 }
+.legend-block-centered {
+    justify-content: center;
+}
 .legend-block-column {
     flex-direction: column;
 }
 .legend-block-row {
     flex-direction: row;
     flex-wrap: wrap;
-}
-.legend-block-centered {
-    justify-content: center;
+    align-items: flex-end;
 }
 .legend-item {
     cursor: default;
@@ -103,6 +103,9 @@
     overflow: hidden;
     line-height: normal;
 }
+.legend-2d-label {
+    font-weight: 500;
+}
 .legend-label-nowrap {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -203,10 +206,10 @@
 
 /*========================================================================= Additional */
 .mdt-charts-axis .domain {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 .mdt-charts-axis .tick line:first-of-type {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Aggregator */
@@ -229,8 +232,7 @@
 
 /* Grid */
 .grid-line {
-    stroke: #D2D2D2;
-    stroke-dasharray: 3;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Record overflow */

package/package.json

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