mdt-charts 1.10.3 → 1.11.0

package/lib/model/modelBuilder.js

@@ -5,6 +5,7 @@ import { DataManagerModel } from './dataManagerModel';
 import { IntervalModel } from './notations/intervalModel';
 import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
+import { ModelInstance } from './modelInstance/modelInstance';
 export var AxisType;
 (function (AxisType) {
     AxisType[AxisType["Key"] = 0] = "Key";
@@ -16,27 +17,29 @@ export const CLASSES = {
     legendColor: 'legend-circle',
     legendItem: 'legend-item',
 };
-function getBlockCanvas(config) {
-    const size = ConfigValidator.validateCanvasSize(config.canvas.size) ? Object.assign({}, config.canvas.size) : { width: 0, height: 0 };
+function getBlockCanvas(config, modelInstance) {
+    const emptyBlockParams = { width: 0, height: 0 };
+    const size = ConfigValidator.validateCanvasSize(modelInstance.canvasModel.getBlockSize()) ? Object.assign({}, modelInstance.canvasModel.getBlockSize()) : emptyBlockParams;
     return {
         size,
         cssClass: config.canvas.class
     };
 }
-function getChartBlock(margin) {
+function getChartBlockModel(modelInstance) {
     return {
-        margin
+        margin: modelInstance.canvasModel.getMargin()
     };
 }
-function getOptions(config, designerConfig, margin, dataScope, data) {
+function getOptions(config, designerConfig, modelInstance, dataScope, data) {
+    //TODO: migrate to polymorphism
     if (config.options.type === '2d') {
-        return TwoDimensionalModel.getOptions(config, designerConfig, margin, dataScope, data);
+        return TwoDimensionalModel.getOptions(config.options, designerConfig, dataScope, data, modelInstance);
     }
     else if (config.options.type === 'polar') {
-        return PolarModel.getOptions(config, data, margin, designerConfig);
+        return PolarModel.getOptions(config.options, data, designerConfig, modelInstance);
     }
     else if (config.options.type === 'interval') {
-        return IntervalModel.getOptions(config, designerConfig, margin, dataScope, data);
+        return IntervalModel.getOptions(config, designerConfig, modelInstance.canvasModel.getMargin(), dataScope, data, modelInstance);
     }
 }
 function getDataSettings(dataScope, designerConfig) {
@@ -45,12 +48,6 @@ function getDataSettings(dataScope, designerConfig) {
         format: getDataFormat(designerConfig)
     };
 }
-function getChartSettings(barSettings, donutSettings) {
-    return {
-        bar: Object.assign({}, barSettings),
-        donut: Object.assign({}, donutSettings)
-    };
-}
 function getDataFormat(designerConfig) {
     return {
         formatters: designerConfig.dataFormat.formatters
@@ -59,45 +56,37 @@ function getDataFormat(designerConfig) {
 function getTransitions(designerConfig) {
     return designerConfig.transitions;
 }
-function roundMargin(margin) {
-    margin.top = Math.ceil(margin.top);
-    margin.bottom = Math.ceil(margin.bottom);
-    margin.left = Math.ceil(margin.left);
-    margin.right = Math.ceil(margin.right);
-}
 export function assembleModel(config, data, designerConfig) {
+    const modelInstance = ModelInstance.create(config);
     if (!data || Object.keys(data).length === 0)
         return {
-            blockCanvas: getBlockCanvas(config),
+            blockCanvas: getBlockCanvas(config, modelInstance),
             chartBlock: null,
             otherComponents: null,
             options: null,
-            dataSettings: null,
-            chartSettings: null
+            dataSettings: null
         };
     resetFalsyValues(data, config.options.data.keyField.name);
-    const otherComponents = OtherComponentsModel.getOtherComponentsModel(designerConfig.elementsOptions, config.options.type);
-    const margin = MarginModel.getMargin(designerConfig, config, otherComponents, data);
-    const dataScope = DataManagerModel.getDataScope(config, margin, data, designerConfig, otherComponents.legendBlock);
+    const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, notation: config.options.type, title: config.options.title }, modelInstance);
+    MarginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
+    const dataScope = DataManagerModel.getDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
     const preparedData = DataManagerModel.getPreparedData(data, dataScope.allowableKeys, config);
     if (config.options.type === '2d' && config.options.axis.key.visibility)
-        MarginModel.recalcMarginByVerticalAxisLabel(margin, config, designerConfig, dataScope);
-    const blockCanvas = getBlockCanvas(config);
-    const chartBlock = getChartBlock(margin);
-    const options = getOptions(config, designerConfig, margin, dataScope, preparedData);
+        MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, dataScope);
+    const blockCanvas = getBlockCanvas(config, modelInstance);
+    const chartBlock = getChartBlockModel(modelInstance);
+    const options = getOptions(config, designerConfig, modelInstance, dataScope, preparedData);
     const dataSettings = getDataSettings(dataScope, designerConfig);
-    const chartSettings = getChartSettings(designerConfig.canvas.chartOptions.bar, designerConfig.canvas.chartOptions.donut);
     const transitions = getTransitions(designerConfig);
     if (options.type === 'polar')
-        MarginModel.recalcPolarMarginWithScopedData(margin, config.canvas.size, designerConfig, config, otherComponents.legendBlock, dataScope, options);
-    roundMargin(margin);
+        MarginModel.recalcPolarMarginWithScopedData(modelInstance, designerConfig, config, otherComponents.legendBlock, dataScope, options);
+    modelInstance.canvasModel.roundMargin();
     return {
         blockCanvas,
         chartBlock,
         otherComponents,
         options,
         dataSettings,
-        chartSettings,
         transitions
     };
 }

package/lib/model/modelInstance/canvasModel/canvasModel.d.ts

@@ -0,0 +1,22 @@
+import { Size } from "../../../config/config";
+import { BlockMargin } from "../../model";
+import { TitleCanvasModel } from "./titleCanvas";
+declare type MarginSide = keyof BlockMargin;
+export declare class CanvasModel {
+    titleCanvas: TitleCanvasModel;
+    private blockSize;
+    private margin;
+    constructor();
+    initMargin(margin: BlockMargin): void;
+    getMargin(): BlockMargin;
+    getMarginSide(side: MarginSide): number;
+    setMarginSide(side: MarginSide, size: number): void;
+    increaseMarginSide(side: MarginSide, byValue: number): void;
+    descreaseMarginSide(side: MarginSide, byValue: number): void;
+    roundMargin(): void;
+    initBlockSize(blockSize: Size): void;
+    getBlockSize(): Size;
+    getChartBlockWidth(): number;
+    getChartBlockHeight(): number;
+}
+export {};

package/lib/model/modelInstance/canvasModel/canvasModel.js

@@ -0,0 +1,42 @@
+import { TitleCanvasModel } from "./titleCanvas";
+export class CanvasModel {
+    constructor() {
+        this.titleCanvas = new TitleCanvasModel();
+    }
+    initMargin(margin) {
+        this.margin = margin;
+    }
+    getMargin() {
+        return this.margin;
+    }
+    getMarginSide(side) {
+        return this.margin[side];
+    }
+    setMarginSide(side, size) {
+        this.margin[side] = size;
+    }
+    increaseMarginSide(side, byValue) {
+        this.margin[side] += byValue;
+    }
+    descreaseMarginSide(side, byValue) {
+        this.margin[side] -= byValue;
+    }
+    roundMargin() {
+        this.margin.top = Math.ceil(this.margin.top);
+        this.margin.bottom = Math.ceil(this.margin.bottom);
+        this.margin.left = Math.ceil(this.margin.left);
+        this.margin.right = Math.ceil(this.margin.right);
+    }
+    initBlockSize(blockSize) {
+        this.blockSize = blockSize;
+    }
+    getBlockSize() {
+        return this.blockSize;
+    }
+    getChartBlockWidth() {
+        return this.blockSize.width - this.margin.left - this.margin.right;
+    }
+    getChartBlockHeight() {
+        return this.blockSize.height - this.margin.top - this.margin.bottom;
+    }
+}

package/lib/model/modelInstance/canvasModel/titleCanvas.d.ts

@@ -0,0 +1,9 @@
+import { TitleBlockModel } from "../../model";
+declare type TitleBlockCanvas = TitleBlockModel;
+export declare class TitleCanvasModel {
+    private model;
+    init(model: TitleBlockCanvas): void;
+    getModel(): TitleBlockModel;
+    getAllNeededSpace(): number;
+}
+export {};

package/lib/model/modelInstance/canvasModel/titleCanvas.js

@@ -0,0 +1,11 @@
+export class TitleCanvasModel {
+    init(model) {
+        this.model = model;
+    }
+    getModel() {
+        return this.model;
+    }
+    getAllNeededSpace() {
+        return this.model.pad + this.model.size + this.model.margin.top;
+    }
+}

package/lib/model/modelInstance/modelInstance.d.ts

@@ -0,0 +1,7 @@
+import { MdtChartsConfig } from "../../main";
+import { CanvasModel } from "./canvasModel/canvasModel";
+export declare class ModelInstance {
+    static create(config: MdtChartsConfig): ModelInstance;
+    canvasModel: CanvasModel;
+    constructor();
+}

package/lib/model/modelInstance/modelInstance.js

@@ -0,0 +1,11 @@
+import { CanvasModel } from "./canvasModel/canvasModel";
+export class ModelInstance {
+    constructor() {
+        this.canvasModel = new CanvasModel();
+    }
+    static create(config) {
+        const modelInstance = new ModelInstance();
+        modelInstance.canvasModel.initBlockSize(config.canvas.size);
+        return modelInstance;
+    }
+}

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

@@ -1,8 +1,9 @@
 import { MdtChartsConfig, MdtChartsDataSource, IntervalOptions } 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): IntervalOptionsModel;
+    static getOptions(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): IntervalOptionsModel;
     static getAdditionalElements(options: IntervalOptions): AdditionalElementsOptions;
     private static getChartsModel;
 }

package/lib/model/notations/intervalModel.js

@@ -1,14 +1,16 @@
 import { AxisModel } from "../featuresModel/axisModel";
-import { ChartStyleModel } from "../chartStyleModel";
+import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { DataManagerModel } from "../dataManagerModel";
 import { LegendModel } from "../featuresModel/legendModel/legendModel";
 import { AxisType } from "../modelBuilder";
 import { ScaleModel, ScaleType } from "../featuresModel/scaleModel";
+import { TwoDimensionalModel } from "./twoDimensionalModel";
 export class IntervalModel {
-    static getOptions(config, designerConfig, margin, dataScope, data) {
+    static getOptions(config, designerConfig, margin, dataScope, data, modelInstance) {
         const options = config.options;
+        const canvasModel = modelInstance.canvasModel;
         return {
-            legend: LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin),
+            legend: LegendModel.getLegendModel(config.options.type, config.options.legend.show, canvasModel),
             title: options.title,
             selectable: !!options.selectable,
             orient: options.orientation,
@@ -17,7 +19,7 @@ export class IntervalModel {
                     domain: dataScope.allowableKeys,
                     range: {
                         start: 0,
-                        end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation, margin, config.canvas.size)
+                        end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation, canvasModel)
                     },
                     type: 'band',
                     elementsAmount: 1
@@ -26,7 +28,7 @@ export class IntervalModel {
                     domain: ScaleModel.getDateValueDomain(data, options.chart, options.axis.key.position, options.data.dataSource),
                     range: {
                         start: 0,
-                        end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, margin, config.canvas.size)
+                        end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
                     },
                     type: 'datetime'
                 }
@@ -36,14 +38,14 @@ export class IntervalModel {
                     type: 'key',
                     orient: AxisModel.getAxisOrient(AxisType.Key, options.orientation, options.axis.key.position),
                     translate: {
-                        translateX: AxisModel.getAxisTranslateX(AxisType.Key, options.orientation, options.axis.key.position, margin, config.canvas.size.width),
-                        translateY: AxisModel.getAxisTranslateY(AxisType.Key, options.orientation, options.axis.key.position, margin, config.canvas.size.height)
+                        translateX: AxisModel.getAxisTranslateX(AxisType.Key, options.orientation, options.axis.key.position, canvasModel),
+                        translateY: AxisModel.getAxisTranslateY(AxisType.Key, options.orientation, options.axis.key.position, canvasModel)
                     },
                     cssClass: 'key-axis',
                     ticks: options.axis.key.ticks,
                     labels: {
                         maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, data[options.data.dataSource].map(d => d[options.data.keyField.name])).width,
-                        position: AxisModel.getKeyAxisLabelPosition(margin, config.canvas.size, DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name).length),
+                        position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name).length),
                         visible: true,
                         defaultTooltip: designerConfig.elementsOptions.tooltip.position === 'fixed'
                     },
@@ -53,8 +55,8 @@ export class IntervalModel {
                     type: 'value',
                     orient: AxisModel.getAxisOrient(AxisType.Value, options.orientation, options.axis.value.position),
                     translate: {
-                        translateX: AxisModel.getAxisTranslateX(AxisType.Value, options.orientation, options.axis.value.position, margin, config.canvas.size.width),
-                        translateY: AxisModel.getAxisTranslateY(AxisType.Value, options.orientation, options.axis.value.position, margin, config.canvas.size.height)
+                        translateX: AxisModel.getAxisTranslateX(AxisType.Value, options.orientation, options.axis.value.position, canvasModel),
+                        translateY: AxisModel.getAxisTranslateY(AxisType.Value, options.orientation, options.axis.value.position, canvasModel)
                     },
                     cssClass: 'value-axis',
                     ticks: options.axis.value.ticks,
@@ -71,7 +73,8 @@ export class IntervalModel {
             type: options.type,
             charts: this.getChartsModel(options.chart, designerConfig.chartStyle),
             additionalElements: this.getAdditionalElements(options),
-            tooltip: options.tooltip
+            tooltip: options.tooltip,
+            chartSettings: TwoDimensionalModel.getChartsSettings(designerConfig.canvas.chartOptions.bar)
         };
     }
     static getAdditionalElements(options) {
@@ -85,8 +88,8 @@ export class IntervalModel {
             type: chart.type,
             data: Object.assign({}, chart.data),
             tooltip: chart.tooltip,
-            cssClasses: ChartStyleModel.getCssClasses(0),
-            style: ChartStyleModel.getChartStyle(1, chartStyleConfig)
+            cssClasses: ChartStyleModelService.getCssClasses(0),
+            style: ChartStyleModelService.getChartStyle(1, chartStyleConfig)
         });
         return chartsModel;
     }

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

@@ -1,7 +1,9 @@
-import { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
+import { MdtChartsDataSource, PolarOptions } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
-import { BlockMargin, PolarOptionsModel } from "../model";
+import { PolarOptionsModel } from "../model";
+import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class PolarModel {
-    static getOptions(config: MdtChartsConfig, data: MdtChartsDataSource, margin: BlockMargin, designerConfig: DesignerConfig): PolarOptionsModel;
+    static getOptions(options: PolarOptions, data: MdtChartsDataSource, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
+    private static getDonutSettings;
     private static getChartsModel;
 }

package/lib/model/notations/polarModel.js

@@ -1,16 +1,26 @@
-import { ChartStyleModel } from "../chartStyleModel";
+import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { LegendModel } from "../featuresModel/legendModel/legendModel";
 export class PolarModel {
-    static getOptions(config, data, margin, designerConfig) {
-        const options = config.options;
+    static getOptions(options, data, designerConfig, modelInstance) {
         return {
             type: options.type,
             selectable: !!options.selectable,
             title: options.title,
             data: Object.assign({}, options.data),
             charts: this.getChartsModel(options.chart, data[options.data.dataSource].length, designerConfig.chartStyle),
-            legend: LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin),
-            tooltip: options.tooltip
+            legend: LegendModel.getLegendModel(options.type, options.legend.show, modelInstance.canvasModel),
+            tooltip: options.tooltip,
+            chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart)
+        };
+    }
+    static getDonutSettings(settings, chartOptions) {
+        return {
+            padAngle: settings.padAngle,
+            thickness: Object.assign({}, settings.thickness),
+            aggregator: {
+                margin: settings.aggregatorPad,
+                text: chartOptions.aggregator.text
+            }
         };
     }
     static getChartsModel(chart, dataLength, chartStyleConfig) {
@@ -19,8 +29,8 @@ export class PolarModel {
             type: chart.type,
             data: Object.assign({}, chart.data),
             tooltip: chart.tooltip,
-            cssClasses: ChartStyleModel.getCssClasses(0),
-            style: ChartStyleModel.getChartStyle(dataLength, chartStyleConfig)
+            cssClasses: ChartStyleModelService.getCssClasses(0),
+            style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig)
         });
         return chartsModel;
     }

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

@@ -1,8 +1,9 @@
-import { ChartOrientation, MdtChartsConfig, MdtChartsDataSource, TwoDimensionalChart } from "../../config/config";
-import { DesignerConfig } from "../../designer/designerConfig";
-import { BlockMargin, DataScope, TwoDimensionalOptionsModel } from "../model";
+import { ChartOrientation, MdtChartsDataSource, TwoDimensionalChart, TwoDimensionalOptions } 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(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource): TwoDimensionalOptionsModel;
+    static getOptions(options: TwoDimensionalOptions, designerConfig: DesignerConfig, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
     static getChartsEmbeddedLabelsFlag(charts: TwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
     /**
      * Сортирует список чартов в порядке: area - bar - line.
@@ -10,10 +11,11 @@ export declare class TwoDimensionalModel {
      * @param charts Чарты из конфига
      */
     static sortCharts(charts: TwoDimensionalChart[]): void;
+    static getChartsSettings(barSettings: BarOptionsCanvas): TwoDimChartElementsSettings;
     private static getChartsModel;
     private static findChartsWithEmbeddedKeyLabels;
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
     private static getChartsByType;
-    private static getChartsValueFieldsAmount;
+    static getChartsValueFieldsAmount(charts: TwoDimensionalChart[]): number[];
 }

package/lib/model/notations/twoDimensionalModel.js

@@ -1,28 +1,30 @@
-import { ChartStyleModel } from "../chartStyleModel";
+import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
+import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensionalChartStyleModel";
 import { AxisModel } from "../featuresModel/axisModel";
 import { LegendModel } from "../featuresModel/legendModel/legendModel";
 import { ScaleModel } from "../featuresModel/scaleModel";
 export class TwoDimensionalModel {
-    static getOptions(config, designerConfig, margin, dataScope, data) {
-        const options = config.options;
+    static getOptions(options, designerConfig, dataScope, data, modelInstance) {
+        const canvasModel = modelInstance.canvasModel;
         return {
-            legend: LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin),
+            legend: LegendModel.getLegendModel(options.type, options.legend.show, canvasModel),
             title: options.title,
             selectable: !!options.selectable,
             orient: options.orientation,
             scale: {
-                key: ScaleModel.getScaleKey(dataScope.allowableKeys, options.orientation, margin, config.canvas.size, options.charts, this.getChartsByType(options.charts, 'bar')),
-                value: ScaleModel.getScaleLinear(options, data, margin, config.canvas.size)
+                key: ScaleModel.getScaleKey(dataScope.allowableKeys, options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
+                value: ScaleModel.getScaleLinear(options, data, canvasModel)
             },
             axis: {
-                key: AxisModel.getKeyAxis(options.charts, data, options.data, options.orientation, options.axis.key, designerConfig.canvas.axisLabel, margin, config.canvas.size, designerConfig.elementsOptions.tooltip),
-                value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, margin, config.canvas.size)
+                key: AxisModel.getKeyAxis(options.charts, data, options.data, options.orientation, options.axis.key, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip),
+                value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
             },
             type: options.type,
             data: Object.assign({}, options.data),
             charts: this.getChartsModel(options.charts, options.orientation, designerConfig.chartStyle),
             additionalElements: this.getAdditionalElements(options),
-            tooltip: options.tooltip
+            tooltip: options.tooltip,
+            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions.bar)
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
@@ -40,7 +42,13 @@ export class TwoDimensionalModel {
         const chartOrder = ['area', 'bar', 'line'];
         charts.sort((chart1, chart2) => chartOrder.indexOf(chart1.type) - chartOrder.indexOf(chart2.type));
     }
+    static getChartsSettings(barSettings) {
+        return {
+            bar: Object.assign({}, barSettings)
+        };
+    }
     static getChartsModel(charts, chartOrientation, chartStyleConfig) {
+        const styleModel = new TwoDimensionalChartStyleModel(charts, chartStyleConfig);
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
@@ -49,8 +57,8 @@ export class TwoDimensionalModel {
                 isSegmented: chart.isSegmented,
                 data: Object.assign({}, chart.data),
                 tooltip: chart.tooltip,
-                cssClasses: ChartStyleModel.getCssClasses(index),
-                style: ChartStyleModel.get2DChartStyle(charts.length, chart.type, this.getChartsValueFieldsAmount(charts), index, chart.isSegmented, chartStyleConfig),
+                cssClasses: ChartStyleModelService.getCssClasses(index),
+                style: styleModel.getChartStyle(chart, index),
                 embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
                 markersOptions: chart.markers,
                 index

package/lib/style/charts-main.css

@@ -188,6 +188,7 @@
 }
 .aggregator-name {
     margin-top: 10px;
+    pointer-events: auto;
 }
 
 /* Grid */

package/lib/style/charts-main.less

@@ -188,6 +188,7 @@
 }
 .aggregator-name {
     margin-top: 10px;
+    pointer-events: auto;
 }
 
 /* Grid */

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "mdt-charts",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "description": "",
   "main": "lib/main.js",
   "scripts": {
     "dev": "npx webpack --mode development",
     "build": "npx webpack --mode production",
     "watch": "npx webpack --mode development --watch",
-    "test": "jest"
+    "test": "jest",
+    "build-lib": "npx tsc -p ."
   },
   "homepage": "https://github.com/VishulaKnow/charts",
   "author": "",

package/lib/model/chartStyleModel.d.ts

@@ -1,16 +0,0 @@
-import { TwoDimensionalChartType } from "../config/config";
-import { ChartStyleConfig } from "../designer/designerConfig";
-import { ChartStyle } from "./model";
-export declare class ChartStyleModel {
-    private static safeColorsAmount;
-    private static standartColors;
-    static getCssClasses(chartIndex: number): string[];
-    static get2DChartStyle(chartsAmount: number, chartType: TwoDimensionalChartType, chartsFieldsAmounts: number[], chartIndex: number, isSegmented: boolean, styleConfig: ChartStyleConfig): ChartStyle;
-    static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
-    private static getChartColors;
-    private static getChartOpacity;
-    private static getColorSet;
-    private static checkAndGet;
-    private static getStartIndex;
-    private static resetColor;
-}

package/lib/model/chartStyleModel.js

@@ -1,67 +0,0 @@
-import * as chroma from "chroma-js";
-import { ModelHelper } from "./modelHelper";
-export class ChartStyleModel {
-    static getCssClasses(chartIndex) {
-        const cssClasses = [`chart-${chartIndex}`];
-        return cssClasses;
-    }
-    static get2DChartStyle(chartsAmount, chartType, chartsFieldsAmounts, chartIndex, isSegmented, styleConfig) {
-        const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
-        const baseColors = this.checkAndGet(styleConfig.baseColors);
-        const palette = this.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
-        return {
-            elementColors: this.getChartColors(palette, chartsFieldsAmounts[chartIndex], startIndex, chartType),
-            opacity: this.getChartOpacity(chartsAmount, chartType, chartsFieldsAmounts[chartIndex], isSegmented)
-        };
-    }
-    static getChartStyle(elementsAmount, styleConfig) {
-        const baseColors = this.checkAndGet(styleConfig.baseColors);
-        return {
-            elementColors: this.getColorSet(baseColors, elementsAmount),
-            opacity: 1
-        };
-    }
-    static getChartColors(palette, elementsAmount, startIndex, chartType) {
-        const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
-        if (chartType !== 'line')
-            return selectedColors;
-        for (let i = 0; i < selectedColors.length; i++) {
-            selectedColors[i] = chroma.mix(selectedColors[i], 'white', 0.2).saturate(3).hex();
-        }
-        return selectedColors;
-    }
-    static getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isSegmented) {
-        if (chartType === 'area' && (chartsLength > 1 || chartsValueFieldAmount > 1) && !isSegmented)
-            return 0.5; // combined area with other charts has 0.5 opacity
-        return 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;
-    }
-    static getStartIndex(chartIndex, chartsFieldsAmounts) {
-        let startIndex = 0;
-        for (let i = 0; i < chartIndex; i++) {
-            startIndex += chartsFieldsAmounts[i];
-        }
-        return startIndex;
-    }
-    static resetColor(index, baseColor) {
-        let color = chroma(baseColor)
-            .luminance(0.5)
-            .saturate(1.5 + Math.floor(index / this.safeColorsAmount) * 0.5);
-        color = chroma(color)
-            .set('hsv.h', chroma(color).get('hsv.h') + Math.floor(index / this.safeColorsAmount) * 4);
-        return color.hex();
-    }
-}
-ChartStyleModel.safeColorsAmount = 8;
-ChartStyleModel.standartColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];