mdt-charts 1.33.2 → 1.34.0

package/lib/config/config.d.ts

@@ -1,6 +1,6 @@
 declare type DataType = string;
 export declare type MdtChartsIconElement = () => HTMLElement;
-export declare type AxisPosition = "start" | "end";
+export declare type ItemPositionByOrientation = "start" | "end";
 export declare type ChartOrientation = "vertical" | "horizontal";
 export declare type ChartNotation = "2d" | "polar";
 export declare type ChartType = "bar" | "line" | "area" | "donut" | "gantt";
@@ -53,6 +53,7 @@ export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
     charts: MdtChartsTwoDimensionalChart[];
     orientation: ChartOrientation;
     valueLabels?: MdtChartsTwoDimensionalValueLabels;
+    grouping?: TwoDimGroupingOptions;
 }
 export interface MdtChartsPolarOptions extends GraphicNotationOptions {
     type: "polar";
@@ -97,8 +98,10 @@ export interface DataOptions {
     maxRecordsAmount?: number;
 }
 export declare type MdtChartsFieldName = string;
-export interface MdtChartsField {
+export interface MdtChartsBaseField {
     name: MdtChartsFieldName;
+}
+export interface MdtChartsField extends MdtChartsBaseField {
     format: DataType;
 }
 export interface MdtChartsValueField extends MdtChartsField {
@@ -167,7 +170,7 @@ export interface TwoDimensionalAxis {
 export declare type NumberSecondaryAxisOptions = Omit<NumberAxisOptions, "position">;
 export interface AxisOptions {
     visibility: boolean;
-    position: AxisPosition;
+    position: ItemPositionByOrientation;
     ticks: AxisTicks;
     line?: AxisLineOptions;
 }
@@ -202,8 +205,13 @@ export interface DiscreteAxisOptions extends AxisOptions {
 export interface MdtChartsDiscreteAxisLabel {
     position?: AxisLabelPosition;
     showRule?: MdtChartsShowAxisLabelRule;
+    format?: DiscreteAxisLabelFormatter;
 }
-export declare type ShowTickFn = (dataKey: string, index: number) => string | undefined;
+export declare type DiscreteAxisLabelFormatter = (options: {
+    key: string;
+    dataRow: MdtChartsDataRow;
+}) => string;
+export declare type ShowTickFn = (dataKey: string, index: number) => boolean;
 export interface MdtChartsShowAxisLabelRule {
     spaceForOneLabel?: number;
     showTickFn?: ShowTickFn;
@@ -223,6 +231,19 @@ export interface ValueLabelsStyleOptions {
     fontSize?: number;
     color?: string;
 }
+export interface TwoDimGroupingOptions {
+    items: TwoDimGroupingItem[];
+}
+export interface TwoDimGroupingItem {
+    data: TwoDimGroupingItemData;
+    labels?: TwoDimGroupingItemLabels;
+}
+interface TwoDimGroupingItemData {
+    field: MdtChartsField;
+}
+interface TwoDimGroupingItemLabels {
+    position?: ItemPositionByOrientation;
+}
 interface MdtChartsLineLikeChart {
     markers: MarkersOptions;
     lineStyles?: MdtChartsLineLikeChartStyles;

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

@@ -12,4 +12,5 @@ export declare class Axis {
     private static updateValueAxis;
     private static updateKeyAxis;
     private static handleLabelsHighlight;
+    private static getKeyAxisTickFormat;
 }

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

@@ -38,7 +38,7 @@ export class Axis {
         if (axisOptions.type === "value" && scaleOptions.type === "linear")
             AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
         else
-            axisGenerator.tickFormat(axisOptions.labels.showTick);
+            axisGenerator.tickFormat((d, i) => this.getKeyAxisTickFormat(d, i, axisOptions));
         const axisElement = block
             .getSvg()
             .append("g")
@@ -94,7 +94,7 @@ export class Axis {
             else if (axisOptions.orient === "top")
                 axisGenerator.tickPadding(-6);
         }
-        axisGenerator.tickFormat(axisOptions.labels.showTick);
+        axisGenerator.tickFormat((d, i) => this.getKeyAxisTickFormat(d, i, axisOptions));
         const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
         AxisLabelsEventManager.removeEvents(axisElement);
         if (axisOptions.orient === "left" || axisOptions.orient === "right") {
@@ -158,5 +158,9 @@ export class Axis {
                 select(this).classed("mdt-charts-opacity-inactive", !isActive);
             });
     }
+    static getKeyAxisTickFormat(datumKey, index, axisOptions) {
+        const shouldBeShown = axisOptions.labels.showTick(datumKey, index);
+        return shouldBeShown ? axisOptions.labels.format({ key: datumKey }) : undefined;
+    }
 }
 Axis.axesClass = NamesHelper.getClassName("axis");

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

@@ -17,9 +17,7 @@ export class AxisHelper {
             axisGenerator.ticks(labelsOptions.tickAmountSettings.policy.amount);
         if (labelsOptions.tickAmountSettings.policy.type === "constant")
             axisGenerator.tickValues(labelsOptions.tickAmountSettings.policy.values);
-        if (scaleOptions.type === "linear") {
-            this.setNumTickFormat(axisGenerator, scaleOptions.formatter);
-        }
+        this.setNumTickFormat(axisGenerator, scaleOptions.formatter);
     }
     static getBaseAxisGenerator(axisOptions, scale) {
         const axisGenerator = AxisHelper.getAxisByOrient(axisOptions.orient, scale);

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

@@ -0,0 +1,17 @@
+import { TwoDimGroupingModel } from "../../../model/model";
+import { Block } from "../../block/block";
+interface GroupAxisLabelsOptions {
+    elementAccessors: {
+        getBlock: () => Block;
+    };
+}
+export declare class GroupAxisLabels {
+    private readonly options;
+    private readonly renderPipeline;
+    private groupsForLabels;
+    constructor(options: GroupAxisLabelsOptions);
+    render(model: TwoDimGroupingModel): void;
+    update(model: TwoDimGroupingModel): void;
+    private setAttrs;
+}
+export {};

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

@@ -0,0 +1,61 @@
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
+export class GroupAxisLabels {
+    constructor(options) {
+        this.options = options;
+        this.renderPipeline = new Pipeline();
+        this.groupsForLabels = [];
+        this.renderPipeline.push((groupLabels, { item }) => {
+            return this.setAttrs(groupLabels.classed("group-label data-label", true), item);
+        });
+    }
+    render(model) {
+        if (!model.enabled)
+            return;
+        model.items.forEach((item, index) => {
+            const group = this.options.elementAccessors
+                .getBlock()
+                .getSvg()
+                .append("g")
+                .attr(`data-group-labels-index`, index);
+            this.groupsForLabels.push(group);
+            const labels = group
+                .selectAll("text")
+                .data(item.domain)
+                .enter()
+                .append("text")
+                .text((d) => d);
+            this.renderPipeline.execute(labels, { item });
+        });
+    }
+    update(model) {
+        if (!model.enabled)
+            return;
+        model.items.forEach((item, index) => {
+            const group = this.groupsForLabels[index];
+            if (!group)
+                return;
+            const existedLabels = group
+                .selectAll("text")
+                .data(item.domain)
+                .text((d) => d);
+            existedLabels.exit().remove();
+            const newLabels = existedLabels
+                .enter()
+                .append("text")
+                .text((d) => d);
+            this.renderPipeline.execute(newLabels, { item });
+            const animationName = "group-labels-updating";
+            this.setAttrs(existedLabels
+                .interrupt(animationName)
+                .transition(animationName)
+                .duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate), item);
+        });
+    }
+    setAttrs(groupLabels, item) {
+        return groupLabels
+            .attr("x", (d) => item.coordinate.handleX(d))
+            .attr("y", (d) => item.coordinate.handleY(d))
+            .attr("text-anchor", item.textAnchor)
+            .attr("dominant-baseline", item.dominantBaseline);
+    }
+}

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

@@ -1,6 +1,6 @@
-import { ScaleLinear } from "d3-scale";
+import { ScaleBand, ScaleLinear } from "d3-scale";
 import { AxisScale } from "d3-axis";
-import { BarChartSettings, ScaleKeyModel, ScaleValueModel } from "../../../model/model";
+import { BarChartSettings, ScaleBandModel, ScaleKeyModel, ScaleValueModel } from "../../../model/model";
 export interface Scales {
     key: AxisScale<any>;
     value: AxisScale<any>;
@@ -15,6 +15,7 @@ export declare class Scale {
     static getScaleBandWidth(scale: AxisScale<any>): number;
     static getScaleStep(scale: AxisScale<any>): number;
     static getScaledValue(scale: AxisScale<any>, value: any): number;
+    static getScaleBandNew(scaleKey: ScaleBandModel): ScaleBand<string>;
     private static getScaleBand;
     private static getScaleLinear;
     private static getScalePoint;

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

@@ -1,4 +1,5 @@
 import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
+//TODO: incapulate in model
 export class Scale {
     static getScales(scaleKey, scaleValue, bandSettings) {
         const scales = {
@@ -6,7 +7,8 @@ export class Scale {
             value: null
         };
         if (scaleKey.type === "band")
-            scales.key = this.getScaleBand(scaleKey.domain, scaleKey.range, bandSettings, scaleKey.elementsAmount);
+            // scales.key = this.getScaleBand(scaleKey.domain, scaleKey.range, bandSettings, scaleKey.elementsAmount);
+            scales.key = this.getScaleBandNew(scaleKey);
         else if (scaleKey.type === "point")
             scales.key = this.getScalePoint(scaleKey.domain, scaleKey.range);
         scales.value = this.getScaleValue(scaleValue);
@@ -38,6 +40,14 @@ export class Scale {
         }
         return scale(value);
     }
+    static getScaleBandNew(scaleKey) {
+        return scaleBand()
+            .domain(scaleKey.domain)
+            .range([scaleKey.range.start, scaleKey.range.end])
+            .paddingInner(scaleKey.sizes.paddingInner / scaleKey.sizes.bandSize)
+            .paddingOuter(scaleKey.sizes.paddingOuter / scaleKey.sizes.recalculatedStepSize);
+    }
+    //TODO: remove after tests of new way to create scale band
     static getScaleBand(domain, range, bandSettings, elementsInGroupAmount) {
         const scale = scaleBand().domain(domain).range([range.start, range.end]);
         const bandSize = scale.bandwidth();

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

@@ -1,5 +1,5 @@
 import { Block } from "../../../engine/block/block";
-import { OptionsModelData, Orient, TwoDimChartValueLabelsOptions, TwoDimensionalChartModel, TwoDimensionalValueLabels, ValueLabelAnchor, ValueLabelDominantBaseline, ValueLabelsStyleModel } from "../../../model/model";
+import { OptionsModelData, Orient, TwoDimChartValueLabelsOptions, TwoDimensionalChartModel, TwoDimensionalValueLabels, TextAnchor, DominantBaseline, ValueLabelsStyleModel } from "../../../model/model";
 import { MdtChartsDataRow, MdtChartsDataSource } from "../../../config/config";
 import { Scales, ScalesWithSecondary } from "../../../engine/features/scale/scale";
 export interface ValueLabelsOptions {
@@ -18,8 +18,8 @@ export interface ValueLabelsOptions {
 export interface ValueLabelAttrs {
     x: (data: MdtChartsDataRow) => number;
     y: (data: MdtChartsDataRow) => number;
-    textAnchor: ValueLabelAnchor;
-    dominantBaseline: ValueLabelDominantBaseline;
+    textAnchor: TextAnchor;
+    dominantBaseline: DominantBaseline;
 }
 export declare class ChartValueLabels {
     private readonly globalOptions;

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

@@ -92,7 +92,6 @@ export class ChartValueLabels {
         return block.selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
     }
     setAttrs(valueLabels, attrs, valueFieldName, dataRowAccessor, animate = false, onEndAnimation) {
-        const animationName = "labels-updating";
         let selection = valueLabels
             .attr("dominant-baseline", attrs.dominantBaseline)
             .attr("text-anchor", attrs.textAnchor);
@@ -114,6 +113,7 @@ export class ChartValueLabels {
         selection.classed(ChartValueLabels.valueLabelHiddenClass, (d) => {
             return !this.options.showLabel({ row: dataRowAccessor(d), valueFieldName });
         });
+        const animationName = "labels-updating";
         if (animate) {
             selection = selection
                 .interrupt(animationName)

package/lib/engine/filterManager/filterEventManager.d.ts

@@ -2,7 +2,7 @@ import { AxisScale } from "d3-axis";
 import { MdtChartsDataRow, Size } from "../../config/config";
 import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
-import { EventEmitter } from "../../model/EventEmitter";
+import { EventEmitter } from "../../model/helpers/eventEmitter";
 export declare type FilterCallback = (rows: MdtChartsDataRow[]) => void;
 export interface SelectDetails {
     multySelect: boolean;

package/lib/engine/filterManager/filterEventManager.js

@@ -4,7 +4,7 @@ import { TipBox } from "../features/tipBox/tipBox";
 import { TipBoxHelper } from "../features/tipBox/tipBoxHelper";
 import { Helper } from "../helpers/helper";
 import { Donut } from "../polarNotation/donut/donut";
-import { EventEmitter } from "../../model/EventEmitter";
+import { EventEmitter } from "../../model/helpers/eventEmitter";
 export class FilterEventManager {
     constructor(callback, fullDataset, filtrable, keyFieldName, selectedIds = []) {
         this.callback = callback;

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

@@ -8,6 +8,7 @@ export declare class TwoDimensionalManager implements ChartContentManager {
     private canvasValueLabels?;
     private linearGradientDef?;
     private dotChart;
+    private groupLabels;
     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

@@ -16,6 +16,7 @@ import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels
 import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
 import { CanvasDotChart } from "./dot/dotChart";
 import { RecordOverflowAlertCore } from "../features/recordOverflowAlert/recordOverflowAlertCore";
+import { GroupAxisLabels } from "../features/groupLabels/groupLabels";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -38,6 +39,12 @@ export class TwoDimensionalManager {
                 settings: options.chartSettings.bar
             }
         });
+        this.groupLabels = new GroupAxisLabels({
+            elementAccessors: {
+                getBlock: () => engine.block
+            }
+        });
+        this.groupLabels.render(options.grouping);
         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);
@@ -83,6 +90,7 @@ 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);
         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/axis/axisModel.d.ts

@@ -1,5 +1,5 @@
-import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions, AxisLabelFormatter } from "../../../config/config";
-import { AxisModelOptions, Orient, ScaleValueModel, TickAmountPolicy } from "../../model";
+import { ItemPositionByOrientation, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions, AxisLabelFormatter } from "../../../config/config";
+import { AxisModelOptions, DiscreteAxisModelOptions, Orient, ScaleValueModel, TickAmountPolicy } from "../../model";
 import { AxisType } from "../../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../../designer/designerConfig";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
@@ -9,19 +9,19 @@ export interface LabelSize {
 }
 export declare const MINIMAL_VERTICAL_STEP_SIZE = 60;
 export declare const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
-export declare const LABEL_ELEMENT_HEIGHT_PX = 17;
+export declare const LABEL_ELEMENT_HEIGHT_PX = 14;
 export declare class AxisModel {
     private static service;
-    static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings, getZeroCoordinate?: () => number): AxisModelOptions;
-    static getMainValueAxis(defaultFormatter: AxisLabelFormatter, orient: ChartOrientation, position: AxisPosition, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, scaleInfo: ScaleValueModel): AxisModelOptions;
-    static getSecondaryValueAxis(defaultFormatter: AxisLabelFormatter, orient: ChartOrientation, mainAxisPosition: AxisPosition, axisConfig: NumberSecondaryAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, scaleInfo: ScaleValueModel): AxisModelOptions;
+    static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings, getZeroCoordinate?: () => number): DiscreteAxisModelOptions;
+    static getMainValueAxis(defaultFormatter: AxisLabelFormatter, orient: ChartOrientation, position: ItemPositionByOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, scaleInfo: ScaleValueModel): AxisModelOptions;
+    static getSecondaryValueAxis(defaultFormatter: AxisLabelFormatter, orient: ChartOrientation, mainAxisPosition: ItemPositionByOrientation, axisConfig: NumberSecondaryAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, scaleInfo: ScaleValueModel): AxisModelOptions;
     private static getValueAxis;
     static getAxisLength(chartOrientation: ChartOrientation, canvasModel: CanvasModel): number;
-    static getAxisOrient(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition): Orient;
-    static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
-    static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
+    static getAxisOrient(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: ItemPositionByOrientation): Orient;
+    static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: ItemPositionByOrientation, canvasModel: CanvasModel): number;
+    static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: ItemPositionByOrientation, canvasModel: CanvasModel): number;
     static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number, axisConfig?: DiscreteAxisOptions): AxisLabelPosition;
-    static getLabelSize(labelMaxWidth: number, labelTexts: string[]): LabelSize;
+    static getLabelSize(labelMaxWidth: number, labelTexts: (string | number)[]): LabelSize;
     static getRoundValue(value: number): number;
     static getTickAmountPolicy(orient: ChartOrientation, axisConfig: NumberAxisOptions | NumberSecondaryAxisOptions, scaleInfo: ScaleValueModel): TickAmountPolicy;
     private static getKeyAxisTranslateModel;

package/lib/model/featuresModel/axis/axisModel.js

@@ -5,7 +5,7 @@ import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
 import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
 export const MINIMAL_VERTICAL_STEP_SIZE = 60;
 export const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
-export const LABEL_ELEMENT_HEIGHT_PX = 17;
+export const LABEL_ELEMENT_HEIGHT_PX = 14;
 const DEFAULT_AXIS_LINE_VISIBLE = true;
 export class AxisModel {
     static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
@@ -30,6 +30,13 @@ export class AxisModel {
                 linearTickStep: MINIMAL_HORIZONTAL_STEP_SIZE,
                 tickAmountSettings: {
                     policy: { type: "auto" }
+                },
+                format: (options) => {
+                    var _a;
+                    const dataRow = data[dataOptions.dataSource].find((d) => d[dataOptions.keyField.name] === options.key);
+                    if (dataRow && ((_a = axisConfig.labels) === null || _a === void 0 ? void 0 : _a.format))
+                        return axisConfig.labels.format({ key: options.key, dataRow });
+                    return options.key;
                 }
             },
             visibility: axisConfig.visibility,
@@ -119,9 +126,9 @@ export class AxisModel {
     static getLabelSize(labelMaxWidth, labelTexts) {
         const ONE_UPPER_SYMBOL_WIDTH_PX = 8;
         const longestLabelLength = labelTexts.length
-            ? Math.max(...labelTexts.map((t) => ModelHelper.getStringScore(t)))
+            ? Math.max(...labelTexts.map((t) => { var _a; return ModelHelper.getStringScore((_a = t === null || t === void 0 ? void 0 : t.toString()) !== null && _a !== void 0 ? _a : ""); }))
             : 0;
-        const longestLabelWidth = ONE_UPPER_SYMBOL_WIDTH_PX * longestLabelLength;
+        const longestLabelWidth = Math.round(ONE_UPPER_SYMBOL_WIDTH_PX * longestLabelLength);
         return {
             height: LABEL_ELEMENT_HEIGHT_PX,
             width: longestLabelWidth > labelMaxWidth ? labelMaxWidth : longestLabelWidth

package/lib/model/featuresModel/axis/axisModelService.js

@@ -1,4 +1,4 @@
-export const showAllTicks = (d) => d;
+export const showAllTicks = () => true;
 export class AxisModelService {
     getKeyAxisLabelPosition(chartBlockWidth, scopedDataLength, positionFromConfig) {
         if (positionFromConfig === "rotated" || positionFromConfig === "straight") {
@@ -26,7 +26,7 @@ export class AxisModelTickCalculator {
             return showAllTicks;
         let divider = Math.ceil(this.dataRows.length / allowedKeysAmount);
         return (d, i) => {
-            return i % divider === 0 ? d : undefined;
+            return i % divider === 0;
         };
     }
 }

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

@@ -0,0 +1,20 @@
+import { Orient } from "../../../model";
+import { CanvasModel } from "../../../modelInstance/canvasModel/canvasModel";
+interface GroupingLabelsCoordinateHandlerOptions {
+    orient: Orient;
+    sideIndex: number;
+    otherComponentSizes: {
+        titleTotalNeededSpace: number;
+        legendTotalNeededSpace: number;
+    };
+}
+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;
+}
+export {};

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

@@ -0,0 +1,36 @@
+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;
+    }
+    handleX(scaledCoordinate) {
+        let x;
+        if (this.options.orient === "top" || this.options.orient === "bottom")
+            x = scaledCoordinate + this.canvasModel.getMarginSide("left");
+        else
+            x = this.staticCoordinate;
+        return x;
+    }
+    handleY(scaledCoordinate) {
+        let y;
+        if (this.options.orient === "left" || this.options.orient === "right")
+            y = scaledCoordinate + this.canvasModel.getMarginSide("top");
+        else
+            y = this.staticCoordinate;
+        return y;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { MdtChartsBaseField, MdtChartsDataRow } from "../../../../config/config";
+import { GroupingLabelKey, RangeModel } from "../../../model";
+interface GroupingLabelsCoordinateScalerOptions {
+    dataRows: MdtChartsDataRow[];
+    field: MdtChartsBaseField;
+    keyScaleInfo: KeyScaleInfoForGroupingLabelsScaler;
+    range: RangeModel;
+}
+export declare type KeyScaleInfoForGroupingLabelsScaler = {
+    type: "band";
+    keyAxisOuterPadding: number;
+    keyAxisInnerPadding: number;
+} | {
+    type: "point";
+};
+export declare class GroupingLabelsCoordinateScaler {
+    private readonly options;
+    private readonly scaleFn;
+    constructor(options: GroupingLabelsCoordinateScalerOptions);
+    scaleForKey(groupingKey: GroupingLabelKey): number;
+}
+export {};

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

@@ -0,0 +1,49 @@
+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 = [];
+        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;
+            coordinates.push(centerOfDomainItem);
+            previousTotalShares += rowsAmount;
+        }
+        const d3Scale = scaleOrdinal(domainWithRowsCount.keys(), coordinates);
+        this.scaleFn = (key) => d3Scale(key);
+    }
+    scaleForKey(groupingKey) {
+        return this.scaleFn(groupingKey);
+    }
+}

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

@@ -5,5 +5,5 @@ import { LegendItemsDirection } from "./legendCanvasModel";
 export declare class LegendModel {
     static getBaseLegendBlockModel(canvasModel: CanvasModel, legendConfig: LegendBlockCanvas): LegendBlockModel;
     static getLegendItemClass(itemsPosition: LegendItemsDirection): string;
-    static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
+    static getLegendTotalMargin(position: Orient, legendBlockModel: LegendBlockModel): number;
 }

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

@@ -1,7 +1,7 @@
 export class LegendModel {
     static getBaseLegendBlockModel(canvasModel, legendConfig) {
         var _a, _b;
-        const mt = 20, mb = 20, ml = 20, mr = 20;
+        const mt = 20, mb = 20, ml = 20;
         return {
             coordinate: {
                 left: {
@@ -33,11 +33,11 @@ export class LegendModel {
     static getLegendItemClass(itemsPosition) {
         return itemsPosition === "column" ? "legend-item-row" : "legend-item-inline";
     }
-    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
+    static getLegendTotalMargin(position, legendBlockModel) {
         const legendCoordinate = legendBlockModel.coordinate;
         if (position === "left" || position === "right")
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
+            return legendCoordinate[position].margin.left + legendCoordinate[position].margin.right;
         else
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
+            return legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom;
     }
 }

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

@@ -17,7 +17,7 @@ export class LegendPolarMarginCalculator {
     updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
         if (legendSize !== 0) {
             canvasModel.increaseMarginSide(legendPosition, legendSize);
-            LegendModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
+            canvasModel.increaseMarginSide(legendPosition, LegendModel.getLegendTotalMargin(legendPosition, legendBlockModel));
         }
         legendBlockModel.coordinate[legendPosition].size = legendSize;
     }

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";
+import { TwoDimConfigReader } from "../../modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class TwoDimLegendModel {
     private configReader;

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

@@ -17,9 +17,11 @@ export class TwoDimLegendModel {
                 markerSize: Object.assign(Object.assign({}, styledElementValues.defaultLegendMarkerSizes), { widthPx: getWidthOfLegendMarkerByType(i.chartType) }),
                 wrapperSize: { marginRightPx: styledElementValues.legend.inlineItemWrapperMarginRightPx }
             })), "top", modelInstance.canvasModel.getBlockSize().width, legendBlockModel.static.maxLinesAmount * styledElementValues.legend.inlineLegendOneLineHeightPx).size.height;
-            canvasModel.increaseMarginSide(legendPosition, legendSize);
-            if (legendSize !== 0)
-                LegendModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
+            if (legendSize !== 0) {
+                const legendTotalMargin = LegendModel.getLegendTotalMargin(legendPosition, legendBlockModel);
+                modelInstance.canvasModel.legendCanvas.initSizeAndPad(legendSize, legendTotalMargin);
+                canvasModel.increaseMarginSide(legendPosition, modelInstance.canvasModel.legendCanvas.getAllNeededSpace());
+            }
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }