mdt-charts 1.12.3 → 1.12.7

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

@@ -6,7 +6,7 @@ export interface AggregatorInfo {
     name: string;
     value: number | string;
     format: DataType;
-    margin: number;
+    marginInPercent: number;
 }
 export declare class Aggregator {
     static readonly aggregatorValueClass = "aggregator-value";

package/lib/engine/features/aggregator/aggregator.js

@@ -15,26 +15,28 @@ export class Aggregator {
             name: settings.content.title,
             value: settings.content.value,
             format: valueField.format,
-            margin: settings.margin
+            marginInPercent: settings.margin
         };
     }
     static renderText(block, innerRadius, aggregatorInfo, fontSize, translate) {
-        if (innerRadius > 40) {
+        if (innerRadius > 30) {
             const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
             const wrapper = this.renderWrapper(aggregatorObject);
             wrapper
                 .append('div')
                 .attr('class', this.aggregatorValueClass)
+                .attr('title', this.formatValue(aggregatorInfo.format, aggregatorInfo.value))
                 .style('text-align', 'center')
                 .style('font-size', `${fontSize}px`)
                 .text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
-            wrapper
+            const titleBlock = wrapper
                 .append('div')
                 .attr('class', this.aggregatorTitleClass)
                 .attr('title', aggregatorInfo.name)
                 .style('text-align', 'center')
                 .text(aggregatorInfo.name);
-            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.margin);
+            this.setTitleFontSize(titleBlock, innerRadius);
+            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.marginInPercent);
         }
     }
     static formatValue(format, value) {
@@ -63,26 +65,25 @@ export class Aggregator {
             const interpolateFunc = interpolateNumber(oldValue, newValue);
             return t => {
                 this.textContent = thisClass.formatValue(newAggregator.format, parseFloat((interpolateFunc(t)).toFixed(precision)));
-                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.margin);
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.marginInPercent);
             };
         });
     }
     static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
         const aggregatorValue = block.getSvg()
             .select(`.${this.aggregatorValueClass}`);
-        const aggregatorTitle = block.getSvg()
-            .select(`.${this.aggregatorTitleClass}`);
-        let fontSize = parseInt(aggregatorValue.style('font-size'));
-        while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - pad * 2 && fontSize > 12) {
+        const sizeCoefficient = 0.25;
+        let fontSize = wrapperSize * sizeCoefficient;
+        aggregatorValue.style('font-size', `${fontSize}px`);
+        const margin = pad / 100 * wrapperSize;
+        while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - margin * 2 && fontSize > 12) {
             aggregatorValue.style('font-size', `${fontSize -= 2}px`);
         }
-        while (aggregatorValue.node().getBoundingClientRect().width < wrapperSize - pad * 2 && fontSize < 60) {
-            aggregatorValue.style('font-size', `${fontSize += 2}px`);
-        }
-        this.setTitleFontSize(aggregatorTitle, fontSize);
     }
-    static setTitleFontSize(aggregatorTitle, valueFontSize) {
-        aggregatorTitle.style('font-size', `${Math.round(valueFontSize * 0.5)}px`);
+    static setTitleFontSize(aggregatorTitle, innerRadius) {
+        const sizeCoefficient = 0.15;
+        aggregatorTitle.style('font-size', `${Math.round(innerRadius * sizeCoefficient)}px`);
+        aggregatorTitle.style('max-height', `${sizeCoefficient * 100}%`);
     }
     static renderAggregatorObject(block, innerRadius, translate) {
         return block.getSvg()

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

@@ -1,4 +1,4 @@
-import { IAxisModel, IScaleModel } from "../../../model/model";
+import { AxisModelOptions, IAxisModel, IScaleModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Scales } from "../scale/scale";
 import { Size } from '../../../config/config';
@@ -6,6 +6,8 @@ export declare class Axis {
     static axesClass: string;
     static render(block: Block, scales: Scales, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
     static update(block: Block, scales: Scales, scalesOptions: IScaleModel, axisModel: IAxisModel, blockSize: Size, keyDomainsEquality: boolean): void;
+    static raiseKeyAxis(block: Block, axisOptions: AxisModelOptions): void;
+    private static findAxis;
     private static renderAxis;
     private static updateValueAxis;
     private static updateKeyAxis;

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

@@ -20,6 +20,14 @@ export class Axis {
         if (axisModel.key.visibility)
             this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
     }
+    static raiseKeyAxis(block, axisOptions) {
+        const axisElement = this.findAxis(block, axisOptions.cssClass);
+        axisElement.raise();
+    }
+    static findAxis(block, axisCssClass) {
+        return block.getSvg()
+            .select(`g.${axisCssClass}`);
+    }
     static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
         const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale, scaleOptions);
         if (axisOptions.type === 'value' && (scaleOptions.type === 'linear' || scaleOptions.type === 'datetime'))

package/lib/engine/features/gridLine/gidLineHelper.d.ts

@@ -1,3 +1,4 @@
+import { AxisScale } from "d3-axis";
 import { Size } from "../../../config/config";
 import { AxisModelOptions, BlockMargin } from "../../../model/model";
 export declare type GridLineType = 'key' | 'value';
@@ -10,4 +11,5 @@ export interface GridLineAttributes {
 export declare class GridLineHelper {
     static getGridLineLength(gridLineType: GridLineType, keyAxis: AxisModelOptions, valueAxis: AxisModelOptions, blockSize: Size, margin: BlockMargin): number;
     static getLineAttributes(axis: AxisModelOptions, lineLength: number): GridLineAttributes;
+    static getKeyLineAttributes(axis: AxisModelOptions, scaleValue: AxisScale<any>): GridLineAttributes;
 }

package/lib/engine/features/gridLine/gidLineHelper.js

@@ -1,3 +1,4 @@
+import { max, min } from "d3-array";
 export class GridLineHelper {
     static getGridLineLength(gridLineType, keyAxis, valueAxis, blockSize, margin) {
         let axis;
@@ -27,4 +28,25 @@ export class GridLineHelper {
             attributes.y2 = lineLength;
         return attributes;
     }
+    static getKeyLineAttributes(axis, scaleValue) {
+        const attributes = {
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 0
+        };
+        const scaledStart = scaleValue(scaleValue.domain()[0]);
+        const scaledEnd = scaleValue(scaleValue.domain()[1]);
+        const minCoord = min([scaledStart, scaledEnd]) - scaleValue(0);
+        const maxCoord = max([scaledStart, scaledEnd]) - scaleValue(0);
+        if (axis.orient === 'left' || axis.orient === 'right') {
+            attributes.x1 = minCoord;
+            attributes.x2 = maxCoord;
+        }
+        else {
+            attributes.y1 = minCoord;
+            attributes.y2 = maxCoord;
+        }
+        return attributes;
+    }
 }

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

@@ -1,11 +1,13 @@
 import { Size } from "../../../config/config";
-import { BlockMargin, GridLineFlag, IAxisModel, ScaleKeyModel } from "../../../model/model";
+import { BlockMargin, GridLineFlag, IAxisModel } from "../../../model/model";
 import { Block } from "../../block/block";
+import { Scales } from "../scale/scale";
 export declare class GridLine {
     private static readonly gridLineClass;
-    static render(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scaleKey: ScaleKeyModel): void;
-    static update(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scaleKey: ScaleKeyModel): void;
+    static render(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
+    static update(block: Block, gridLineFlag: GridLineFlag, axes: IAxisModel, blockSize: Size, margin: BlockMargin, scales: Scales): void;
     private static renderLine;
     private static clear;
     private static removeGridLinesOnAxes;
+    private static rmGridLineOnTick;
 }

package/lib/engine/features/gridLine/gridLine.js

@@ -1,24 +1,20 @@
 import { GridLineHelper } from "./gidLineHelper";
 export class GridLine {
-    static render(block, gridLineFlag, axes, blockSize, margin, scaleKey) {
+    static render(block, gridLineFlag, axes, blockSize, margin, scales) {
         if (gridLineFlag.value) {
             const lineLength = GridLineHelper.getGridLineLength('value', axes.key, axes.value, blockSize, margin);
             const lineAttributes = GridLineHelper.getLineAttributes(axes.value, lineLength);
             this.renderLine(block, axes.value, lineAttributes);
         }
         if (gridLineFlag.key) {
-            const lineLength = GridLineHelper.getGridLineLength('key', axes.key, axes.value, blockSize, margin);
-            const lineAttributes = GridLineHelper.getLineAttributes(axes.key, lineLength);
+            const lineAttributes = GridLineHelper.getKeyLineAttributes(axes.key, scales.value);
             this.renderLine(block, axes.key, lineAttributes);
         }
-        if (scaleKey.type === 'point' && (gridLineFlag.key || gridLineFlag.value))
-            this.removeGridLinesOnAxes(block, axes.key, axes.value, false);
-        else if (gridLineFlag.key || gridLineFlag.value)
-            this.removeGridLinesOnAxes(block, axes.key, axes.value, true);
+        this.removeGridLinesOnAxes(block, axes.key, axes.value, true);
     }
-    static update(block, gridLineFlag, axes, blockSize, margin, scaleKey) {
+    static update(block, gridLineFlag, axes, blockSize, margin, scales) {
         this.clear(block, axes.key.cssClass, axes.value.cssClass);
-        this.render(block, gridLineFlag, axes, blockSize, margin, scaleKey);
+        this.render(block, gridLineFlag, axes, blockSize, margin, scales);
     }
     static renderLine(block, axis, lineAttributes) {
         block
@@ -51,17 +47,20 @@ export class GridLine {
             tickOnValueAxisSelector = ':last-of-type';
         if (keyAxis.orient === 'bottom' || keyAxis.orient === 'right')
             tickOnKeyAxisSelector = ':last-of-type';
-        block.getSvg()
+        const tickOnKey = block.getSvg()
             .select(`.${valueAxis.cssClass}`)
-            .select(`g.tick${tickOnKeyAxisSelector}`)
+            .select(`g.tick${tickOnKeyAxisSelector}`);
+        const tickOnValue = block.getSvg()
+            .select(`.${keyAxis.cssClass}`)
+            .select(`g.tick${tickOnValueAxisSelector}`);
+        // this.rmGridLineOnTick(tickOnKey);
+        // if (!excludeKey)
+        //     this.rmGridLineOnTick(tickOnValue);
+    }
+    static rmGridLineOnTick(tick) {
+        tick
             .select(`.${this.gridLineClass}`)
             .remove();
-        if (!excludeKey)
-            block.getSvg()
-                .select(`.${keyAxis.cssClass}`)
-                .select(`g.tick${tickOnValueAxisSelector}`)
-                .select(`.${this.gridLineClass}`)
-                .remove();
     }
 }
 GridLine.gridLineClass = 'grid-line';

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

@@ -1,3 +1,4 @@
+import { ScaleLinear, ScaleTime } from 'd3-scale';
 import { AxisScale } from 'd3-axis';
 import { BarChartSettings, ScaleKeyModel, ScaleValueModel } from '../../../model/model';
 export interface Scales {
@@ -6,6 +7,7 @@ export interface Scales {
 }
 export declare class Scale {
     static getScales(scaleKey: ScaleKeyModel, scaleValue: ScaleValueModel, bandSettings: BarChartSettings): Scales;
+    static getScaleValue(scaleValue: ScaleValueModel): ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
     static getScaleBandWidth(scale: AxisScale<any>): number;
     static getScaleStep(scale: AxisScale<any>): number;
     static getScaledValue(scale: AxisScale<any>, value: any): number;

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

@@ -9,11 +9,14 @@ export class Scale {
             scales.key = this.getScaleBand(scaleKey.domain, scaleKey.range, bandSettings, scaleKey.elementsAmount);
         else if (scaleKey.type === 'point')
             scales.key = this.getScalePoint(scaleKey.domain, scaleKey.range);
+        scales.value = this.getScaleValue(scaleValue);
+        return scales;
+    }
+    static getScaleValue(scaleValue) {
         if (scaleValue.type === 'linear')
-            scales.value = this.getScaleLinear(scaleValue.domain, scaleValue.range);
+            return this.getScaleLinear(scaleValue.domain, scaleValue.range);
         else if (scaleValue.type === 'datetime')
-            scales.value = this.getScaleTime(scaleValue.domain, scaleValue.range);
-        return scales;
+            return this.getScaleTime(scaleValue.domain, scaleValue.range);
     }
     static getScaleBandWidth(scale) {
         if (scale.bandwidth && scale.bandwidth() !== 0) {

package/lib/engine/intervalNotation/intervalManager.js

@@ -11,7 +11,7 @@ export class IntervalManager {
         block.renderSvg(model.blockCanvas.size);
         const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         Axis.render(block, scales, options.scale, options.axis, model.blockCanvas.size);
-        GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings);
         Title.render(block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(block, data, options, model);

package/lib/engine/twoDimensionalNotation/area/areaHelper.js

@@ -5,11 +5,11 @@ export class AreaHelper {
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top')
             return area()
                 .x(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left)
-                .y0(d => this.getZeroCoordinate(keyAxisOrient, margin, blockSize))
+                .y0(d => scales.value(0) + margin.top)
                 .y1(d => scales.value(d[valueFieldName]) + margin.top);
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right')
             return area()
-                .x0(d => this.getZeroCoordinate(keyAxisOrient, margin, blockSize))
+                .x0(d => scales.value(0) + margin.left)
                 .x1(d => scales.value(d[valueFieldName]) + margin.left)
                 .y(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
     }

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -171,15 +171,15 @@ export class Bar {
                 resolve('');
                 return;
             }
-            let barsHander = bars;
+            let barsHandler = bars;
             if (transitionDuration > 0) {
-                barsHander = barsHander
+                barsHandler = barsHandler
                     .interrupt()
                     .transition()
                     .duration(transitionDuration)
                     .on('end', () => resolve(''));
             }
-            barsHander.attr('x', d => barAttrs.x(d))
+            barsHandler.attr('x', d => barAttrs.x(d))
                 .attr('y', d => barAttrs.y(d))
                 .attr('height', d => barAttrs.height(d))
                 .attr('width', d => barAttrs.width(d));

package/lib/engine/twoDimensionalNotation/bar/barHelper.js

@@ -66,20 +66,20 @@ export class BarHelper {
     }
     static setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scaleValue, valueFieldName, blockSize) {
         if (keyAxisOrient === 'top') {
-            attrs.y = d => margin.top;
-            attrs.height = d => Helper.getValueOrZero(scaleValue(d[valueFieldName]));
+            attrs.y = d => scaleValue(Math.min(d[valueFieldName], 0)) + margin.top;
+            attrs.height = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
         if (keyAxisOrient === 'bottom') {
-            attrs.y = d => scaleValue(d[valueFieldName]) + margin.top;
-            attrs.height = d => Helper.getValueOrZero(blockSize.height - margin.top - margin.bottom - scaleValue(d[valueFieldName]));
+            attrs.y = d => scaleValue(Math.max(d[valueFieldName], 0)) + margin.top;
+            attrs.height = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
         if (keyAxisOrient === 'left') {
-            attrs.x = d => margin.left + 1;
-            attrs.width = d => Helper.getValueOrZero(scaleValue(d[valueFieldName]));
+            attrs.x = d => scaleValue(Math.min(d[valueFieldName], 0)) + margin.left;
+            attrs.width = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
         if (keyAxisOrient === 'right') {
-            attrs.x = d => scaleValue(d[valueFieldName]) + margin.left;
-            attrs.width = d => Helper.getValueOrZero(blockSize.width - margin.left - margin.right - scaleValue(d[valueFieldName]));
+            attrs.x = d => scaleValue(Math.max(d[valueFieldName], 0)) + margin.left;
+            attrs.width = d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
         }
     }
     static setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scaleValue, margin, blockSize) {

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -20,8 +20,9 @@ export class TwoDimensionalManager {
         engine.block.scales = scales;
         engine.block.renderSvg(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
-        GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings.bar, model.blockCanvas.size);
+        Axis.raiseKeyAxis(engine.block, options.axis.key);
         engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
         engine.block.filterEventManager.event2DUpdate(options);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
@@ -49,7 +50,7 @@ export class TwoDimensionalManager {
         const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
-        GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, options.chartSettings.bar);
         Promise.all(promises)
             .then(() => {

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

@@ -9,7 +9,7 @@ export interface LabelSize {
 }
 export declare class AxisModel {
     private static service;
-    static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings): AxisModelOptions;
+    static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings, getZeroCoordinate?: () => number): AxisModelOptions;
     static getValueAxis(orient: ChartOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
     static getAxisLength(chartOrientation: ChartOrientation, canvasModel: CanvasModel): number;
     static getAxisOrient(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition): Orient;
@@ -17,4 +17,5 @@ export declare class AxisModel {
     static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
     static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number, axisConfig?: DiscreteAxisOptions): AxisLabelPosition;
     static getLabelSize(labelMaxWidth: number, labelTexts: any[]): LabelSize;
+    private static getKeyAxisTranslateModel;
 }

package/lib/model/featuresModel/axisModel.js

@@ -4,16 +4,14 @@ import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
 import { AxisModelService } from "./axisModelService";
 export class AxisModel {
-    static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings) {
+    static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
         const { charts, orientation, data: dataOptions } = options;
         const axisConfig = options.axis.key;
+        const translate = this.getKeyAxisTranslateModel(orientation, axisConfig.position, canvasModel, getZeroCoordinate);
         return {
             type: 'key',
             orient: AxisModel.getAxisOrient(AxisType.Key, orientation, axisConfig.position),
-            translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Key, orientation, axisConfig.position, canvasModel),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Key, orientation, axisConfig.position, canvasModel)
-            },
+            translate,
             cssClass: 'key-axis',
             ticks: axisConfig.ticks,
             labels: {
@@ -109,5 +107,21 @@ export class AxisModel {
         textBlock.remove();
         return labelSize;
     }
+    static getKeyAxisTranslateModel(chartOrientation, axisPosition, canvasModel, getZeroCoordinate) {
+        let translateY;
+        let translateX;
+        if (chartOrientation === "vertical") {
+            translateY = getZeroCoordinate() + canvasModel.getMarginSide("top");
+            translateX = AxisModel.getAxisTranslateX(AxisType.Key, chartOrientation, axisPosition, canvasModel);
+        }
+        else {
+            translateX = getZeroCoordinate() + canvasModel.getMarginSide("left");
+            translateY = AxisModel.getAxisTranslateY(AxisType.Key, chartOrientation, axisPosition, canvasModel);
+        }
+        return {
+            translateX,
+            translateY
+        };
+    }
 }
 AxisModel.service = new AxisModelService();

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

@@ -30,12 +30,12 @@ export class LegendModel {
                 },
                 right: {
                     size: 0,
-                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 10, right: 0 },
+                    margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 5, right: 0 },
                     pad: 0
                 },
                 top: {
                     size: 0,
-                    margin: { top: 10, bottom: 10, left: 20, right: 20 },
+                    margin: { top: 5, bottom: 10, left: 0, right: 0 },
                     pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
             },

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

@@ -0,0 +1,20 @@
+import { ScaleLinear, ScaleTime } from "d3-scale";
+import { ChartOrientation, DiscreteAxisOptions } from "../../../config/config";
+import { ScaleValueModel } from "../../model";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+export declare const keyAxisLabelVerticalLog = "keyAxisLabel_vertical_margin_log";
+export declare const keyAxisLabelHorizontalLog = "keyAxisLabel_horizontal_margin_log";
+interface ScaleInfo {
+    scale: ScaleValueModel;
+    scaleFn: ScaleLinear<number, number, never> | ScaleTime<number, number, never>;
+}
+/**
+ * Предназначен для получения нового scaleValue и уменьшения globalMargin, если ось ключей находится где-то внутри chartBlock, а не на его границе
+ */
+export declare class ScaleAxisRecalcer {
+    private generateScaleLinear;
+    constructor(generateScaleLinear: () => ScaleValueModel);
+    recalculateMargin(canvasModel: CanvasModel, chartOrientation: ChartOrientation, keyAxis: DiscreteAxisOptions): void;
+    getScaleValue(): ScaleInfo;
+}
+export {};

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

@@ -0,0 +1,31 @@
+import { Scale } from "../../../engine/features/scale/scale";
+export const keyAxisLabelVerticalLog = "keyAxisLabel_vertical_margin_log";
+export const keyAxisLabelHorizontalLog = "keyAxisLabel_horizontal_margin_log";
+/**
+ * Предназначен для получения нового scaleValue и уменьшения globalMargin, если ось ключей находится где-то внутри chartBlock, а не на его границе
+ */
+export class ScaleAxisRecalcer {
+    constructor(generateScaleLinear) {
+        this.generateScaleLinear = generateScaleLinear;
+    }
+    recalculateMargin(canvasModel, chartOrientation, keyAxis) {
+        const scaleValue = this.generateScaleLinear();
+        //TODO: rm import from engine
+        const scaleValueFn = Scale.getScaleValue(scaleValue);
+        const coordinateOnChartBlock = (keyAxis.position === "start"
+            ? scaleValueFn(0)
+            : (chartOrientation === "vertical"
+                ? canvasModel.getChartBlockHeight()
+                : canvasModel.getChartBlockWidth()) - scaleValueFn(0));
+        const key = chartOrientation === "vertical" ? keyAxisLabelVerticalLog : keyAxisLabelHorizontalLog;
+        const logInfo = canvasModel.marginService.getDataByKey(key);
+        canvasModel.decreaseMarginSide(logInfo.side, logInfo.byValue - coordinateOnChartBlock < 0 ? logInfo.byValue : coordinateOnChartBlock);
+    }
+    getScaleValue() {
+        const scale = this.generateScaleLinear();
+        return {
+            scale,
+            scaleFn: Scale.getScaleValue(scale)
+        };
+    }
+}

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

@@ -0,0 +1,19 @@
+import { ScaleKeyModel, ScaleKeyType, ScaleValueModel, ScaleValueType } from "../../model";
+import { AxisPosition, NumberDomain, IntervalChart, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions, ChartOrientation, MdtChartsDataSource, MdtChartsDataRow } from "../../../config/config";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+export declare enum ScaleType {
+    Key = 0,
+    Value = 1
+}
+export declare class ScaleModel {
+    static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
+    static getScaleLinear(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, canvasModel: CanvasModel): ScaleValueModel;
+    static getRangePeek(scaleType: ScaleType, chartOrientation: string, canvasModel: CanvasModel): number;
+    static getDateValueDomain(data: MdtChartsDataSource, chart: IntervalChart, keyAxisPosition: AxisPosition, dataSource: string): [Date, Date];
+    static getLinearDomain(configDomain: NumberDomain, data: MdtChartsDataSource, configOptions: MdtChartsTwoDimensionalOptions): [number, number];
+    static getScaleKeyType(charts: MdtChartsTwoDimensionalChart[]): ScaleKeyType;
+    static getScaleValueType(charts: MdtChartsTwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
+    static getElementsAmount(barCharts: MdtChartsTwoDimensionalChart[]): number;
+    static getScaleMaxValue(charts: MdtChartsTwoDimensionalChart[], dataRows: MdtChartsDataRow[]): number;
+    static getScaleMinValue(charts: MdtChartsTwoDimensionalChart[], dataRows: MdtChartsDataRow[]): number;
+}

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

@@ -0,0 +1,115 @@
+import { ModelHelper } from "../../modelHelper";
+export var ScaleType;
+(function (ScaleType) {
+    ScaleType[ScaleType["Key"] = 0] = "Key";
+    ScaleType[ScaleType["Value"] = 1] = "Value";
+})(ScaleType || (ScaleType = {}));
+export class ScaleModel {
+    static getScaleKey(allowableKeys, orient, canvasModel, charts, barCharts) {
+        return {
+            domain: allowableKeys,
+            range: {
+                start: 0,
+                end: ScaleModel.getRangePeek(ScaleType.Key, orient, canvasModel)
+            },
+            type: ScaleModel.getScaleKeyType(charts),
+            elementsAmount: this.getElementsAmount(barCharts)
+        };
+    }
+    static getScaleLinear(options, data, canvasModel) {
+        return {
+            domain: ScaleModel.getLinearDomain(options.axis.value.domain, data, options),
+            range: {
+                start: 0,
+                end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
+            },
+            type: ScaleModel.getScaleValueType(options.charts)
+        };
+    }
+    static getRangePeek(scaleType, chartOrientation, canvasModel) {
+        if (chartOrientation === 'vertical')
+            return scaleType === ScaleType.Key
+                ? canvasModel.getChartBlockWidth()
+                : canvasModel.getChartBlockHeight();
+        return scaleType === ScaleType.Key
+            ? canvasModel.getChartBlockHeight()
+            : canvasModel.getChartBlockWidth();
+    }
+    static getDateValueDomain(data, chart, keyAxisPosition, dataSource) {
+        const minMax = ModelHelper.getMinAndMaxOfIntervalData(data, dataSource, chart);
+        let domainPeekMin = minMax[0];
+        let domainPeekMax = minMax[1];
+        if (keyAxisPosition === 'start')
+            return [domainPeekMin, domainPeekMax];
+        return [domainPeekMax, domainPeekMin];
+    }
+    static getLinearDomain(configDomain, data, configOptions) {
+        let domainPeekMin;
+        let domainPeekMax;
+        if (configDomain.start === -1)
+            domainPeekMin = this.getScaleMinValue(configOptions.charts, data[configOptions.data.dataSource]);
+        else
+            domainPeekMin = configDomain.start;
+        if (configDomain.end === -1)
+            domainPeekMax = this.getScaleMaxValue(configOptions.charts, data[configOptions.data.dataSource]);
+        else
+            domainPeekMax = configDomain.end;
+        if (configOptions.axis.key.position === 'start')
+            return [domainPeekMin, domainPeekMax];
+        return [domainPeekMax, domainPeekMin];
+    }
+    static getScaleKeyType(charts) {
+        if (charts.findIndex((chart) => chart.type === 'bar') === -1)
+            return 'point';
+        return 'band';
+    }
+    static getScaleValueType(charts) {
+        if (charts.findIndex((chart) => chart.type === 'gantt') !== -1)
+            return 'datetime';
+        return 'linear';
+    }
+    static getElementsAmount(barCharts) {
+        if (barCharts.length === 0)
+            return 1;
+        let barsAmount = 0;
+        barCharts.forEach(chart => {
+            if (chart.isSegmented)
+                barsAmount += 1; // Если бар сегментированный, то все valueFields являются частями одного бара
+            else
+                barsAmount += chart.data.valueFields.length;
+        });
+        return barsAmount;
+    }
+    static getScaleMaxValue(charts, dataRows) {
+        let max = 0;
+        charts.forEach(chart => {
+            dataRows.forEach(dataRow => {
+                let sumInRow = 0;
+                chart.data.valueFields.forEach(field => {
+                    if (chart.isSegmented)
+                        sumInRow += dataRow[field.name];
+                    else if (dataRow[field.name] > sumInRow)
+                        sumInRow = dataRow[field.name];
+                });
+                if (max < sumInRow)
+                    max = sumInRow;
+            });
+        });
+        return max;
+    }
+    static getScaleMinValue(charts, dataRows) {
+        let min = 0;
+        charts.forEach(chart => {
+            dataRows.forEach(dataRow => {
+                let sumInRow = 0;
+                chart.data.valueFields.forEach(field => {
+                    if (dataRow[field.name] < sumInRow)
+                        sumInRow = dataRow[field.name];
+                });
+                if (min > sumInRow)
+                    min = sumInRow;
+            });
+        });
+        return min;
+    }
+}