mdt-charts 1.35.1 → 1.37.0

package/lib/config/config.d.ts

@@ -54,6 +54,25 @@ export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
     orientation: ChartOrientation;
     valueLabels?: MdtChartsTwoDimensionalValueLabels;
     grouping?: TwoDimGroupingOptions;
+    events?: TwoDimensionalEvents;
+}
+interface TwoDimensionalEvents {
+    drawComplete?: (event: TwoDimensionalDrawCompleteEvent) => void;
+}
+interface TwoDimensionalDrawCompleteEvent {
+    canvas: {
+        keyItems: CanvasKeyItemOptions[];
+        plotAreaMargin: BlockMargin;
+    };
+}
+export interface BlockMargin {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface CanvasKeyItemOptions {
+    totalSize: number;
 }
 export interface MdtChartsPolarOptions extends GraphicNotationOptions {
     type: "polar";

package/lib/engine/block/blockSvg.js

@@ -4,7 +4,7 @@ import { HatchPatternDef } from "./defs/hatchPattern";
 export class BlockSvg {
     constructor(options) {
         this.hatchPatternDef = new HatchPatternDef();
-        this.chartBlockClass = "chart-block";
+        this.chartBlockClass = "plot-area";
         this.chartGroupClass = "chart-group";
         this.svgCssClasses = options.svgCssClasses;
         this.parentBlockId = options.parentBlockId;

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

@@ -1,4 +1,4 @@
-import { TwoDimGroupingModel } from "../../../model/model";
+import { GroupingItemLabelsModel } from "../../../model/model";
 import { Block } from "../../block/block";
 interface GroupAxisLabelsOptions {
     elementAccessors: {
@@ -10,8 +10,8 @@ export declare class GroupAxisLabels {
     private readonly renderPipeline;
     private groupsForLabels;
     constructor(options: GroupAxisLabelsOptions);
-    render(model: TwoDimGroupingModel): void;
-    update(model: TwoDimGroupingModel): void;
+    render(items: GroupingItemLabelsModel[]): void;
+    update(items: GroupingItemLabelsModel[]): void;
     private setAttrs;
 }
 export {};

package/lib/engine/features/groupLabels/groupLabels.js

@@ -8,10 +8,8 @@ export class GroupAxisLabels {
             return this.setAttrs(groupLabels.classed("group-label data-label", true), item);
         });
     }
-    render(model) {
-        if (!model.enabled)
-            return;
-        model.items.forEach((item, index) => {
+    render(items) {
+        items.forEach((item, index) => {
             const group = this.options.elementAccessors
                 .getBlock()
                 .getSvg()
@@ -27,10 +25,8 @@ export class GroupAxisLabels {
             this.renderPipeline.execute(labels, { item });
         });
     }
-    update(model) {
-        if (!model.enabled)
-            return;
-        model.items.forEach((item, index) => {
+    update(items) {
+        items.forEach((item, index) => {
             const group = this.groupsForLabels[index];
             if (!group)
                 return;

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

@@ -0,0 +1,23 @@
+import { GroupingSplitLineAttributes } from "../../../model/model";
+import { Block } from "../../block/block";
+interface GroupLinesOptions {
+    elementAccessors: {
+        getBlock: () => Block;
+    };
+}
+export declare class GroupLines {
+    private readonly options;
+    private edgeLinesGroup;
+    private splitLinesGroups;
+    private readonly edgeLinesGroupCssClass;
+    private readonly splitLinesGroupCssClass;
+    constructor(options: GroupLinesOptions);
+    render(edgeLines: GroupingSplitLineAttributes[], splitLinesByItems: GroupingSplitLineAttributes[][]): void;
+    update(edgeLines: GroupingSplitLineAttributes[], splitLinesByItems: GroupingSplitLineAttributes[][]): void;
+    private renderEdgeLines;
+    private renderSplitLines;
+    private updateEdgeLines;
+    private updateSplitLines;
+    private setAttrs;
+}
+export {};

package/lib/engine/features/groupLines/groupLines.js

@@ -0,0 +1,67 @@
+export class GroupLines {
+    constructor(options) {
+        this.options = options;
+        this.splitLinesGroups = [];
+        this.edgeLinesGroupCssClass = "group-edge-lines";
+        this.splitLinesGroupCssClass = "group-split-lines";
+    }
+    render(edgeLines, splitLinesByItems) {
+        this.renderEdgeLines(edgeLines);
+        this.renderSplitLines(splitLinesByItems);
+    }
+    update(edgeLines, splitLinesByItems) {
+        this.updateEdgeLines(edgeLines);
+        this.updateSplitLines(splitLinesByItems);
+    }
+    renderEdgeLines(edgeLines) {
+        const block = this.options.elementAccessors.getBlock();
+        this.edgeLinesGroup = block.getSvg().append("g").classed(this.edgeLinesGroupCssClass, true);
+        const lines = this.edgeLinesGroup.selectAll("line").data(edgeLines).enter().append("line");
+        this.setAttrs(lines);
+    }
+    renderSplitLines(splitLinesByItems) {
+        splitLinesByItems.forEach((splitLines) => {
+            const group = this.options.elementAccessors
+                .getBlock()
+                .getSvg()
+                .append("g")
+                .classed(this.splitLinesGroupCssClass, true);
+            this.splitLinesGroups.push(group);
+            const lines = group.selectAll("line").data(splitLines).enter().append("line");
+            this.setAttrs(lines);
+        });
+    }
+    updateEdgeLines(edgeLines) {
+        const animationName = "grouping-edge-lines-animation";
+        const lines = this.edgeLinesGroup
+            .selectAll("line")
+            .data(edgeLines)
+            .interrupt(animationName)
+            .transition(animationName)
+            .duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate);
+        this.setAttrs(lines);
+    }
+    updateSplitLines(splitLinesByItems) {
+        splitLinesByItems.forEach((splitLines, index) => {
+            const existedLines = this.splitLinesGroups[index]
+                .selectAll("line")
+                .data(splitLines);
+            existedLines.exit().remove();
+            const newLines = existedLines.enter().append("line");
+            this.setAttrs(newLines);
+            const animationName = "grouping-split-lines-animation";
+            this.setAttrs(existedLines
+                .interrupt(animationName)
+                .transition(animationName)
+                .duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate));
+        });
+    }
+    setAttrs(lines) {
+        //TODO: make though render and update pipeline
+        return lines
+            .attr("x1", (d) => d.x1)
+            .attr("y1", (d) => d.y1)
+            .attr("x2", (d) => d.x2)
+            .attr("y2", (d) => d.y2);
+    }
+}

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

@@ -44,7 +44,7 @@ export class Scale {
         return scaleBand()
             .domain(scaleKey.domain)
             .range([scaleKey.range.start, scaleKey.range.end])
-            .paddingInner(scaleKey.sizes.paddingInner / scaleKey.sizes.bandSize)
+            .paddingInner(scaleKey.sizes.paddingInner / scaleKey.sizes.oneKeyTotalSpace)
             .paddingOuter(scaleKey.sizes.paddingOuter / scaleKey.sizes.recalculatedStepSize);
     }
     //TODO: remove after tests of new way to create scale band

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

@@ -26,7 +26,7 @@ export declare class DotChartSettingsStore implements BandLikeChartSettingsStore
     getBandItemSize(): number;
     getBandItemPad(): number;
 }
-export declare class BarSettingsStore {
+export declare class BarSettingsStore implements BandLikeChartSettingsStore {
     private readonly modelSettings;
     private readonly canvasConfig;
     constructor(modelSettings: BarChartSettings, canvasConfig: {

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

@@ -8,7 +8,8 @@ export declare class TwoDimensionalManager implements ChartContentManager {
     private canvasValueLabels?;
     private linearGradientDef?;
     private dotChart;
-    private groupLabels;
+    private groupLabels?;
+    private groupLines?;
     render(engine: Engine, model: Model<TwoDimensionalOptionsModel>): void;
     updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -17,6 +17,7 @@ import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
 import { CanvasDotChart } from "./dot/dotChart";
 import { RecordOverflowAlertCore } from "../features/recordOverflowAlert/recordOverflowAlertCore";
 import { GroupAxisLabels } from "../features/groupLabels/groupLabels";
+import { GroupLines } from "../features/groupLines/groupLines";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -39,12 +40,20 @@ export class TwoDimensionalManager {
                 settings: options.chartSettings.bar
             }
         });
-        this.groupLabels = new GroupAxisLabels({
-            elementAccessors: {
-                getBlock: () => engine.block
-            }
-        });
-        this.groupLabels.render(options.grouping);
+        if (options.grouping.enabled) {
+            this.groupLabels = new GroupAxisLabels({
+                elementAccessors: {
+                    getBlock: () => engine.block
+                }
+            });
+            this.groupLabels.render(options.grouping.items.map((item) => item.labels));
+            this.groupLines = new GroupLines({
+                elementAccessors: {
+                    getBlock: () => engine.block
+                }
+            });
+            this.groupLines.render(options.grouping.edgeLines, options.grouping.items.map((item) => item.splitLines));
+        }
         this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings, model.blockCanvas.size);
         Axis.raiseKeyAxis(engine.block, options.axis.key);
         engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
@@ -76,8 +85,10 @@ export class TwoDimensionalManager {
             this.linearGradientDef = new LinearGradientDef();
             this.linearGradientDef.render(engine.block.svg.ensureDefsRendered(), options.defs.gradients);
         }
+        model.options.canvasEvents.drawCompleted();
     }
     updateData(block, model, data) {
+        var _a, _b;
         block.transitionManager.interruptTransitions();
         block.filterEventManager.updateData(data[model.options.data.dataSource]);
         Title.updateData(block, model.options.title);
@@ -90,12 +101,16 @@ export class TwoDimensionalManager {
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
         GridLine.update(block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
-        this.groupLabels.update(options.grouping);
+        if (options.grouping.enabled) {
+            (_a = this.groupLabels) === null || _a === void 0 ? void 0 : _a.update(options.grouping.items.map((item) => item.labels));
+            (_b = this.groupLines) === null || _b === void 0 ? void 0 : _b.update(options.grouping.edgeLines, options.grouping.items.map((item) => item.splitLines));
+        }
         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(() => {
             block.filterEventManager.event2DUpdate(options);
             block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
             Tooltip.render(block, model, model.otherComponents.tooltipBlock, scales);
+            model.options.canvasEvents.drawCompleted();
         });
         RecordOverflowAlertCore.update(block, options.recordOverflowAlert);
         if (this.canvasValueLabels)

package/lib/model/featuresModel/grouping/groupingDataAmountCalculator/groupingDataAmountCalculator.d.ts

@@ -0,0 +1,15 @@
+import { MdtChartsBaseField, MdtChartsDataRow } from "../../../../config/config";
+import { GroupingLabelKey } from "../../../model";
+interface GroupingCanvasCalculatorOptions {
+    dataRows: MdtChartsDataRow[];
+    field: MdtChartsBaseField;
+}
+export declare class GroupingDataAmountCalculator {
+    private readonly options;
+    constructor(options: GroupingCanvasCalculatorOptions);
+    calculate(): {
+        rowsCountsPerGroups: number[];
+        groupDomain: GroupingLabelKey[];
+    };
+}
+export {};

package/lib/model/featuresModel/grouping/groupingDataAmountCalculator/groupingDataAmountCalculator.js

@@ -0,0 +1,22 @@
+export class GroupingDataAmountCalculator {
+    constructor(options) {
+        this.options = options;
+    }
+    calculate() {
+        const domainWithRowsCount = new Map();
+        this.options.dataRows.forEach((row) => {
+            const key = row[this.options.field.name];
+            if (key) {
+                if (domainWithRowsCount.has(key))
+                    domainWithRowsCount.set(key, domainWithRowsCount.get(key) + 1);
+                else
+                    domainWithRowsCount.set(key, 1);
+            }
+        });
+        const rowsCounts = Array.from(domainWithRowsCount.values());
+        return {
+            rowsCountsPerGroups: rowsCounts,
+            groupDomain: Array.from(domainWithRowsCount.keys())
+        };
+    }
+}

package/lib/model/featuresModel/grouping/groupingEdgeLines/groupingEdgeLinesGenerator.d.ts

@@ -0,0 +1,15 @@
+import { GroupingSplitLineAttributes, Orient } from "../../../model";
+import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
+import { GroupingStaticCoordinateCalculator } from "../groupingLabels/staticCoordinateCalculator";
+interface GroupingEdgeLinesGeneratorOptions {
+    orients: Iterable<Orient>;
+    staticCoordinateCalculator: GroupingStaticCoordinateCalculator;
+    canvasModel: CanvasModel;
+    lineWidth: number;
+}
+export declare class GroupingEdgeLinesGenerator {
+    private readonly options;
+    constructor(options: GroupingEdgeLinesGeneratorOptions);
+    generate(): GroupingSplitLineAttributes[];
+}
+export {};

package/lib/model/featuresModel/grouping/groupingEdgeLines/groupingEdgeLinesGenerator.js

@@ -0,0 +1,51 @@
+export class GroupingEdgeLinesGenerator {
+    constructor(options) {
+        this.options = options;
+    }
+    generate() {
+        let edgeLines = [];
+        for (const orient of this.options.orients) {
+            if (orient === "top") {
+                const y1 = this.options.staticCoordinateCalculator.calculate(orient, 0);
+                const y2 = this.options.canvasModel.getMarginSide("top");
+                const leftX = this.options.canvasModel.getMarginSide("left");
+                const rightX = this.options.canvasModel.getBlockSize().width - this.options.canvasModel.getMarginSide("right");
+                edgeLines = edgeLines.concat([
+                    { x1: leftX + this.options.lineWidth / 2, x2: leftX + this.options.lineWidth / 2, y1, y2 },
+                    { x1: rightX - this.options.lineWidth / 2, x2: rightX - this.options.lineWidth / 2, y1, y2 }
+                ]);
+            }
+            if (orient === "bottom") {
+                const y1 = this.options.canvasModel.getBlockSize().height - this.options.canvasModel.getMarginSide("bottom");
+                const y2 = this.options.staticCoordinateCalculator.calculate(orient, 0);
+                const leftX = this.options.canvasModel.getMarginSide("left");
+                const rightX = this.options.canvasModel.getBlockSize().width - this.options.canvasModel.getMarginSide("right");
+                edgeLines = edgeLines.concat([
+                    { x1: leftX + this.options.lineWidth / 2, x2: leftX + this.options.lineWidth / 2, y1, y2 },
+                    { x1: rightX - this.options.lineWidth / 2, x2: rightX - this.options.lineWidth / 2, y1, y2 }
+                ]);
+            }
+            if (orient === "left") {
+                const x1 = this.options.staticCoordinateCalculator.calculate(orient, 0);
+                const x2 = this.options.canvasModel.getMarginSide("left");
+                const topY = this.options.canvasModel.getMarginSide("top");
+                const bottomY = this.options.canvasModel.getBlockSize().height - this.options.canvasModel.getMarginSide("bottom");
+                edgeLines = edgeLines.concat([
+                    { x1, x2, y1: topY + this.options.lineWidth / 2, y2: topY + this.options.lineWidth / 2 },
+                    { x1, x2, y1: bottomY - this.options.lineWidth / 2, y2: bottomY - this.options.lineWidth / 2 }
+                ]);
+            }
+            if (orient === "right") {
+                const x1 = this.options.canvasModel.getBlockSize().width - this.options.canvasModel.getMarginSide("right");
+                const x2 = this.options.staticCoordinateCalculator.calculate(orient, 0);
+                const topY = this.options.canvasModel.getMarginSide("top");
+                const bottomY = this.options.canvasModel.getBlockSize().height - this.options.canvasModel.getMarginSide("bottom");
+                edgeLines = edgeLines.concat([
+                    { x1, x2, y1: topY + this.options.lineWidth / 2, y2: topY + this.options.lineWidth / 2 },
+                    { x1, x2, y1: bottomY - this.options.lineWidth / 2, y2: bottomY - this.options.lineWidth / 2 }
+                ]);
+            }
+        }
+        return edgeLines;
+    }
+}

package/lib/model/featuresModel/grouping/groupingLabels/groupingLabelsCoordinateHandlers.d.ts

@@ -1,19 +1,16 @@
 import { Orient } from "../../../model";
 import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
+import { GroupingStaticCoordinateCalculator } from "./staticCoordinateCalculator";
 interface GroupingLabelsCoordinateHandlerOptions {
     orient: Orient;
     sideIndex: number;
-    otherComponentSizes: {
-        titleTotalNeededSpace: number;
-        legendTotalNeededSpace: number;
-    };
+    staticCoordinateCalculator: GroupingStaticCoordinateCalculator;
+    canvasModel: CanvasModel;
 }
 export declare class GroupingLabelsCoordinateHandler {
-    private readonly canvasModel;
     private readonly options;
     private readonly staticCoordinate;
-    private readonly verticalLabelSize;
-    constructor(canvasModel: CanvasModel, options: GroupingLabelsCoordinateHandlerOptions);
+    constructor(options: GroupingLabelsCoordinateHandlerOptions);
     handleX(scaledCoordinate: number): number;
     handleY(scaledCoordinate: number): number;
 }

package/lib/model/featuresModel/grouping/groupingLabels/groupingLabelsCoordinateHandlers.js

@@ -1,26 +1,12 @@
 export class GroupingLabelsCoordinateHandler {
-    constructor(canvasModel, options) {
-        this.canvasModel = canvasModel;
+    constructor(options) {
         this.options = options;
-        this.verticalLabelSize = 20;
-        if (this.options.orient === "top")
-            this.staticCoordinate =
-                options.otherComponentSizes.titleTotalNeededSpace + this.verticalLabelSize * this.options.sideIndex;
-        if (this.options.orient === "bottom")
-            this.staticCoordinate =
-                this.canvasModel.getBlockSize().height -
-                    options.otherComponentSizes.legendTotalNeededSpace -
-                    this.verticalLabelSize * this.options.sideIndex;
-        //TODO: padding should be got from other components
-        if (this.options.orient === "left")
-            this.staticCoordinate = 20 * this.options.sideIndex;
-        if (this.options.orient === "right")
-            this.staticCoordinate = this.canvasModel.getBlockSize().width - 20 * this.options.sideIndex;
+        this.staticCoordinate = this.options.staticCoordinateCalculator.calculate(this.options.orient, this.options.sideIndex);
     }
     handleX(scaledCoordinate) {
         let x;
         if (this.options.orient === "top" || this.options.orient === "bottom")
-            x = scaledCoordinate + this.canvasModel.getMarginSide("left");
+            x = scaledCoordinate + this.options.canvasModel.getMarginSide("left");
         else
             x = this.staticCoordinate;
         return x;
@@ -28,7 +14,7 @@ export class GroupingLabelsCoordinateHandler {
     handleY(scaledCoordinate) {
         let y;
         if (this.options.orient === "left" || this.options.orient === "right")
-            y = scaledCoordinate + this.canvasModel.getMarginSide("top");
+            y = scaledCoordinate + this.options.canvasModel.getMarginSide("top");
         else
             y = this.staticCoordinate;
         return y;

package/lib/model/featuresModel/grouping/groupingLabels/groupingLabelsScaler.d.ts

@@ -1,18 +1,10 @@
-import { MdtChartsBaseField, MdtChartsDataRow } from "../../../../config/config";
-import { GroupingLabelKey, RangeModel } from "../../../model";
+import { GroupingLabelKey } from "../../../model";
+import { GroupingDataAmountCalculator } from "../groupingDataAmountCalculator/groupingDataAmountCalculator";
+import { ScaleCanvasSizesCalculator } from "../../scaleModel/sizaCalculators/scaleCanvasSizesCalculator";
 interface GroupingLabelsCoordinateScalerOptions {
-    dataRows: MdtChartsDataRow[];
-    field: MdtChartsBaseField;
-    keyScaleInfo: KeyScaleInfoForGroupingLabelsScaler;
-    range: RangeModel;
+    dataAmountCalculator: GroupingDataAmountCalculator;
+    sizesCalculator: ScaleCanvasSizesCalculator;
 }
-export declare type KeyScaleInfoForGroupingLabelsScaler = {
-    type: "band";
-    keyAxisOuterPadding: number;
-    keyAxisInnerPadding: number;
-} | {
-    type: "point";
-};
 export declare class GroupingLabelsCoordinateScaler {
     private readonly options;
     private readonly scaleFn;

package/lib/model/featuresModel/grouping/groupingLabels/groupingLabelsScaler.js

@@ -2,45 +2,18 @@ import { scaleOrdinal } from "d3-scale";
 export class GroupingLabelsCoordinateScaler {
     constructor(options) {
         this.options = options;
-        let keyAxisInnerPadding = 0;
-        let keyAxisOuterPadding = 0;
-        if (this.options.keyScaleInfo.type === "band") {
-            keyAxisInnerPadding = this.options.keyScaleInfo.keyAxisInnerPadding;
-            keyAxisOuterPadding = this.options.keyScaleInfo.keyAxisOuterPadding;
-        }
-        else {
-            keyAxisInnerPadding =
-                (this.options.range.end - this.options.range.start) / (this.options.dataRows.length - 1);
-            keyAxisOuterPadding = 0;
-        }
-        const domainWithRowsCount = new Map();
-        this.options.dataRows.forEach((row) => {
-            const key = row[this.options.field.name];
-            if (key) {
-                if (domainWithRowsCount.has(key))
-                    domainWithRowsCount.set(key, domainWithRowsCount.get(key) + 1);
-                else
-                    domainWithRowsCount.set(key, 1);
-            }
-        });
-        const rangeOfKeyAxis = Math.abs(this.options.range.end - this.options.range.start) -
-            keyAxisOuterPadding * 2 -
-            keyAxisInnerPadding * (this.options.dataRows.length - 1);
-        const totalShares = Array.from(domainWithRowsCount.values()).reduce((acc, curr) => acc + curr, 0);
-        const oneShareSize = rangeOfKeyAxis / totalShares;
-        const coordinates = [];
+        const { innerPadding, oneKeyPureSize, outerPadding } = this.options.sizesCalculator.calculate();
+        const { rowsCountsPerGroups, groupDomain } = this.options.dataAmountCalculator.calculate();
         let previousTotalShares = 0;
-        const rowsCounts = Array.from(domainWithRowsCount.values());
-        for (let rowIndex = 0; rowIndex < rowsCounts.length; rowIndex++) {
-            const rowsAmount = rowsCounts[rowIndex];
-            let previousShift = previousTotalShares * (oneShareSize + keyAxisInnerPadding);
-            const centerOfDomainItem = previousShift +
-                (rowsAmount * oneShareSize + (rowsAmount - 1) * keyAxisInnerPadding) / 2 +
-                keyAxisOuterPadding;
+        const coordinates = [];
+        for (let rowIndex = 0; rowIndex < rowsCountsPerGroups.length; rowIndex++) {
+            const rowsAmount = rowsCountsPerGroups[rowIndex];
+            let previousShift = previousTotalShares * (oneKeyPureSize + innerPadding);
+            const centerOfDomainItem = previousShift + (rowsAmount * oneKeyPureSize + (rowsAmount - 1) * innerPadding) / 2 + outerPadding;
             coordinates.push(centerOfDomainItem);
             previousTotalShares += rowsAmount;
         }
-        const d3Scale = scaleOrdinal(domainWithRowsCount.keys(), coordinates);
+        const d3Scale = scaleOrdinal(groupDomain, coordinates);
         this.scaleFn = (key) => d3Scale(key);
     }
     scaleForKey(groupingKey) {

package/lib/model/featuresModel/grouping/groupingLabels/staticCoordinateCalculator.d.ts

@@ -0,0 +1,17 @@
+import { Orient } from "../../../model";
+import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
+import { GroupingItemSize } from "../../../modelInstance/configReader/twoDimConfigReader/groupingConfigReader/groupingConfigReader";
+interface GroupingStaticCoordinateCalculatorOptions {
+    otherComponentSizes: {
+        titleTotalNeededSpace: number;
+        legendTotalNeededSpace: number;
+    };
+    groupingItemSizes: GroupingItemSize[];
+    canvasModel: CanvasModel;
+}
+export declare class GroupingStaticCoordinateCalculator {
+    private readonly options;
+    constructor(options: GroupingStaticCoordinateCalculatorOptions);
+    calculate(orient: Orient, sideIndex: number): number;
+}
+export {};

package/lib/model/featuresModel/grouping/groupingLabels/staticCoordinateCalculator.js

@@ -0,0 +1,27 @@
+export class GroupingStaticCoordinateCalculator {
+    constructor(options) {
+        this.options = options;
+    }
+    calculate(orient, sideIndex) {
+        const slicesSizesByCurrentOrient = this.options.groupingItemSizes.filter((item) => item.orient === orient);
+        const prevSlicesSizes = slicesSizesByCurrentOrient
+            .slice(0, sideIndex)
+            .reduce((acc, item) => acc + item.size, 0);
+        let staticCoordinate;
+        if (orient === "top")
+            staticCoordinate = this.options.otherComponentSizes.titleTotalNeededSpace + prevSlicesSizes * sideIndex;
+        if (orient === "bottom")
+            staticCoordinate =
+                this.options.canvasModel.getBlockSize().height -
+                    this.options.otherComponentSizes.legendTotalNeededSpace -
+                    prevSlicesSizes * sideIndex;
+        if (orient === "left")
+            staticCoordinate = prevSlicesSizes * sideIndex;
+        if (orient === "right")
+            staticCoordinate = this.options.canvasModel.getBlockSize().width - prevSlicesSizes * sideIndex;
+        if (staticCoordinate === undefined) {
+            throw new Error(`Static coordinate for orient ${orient} and sideIndex ${sideIndex} is undefined`);
+        }
+        return staticCoordinate;
+    }
+}

package/lib/model/featuresModel/grouping/groupingSplitLines/groupingSplitLines.d.ts

@@ -0,0 +1,19 @@
+import { GroupingSplitLineAttributes, Orient } from "../../../model";
+import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
+import { ScaleCanvasSizesCalculator } from "../../scaleModel/sizaCalculators/scaleCanvasSizesCalculator";
+import { GroupingDataAmountCalculator } from "../groupingDataAmountCalculator/groupingDataAmountCalculator";
+import { GroupingStaticCoordinateCalculator } from "../groupingLabels/staticCoordinateCalculator";
+interface GroupingSplitLinesGeneratorOptions {
+    dataAmountCalculator: GroupingDataAmountCalculator;
+    sizesCalculator: ScaleCanvasSizesCalculator;
+    orient: Orient;
+    sideIndex: number;
+    staticCoordinateCalculator: GroupingStaticCoordinateCalculator;
+    canvasModel: CanvasModel;
+}
+export declare class GroupingSplitLinesGenerator {
+    private readonly options;
+    constructor(options: GroupingSplitLinesGeneratorOptions);
+    generate(): GroupingSplitLineAttributes[];
+}
+export {};

package/lib/model/featuresModel/grouping/groupingSplitLines/groupingSplitLines.js

@@ -0,0 +1,45 @@
+export class GroupingSplitLinesGenerator {
+    constructor(options) {
+        this.options = options;
+    }
+    generate() {
+        let previousTotalShares = 0;
+        const coordinates = [];
+        const { innerPadding, outerPadding, oneKeyPureSize } = this.options.sizesCalculator.calculate();
+        const { rowsCountsPerGroups } = this.options.dataAmountCalculator.calculate();
+        for (let rowIndex = 0; rowIndex < rowsCountsPerGroups.length - 1; rowIndex++) {
+            const rowsAmount = rowsCountsPerGroups[rowIndex];
+            let previousShift = previousTotalShares * (oneKeyPureSize + innerPadding);
+            const coordinate = previousShift + outerPadding + rowsAmount * (oneKeyPureSize + innerPadding) - innerPadding / 2;
+            coordinates.push(coordinate);
+            previousTotalShares += rowsAmount;
+        }
+        return coordinates.map((coordinate) => {
+            if (this.options.orient === "bottom") {
+                const y1 = this.options.canvasModel.getBlockSize().height - this.options.canvasModel.getMarginSide("bottom");
+                const y2 = this.options.staticCoordinateCalculator.calculate(this.options.orient, this.options.sideIndex);
+                const coordinateWithMargin = coordinate + this.options.canvasModel.getMarginSide("left");
+                return { x1: coordinateWithMargin, x2: coordinateWithMargin, y1, y2 };
+            }
+            if (this.options.orient === "top") {
+                const y1 = this.options.staticCoordinateCalculator.calculate(this.options.orient, this.options.sideIndex);
+                const y2 = this.options.canvasModel.getMarginSide("top");
+                const coordinateWithMargin = coordinate + this.options.canvasModel.getMarginSide("left");
+                return { x1: coordinateWithMargin, x2: coordinateWithMargin, y1, y2 };
+            }
+            if (this.options.orient === "left") {
+                const x1 = this.options.staticCoordinateCalculator.calculate(this.options.orient, this.options.sideIndex);
+                const x2 = this.options.canvasModel.getMarginSide("left");
+                const coordinateWithMargin = coordinate + this.options.canvasModel.getMarginSide("top");
+                return { x1, x2, y1: coordinateWithMargin, y2: coordinateWithMargin };
+            }
+            if (this.options.orient === "right") {
+                const x1 = this.options.staticCoordinateCalculator.calculate(this.options.orient, this.options.sideIndex);
+                const x2 = this.options.canvasModel.getBlockSize().width - this.options.canvasModel.getMarginSide("right");
+                const coordinateWithMargin = coordinate + this.options.canvasModel.getMarginSide("top");
+                return { x1, x2, y1: coordinateWithMargin, y2: coordinateWithMargin };
+            }
+            throw new Error("Got unknown orient when generate grouping split lines");
+        });
+    }
+}

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

@@ -1,6 +1,6 @@
 import { MdtChartsTwoDimLegend } from "../../../config/config";
 import { LegendBlockModel } from "../../model";
-import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
+import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader/twoDimConfigReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class TwoDimLegendModel {
     private configReader;

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

@@ -1,7 +1,7 @@
 import { ScaleKeyModel, ScaleValueModel } from "../../model";
 import { MdtChartsTwoDimensionalOptions, MdtChartsDataRow } from "../../../config/config";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
-import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
+import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader/twoDimConfigReader";
 import { BarOptionsCanvas } from "../../../designer/designerConfig";
 export declare enum ScaleType {
     Key = 0,

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

@@ -25,8 +25,7 @@ export class ScaleModel {
             return Object.assign(Object.assign({}, baseModel), { type: "point" });
         }
         if (type === "band") {
-            const elementsInGroupAmount = getElementsAmountForScale(bandLikeCharts);
-            return Object.assign(Object.assign({}, baseModel), { type: "band", elementsAmount: elementsInGroupAmount, sizes: this.getBandScaleSizeParams(baseModel.domain, baseModel.range, elementsInGroupAmount) });
+            return Object.assign(Object.assign({}, baseModel), { type: "band", sizes: this.getBandScaleSizeParams(baseModel.domain, baseModel.range, getElementsAmountForScale(bandLikeCharts)) });
         }
         throw new Error("Unknown scale key type");
     }
@@ -61,8 +60,8 @@ export class ScaleModel {
         };
         const getStepSize = () => (Math.abs(range.end - range.start) + paddings.inner - 2 * paddings.outer) / domainValues.length;
         const getBandSize = () => getStepSize() - paddings.inner;
-        const initialBandSize = getBandSize();
-        if (this.barCanvas.groupMinDistance < initialBandSize) {
+        const oneKeyTotalSpace = getBandSize();
+        if (this.barCanvas.groupMinDistance < oneKeyTotalSpace) {
             paddings.inner = this.barCanvas.groupMinDistance;
             paddings.outer = this.barCanvas.groupMinDistance / 2;
         }
@@ -84,7 +83,7 @@ export class ScaleModel {
         return {
             paddingInner: paddings.inner,
             paddingOuter: paddings.outer,
-            bandSize: initialBandSize,
+            oneKeyTotalSpace,
             recalculatedStepSize: getStepSize()
         };
     }

package/lib/model/featuresModel/scaleModel/sizaCalculators/keyTotalSpaceCalculator.d.ts

@@ -0,0 +1,11 @@
+import { CanvasKeyItemOptions } from "../../../../config/config";
+import { ScaleCanvasSizesCalculator } from "./scaleCanvasSizesCalculator";
+interface KeyTotalSpaceCalculatorOptions {
+    scaleSizesCalculator: ScaleCanvasSizesCalculator;
+}
+export declare class KeyTotalSpaceCalculator {
+    private readonly options;
+    constructor(options: KeyTotalSpaceCalculatorOptions);
+    calculate(): CanvasKeyItemOptions[];
+}
+export {};

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

@@ -0,0 +1,16 @@
+export class KeyTotalSpaceCalculator {
+    constructor(options) {
+        this.options = options;
+    }
+    calculate() {
+        const sizes = this.options.scaleSizesCalculator.calculate();
+        const items = new Array(sizes.keysAmount);
+        for (let i = 0; i < sizes.keysAmount; i++) {
+            if (i === 0 || i === sizes.keysAmount - 1)
+                items[i] = { totalSize: sizes.outerPadding + sizes.oneKeyPureSize + sizes.innerPadding / 2 };
+            else
+                items[i] = { totalSize: sizes.oneKeyPureSize + sizes.innerPadding };
+        }
+        return items;
+    }
+}

package/lib/model/featuresModel/scaleModel/sizaCalculators/scaleCanvasSizesCalculator.d.ts

@@ -0,0 +1,14 @@
+import { ScaleKeyModel } from "../../../model";
+export interface KeyScaleCanvasSizes {
+    innerPadding: number;
+    outerPadding: number;
+    oneKeyPureSize: number;
+    keysAmount: number;
+}
+export declare class ScaleCanvasSizesCalculator {
+    private readonly options;
+    constructor(options: {
+        keyScale: ScaleKeyModel;
+    });
+    calculate(): KeyScaleCanvasSizes;
+}

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

@@ -0,0 +1,25 @@
+export class ScaleCanvasSizesCalculator {
+    constructor(options) {
+        this.options = options;
+    }
+    calculate() {
+        if (this.options.keyScale.type === "band") {
+            const rangeOfKeyAxis = Math.abs(this.options.keyScale.range.end - this.options.keyScale.range.start) -
+                this.options.keyScale.sizes.paddingOuter * 2 -
+                this.options.keyScale.sizes.paddingInner * (this.options.keyScale.domain.length - 1);
+            return {
+                innerPadding: this.options.keyScale.sizes.paddingInner,
+                outerPadding: this.options.keyScale.sizes.paddingOuter,
+                oneKeyPureSize: rangeOfKeyAxis / this.options.keyScale.domain.length,
+                keysAmount: this.options.keyScale.domain.length
+            };
+        }
+        return {
+            innerPadding: (this.options.keyScale.range.end - this.options.keyScale.range.start) /
+                (this.options.keyScale.domain.length - 1),
+            outerPadding: 0,
+            oneKeyPureSize: 0,
+            keysAmount: this.options.keyScale.domain.length
+        };
+    }
+}

package/lib/model/margin/twoDim/twoDimMarginModel.d.ts

@@ -1,6 +1,6 @@
 import { DesignerConfig } from "../../../designer/designerConfig";
 import { OtherCommonComponents } from "../../model";
-import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
+import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader/twoDimConfigReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 12;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 8;

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -113,7 +113,9 @@ export class TwoDimMarginModel {
             top: "bottom",
             bottom: "top"
         };
-        canvasModel.increaseMarginSide(axisMarginMapping[keyAxisOrient], valueLabelFontSize + VALUE_LABEL_OFFSET_ABS_SIZE_PX);
+        canvasModel.increaseMarginSide(axisMarginMapping[keyAxisOrient], 
+        //TODO: calculate according to offsetSize from config for each chart
+        valueLabelFontSize + VALUE_LABEL_OFFSET_ABS_SIZE_PX);
     }
     getValueAxisLabels(scaleModel) {
         const scale = Scale.getScaleValue(scaleModel);

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement, MdtChartsFieldName } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, PolarChartType, Size, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup, ValueLabelsCollisionMode, ValueLabelsRotationOptions, ValueLabelsHandleElement, MdtChartsFieldName, BlockMargin as ConfigBlockMargin } 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";
@@ -30,12 +30,7 @@ export interface BlockCanvas {
 export interface ChartBlockModel {
     margin: BlockMargin;
 }
-export interface BlockMargin {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-}
+export declare type BlockMargin = ConfigBlockMargin;
 export interface TooltipBasicModel {
     getContent: (keyFieldValue: string) => TooltipContent;
 }
@@ -81,6 +76,9 @@ export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel
     chartSettings: TwoDimChartElementsSettings;
     valueLabels: TwoDimensionalValueLabels;
     grouping: TwoDimGroupingModel;
+    canvasEvents: {
+        drawCompleted: () => void;
+    };
 }
 export interface PolarOptionsModel extends GraphicNotationOptionsModel {
     type: "polar";
@@ -135,13 +133,11 @@ export declare type ScaleKeyModel = ScaleBandModel | ScalePointModel;
 export interface ScaleBandModel extends BaseScaleKeyModel {
     type: "band";
     sizes: ScaleBandModelSizeParams;
-    /** @deprecated Use sizes instead */
-    elementsAmount: number;
 }
 export interface ScaleBandModelSizeParams {
     paddingOuter: number;
     paddingInner: number;
-    bandSize: number;
+    oneKeyTotalSpace: number;
     recalculatedStepSize: number;
 }
 export interface ScalePointModel extends BaseScaleKeyModel {
@@ -312,6 +308,7 @@ export declare type ValueLabelsChartBlockSide = {
 export interface TwoDimGroupingModel {
     enabled: boolean;
     items: TwoDimGroupingItemModel[];
+    edgeLines: GroupingSplitLineAttributes[];
 }
 export interface GroupingLabelCoordinate {
     x: number;
@@ -319,8 +316,11 @@ export interface GroupingLabelCoordinate {
 }
 export declare type GroupingLabelKey = string | number;
 export interface TwoDimGroupingItemModel {
+    labels: GroupingItemLabelsModel;
+    splitLines: GroupingSplitLineAttributes[];
+}
+export interface GroupingItemLabelsModel {
     domain: GroupingLabelKey[];
-    orient: Orient;
     textAnchor: TextAnchor;
     dominantBaseline: DominantBaseline;
     coordinate: {
@@ -328,6 +328,12 @@ export interface TwoDimGroupingItemModel {
         handleY: (key: GroupingLabelKey) => number;
     };
 }
+export interface GroupingSplitLineAttributes {
+    x1: number;
+    x2: number;
+    y1: number;
+    y2: number;
+}
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;

package/lib/model/modelBuilder.js

@@ -5,7 +5,7 @@ import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
 import { OtherComponentsModel } from "./featuresModel/otherComponents";
 import { ConfigValidator } from "./configsValidator/configValidator";
 import { ModelInstance } from "./modelInstance/modelInstance";
-import { TwoDimConfigReader } from "./modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
+import { TwoDimConfigReader } from "./modelInstance/configReader/twoDimConfigReader/twoDimConfigReader";
 import { TitleConfigReader } from "./modelInstance/titleConfigReader";
 export var AxisType;
 (function (AxisType) {

package/lib/model/modelInstance/canvasModel/canvasModel.d.ts

@@ -13,7 +13,7 @@ export declare class CanvasModel implements CanvasMarginModel, CanvasSizesModel
     private margin;
     constructor();
     initMargin(margin: BlockMargin): void;
-    getMargin(): BlockMargin;
+    getMargin(): import("../../../config/config").BlockMargin;
     getMarginSide(side: MarginSide): number;
     setMarginSide(side: MarginSide, size: number): void;
     increaseMarginSide(side: MarginSide, byValue: number, key?: string): void;

package/lib/model/modelInstance/configReader/baseConfigReader.js

@@ -1,5 +1,5 @@
 import { PolarConfigReader } from "./polarConfigReader/polarConfigReader";
-import { TwoDimConfigReader } from "./twoDimConfigReader.ts/twoDimConfigReader";
+import { TwoDimConfigReader } from "./twoDimConfigReader/twoDimConfigReader";
 export function getConfigReader(config, designerConfig) {
     if (config.options.type === "2d")
         return new TwoDimConfigReader(config, designerConfig);

package/lib/model/modelInstance/configReader/{twoDimConfigReader.ts → twoDimConfigReader}/groupingConfigReader/groupingConfigReader.d.ts

@@ -1,5 +1,9 @@
 import { ChartOrientation, DiscreteAxisOptions, MdtChartsBaseField, MdtChartsDataRow, TwoDimGroupingOptions } from "../../../../../config/config";
 import { DominantBaseline, Orient, TextAnchor } from "../../../../model";
+export interface GroupingItemSize {
+    orient: Orient;
+    size: number;
+}
 export declare class GroupingConfigReader {
     private readonly keyAxisOptions;
     private readonly chartOrientation;
@@ -7,14 +11,9 @@ export declare class GroupingConfigReader {
     private readonly maxLabelSize;
     constructor(keyAxisOptions: DiscreteAxisOptions, chartOrientation: ChartOrientation, groupingOptions?: TwoDimGroupingOptions);
     isEnabled(): boolean;
-    getSlicesByOrients(): {
-        orient: Orient;
-        amount: number;
-    }[];
-    getSlicesSizesByOrients(dataRows: MdtChartsDataRow[]): {
-        orient: Orient;
-        size: number;
-    }[];
+    getLineWidth(): number;
+    getUsingOrients(): Set<Orient>;
+    getSlicesSizesByOrients(dataRows: MdtChartsDataRow[]): GroupingItemSize[];
     getPreparedOptions(scopedDatasourceRows: MdtChartsDataRow[]): {
         domain: string[];
         orient: Orient;

package/lib/model/modelInstance/configReader/{twoDimConfigReader.ts → twoDimConfigReader}/groupingConfigReader/groupingConfigReader.js

@@ -7,35 +7,18 @@ export class GroupingConfigReader {
         this.maxLabelSize = 60;
     }
     isEnabled() {
-        return Boolean(this.groupingOptions) && this.groupingOptions.items.length > 0;
+        return !!this.groupingOptions && this.groupingOptions.items.length > 0;
     }
-    getSlicesByOrients() {
-        var _a, _b, _c, _d;
-        const slices = [];
-        const slicesAmountFromKeyAxisSide = (_b = (_a = this.groupingOptions) === null || _a === void 0 ? void 0 : _a.items.filter((item) => { var _a; return this.getLabelPosition((_a = item.labels) === null || _a === void 0 ? void 0 : _a.position) === this.keyAxisOptions.position; }).length) !== null && _b !== void 0 ? _b : 0;
-        const slicesAmountOppositeToKeyAxisSide = (_d = (_c = this.groupingOptions) === null || _c === void 0 ? void 0 : _c.items.filter((item) => { var _a; return this.getLabelPosition((_a = item.labels) === null || _a === void 0 ? void 0 : _a.position) !== this.keyAxisOptions.position; }).length) !== null && _d !== void 0 ? _d : 0;
-        const pushIfAmountIsNotZero = (orient, amount) => {
-            if (amount > 0) {
-                slices.push({ orient, amount });
-            }
-        };
-        if (this.chartOrientation === "vertical") {
-            pushIfAmountIsNotZero("top", this.keyAxisOptions.position === "start"
-                ? slicesAmountFromKeyAxisSide
-                : slicesAmountOppositeToKeyAxisSide);
-            pushIfAmountIsNotZero("bottom", this.keyAxisOptions.position === "start"
-                ? slicesAmountOppositeToKeyAxisSide
-                : slicesAmountFromKeyAxisSide);
-        }
-        else {
-            pushIfAmountIsNotZero("left", this.keyAxisOptions.position === "start"
-                ? slicesAmountFromKeyAxisSide
-                : slicesAmountOppositeToKeyAxisSide);
-            pushIfAmountIsNotZero("right", this.keyAxisOptions.position === "start"
-                ? slicesAmountOppositeToKeyAxisSide
-                : slicesAmountFromKeyAxisSide);
+    getLineWidth() {
+        return 1;
+    }
+    getUsingOrients() {
+        var _a, _b, _c;
+        const usingOrients = new Set();
+        for (const item of (_b = (_a = this.groupingOptions) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []) {
+            usingOrients.add(this.getLabelOrient((_c = item.labels) === null || _c === void 0 ? void 0 : _c.position));
         }
-        return slices;
+        return usingOrients;
     }
     getSlicesSizesByOrients(dataRows) {
         var _a;

package/lib/model/modelInstance/configReader/{twoDimConfigReader.ts → twoDimConfigReader}/twoDimConfigReader.js

@@ -9,8 +9,8 @@ export class TwoDimConfigReader {
         const defaultBlockMargin = {
             top: 5,
             bottom: 0,
-            left: 0,
-            right: 0
+            left: 5,
+            right: 5
         };
         return Object.assign(Object.assign({}, defaultBlockMargin), this.designerConfig.canvas.chartBlockMargin);
     }

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

@@ -1,7 +1,7 @@
 import { ChartOrientation, MdtChartsTwoDimensionalChart } from "../../config/config";
 import { ChartOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
 import { TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
-import { TwoDimConfigReader } from "../modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
+import { TwoDimConfigReader } from "../modelInstance/configReader/twoDimConfigReader/twoDimConfigReader";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class TwoDimensionalModel {
     static getOptions(configReader: TwoDimConfigReader, designerConfig: DesignerConfig, modelInstance: ModelInstance): TwoDimensionalOptionsModel;

package/lib/model/notations/twoDimensionalModel.js

@@ -12,6 +12,12 @@ import { TwoDimTooltipContentGenerator } from "../featuresModel/tooltipModel/too
 import { TwoDimInitialRowsProvider } from "../featuresModel/tooltipModel/contentByNotations/twoDimInitialRowsProvider";
 import { GroupingLabelsCoordinateHandler } from "../featuresModel/grouping/groupingLabels/groupingLabelsCoordinateHandlers";
 import { GroupingLabelsCoordinateScaler } from "../featuresModel/grouping/groupingLabels/groupingLabelsScaler";
+import { GroupingStaticCoordinateCalculator } from "../featuresModel/grouping/groupingLabels/staticCoordinateCalculator";
+import { GroupingEdgeLinesGenerator } from "../featuresModel/grouping/groupingEdgeLines/groupingEdgeLinesGenerator";
+import { GroupingSplitLinesGenerator } from "../featuresModel/grouping/groupingSplitLines/groupingSplitLines";
+import { GroupingDataAmountCalculator } from "../featuresModel/grouping/groupingDataAmountCalculator/groupingDataAmountCalculator";
+import { ScaleCanvasSizesCalculator } from "../featuresModel/scaleModel/sizaCalculators/scaleCanvasSizesCalculator";
+import { KeyTotalSpaceCalculator } from "../featuresModel/scaleModel/sizaCalculators/keyTotalSpaceCalculator";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
@@ -31,51 +37,78 @@ export class TwoDimensionalModel {
         const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         const keyScale = scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys());
         const isHorizontal = options.orientation === "horizontal";
+        const groupingStaticCoordinateCalculator = new GroupingStaticCoordinateCalculator({
+            canvasModel,
+            otherComponentSizes: {
+                titleTotalNeededSpace: canvasModel.titleCanvas.getAllNeededSpace(),
+                legendTotalNeededSpace: canvasModel.legendCanvas.getAllNeededSpace()
+            },
+            groupingItemSizes: configReader.grouping.getSlicesSizesByOrients(modelInstance.dataModel.repository.getScopedRows())
+        });
+        const groupingEdgeLinesGenerator = new GroupingEdgeLinesGenerator({
+            canvasModel,
+            orients: configReader.grouping.getUsingOrients(),
+            staticCoordinateCalculator: groupingStaticCoordinateCalculator,
+            lineWidth: configReader.grouping.getLineWidth()
+        });
+        const scaleSizesCalculator = new ScaleCanvasSizesCalculator({ keyScale });
+        const keyTotalSpaceCalculator = new KeyTotalSpaceCalculator({ scaleSizesCalculator });
         return {
             legend: canvasModel.legendCanvas.getModel(),
+            canvasEvents: {
+                drawCompleted: () => {
+                    var _a, _b;
+                    (_b = (_a = options.events) === null || _a === void 0 ? void 0 : _a.drawComplete) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                        canvas: {
+                            plotAreaMargin: canvasModel.getMargin(),
+                            keyItems: keyTotalSpaceCalculator.calculate()
+                        }
+                    });
+                }
+            },
             title: {
                 textContent: titleConfig.getTextContent(),
                 fontSize: titleConfig.getFontSize()
             },
             grouping: {
                 enabled: configReader.grouping.isEnabled(),
+                edgeLines: groupingEdgeLinesGenerator.generate(),
                 items: configReader.grouping
                     .getPreparedOptions(modelInstance.dataModel.repository.getScopedRows())
                     .map((prepared) => {
-                    let keyScaleInfo;
-                    if (keyScale.type === "band") {
-                        keyScaleInfo = {
-                            type: keyScale.type,
-                            keyAxisOuterPadding: keyScale.sizes.paddingOuter,
-                            keyAxisInnerPadding: keyScale.sizes.paddingInner
-                        };
-                    }
-                    else {
-                        keyScaleInfo = { type: "point" };
-                    }
-                    const scaler = new GroupingLabelsCoordinateScaler({
+                    const groupingDataAmountCalculator = new GroupingDataAmountCalculator({
                         dataRows: modelInstance.dataModel.repository.getScopedRows(),
-                        field: prepared.field,
-                        keyScaleInfo,
-                        range: keyScale.range
+                        field: prepared.field
                     });
-                    const coordinateHandler = new GroupingLabelsCoordinateHandler(canvasModel, {
+                    const scaler = new GroupingLabelsCoordinateScaler({
+                        dataAmountCalculator: groupingDataAmountCalculator,
+                        sizesCalculator: scaleSizesCalculator
+                    });
+                    const coordinateHandler = new GroupingLabelsCoordinateHandler({
+                        canvasModel,
                         orient: prepared.orient,
                         sideIndex: prepared.sideIndex,
-                        otherComponentSizes: {
-                            titleTotalNeededSpace: canvasModel.titleCanvas.getAllNeededSpace(),
-                            legendTotalNeededSpace: canvasModel.legendCanvas.getAllNeededSpace()
-                        }
+                        staticCoordinateCalculator: groupingStaticCoordinateCalculator
                     });
-                    return {
+                    const splitLinesGenerator = new GroupingSplitLinesGenerator({
+                        canvasModel,
                         orient: prepared.orient,
-                        domain: prepared.domain,
-                        textAnchor: prepared.textAnchor,
-                        dominantBaseline: prepared.dominantBaseline,
-                        coordinate: {
-                            handleX: (groupKey) => coordinateHandler.handleX(scaler.scaleForKey(groupKey)),
-                            handleY: (groupKey) => coordinateHandler.handleY(scaler.scaleForKey(groupKey))
-                        }
+                        sideIndex: prepared.sideIndex,
+                        staticCoordinateCalculator: groupingStaticCoordinateCalculator,
+                        dataAmountCalculator: groupingDataAmountCalculator,
+                        sizesCalculator: scaleSizesCalculator
+                    });
+                    return {
+                        labels: {
+                            domain: prepared.domain,
+                            textAnchor: prepared.textAnchor,
+                            dominantBaseline: prepared.dominantBaseline,
+                            coordinate: {
+                                handleX: (groupKey) => coordinateHandler.handleX(scaler.scaleForKey(groupKey)),
+                                handleY: (groupKey) => coordinateHandler.handleY(scaler.scaleForKey(groupKey))
+                            }
+                        },
+                        splitLines: splitLinesGenerator.generate()
                     };
                 })
             },

package/lib/style/charts-main.css

@@ -213,6 +213,12 @@
     stroke: rgba(231, 229, 228, 0.8);
 }
 
+/* Group lines */
+.group-edge-lines line, 
+.group-split-lines line {
+    stroke: rgba(231, 229, 228, 0.8);
+}
+
 /* Aggregator */
 .aggregator-value, .aggregator-name {
     color: #000000;

package/lib/style/charts-main.less

@@ -213,6 +213,12 @@
     stroke: rgba(231, 229, 228, 0.8);
 }
 
+/* Group lines */
+.group-edge-lines line, 
+.group-split-lines line {
+    stroke: rgba(231, 229, 228, 0.8);
+}
+
 /* Aggregator */
 .aggregator-value, .aggregator-name {
     color: #000000;

package/package.json

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