mdt-charts 1.12.2 → 1.12.3

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;
 }
 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,28 +1,25 @@
-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
         };
-        this.updateText(block, aggregator);
     }
-    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize) {
-        if (innerRadius > 50) {
+    static renderText(block, innerRadius, aggregatorInfo, fontSize, translate) {
+        if (innerRadius > 40) {
             const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
             const wrapper = this.renderWrapper(aggregatorObject);
             wrapper
@@ -30,46 +27,62 @@ export class Aggregator {
                 .attr('class', this.aggregatorValueClass)
                 .style('text-align', 'center')
                 .style('font-size', `${fontSize}px`)
-                .text(ValueFormatter.formatField(aggregatorInfo.format, aggregatorInfo.value));
+                .text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
             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);
         }
     }
-    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));
+                this.textContent = thisClass.formatValue(newAggregator.format, parseFloat((interpolateFunc(t)).toFixed(precision)));
                 thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.margin);
             };
         });
     }
     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`);
+        const aggregatorTitle = block.getSvg()
+            .select(`.${this.aggregatorTitleClass}`);
+        let fontSize = parseInt(aggregatorValue.style('font-size'));
+        while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - pad * 2 && fontSize > 12) {
+            aggregatorValue.style('font-size', `${fontSize -= 2}px`);
         }
-        while (aggreggatorValue.node().getBoundingClientRect().width < wrapperSize - pad * 2 && fontSize < 60) {
-            aggreggatorValue.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 renderAggregatorObject(block, innerRadius, translate) {
         return block.getSvg()
@@ -94,5 +107,5 @@ export class Aggregator {
     }
 }
 Aggregator.aggregatorValueClass = 'aggregator-value';
-Aggregator.aggregatorNameClass = 'aggregator-name';
+Aggregator.aggregatorTitleClass = 'aggregator-name';
 Aggregator.aggregatorObjectClass = 'aggregator-object';

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

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,18 @@
 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 } 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[], dataSource: string, data: MdtChartsDataSource): number;
 }

package/lib/model/featuresModel/titleModel.js

@@ -5,9 +5,9 @@ export class TitleModel {
         return {
             margin: {
                 bottom: 10,
-                left: pad,
-                right: pad,
-                top: pad
+                left: 0,
+                right: 0,
+                top: 0
             },
             size: pad,
             pad: 0

package/lib/model/marginModel.js

@@ -3,7 +3,7 @@ import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
 import { LegendModel } from "./featuresModel/legendModel/legendModel";
 import { AxisType } from "./modelBuilder";
 import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
-import { PolarModel } from "./notations/polarModel";
+import { PolarModel } from "./notations/polar/polarModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class MarginModel {

package/lib/model/model.d.ts

@@ -9,10 +9,10 @@ export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
 export declare type DataOptions = {
     [option: string]: any;
 };
-export interface Model {
+export interface Model<O = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel> {
     blockCanvas: BlockCanvas;
     chartBlock: ChartBlockModel;
-    options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
+    options: O;
     otherComponents: OtherCommonComponents;
     dataSettings: DataSettings;
     transitions?: Transitions;
@@ -136,12 +136,24 @@ export interface BarChartSettings {
     maxBarWidth: number;
     minBarWidth: number;
 }
-export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad"> {
-    aggregator: DonutChartAggreagorModel;
+export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
+    aggregator: DonutAggregatorModel;
+    thickness: DonutThicknessOptions;
 }
-export interface DonutChartAggreagorModel {
+export interface DonutAggregatorModel {
     margin: number;
-    text: string;
+    content: DonutAggregatorContent;
+}
+export interface DonutAggregatorContent {
+    value: string | number;
+    title: string;
+}
+export declare type DonutThicknessUnit = "px" | "%";
+export interface DonutThicknessOptions {
+    min: number;
+    max: number;
+    value: number;
+    unit: DonutThicknessUnit;
 }
 interface ChartModel {
     tooltip: TooltipModel;

package/lib/model/modelBuilder.js

@@ -1,6 +1,6 @@
 import { MarginModel } from './marginModel';
 import { TwoDimensionalModel } from './notations/twoDimensionalModel';
-import { PolarModel } from './notations/polarModel';
+import { PolarModel } from './notations/polar/polarModel';
 import { DataManagerModel } from './dataManagerModel/dataManagerModel';
 import { IntervalModel } from './notations/intervalModel';
 import { OtherComponentsModel } from './featuresModel/otherComponents';

package/lib/model/notations/intervalModel.d.ts

@@ -1,9 +1,9 @@
-import { MdtChartsConfig, MdtChartsDataSource, IntervalOptions } from "../../config/config";
+import { MdtChartsConfig, MdtChartsDataSource, MdtChartsIntervalOptions } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { AdditionalElementsOptions, BlockMargin, DataScope, IntervalOptionsModel } from "../model";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class IntervalModel {
     static getOptions(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): IntervalOptionsModel;
-    static getAdditionalElements(options: IntervalOptions): AdditionalElementsOptions;
+    static getAdditionalElements(options: MdtChartsIntervalOptions): AdditionalElementsOptions;
     private static getChartsModel;
 }

package/lib/model/notations/polar/donut/donutAggregatorService.d.ts

@@ -0,0 +1,12 @@
+import { MdtChartsDataRow, MdtChartsDonutAggregator } from "../../../../config/config";
+import { DonutAggregatorContent } from "../../../model";
+export declare const AGGREGATOR_DEFAULT_TITLE = "\u0421\u0443\u043C\u043C\u0430";
+export interface AggregatorServiceDataOptions {
+    rows: MdtChartsDataRow[];
+    valueFieldName: string;
+}
+export declare class DonutAggregatorService {
+    getContent(aggregatorOptions: MdtChartsDonutAggregator, dataOptions: AggregatorServiceDataOptions): DonutAggregatorContent;
+    private doesValueExist;
+    private generateDefaultContent;
+}

package/lib/model/notations/polar/donut/donutAggregatorService.js

@@ -0,0 +1,25 @@
+export const AGGREGATOR_DEFAULT_TITLE = "Сумма";
+export class DonutAggregatorService {
+    getContent(aggregatorOptions, dataOptions) {
+        if (!(aggregatorOptions === null || aggregatorOptions === void 0 ? void 0 : aggregatorOptions.content))
+            return this.generateDefaultContent(dataOptions);
+        const content = aggregatorOptions.content({ data: dataOptions.rows });
+        if (this.doesValueExist(content.value) && content.title)
+            return content;
+        if (!content.title && this.doesValueExist(content.value))
+            return {
+                value: content.value,
+                title: AGGREGATOR_DEFAULT_TITLE
+            };
+        return this.generateDefaultContent(dataOptions);
+    }
+    doesValueExist(content) {
+        return content != null;
+    }
+    generateDefaultContent(dataOptions) {
+        return {
+            title: AGGREGATOR_DEFAULT_TITLE,
+            value: dataOptions.rows.reduce((acc, row) => acc + row[dataOptions.valueFieldName], 0)
+        };
+    }
+}

package/lib/model/notations/polar/donut/donutModel.d.ts

@@ -0,0 +1,10 @@
+import { MdtChartsDataRow, PolarChart } from "../../../../config/config";
+import { DonutOptionsCanvas } from "../../../../designer/designerConfig";
+import { DonutChartSettings } from "../../../model";
+export declare class DonutModel {
+    private thicknessService;
+    private aggregatorService;
+    getSettings(settingsFromConfig: DonutOptionsCanvas, chartOptions: PolarChart, dataRows: MdtChartsDataRow[]): DonutChartSettings;
+    private getThicknessOptions;
+    private getAggregatorOptions;
+}

package/lib/model/notations/polar/donut/donutModel.js

@@ -0,0 +1,32 @@
+import { DonutAggregatorService } from "./donutAggregatorService";
+import { DonutThicknessService } from "./donutThicknessService";
+export class DonutModel {
+    constructor() {
+        this.thicknessService = new DonutThicknessService();
+        this.aggregatorService = new DonutAggregatorService();
+    }
+    getSettings(settingsFromConfig, chartOptions, dataRows) {
+        return {
+            padAngle: settingsFromConfig.padAngle,
+            thickness: this.getThicknessOptions(settingsFromConfig.thickness),
+            aggregator: this.getAggregatorOptions(settingsFromConfig, chartOptions, dataRows)
+        };
+    }
+    getThicknessOptions(settingsFromConfig) {
+        return {
+            unit: this.thicknessService.getUnit(settingsFromConfig),
+            max: this.thicknessService.valueToNumber(settingsFromConfig.max),
+            min: this.thicknessService.valueToNumber(settingsFromConfig.min),
+            value: this.thicknessService.valueToNumber(settingsFromConfig.value),
+        };
+    }
+    getAggregatorOptions(settingsFromConfig, chartOptions, dataRows) {
+        return {
+            margin: settingsFromConfig.aggregatorPad,
+            content: this.aggregatorService.getContent(chartOptions.aggregator, {
+                rows: dataRows,
+                valueFieldName: chartOptions.data.valueField.name
+            })
+        };
+    }
+}

package/lib/model/notations/polar/donut/donutThicknessService.d.ts

@@ -0,0 +1,9 @@
+import { MdtChartsDonutThicknessOptions } from "../../../../designer/designerConfig";
+import { DonutThicknessUnit } from "../../../model";
+export declare class DonutThicknessService {
+    private defaultUnit;
+    getUnit(settingsFromConfig: MdtChartsDonutThicknessOptions): DonutThicknessUnit;
+    valueToNumber(value: string | number): number;
+    private getUnitByValue;
+    private getLastUnitFromString;
+}

package/lib/model/notations/polar/donut/donutThicknessService.js

@@ -0,0 +1,30 @@
+export class DonutThicknessService {
+    constructor() {
+        this.defaultUnit = "px";
+    }
+    getUnit(settingsFromConfig) {
+        if (settingsFromConfig.value)
+            return this.getUnitByValue(settingsFromConfig.value);
+        const minUnit = this.getUnitByValue(settingsFromConfig.min);
+        const maxUnit = this.getUnitByValue(settingsFromConfig.max);
+        return minUnit === maxUnit ? minUnit : this.defaultUnit;
+    }
+    valueToNumber(value) {
+        if (typeof value === "number")
+            return value;
+        return parseInt(value);
+    }
+    getUnitByValue(value) {
+        if (typeof value !== "string")
+            return this.defaultUnit;
+        return this.getLastUnitFromString(value);
+    }
+    getLastUnitFromString(value) {
+        let resultUnit = this.defaultUnit;
+        ["%", "px"].forEach(unit => {
+            if (value.endsWith(unit))
+                resultUnit = unit;
+        });
+        return resultUnit;
+    }
+}

package/lib/model/notations/polar/polarModel.d.ts

@@ -0,0 +1,16 @@
+import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../../config/config";
+import { DesignerConfig } from "../../../designer/designerConfig";
+import { PolarOptionsModel, LegendCoordinate } from "../../model";
+import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
+export declare const MIN_DONUT_BLOCK_SIZE = 120;
+export declare class PolarModel {
+    private static donutModel;
+    static getOptions(options: MdtChartsPolarOptions, data: MdtChartsDataSource, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
+    static getLegendPositionByBlockSize(canvasModel: CanvasModel): "bottom" | "right";
+    static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth: number, legendWidth: number, legendCoordinate: LegendCoordinate): boolean;
+    static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight: number, legendCoordinate: LegendCoordinate): boolean;
+    private static getDonutSettings;
+    private static getChartsModel;
+}

package/lib/model/notations/polar/polarModel.js

@@ -0,0 +1,55 @@
+import { ChartStyleModelService } from "../../chartStyleModel/chartStyleModel";
+import { DonutModel } from "./donut/donutModel";
+/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
+export const MIN_DONUT_BLOCK_SIZE = 120;
+export class PolarModel {
+    static getOptions(options, data, designerConfig, modelInstance) {
+        const dataRows = data[options.data.dataSource];
+        return {
+            type: options.type,
+            selectable: !!options.selectable,
+            title: options.title,
+            data: Object.assign({}, options.data),
+            charts: this.getChartsModel(options.chart, dataRows.length, designerConfig.chartStyle),
+            legend: modelInstance.canvasModel.legendCanvas.getModel(),
+            tooltip: options.tooltip,
+            chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, dataRows)
+        };
+    }
+    //TODO: type for returned value
+    static getLegendPositionByBlockSize(canvasModel) {
+        const widthCoefficientWhenLegendShouldInBottom = 1.5;
+        const avgLegendWidth = 100;
+        const blockWidth = canvasModel.getBlockSize().width;
+        const blockHeight = canvasModel.getBlockSize().height;
+        return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE + avgLegendWidth
+            && blockWidth * widthCoefficientWhenLegendShouldInBottom < blockHeight
+            ? 'bottom'
+            : 'right';
+    }
+    static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth, legendWidth, legendCoordinate) {
+        const rightLegendMargin = legendCoordinate.right.margin;
+        return chartBlockWidth - legendWidth - rightLegendMargin.left - rightLegendMargin.right >= MIN_DONUT_BLOCK_SIZE;
+    }
+    static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight, legendCoordinate) {
+        const minHeightForLegend = 30;
+        const bottomLegendMargin = legendCoordinate.bottom.margin;
+        const heightForLegend = chartBlockHeight - bottomLegendMargin.bottom - bottomLegendMargin.top - MIN_DONUT_BLOCK_SIZE;
+        return heightForLegend >= minHeightForLegend;
+    }
+    static getDonutSettings(settings, chartOptions, dataRows) {
+        return this.donutModel.getSettings(settings, chartOptions, dataRows);
+    }
+    static getChartsModel(chart, dataLength, chartStyleConfig) {
+        const chartsModel = [];
+        chartsModel.push({
+            type: chart.type,
+            data: Object.assign({}, chart.data),
+            tooltip: chart.tooltip,
+            cssClasses: ChartStyleModelService.getCssClasses(0),
+            style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig)
+        });
+        return chartsModel;
+    }
+}
+PolarModel.donutModel = new DonutModel();

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -1,21 +1,21 @@
-import { ChartOrientation, MdtChartsDataSource, TwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { ChartOrientation, MdtChartsDataSource, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
 import { BarOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
 import { DataScope, TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class TwoDimensionalModel {
     static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
-    static getChartsEmbeddedLabelsFlag(charts: TwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
+    static getChartsEmbeddedLabelsFlag(charts: MdtChartsTwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
     /**
      * Сортирует список чартов в порядке: area - bar - line.
      * Используется для того, чтобы при рендере графики с наибольшей площадью (area) не перекрывали графики с меньшей площадью (bar, line).
      * @param charts Чарты из конфига
      */
-    static sortCharts(charts: TwoDimensionalChart[]): void;
+    static sortCharts(charts: MdtChartsTwoDimensionalChart[]): void;
     static getChartsSettings(barSettings: BarOptionsCanvas): TwoDimChartElementsSettings;
     private static getChartsModel;
     private static findChartsWithEmbeddedKeyLabels;
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
     private static getChartsByType;
-    static getChartsValueFieldsAmount(charts: TwoDimensionalChart[]): number[];
+    static getChartsValueFieldsAmount(charts: MdtChartsTwoDimensionalChart[]): number[];
 }

package/lib/style/charts-main.css

@@ -200,12 +200,15 @@
     line-height: 1;
 }
 .aggregator-value {
-    margin-top: 20px;
+    margin-top: 0.5em;
     pointer-events: auto;
 }
 .aggregator-name {
-    margin-top: 10px;
+    margin-top: 0.5em;
     pointer-events: auto;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* Grid */

package/lib/style/charts-main.less

@@ -200,12 +200,15 @@
     line-height: 1;
 }
 .aggregator-value {
-    margin-top: 20px;
+    margin-top: 0.5em;
     pointer-events: auto;
 }
 .aggregator-name {
-    margin-top: 10px;
+    margin-top: 0.5em;
     pointer-events: auto;
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* Grid */

package/package.json

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