mdt-charts 1.12.1 → 1.12.5

package/lib/config/config.d.ts

@@ -17,7 +17,7 @@ export interface MdtChartsDataSource {
 export declare type AxisLabelPosition = "straight" | "rotated";
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
-    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | IntervalOptions;
+    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions;
 }
 export interface ChartBlockCanvas {
     size: Size;
@@ -42,14 +42,14 @@ export interface MdtChartsTwoDimensionalOptions extends Options {
     type: '2d';
     axis: TwoDimensionalAxis;
     additionalElements: AdditionalElements;
-    charts: TwoDimensionalChart[];
+    charts: MdtChartsTwoDimensionalChart[];
     orientation: ChartOrientation;
 }
 export interface MdtChartsPolarOptions extends Options {
     type: 'polar';
     chart: PolarChart;
 }
-export interface IntervalOptions extends Options {
+export interface MdtChartsIntervalOptions extends Options {
     type: 'interval';
     axis: IntervalAxis;
     chart: IntervalChart;
@@ -68,10 +68,10 @@ export interface MdtChartsField {
     name: string;
     format: DataType;
 }
-export interface ValueField extends MdtChartsField {
+export interface MdtChartsValueField extends MdtChartsField {
     title: string;
 }
-export interface TwoDimValueField extends ValueField {
+export interface TwoDimValueField extends MdtChartsValueField {
     color?: string;
 }
 export interface TooltipOptions {
@@ -124,7 +124,7 @@ interface ChartSettings {
 interface Tooltip {
     show: boolean;
 }
-export interface TwoDimensionalChart extends ChartSettings {
+export interface MdtChartsTwoDimensionalChart extends ChartSettings {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartData;
     embeddedLabels: EmbeddedLabelType;
@@ -134,7 +134,7 @@ export interface TwoDimensionalChart extends ChartSettings {
 export interface PolarChart extends ChartSettings {
     type: PolarChartType;
     data: PolarChartData;
-    aggregator: MdtChartsPolarChartAggregator;
+    aggregator?: MdtChartsDonutAggregator;
 }
 export interface IntervalChart extends ChartSettings {
     type: IntervalChartType;
@@ -148,14 +148,21 @@ interface MarkersOptions {
 }
 export declare type MdtChartsColorField = string;
 export interface PolarChartData {
-    valueField: ValueField;
+    valueField: MdtChartsValueField;
     colorField?: MdtChartsColorField;
 }
-export interface MdtChartsPolarChartAggregator {
-    text: string;
+export interface MdtChartsDonutAggregator {
+    content?: (model: MdtChartsAggregatorModel) => MdtChartsAggregatorContent;
+}
+export interface MdtChartsAggregatorModel {
+    data: MdtChartsDataRow[];
+}
+export interface MdtChartsAggregatorContent {
+    value: string | number;
+    title: string;
 }
 interface IntervalChartData {
-    valueField1: ValueField;
-    valueField2: ValueField;
+    valueField1: MdtChartsValueField;
+    valueField2: MdtChartsValueField;
 }
 export {};

package/lib/designer/designerConfig.d.ts

@@ -4,7 +4,6 @@ export declare type DataTypeOptions = {
 };
 export declare type Formatter = (value: any, options?: any) => string;
 export declare type TooltipPosition = 'followCursor' | 'fixed';
-export declare type MdtChartsDonutThicknessUnit = "px" | "%";
 export interface DesignerConfig {
     canvas: Canvas;
     dataFormat: DataFormat;
@@ -50,10 +49,9 @@ export interface DonutOptionsCanvas {
     thickness: MdtChartsDonutThicknessOptions;
 }
 export interface MdtChartsDonutThicknessOptions {
-    min: number;
-    max: number;
-    value: number;
-    unit: MdtChartsDonutThicknessUnit;
+    min: number | string;
+    max: number | string;
+    value?: number | string;
 }
 interface DataFormat {
     formatters: Formatter;

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

@@ -1,23 +1,25 @@
-import { MdtChartsDataRow } from '../../../config/config';
 import { DataType } from '../../../designer/designerConfig';
-import { DonutChartAggreagorModel, Field } from "../../../model/model";
+import { DonutAggregatorModel, Field } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Translate } from "../../polarNotation/donut/donut";
 export interface AggregatorInfo {
     name: string;
-    value: number;
+    value: number | string;
     format: DataType;
-    margin: number;
+    marginInPercent: number;
 }
 export declare class Aggregator {
     static readonly aggregatorValueClass = "aggregator-value";
-    private static readonly aggregatorNameClass;
+    private static readonly aggregatorTitleClass;
     private static readonly aggregatorObjectClass;
-    static render(block: Block, data: MdtChartsDataRow[], valueField: Field, innerRadius: number, translate: Translate, fontSize: number, settings: DonutChartAggreagorModel): void;
-    static update(block: Block, data: MdtChartsDataRow[], valueField: Field, settings: DonutChartAggreagorModel): void;
+    static render(block: Block, valueField: Field, innerRadius: number, translate: Translate, fontSize: number, settings: DonutAggregatorModel): void;
+    static update(block: Block, valueField: Field, settings: DonutAggregatorModel): void;
+    private static buildConfig;
     private static renderText;
+    private static formatValue;
     private static updateText;
     private static reCalculateAggregatorFontSize;
+    private static setTitleFontSize;
     private static renderAggregatorObject;
     private static renderWrapper;
 }

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

@@ -1,76 +1,90 @@
-import { sum } from 'd3-array';
 import { interpolateNumber } from 'd3-interpolate';
 import { Helper } from '../../helpers/helper';
 import { ValueFormatter } from '../../valueFormatter';
 export class Aggregator {
-    static render(block, data, valueField, innerRadius, translate, fontSize, settings) {
-        const aggregator = {
-            name: settings.text,
-            value: sum(data.map(d => d[valueField.name])),
-            format: valueField.format,
-            margin: settings.margin
-        };
-        this.renderText(block, innerRadius, aggregator, translate, fontSize);
+    static render(block, valueField, innerRadius, translate, fontSize, settings) {
+        const aggregator = this.buildConfig(valueField, settings);
+        this.renderText(block, innerRadius, aggregator, fontSize, translate);
+    }
+    static update(block, valueField, settings) {
+        const aggregator = this.buildConfig(valueField, settings);
+        this.updateText(block, aggregator, typeof aggregator.value === "string");
     }
-    static update(block, data, valueField, settings) {
-        const aggregator = {
-            name: 'Сумма',
-            value: sum(data.map(d => d[valueField.name])),
+    static buildConfig(valueField, settings) {
+        return {
+            name: settings.content.title,
+            value: settings.content.value,
             format: valueField.format,
-            margin: settings.margin
+            marginInPercent: settings.margin
         };
-        this.updateText(block, aggregator);
     }
-    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize) {
-        if (innerRadius > 50) {
+    static renderText(block, innerRadius, aggregatorInfo, fontSize, translate) {
+        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(ValueFormatter.formatField(aggregatorInfo.format, aggregatorInfo.value));
-            wrapper
+                .text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
+            const titleBlock = wrapper
                 .append('div')
-                .attr('class', this.aggregatorNameClass)
+                .attr('class', this.aggregatorTitleClass)
                 .attr('title', aggregatorInfo.name)
                 .style('text-align', 'center')
-                .style('font-size', '18px')
                 .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 updateText(block, newAggregator) {
+    static formatValue(format, value) {
+        if (typeof value === "string")
+            return value;
+        return ValueFormatter.formatField(format, value);
+    }
+    static updateText(block, newAggregator, withoutAnimation) {
         const aggregatorObject = block.getSvg()
             .select(`.${this.aggregatorObjectClass}`);
         const thisClass = this;
-        block.getSvg()
-            .select(`.${this.aggregatorValueClass}`)
+        const valueBlock = block.getSvg()
+            .select(`.${this.aggregatorValueClass}`);
+        if (withoutAnimation) {
+            valueBlock.text(this.formatValue(newAggregator.format, newAggregator.value));
+            return;
+        }
+        valueBlock
             .interrupt()
             .transition()
             .duration(block.transitionManager.durations.chartUpdate)
             .tween("text", function () {
+            const newValue = typeof newAggregator.value === "string" ? parseFloat(newAggregator.value) : newAggregator.value;
             const oldValue = Helper.parseFormattedToNumber(this.textContent, ',');
-            const precision = Helper.calcDigitsAfterDot(newAggregator.value);
-            const interpolateFunc = interpolateNumber(oldValue, newAggregator.value);
+            const precision = Helper.calcDigitsAfterDot(newValue);
+            const interpolateFunc = interpolateNumber(oldValue, newValue);
             return t => {
-                this.textContent = ValueFormatter.formatField(newAggregator.format, (interpolateFunc(t)).toFixed(precision));
-                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.margin);
+                this.textContent = thisClass.formatValue(newAggregator.format, parseFloat((interpolateFunc(t)).toFixed(precision)));
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.marginInPercent);
             };
         });
     }
     static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
-        const aggreggatorValue = block.getSvg()
+        const aggregatorValue = block.getSvg()
             .select(`.${this.aggregatorValueClass}`);
-        let fontSize = parseInt(aggreggatorValue.style('font-size'));
-        while (aggreggatorValue.node().getBoundingClientRect().width > wrapperSize - pad * 2 && fontSize > 15) {
-            aggreggatorValue.style('font-size', `${fontSize -= 2}px`);
-        }
-        while (aggreggatorValue.node().getBoundingClientRect().width < wrapperSize - pad * 2 && fontSize < 60) {
-            aggreggatorValue.style('font-size', `${fontSize += 2}px`);
+        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`);
         }
     }
+    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()
             .append('foreignObject')
@@ -94,5 +108,5 @@ export class Aggregator {
     }
 }
 Aggregator.aggregatorValueClass = 'aggregator-value';
-Aggregator.aggregatorNameClass = 'aggregator-name';
+Aggregator.aggregatorTitleClass = 'aggregator-name';
 Aggregator.aggregatorObjectClass = 'aggregator-object';

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/polarNotation/donut/donut.js

@@ -11,7 +11,7 @@ export class Donut {
         const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
         const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
         const translateAttr = DonutHelper.getTranslate(margin, blockSize);
-        Aggregator.render(block, data, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
+        Aggregator.render(block, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
         const donutBlock = block.getSvg()
             .append('g')
             .attr('class', this.donutBlockClass)

package/lib/engine/polarNotation/polarManager.js

@@ -39,7 +39,7 @@ export class PolarManager {
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
             block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
-        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, options.chartCanvas.aggregator);
+        Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);
         Legend.update(block, data, model);
         PolarRecordOverflowAlert.update(block, {
             hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,

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/model/chartStyleModel/TwoDimensionalChartStyleModel.d.ts

@@ -1,16 +1,16 @@
-import { TwoDimensionalChart, TwoDimensionalChartType } from "../../config/config";
+import { MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../config/config";
 import { ChartStyleConfig } from "../../designer/designerConfig";
 import { ChartStyle } from "../model";
 export declare class TwoDimensionalChartStyleModel {
     private charts;
     private chartStyleConfig;
     private service;
-    constructor(charts: TwoDimensionalChart[], chartStyleConfig: ChartStyleConfig);
-    getChartStyle(chart: TwoDimensionalChart, chartIndex: number): ChartStyle;
+    constructor(charts: MdtChartsTwoDimensionalChart[], chartStyleConfig: ChartStyleConfig);
+    getChartStyle(chart: MdtChartsTwoDimensionalChart, chartIndex: number): ChartStyle;
     private getChartsValueFieldsAmounts;
 }
 export declare class TwoDimensionalChartStyleService {
-    getChartColors(chart: TwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
+    getChartColors(chart: MdtChartsTwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
     getChartOpacity(chartsLength: number, chartType: TwoDimensionalChartType, chartsValueFieldAmount: number, isChartSegmented: boolean): number;
     private generateNewChartColors;
     private isMoreThanOneValueFieldOnCanvas;

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -2,7 +2,7 @@ import { AxisModel } from "../featuresModel/axisModel";
 import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
 import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
 import { ModelHelper } from "../modelHelper";
-import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polarModel";
+import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
 import { DataManagerModelService } from "./dataManagerModelService";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {

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,22 @@ 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);
+        }
+        console.log(translateX, translateY);
+        return {
+            translateX,
+            translateY
+        };
+    }
 }
 AxisModel.service = new AxisModelService();

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

@@ -1,5 +1,5 @@
 import { ModelHelper } from "../../modelHelper";
-import { PolarModel } from "../../notations/polarModel";
+import { PolarModel } from "../../notations/polar/polarModel";
 import { LegendCanvasModel } from "./legendCanvasModel";
 export class LegendModel {
     static getLegendSize(chartNotation, position, texts, legendMaxWidth, blockSize, legendBlockModel) {
@@ -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/legendModel/polarMarginCalculator.js

@@ -1,6 +1,6 @@
 import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
 import { MarginModel } from "../../marginModel";
-import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polarModel";
+import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polar/polarModel";
 import { LegendModel } from "./legendModel";
 export class LegendPolarMarginCalculator {
     recalcMargin(modelInstance, options, legendMaxWidth, legendBlockModel, data) {

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

@@ -1,18 +1,19 @@
 import { ScaleKeyModel, ScaleKeyType, ScaleValueModel, ScaleValueType } from "../model";
-import { AxisPosition, NumberDomain, IntervalChart, TwoDimensionalChart, MdtChartsTwoDimensionalOptions, ChartOrientation, MdtChartsDataSource } from "../../config/config";
+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: TwoDimensionalChart[], barCharts: TwoDimensionalChart[]): ScaleKeyModel;
+    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: TwoDimensionalChart[]): ScaleKeyType;
-    static getScaleValueType(charts: TwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
-    static getElementsAmount(barCharts: TwoDimensionalChart[]): number;
-    static getScaleMaxValue(charts: TwoDimensionalChart[], dataSource: string, data: MdtChartsDataSource): 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.js

@@ -47,11 +47,11 @@ export class ScaleModel {
         let domainPeekMin;
         let domainPeekMax;
         if (configDomain.start === -1)
-            domainPeekMin = 0;
+            domainPeekMin = this.getScaleMinValue(configOptions.charts, data[configOptions.data.dataSource]);
         else
             domainPeekMin = configDomain.start;
         if (configDomain.end === -1)
-            domainPeekMax = this.getScaleMaxValue(configOptions.charts, configOptions.data.dataSource, data);
+            domainPeekMax = this.getScaleMaxValue(configOptions.charts, data[configOptions.data.dataSource]);
         else
             domainPeekMax = configDomain.end;
         if (configOptions.axis.key.position === 'start')
@@ -80,10 +80,10 @@ export class ScaleModel {
         });
         return barsAmount;
     }
-    static getScaleMaxValue(charts, dataSource, data) {
+    static getScaleMaxValue(charts, dataRows) {
         let max = 0;
         charts.forEach(chart => {
-            data[dataSource].forEach(dataRow => {
+            dataRows.forEach(dataRow => {
                 let sumInRow = 0;
                 chart.data.valueFields.forEach(field => {
                     if (chart.isSegmented)
@@ -97,4 +97,19 @@ export class ScaleModel {
         });
         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;
+    }
 }

package/lib/model/featuresModel/titleModel.js

@@ -4,10 +4,10 @@ export class TitleModel {
         const pad = titleText ? defaultPads : 0;
         return {
             margin: {
-                bottom: 10,
-                left: pad,
-                right: pad,
-                top: pad
+                bottom: 5,
+                left: 0,
+                right: 0,
+                top: 0
             },
             size: pad,
             pad: 0

package/lib/model/marginModel.d.ts

@@ -1,13 +1,12 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
 import { DesignerConfig } from "../designer/designerConfig";
-import { DataScope, LegendBlockModel, Orient, OtherCommonComponents, PolarOptionsModel } from "./model";
+import { DataScope, LegendBlockModel, Orient, OtherCommonComponents } from "./model";
 import { ModelInstance } from "./modelInstance/modelInstance";
 import { CanvasModel } from "./modelInstance/canvasModel/canvasModel";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
 export declare class MarginModel {
     static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
-    static recalcPolarMarginWithScopedData(modelInstance: ModelInstance, designerConfig: DesignerConfig, config: MdtChartsConfig, legendBlockModel: LegendBlockModel, dataScope: DataScope, options: PolarOptionsModel): void;
     static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, config: MdtChartsConfig, designerConfig: DesignerConfig, dataScope: DataScope): void;
     private static getHorizontalMarginByAxisLabels;
     private static recalcVerticalMarginByAxisLabelHeight;
@@ -15,6 +14,5 @@ export declare class MarginModel {
     private static recalcMarginWithLegend;
     private static getLegendItemsContent;
     static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
-    private static clearMarginByLegendBlockPosition;
     private static recalcMarginByTitle;
 }