mdt-charts 1.10.1 → 1.11.1

package/lib/config/config.d.ts

@@ -16,7 +16,7 @@ export interface MdtChartsDataSource {
 }
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
-    options: PolarOptions | TwoDimensionalOptions | IntervalOptions;
+    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | IntervalOptions;
 }
 export interface ChartBlockCanvas {
     size: Size;
@@ -33,18 +33,18 @@ export interface NewSize {
 interface Options {
     legend: Legend;
     data: DataOptions;
-    title: string;
+    title?: string;
     selectable: boolean;
     tooltip?: TooltipOptions;
 }
-export interface TwoDimensionalOptions extends Options {
+export interface MdtChartsTwoDimensionalOptions extends Options {
     type: '2d';
     axis: TwoDimensionalAxis;
     additionalElements: AdditionalElements;
     charts: TwoDimensionalChart[];
     orientation: ChartOrientation;
 }
-export interface PolarOptions extends Options {
+export interface MdtChartsPolarOptions extends Options {
     type: 'polar';
     chart: PolarChart;
 }
@@ -69,6 +69,9 @@ export interface MdtChartsField {
 export interface ValueField extends MdtChartsField {
     title: string;
 }
+export interface TwoDimValueField extends ValueField {
+    color?: string;
+}
 export interface TooltipOptions {
     html: TooltipHtml;
 }
@@ -125,13 +128,14 @@ export interface TwoDimensionalChart extends ChartSettings {
 export interface PolarChart extends ChartSettings {
     type: PolarChartType;
     data: PolarChartData;
+    aggregator: MdtChartsPolarChartAggregator;
 }
 export interface IntervalChart extends ChartSettings {
     type: IntervalChartType;
     data: IntervalChartData;
 }
 export interface TwoDimensionalChartData {
-    valueFields: ValueField[];
+    valueFields: TwoDimValueField[];
 }
 interface MarkersOptions {
     show: boolean;
@@ -141,6 +145,9 @@ export interface PolarChartData {
     valueField: ValueField;
     colorField?: MdtChartsColorField;
 }
+export interface MdtChartsPolarChartAggregator {
+    text: string;
+}
 interface IntervalChartData {
     valueField1: ValueField;
     valueField2: ValueField;

package/lib/designer/designerConfig.d.ts

@@ -4,6 +4,7 @@ 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;
@@ -45,9 +46,14 @@ export interface BarOptionsCanvas {
 }
 export interface DonutOptionsCanvas {
     padAngle: number;
-    minThickness: number;
-    maxThickness: number;
     aggregatorPad: number;
+    thickness: MdtChartsDonutThicknessOptions;
+}
+export interface MdtChartsDonutThicknessOptions {
+    min: number;
+    max: number;
+    value: number;
+    unit: MdtChartsDonutThicknessUnit;
 }
 interface DataFormat {
     formatters: Formatter;

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

@@ -1,19 +1,20 @@
 import { MdtChartsDataRow } from '../../../config/config';
 import { DataType } from '../../../designer/designerConfig';
-import { Field } from "../../../model/model";
+import { DonutChartAggreagorModel, Field } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Translate } from "../../polarNotation/donut/donut";
 export interface AggregatorInfo {
     name: string;
     value: number;
     format: DataType;
+    margin: number;
 }
 export declare class Aggregator {
     static readonly aggregatorValueClass = "aggregator-value";
     private static readonly aggregatorNameClass;
     private static readonly aggregatorObjectClass;
-    static render(block: Block, data: MdtChartsDataRow[], valueField: Field, innerRadius: number, translate: Translate, fontSize: number, pad: number): void;
-    static update(block: Block, data: MdtChartsDataRow[], valueField: Field, pad: number): void;
+    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;
     private static renderText;
     private static updateText;
     private static reCalculateAggregatorFontSize;

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

@@ -3,23 +3,25 @@ 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, pad) {
+    static render(block, data, valueField, innerRadius, translate, fontSize, settings) {
         const aggregator = {
-            name: 'Сумма',
+            name: settings.text,
             value: sum(data.map(d => d[valueField.name])),
-            format: valueField.format
+            format: valueField.format,
+            margin: settings.margin
         };
-        this.renderText(block, innerRadius, aggregator, translate, fontSize, pad);
+        this.renderText(block, innerRadius, aggregator, translate, fontSize);
     }
-    static update(block, data, valueField, pad) {
+    static update(block, data, valueField, settings) {
         const aggregator = {
             name: 'Сумма',
             value: sum(data.map(d => d[valueField.name])),
-            format: valueField.format
+            format: valueField.format,
+            margin: settings.margin
         };
-        this.updateText(block, aggregator, pad);
+        this.updateText(block, aggregator);
     }
-    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize, pad) {
+    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize) {
         if (innerRadius > 50) {
             const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
             const wrapper = this.renderWrapper(aggregatorObject);
@@ -32,13 +34,14 @@ export class Aggregator {
             wrapper
                 .append('div')
                 .attr('class', this.aggregatorNameClass)
+                .attr('title', aggregatorInfo.name)
                 .style('text-align', 'center')
                 .style('font-size', '18px')
                 .text(aggregatorInfo.name);
-            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, pad);
+            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.margin);
         }
     }
-    static updateText(block, newAggregator, pad) {
+    static updateText(block, newAggregator) {
         const aggregatorObject = block.getSvg()
             .select(`.${this.aggregatorObjectClass}`);
         const thisClass = this;
@@ -53,7 +56,7 @@ export class Aggregator {
             const interpolateFunc = interpolateNumber(oldValue, newAggregator.value);
             return t => {
                 this.textContent = ValueFormatter.formatField(newAggregator.format, (interpolateFunc(t)).toFixed(precision));
-                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, pad);
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.margin);
             };
         });
     }

package/lib/engine/features/title/title.js

@@ -1,6 +1,8 @@
 import { DomHelper } from '../../helpers/domHelper';
 export class Title {
     static render(block, text, titleBlockModel, blockSize) {
+        if (!text)
+            return;
         const titleBlock = block.getSvg()
             .append('text')
             .attr('class', 'chart-title');

package/lib/engine/features/tolltip/tooltip.js

@@ -19,7 +19,7 @@ export class Tooltip {
                 this.renderTooltipFor2DCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
             }
             else if (model.options.type === 'polar') {
-                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.chartSettings.donut, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
+                this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
             }
             else if (model.options.type === 'interval') {
                 this.renderTooltipForIntervalCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);

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

@@ -1,6 +1,6 @@
 import { AxisScale } from "d3-axis";
 import { MdtChartsDataRow, Size } from "../../config/config";
-import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel, DonutChartSettings } from "../../model/model";
+import { BlockMargin, TwoDimensionalOptionsModel, PolarOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
 export declare type FilterCallback = (rows: MdtChartsDataRow[]) => void;
 export interface SelectDetails {
@@ -19,12 +19,12 @@ export declare class FilterEventManager {
     updateData(newDataset: MdtChartsDataRow[]): void;
     isSelected(keyValue: string): boolean;
     clearKeysFor2D(options: TwoDimensionalOptionsModel): void;
-    clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel, donutSettings: DonutChartSettings): void;
+    clearKeysForPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
     private setKey;
     private addId;
     private removeId;
     private processKey;
-    setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel, donutSettings: DonutChartSettings): void;
+    setListenerPolar(margin: BlockMargin, blockSize: Size, options: PolarOptionsModel): void;
     event2DUpdate(options: TwoDimensionalOptionsModel): void;
     registerEventFor2D(scaleKey: AxisScale<any>, margin: BlockMargin, blockSize: Size, options: TwoDimensionalOptionsModel): void;
     private registerEventToDonut;

package/lib/engine/filterManager/filterEventManager.js

@@ -29,11 +29,11 @@ export class FilterEventManager {
             this.callback([]);
         SelectHighlighter.clear2D(this.block, options);
     }
-    clearKeysForPolar(margin, blockSize, options, donutSettings) {
+    clearKeysForPolar(margin, blockSize, options) {
         this.selectedKeys = [];
         if (this.callback)
             this.callback([]);
-        SelectHighlighter.clearPolar(margin, blockSize, this.block, options, Donut.getAllArcGroups(this.block), donutSettings);
+        SelectHighlighter.clearPolar(margin, blockSize, this.block, options, Donut.getAllArcGroups(this.block), options.chartCanvas);
     }
     setKey(key) {
         this.selectedKeys = [key];
@@ -66,9 +66,9 @@ export class FilterEventManager {
             }
         }
     }
-    setListenerPolar(margin, blockSize, options, donutSettings) {
+    setListenerPolar(margin, blockSize, options) {
         if (this.filterable) {
-            this.registerEventToDonut(margin, blockSize, options, donutSettings);
+            this.registerEventToDonut(margin, blockSize, options, options.chartCanvas);
             const selectedElems = Donut.getAllArcGroups(this.block).filter(d => this.selectedKeys.findIndex(sid => sid === d.data[options.data.keyField.name]) !== -1);
             this.selectedKeys = [];
             selectedElems.dispatch('click', { bubbles: false, cancelable: true, detail: { multySelect: true } });

package/lib/engine/intervalNotation/intervalManager.js

@@ -10,10 +10,10 @@ export class IntervalManager {
     static render(block, model, data) {
         const options = model.options;
         block.renderSvg(model.blockCanvas.size);
-        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        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);
-        this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, model.chartSettings);
+        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);
         Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);

package/lib/engine/polarNotation/donut/DonutHelper.d.ts

@@ -12,4 +12,6 @@ export declare class DonutHelper {
     static getArcGenerator(outerRadius: number, innerRadius: number): Arc<any, PieArcDatum<MdtChartsDataRow>>;
     static getPieGenerator(valueField: string, padAngle: number): Pie<any, MdtChartsDataRow>;
     static mergeDataWithZeros(firstDataset: MdtChartsDataRow[], secondDataset: MdtChartsDataRow[], keyField: string, colorField: MdtChartsColorField): MdtChartsDataRow[];
+    private static getThicknessByUnit;
+    private static getChartBlockSize;
 }

package/lib/engine/polarNotation/donut/DonutHelper.js

@@ -1,10 +1,15 @@
 import { merge } from "d3-array";
 import { arc, pie } from "d3-shape";
+const MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS = 400;
 export class DonutHelper {
     static getThickness(donutSettings, blockSize, margin) {
-        if (Math.min(blockSize.width - margin.left - margin.right, blockSize.height - margin.bottom - margin.top) > 400)
-            return donutSettings.maxThickness;
-        return donutSettings.minThickness;
+        const thicknessOpts = donutSettings.thickness;
+        const chartBlockSize = this.getChartBlockSize(blockSize, margin);
+        if (thicknessOpts.value)
+            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.value, thicknessOpts.unit);
+        if (Math.min(chartBlockSize.width, chartBlockSize.height) > MIN_CHART_BLOCK_SIZE_FOR_MAX_THICKNESS)
+            return this.getThicknessByUnit(chartBlockSize, thicknessOpts.max, thicknessOpts.unit);
+        return this.getThicknessByUnit(chartBlockSize, thicknessOpts.min, thicknessOpts.unit);
     }
     static getArcCentroid(blockSize, margin, dataItem, donutThickness) {
         const arc = this.getArcGeneratorObject(blockSize, margin, donutThickness);
@@ -57,4 +62,16 @@ export class DonutHelper {
         const sortedMerge = merge([secondDataset, onlyNew]);
         return sortedMerge;
     }
+    static getThicknessByUnit(chartBlockSize, valueInPx, unit) {
+        if (unit === "px")
+            return valueInPx;
+        const minSideSize = Math.min(chartBlockSize.width, chartBlockSize.height);
+        return minSideSize / 2 * (valueInPx / 100);
+    }
+    static getChartBlockSize(blockSize, margin) {
+        return {
+            height: blockSize.height - margin.top - margin.bottom,
+            width: blockSize.width - margin.left - margin.right
+        };
+    }
 }

package/lib/engine/polarNotation/donut/donut.js

@@ -11,6 +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);
         const donutBlock = block.getSvg()
             .append('g')
             .attr('class', this.donutBlockClass)
@@ -19,7 +20,6 @@ export class Donut {
             .attr('transform', `translate(${translateAttr.x}, ${translateAttr.y})`);
         this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart);
         this.renderClonesG(donutBlock);
-        Aggregator.render(block, data, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregatorPad);
     }
     static update(block, data, margin, chart, blockSize, donutSettings, keyField) {
         const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);

package/lib/engine/polarNotation/polarManager.js

@@ -9,18 +9,17 @@ export class PolarManager {
     static render(engine, model) {
         const options = model.options;
         engine.block.renderSvg(model.blockCanvas.size);
-        this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, model.chartSettings.donut);
+        this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, options.chartCanvas);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(engine.block, engine.data, options, model);
-        ``;
         Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock);
-        engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+        engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         if (model.dataSettings.scope.hidedRecordsAmount !== 0 && model.options.legend.position !== 'off')
             RecordOverflowAlert.render(engine.block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
         engine.block.getSvg()
             .on('click', (e) => {
             if (e.target === engine.block.getSvg().node())
-                engine.block.filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+                engine.block.filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
     }
     static update(block, model, data) {
@@ -32,12 +31,12 @@ export class PolarManager {
         ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
         Tooltip.hide(block);
         const options = model.options;
-        Donut.update(block, data[options.data.dataSource], model.chartBlock.margin, options.charts[0], model.blockCanvas.size, model.chartSettings.donut, options.data.keyField.name)
+        Donut.update(block, data[options.data.dataSource], model.chartBlock.margin, options.charts[0], model.blockCanvas.size, options.chartCanvas, options.data.keyField.name)
             .then(() => {
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
-            block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+            block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
-        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, model.chartSettings.donut.aggregatorPad);
+        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, options.chartCanvas.aggregator);
         Legend.update(block, data, model);
         if (model.options.legend.position !== 'off')
             RecordOverflowAlert.update(block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -16,12 +16,12 @@ import { Line } from "./line/line";
 export class TwoDimensionalManager {
     static render(engine, model) {
         const options = model.options;
-        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         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);
-        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, model.chartSettings.bar, model.blockCanvas.size);
+        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings.bar, model.blockCanvas.size);
         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);
@@ -42,12 +42,12 @@ export class TwoDimensionalManager {
         Tooltip.hide(block);
         const options = model.options;
         ElementHighlighter.remove2DChartsFullHighlighting(block, options.charts);
-        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         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);
-        const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, model.chartSettings.bar);
+        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(() => {
             block.filterEventManager.event2DUpdate(options);

package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.d.ts

@@ -0,0 +1,19 @@
+import { TwoDimensionalChart, 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;
+    private getChartsValueFieldsAmounts;
+}
+export declare class TwoDimensionalChartStyleService {
+    getChartColors(chart: TwoDimensionalChart, styleConfig: ChartStyleConfig, chartsFieldsAmounts: number[], chartIndex: number): string[];
+    getChartOpacity(chartsLength: number, chartType: TwoDimensionalChartType, chartsValueFieldAmount: number, isChartSegmented: boolean): number;
+    private generateNewChartColors;
+    private isMoreThanOneValueFieldOnCanvas;
+    private makeColorsBrighter;
+    private getStartIndex;
+}

package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js

@@ -0,0 +1,61 @@
+import * as chroma from "chroma-js";
+import { ModelHelper } from "../modelHelper";
+import { ChartStyleModelService } from "./chartStyleModel";
+export class TwoDimensionalChartStyleModel {
+    constructor(charts, chartStyleConfig) {
+        this.charts = charts;
+        this.chartStyleConfig = chartStyleConfig;
+        this.service = new TwoDimensionalChartStyleService();
+    }
+    getChartStyle(chart, chartIndex) {
+        const fieldsAmounts = this.getChartsValueFieldsAmounts();
+        return {
+            elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
+            opacity: this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented)
+        };
+    }
+    getChartsValueFieldsAmounts() {
+        return this.charts.map(chart => chart.data.valueFields.length);
+    }
+}
+export class TwoDimensionalChartStyleService {
+    getChartColors(chart, styleConfig, chartsFieldsAmounts, chartIndex) {
+        const generatedColors = this.generateNewChartColors(chart.type, styleConfig, chartsFieldsAmounts, chartIndex);
+        chart.data.valueFields.forEach((field, fieldIndex) => {
+            if (field.color)
+                generatedColors[fieldIndex] = field.color;
+        });
+        return generatedColors;
+    }
+    getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isChartSegmented) {
+        if (chartType === 'area' && this.isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) && !isChartSegmented)
+            return 0.5; // combined area with other charts has 0.5 opacity
+        return 1;
+    }
+    generateNewChartColors(chartType, styleConfig, chartsFieldsAmounts, chartIndex) {
+        const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
+        const baseColors = ChartStyleModelService.checkAndGet(styleConfig.baseColors);
+        const palette = ChartStyleModelService.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
+        const elementsAmount = chartsFieldsAmounts[chartIndex];
+        const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
+        if (chartType !== 'line')
+            return selectedColors;
+        this.makeColorsBrighter(selectedColors);
+        return selectedColors;
+    }
+    isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) {
+        return (chartsLength > 1 || chartsValueFieldAmount > 1);
+    }
+    makeColorsBrighter(initialColors) {
+        for (let i = 0; i < initialColors.length; i++) {
+            initialColors[i] = chroma.mix(initialColors[i], 'white', 0.2).saturate(3).hex();
+        }
+    }
+    getStartIndex(chartIndex, chartsFieldsAmounts) {
+        let startIndex = 0;
+        for (let i = 0; i < chartIndex; i++) {
+            startIndex += chartsFieldsAmounts[i];
+        }
+        return startIndex;
+    }
+}

package/lib/model/chartStyleModel/chartStyleModel.d.ts

@@ -0,0 +1,9 @@
+import { ChartStyleConfig } from "../../designer/designerConfig";
+import { ChartStyle } from "../model";
+export declare class ChartStyleModelService {
+    private static standartColors;
+    static getCssClasses(chartIndex: number): string[];
+    static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
+    static getColorSet(baseColors: string[], elementsAmount: number): string[];
+    static checkAndGet(baseColors: string[]): string[];
+}

package/lib/model/chartStyleModel/chartStyleModel.js

@@ -0,0 +1,27 @@
+import * as chroma from "chroma-js";
+export class ChartStyleModelService {
+    static getCssClasses(chartIndex) {
+        const cssClasses = [`chart-${chartIndex}`];
+        return cssClasses;
+    }
+    static getChartStyle(elementsAmount, styleConfig) {
+        const baseColors = this.checkAndGet(styleConfig.baseColors);
+        return {
+            elementColors: this.getColorSet(baseColors, elementsAmount),
+            opacity: 1
+        };
+    }
+    static getColorSet(baseColors, elementsAmount) {
+        return chroma.scale(baseColors)
+            .mode('rgb')
+            .domain([0, 0.55, 0.75, 1])
+            .colors(elementsAmount <= 1 ? 2 : elementsAmount);
+    }
+    static checkAndGet(baseColors) {
+        if (baseColors.length === 0 || baseColors.filter(color => color === 'rgba(0, 0, 0, 0)' || !color).length > 0) {
+            return this.standartColors;
+        }
+        return baseColors;
+    }
+}
+ChartStyleModelService.standartColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];

package/lib/model/dataManagerModel.d.ts

@@ -1,9 +1,10 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
 import { DesignerConfig } from "../designer/designerConfig";
-import { BlockMargin, DataScope, LegendBlockModel } from "./model";
+import { DataScope, LegendBlockModel } from "./model";
+import { ModelInstance } from "./modelInstance/modelInstance";
 export declare class DataManagerModel {
     static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
-    static getDataScope(config: MdtChartsConfig, margin: BlockMargin, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel): DataScope;
+    static getDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): DataScope;
     static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
     private static getDataScopeFor2D;
     private static getDataScopeForPolar;

package/lib/model/dataManagerModel.js

@@ -8,18 +8,18 @@ export class DataManagerModel {
         this.setDataType(scopedData, config);
         return scopedData;
     }
-    static getDataScope(config, margin, data, designerConfig, legendBlock) {
+    static getDataScope(config, data, designerConfig, legendBlock, modelInstance) {
         if (config.options.type === '2d' || config.options.type === 'interval') {
-            return this.getDataScopeFor2D(config.options, config.canvas.size, margin, data, designerConfig);
+            return this.getDataScopeFor2D(config.options, modelInstance, data, designerConfig);
         }
         else if (config.options.type === 'polar') {
-            return this.getDataScopeForPolar(config.options, config.canvas.size, margin, data, legendBlock, designerConfig.canvas.legendBlock);
+            return this.getDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
         }
     }
     static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
         return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
     }
-    static getDataScopeFor2D(configOptions, blockSize, margin, data, designerConfig) {
+    static getDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
         // Для interval всегда один элемент, так как там может быть только один столбик
         let itemsLength = 1;
         if (configOptions.type === '2d') {
@@ -29,7 +29,7 @@ export class DataManagerModel {
                 itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
         }
         if (itemsLength !== 0) {
-            const axisLength = AxisModel.getAxisLength(configOptions.orientation, margin, blockSize);
+            const axisLength = AxisModel.getAxisLength(configOptions.orientation, modelInstance.canvasModel);
             const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
             const dataLength = uniqueKeys.length;
             const limit = this.getDataLimitByItemSize(this.getElementsInGroupAmount(configOptions, itemsLength), dataLength, axisLength, designerConfig.canvas.chartOptions.bar);
@@ -44,7 +44,8 @@ export class DataManagerModel {
             hidedRecordsAmount: 0
         };
     }
-    static getDataScopeForPolar(configOptions, blockSize, margin, data, legendBlock, legendCanvas) {
+    static getDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
+        const canvas = modelInstance.canvasModel;
         const dataset = data[configOptions.data.dataSource];
         const keyFieldName = configOptions.data.keyField.name;
         const keys = dataset.map(dataRow => dataRow[keyFieldName]);
@@ -55,17 +56,18 @@ export class DataManagerModel {
             };
         }
         let position;
-        if (blockSize.width - margin.left - margin.right >= MIN_DONUT_BLOCK_SIZE)
+        if (canvas.getChartBlockWidth() >= MIN_DONUT_BLOCK_SIZE)
             position = 'right';
         else
             position = 'bottom';
         let maxItemsNumber;
         if (position === 'right') {
-            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, blockSize.height - margin.top - margin.bottom);
+            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.maxWidth, canvas.getChartBlockHeight());
         }
         else {
-            let marginBottom = margin.bottom - (legendBlock.coordinate.bottom.size === 0 ? legendBlock.coordinate.bottom.size : legendBlock.coordinate.bottom.size - legendBlock.coordinate.bottom.margin.bottom);
-            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, blockSize.width - margin.left - margin.right, blockSize.height - margin.top - marginBottom - legendBlock.coordinate.bottom.margin.bottom - MIN_DONUT_BLOCK_SIZE);
+            const margin = canvas.getMargin();
+            const marginBottomWithoutLegendBlock = margin.bottom - (legendBlock.coordinate.bottom.size === 0 ? legendBlock.coordinate.bottom.size : legendBlock.coordinate.bottom.size - legendBlock.coordinate.bottom.margin.bottom);
+            maxItemsNumber = LegendCanvasModel.findElementsAmountByLegendSize(keys, position, canvas.getChartBlockWidth(), canvas.getBlockSize().height - margin.top - marginBottomWithoutLegendBlock - legendBlock.coordinate.bottom.margin.bottom - MIN_DONUT_BLOCK_SIZE);
         }
         return {
             allowableKeys: keys.slice(0, maxItemsNumber),

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

@@ -1,18 +1,19 @@
-import { AxisPosition, ChartOrientation, DataOptions, MdtChartsDataSource, DiscreteAxisOptions, NumberAxisOptions, Size, TwoDimensionalChart } from "../../config/config";
-import { AxisLabelPosition, AxisModelOptions, BlockMargin, Orient } from "../model";
+import { AxisPosition, ChartOrientation, DataOptions, MdtChartsDataSource, DiscreteAxisOptions, NumberAxisOptions, TwoDimensionalChart } from "../../config/config";
+import { AxisLabelPosition, AxisModelOptions, Orient } from "../model";
 import { AxisType } from "../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
+import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
 export interface LabelSize {
     width: number;
     height: number;
 }
 export declare class AxisModel {
-    static getKeyAxis(charts: TwoDimensionalChart[], data: MdtChartsDataSource, dataOptions: DataOptions, orient: ChartOrientation, axisConfig: DiscreteAxisOptions, labelConfig: AxisLabelCanvas, margin: BlockMargin, blockSize: Size, tooltipSettings: TooltipSettings): AxisModelOptions;
-    static getValueAxis(orient: ChartOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, margin: BlockMargin, blockSize: Size): AxisModelOptions;
-    static getAxisLength(chartOrientation: ChartOrientation, margin: BlockMargin, blockSize: Size): number;
+    static getKeyAxis(charts: TwoDimensionalChart[], data: MdtChartsDataSource, dataOptions: DataOptions, orient: ChartOrientation, axisConfig: DiscreteAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings): 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;
-    static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, margin: BlockMargin, blockWidth: number): number;
-    static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, margin: BlockMargin, blockHeight: number): number;
-    static getKeyAxisLabelPosition(margin: BlockMargin, blockSize: Size, scopedDataLength: number): AxisLabelPosition;
+    static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
+    static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
+    static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number): AxisLabelPosition;
     static getLabelSize(labelMaxWidth: number, labelTexts: any[]): LabelSize;
 }