mdt-charts 1.35.1 → 1.36.0

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/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);
@@ -78,6 +87,7 @@ export class TwoDimensionalManager {
         }
     }
     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,7 +100,10 @@ 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);

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

@@ -0,0 +1,21 @@
+import { MdtChartsBaseField, MdtChartsDataRow } from "../../../../config/config";
+import { GroupingLabelKey, RangeModel } from "../../../model";
+import { KeyScaleInfoForGroupingLabelsScaler } from "../groupingLabels/groupingLabelsScaler";
+interface GroupingCanvasCalculatorOptions {
+    keyScaleInfo: KeyScaleInfoForGroupingLabelsScaler;
+    dataRows: MdtChartsDataRow[];
+    field: MdtChartsBaseField;
+    range: RangeModel;
+}
+export declare class GroupingCanvasCalculator {
+    private readonly options;
+    constructor(options: GroupingCanvasCalculatorOptions);
+    calculate(): {
+        rowsCountsPerGroups: number[];
+        oneShareSize: number;
+        keyAxisOuterPadding: number;
+        keyAxisInnerPadding: number;
+        groupDomain: GroupingLabelKey[];
+    };
+}
+export {};

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

@@ -0,0 +1,41 @@
+export class GroupingCanvasCalculator {
+    constructor(options) {
+        this.options = options;
+    }
+    calculate() {
+        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 rowsCounts = Array.from(domainWithRowsCount.values());
+        return {
+            rowsCountsPerGroups: rowsCounts,
+            oneShareSize,
+            keyAxisInnerPadding,
+            keyAxisOuterPadding,
+            groupDomain: Array.from(domainWithRowsCount.keys())
+        };
+    }
+}

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

@@ -0,0 +1,14 @@
+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;
+}
+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, x2: leftX, y1, y2 },
+                    { x1: rightX, x2: rightX, 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, x2: leftX, y1, y2 },
+                    { x1: rightX, x2: rightX, 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, y2: topY },
+                    { x1, x2, y1: bottomY, y2: bottomY }
+                ]);
+            }
+            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, y2: topY },
+                    { x1, x2, y1: bottomY, y2: bottomY }
+                ]);
+            }
+        }
+        return edgeLines;
+    }
+}

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

@@ -1,18 +1,15 @@
 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;
 }
 export declare class GroupingLabelsCoordinateHandler {
     private readonly canvasModel;
     private readonly options;
     private readonly staticCoordinate;
-    private readonly verticalLabelSize;
     constructor(canvasModel: CanvasModel, options: GroupingLabelsCoordinateHandlerOptions);
     handleX(scaledCoordinate: number): number;
     handleY(scaledCoordinate: number): number;

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

@@ -2,20 +2,7 @@ export class GroupingLabelsCoordinateHandler {
     constructor(canvasModel, options) {
         this.canvasModel = canvasModel;
         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;

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

@@ -1,10 +1,7 @@
-import { MdtChartsBaseField, MdtChartsDataRow } from "../../../../config/config";
-import { GroupingLabelKey, RangeModel } from "../../../model";
+import { GroupingLabelKey } from "../../../model";
+import { GroupingCanvasCalculator } from "../groupingCanvasCalculator/groupingCanvasCalculator";
 interface GroupingLabelsCoordinateScalerOptions {
-    dataRows: MdtChartsDataRow[];
-    field: MdtChartsBaseField;
-    keyScaleInfo: KeyScaleInfoForGroupingLabelsScaler;
-    range: RangeModel;
+    groupingCanvasCalculator: GroupingCanvasCalculator;
 }
 export declare type KeyScaleInfoForGroupingLabelsScaler = {
     type: "band";

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

@@ -2,37 +2,11 @@ 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 { keyAxisInnerPadding, keyAxisOuterPadding, oneShareSize, rowsCountsPerGroups, groupDomain } = this.options.groupingCanvasCalculator.calculate();
         let previousTotalShares = 0;
-        const rowsCounts = Array.from(domainWithRowsCount.values());
-        for (let rowIndex = 0; rowIndex < rowsCounts.length; rowIndex++) {
-            const rowsAmount = rowsCounts[rowIndex];
+        const coordinates = [];
+        for (let rowIndex = 0; rowIndex < rowsCountsPerGroups.length; rowIndex++) {
+            const rowsAmount = rowsCountsPerGroups[rowIndex];
             let previousShift = previousTotalShares * (oneShareSize + keyAxisInnerPadding);
             const centerOfDomainItem = previousShift +
                 (rowsAmount * oneShareSize + (rowsAmount - 1) * keyAxisInnerPadding) / 2 +
@@ -40,7 +14,7 @@ export class GroupingLabelsCoordinateScaler {
             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[];
+}
+export declare class GroupingStaticCoordinateCalculator {
+    private readonly canvasModel;
+    private readonly options;
+    constructor(canvasModel: CanvasModel, options: GroupingStaticCoordinateCalculatorOptions);
+    calculate(orient: Orient, sideIndex: number): number;
+}
+export {};

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

@@ -0,0 +1,28 @@
+export class GroupingStaticCoordinateCalculator {
+    constructor(canvasModel, options) {
+        this.canvasModel = canvasModel;
+        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.canvasModel.getBlockSize().height -
+                    this.options.otherComponentSizes.legendTotalNeededSpace -
+                    prevSlicesSizes * sideIndex;
+        if (orient === "left")
+            staticCoordinate = prevSlicesSizes * sideIndex;
+        if (orient === "right")
+            staticCoordinate = this.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,17 @@
+import { GroupingSplitLineAttributes, Orient } from "../../../model";
+import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
+import { GroupingCanvasCalculator } from "../groupingCanvasCalculator/groupingCanvasCalculator";
+import { GroupingStaticCoordinateCalculator } from "../groupingLabels/staticCoordinateCalculator";
+interface GroupingSplitLinesGeneratorOptions {
+    groupingCanvasCalculator: GroupingCanvasCalculator;
+    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,47 @@
+export class GroupingSplitLinesGenerator {
+    constructor(options) {
+        this.options = options;
+    }
+    generate() {
+        let previousTotalShares = 0;
+        const coordinates = [];
+        const { keyAxisInnerPadding, keyAxisOuterPadding, oneShareSize, rowsCountsPerGroups } = this.options.groupingCanvasCalculator.calculate();
+        for (let rowIndex = 0; rowIndex < rowsCountsPerGroups.length - 1; rowIndex++) {
+            const rowsAmount = rowsCountsPerGroups[rowIndex];
+            let previousShift = previousTotalShares * (oneShareSize + keyAxisInnerPadding);
+            const coordinate = previousShift +
+                keyAxisOuterPadding +
+                rowsAmount * (oneShareSize + keyAxisInnerPadding) -
+                keyAxisInnerPadding / 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/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

@@ -312,6 +312,7 @@ export declare type ValueLabelsChartBlockSide = {
 export interface TwoDimGroupingModel {
     enabled: boolean;
     items: TwoDimGroupingItemModel[];
+    edgeLines: GroupingSplitLineAttributes[];
 }
 export interface GroupingLabelCoordinate {
     x: number;
@@ -319,8 +320,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 +332,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/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,8 @@ 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;
-    }[];
+    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,15 @@ 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);
+    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,10 @@ 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 { GroupingCanvasCalculator } from "../featuresModel/grouping/groupingCanvasCalculator/groupingCanvasCalculator";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
@@ -31,6 +35,18 @@ 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
+        });
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: {
@@ -39,6 +55,7 @@ export class TwoDimensionalModel {
             },
             grouping: {
                 enabled: configReader.grouping.isEnabled(),
+                edgeLines: groupingEdgeLinesGenerator.generate(),
                 items: configReader.grouping
                     .getPreparedOptions(modelInstance.dataModel.repository.getScopedRows())
                     .map((prepared) => {
@@ -50,32 +67,38 @@ export class TwoDimensionalModel {
                             keyAxisInnerPadding: keyScale.sizes.paddingInner
                         };
                     }
-                    else {
+                    else
                         keyScaleInfo = { type: "point" };
-                    }
-                    const scaler = new GroupingLabelsCoordinateScaler({
+                    const groupingCanvasCalculator = new GroupingCanvasCalculator({
                         dataRows: modelInstance.dataModel.repository.getScopedRows(),
                         field: prepared.field,
                         keyScaleInfo,
                         range: keyScale.range
                     });
+                    const scaler = new GroupingLabelsCoordinateScaler({ groupingCanvasCalculator });
                     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,
+                        groupingCanvasCalculator
+                    });
+                    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.36.0",
 	"description": "",
 	"main": "lib/main.js",
 	"scripts": {