mdt-charts 1.36.0 → 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/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.js

@@ -85,6 +85,7 @@ 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;
@@ -109,6 +110,7 @@ export class TwoDimensionalManager {
             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/{groupingCanvasCalculator/groupingCanvasCalculator.d.ts → groupingDataAmountCalculator/groupingDataAmountCalculator.d.ts}

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

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

@@ -5,6 +5,7 @@ interface GroupingEdgeLinesGeneratorOptions {
     orients: Iterable<Orient>;
     staticCoordinateCalculator: GroupingStaticCoordinateCalculator;
     canvasModel: CanvasModel;
+    lineWidth: number;
 }
 export declare class GroupingEdgeLinesGenerator {
     private readonly options;

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

@@ -11,8 +11,8 @@ export class GroupingEdgeLinesGenerator {
                 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 }
+                    { 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") {
@@ -21,8 +21,8 @@ export class GroupingEdgeLinesGenerator {
                 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 }
+                    { 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") {
@@ -31,8 +31,8 @@ export class GroupingEdgeLinesGenerator {
                 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 }
+                    { 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") {
@@ -41,8 +41,8 @@ export class GroupingEdgeLinesGenerator {
                 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 }
+                    { 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 }
                 ]);
             }
         }

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

@@ -5,12 +5,12 @@ interface GroupingLabelsCoordinateHandlerOptions {
     orient: Orient;
     sideIndex: number;
     staticCoordinateCalculator: GroupingStaticCoordinateCalculator;
+    canvasModel: CanvasModel;
 }
 export declare class GroupingLabelsCoordinateHandler {
-    private readonly canvasModel;
     private readonly options;
     private readonly staticCoordinate;
-    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,13 +1,12 @@
 export class GroupingLabelsCoordinateHandler {
-    constructor(canvasModel, options) {
-        this.canvasModel = canvasModel;
+    constructor(options) {
         this.options = options;
         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;
@@ -15,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,15 +1,10 @@
 import { GroupingLabelKey } from "../../../model";
-import { GroupingCanvasCalculator } from "../groupingCanvasCalculator/groupingCanvasCalculator";
+import { GroupingDataAmountCalculator } from "../groupingDataAmountCalculator/groupingDataAmountCalculator";
+import { ScaleCanvasSizesCalculator } from "../../scaleModel/sizaCalculators/scaleCanvasSizesCalculator";
 interface GroupingLabelsCoordinateScalerOptions {
-    groupingCanvasCalculator: GroupingCanvasCalculator;
+    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,15 +2,14 @@ import { scaleOrdinal } from "d3-scale";
 export class GroupingLabelsCoordinateScaler {
     constructor(options) {
         this.options = options;
-        const { keyAxisInnerPadding, keyAxisOuterPadding, oneShareSize, rowsCountsPerGroups, groupDomain } = this.options.groupingCanvasCalculator.calculate();
+        const { innerPadding, oneKeyPureSize, outerPadding } = this.options.sizesCalculator.calculate();
+        const { rowsCountsPerGroups, groupDomain } = this.options.dataAmountCalculator.calculate();
         let previousTotalShares = 0;
         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 +
-                keyAxisOuterPadding;
+            let previousShift = previousTotalShares * (oneKeyPureSize + innerPadding);
+            const centerOfDomainItem = previousShift + (rowsAmount * oneKeyPureSize + (rowsAmount - 1) * innerPadding) / 2 + outerPadding;
             coordinates.push(centerOfDomainItem);
             previousTotalShares += rowsAmount;
         }

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

@@ -7,11 +7,11 @@ interface GroupingStaticCoordinateCalculatorOptions {
         legendTotalNeededSpace: number;
     };
     groupingItemSizes: GroupingItemSize[];
+    canvasModel: CanvasModel;
 }
 export declare class GroupingStaticCoordinateCalculator {
-    private readonly canvasModel;
     private readonly options;
-    constructor(canvasModel: CanvasModel, options: GroupingStaticCoordinateCalculatorOptions);
+    constructor(options: GroupingStaticCoordinateCalculatorOptions);
     calculate(orient: Orient, sideIndex: number): number;
 }
 export {};

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

@@ -1,6 +1,5 @@
 export class GroupingStaticCoordinateCalculator {
-    constructor(canvasModel, options) {
-        this.canvasModel = canvasModel;
+    constructor(options) {
         this.options = options;
     }
     calculate(orient, sideIndex) {
@@ -13,13 +12,13 @@ export class GroupingStaticCoordinateCalculator {
             staticCoordinate = this.options.otherComponentSizes.titleTotalNeededSpace + prevSlicesSizes * sideIndex;
         if (orient === "bottom")
             staticCoordinate =
-                this.canvasModel.getBlockSize().height -
+                this.options.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;
+            staticCoordinate = this.options.canvasModel.getBlockSize().width - prevSlicesSizes * sideIndex;
         if (staticCoordinate === undefined) {
             throw new Error(`Static coordinate for orient ${orient} and sideIndex ${sideIndex} is undefined`);
         }

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

@@ -1,9 +1,11 @@
 import { GroupingSplitLineAttributes, Orient } from "../../../model";
 import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
-import { GroupingCanvasCalculator } from "../groupingCanvasCalculator/groupingCanvasCalculator";
+import { ScaleCanvasSizesCalculator } from "../../scaleModel/sizaCalculators/scaleCanvasSizesCalculator";
+import { GroupingDataAmountCalculator } from "../groupingDataAmountCalculator/groupingDataAmountCalculator";
 import { GroupingStaticCoordinateCalculator } from "../groupingLabels/staticCoordinateCalculator";
 interface GroupingSplitLinesGeneratorOptions {
-    groupingCanvasCalculator: GroupingCanvasCalculator;
+    dataAmountCalculator: GroupingDataAmountCalculator;
+    sizesCalculator: ScaleCanvasSizesCalculator;
     orient: Orient;
     sideIndex: number;
     staticCoordinateCalculator: GroupingStaticCoordinateCalculator;

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

@@ -5,14 +5,12 @@ export class GroupingSplitLinesGenerator {
     generate() {
         let previousTotalShares = 0;
         const coordinates = [];
-        const { keyAxisInnerPadding, keyAxisOuterPadding, oneShareSize, rowsCountsPerGroups } = this.options.groupingCanvasCalculator.calculate();
+        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 * (oneShareSize + keyAxisInnerPadding);
-            const coordinate = previousShift +
-                keyAxisOuterPadding +
-                rowsAmount * (oneShareSize + keyAxisInnerPadding) -
-                keyAxisInnerPadding / 2;
+            let previousShift = previousTotalShares * (oneKeyPureSize + innerPadding);
+            const coordinate = previousShift + outerPadding + rowsAmount * (oneKeyPureSize + innerPadding) - innerPadding / 2;
             coordinates.push(coordinate);
             previousTotalShares += rowsAmount;
         }

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/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 {

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/twoDimConfigReader/groupingConfigReader/groupingConfigReader.d.ts

@@ -11,6 +11,7 @@ export declare class GroupingConfigReader {
     private readonly maxLabelSize;
     constructor(keyAxisOptions: DiscreteAxisOptions, chartOrientation: ChartOrientation, groupingOptions?: TwoDimGroupingOptions);
     isEnabled(): boolean;
+    getLineWidth(): number;
     getUsingOrients(): Set<Orient>;
     getSlicesSizesByOrients(dataRows: MdtChartsDataRow[]): GroupingItemSize[];
     getPreparedOptions(scopedDatasourceRows: MdtChartsDataRow[]): {

package/lib/model/modelInstance/configReader/twoDimConfigReader/groupingConfigReader/groupingConfigReader.js

@@ -9,6 +9,9 @@ export class GroupingConfigReader {
     isEnabled() {
         return !!this.groupingOptions && this.groupingOptions.items.length > 0;
     }
+    getLineWidth() {
+        return 1;
+    }
     getUsingOrients() {
         var _a, _b, _c;
         const usingOrients = new Set();

package/lib/model/notations/twoDimensionalModel.js

@@ -15,7 +15,9 @@ import { GroupingLabelsCoordinateScaler } from "../featuresModel/grouping/groupi
 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";
+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;
@@ -35,7 +37,8 @@ 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, {
+        const groupingStaticCoordinateCalculator = new GroupingStaticCoordinateCalculator({
+            canvasModel,
             otherComponentSizes: {
                 titleTotalNeededSpace: canvasModel.titleCanvas.getAllNeededSpace(),
                 legendTotalNeededSpace: canvasModel.legendCanvas.getAllNeededSpace()
@@ -45,10 +48,24 @@ export class TwoDimensionalModel {
         const groupingEdgeLinesGenerator = new GroupingEdgeLinesGenerator({
             canvasModel,
             orients: configReader.grouping.getUsingOrients(),
-            staticCoordinateCalculator: groupingStaticCoordinateCalculator
+            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()
@@ -59,24 +76,16 @@ export class TwoDimensionalModel {
                 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 groupingCanvasCalculator = new GroupingCanvasCalculator({
+                    const groupingDataAmountCalculator = new GroupingDataAmountCalculator({
                         dataRows: modelInstance.dataModel.repository.getScopedRows(),
-                        field: prepared.field,
-                        keyScaleInfo,
-                        range: keyScale.range
+                        field: prepared.field
                     });
-                    const scaler = new GroupingLabelsCoordinateScaler({ groupingCanvasCalculator });
-                    const coordinateHandler = new GroupingLabelsCoordinateHandler(canvasModel, {
+                    const scaler = new GroupingLabelsCoordinateScaler({
+                        dataAmountCalculator: groupingDataAmountCalculator,
+                        sizesCalculator: scaleSizesCalculator
+                    });
+                    const coordinateHandler = new GroupingLabelsCoordinateHandler({
+                        canvasModel,
                         orient: prepared.orient,
                         sideIndex: prepared.sideIndex,
                         staticCoordinateCalculator: groupingStaticCoordinateCalculator
@@ -86,7 +95,8 @@ export class TwoDimensionalModel {
                         orient: prepared.orient,
                         sideIndex: prepared.sideIndex,
                         staticCoordinateCalculator: groupingStaticCoordinateCalculator,
-                        groupingCanvasCalculator
+                        dataAmountCalculator: groupingDataAmountCalculator,
+                        sizesCalculator: scaleSizesCalculator
                     });
                     return {
                         labels: {

package/package.json

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

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

@@ -1,41 +0,0 @@
-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())
-        };
-    }
-}